Skip to content
Snippets Groups Projects
Commit a7dbd34b authored by Andreas Rystad's avatar Andreas Rystad
Browse files

Merge branch 'feature/11-make-page-for-commits' into 'master'

Resolve "Make page for commits"

Closes #11

See merge request it2810-h21/team-11/gitlab-visualization!15
parents fec75d6c 31839311
No related branches found
No related tags found
No related merge requests found
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
.idea
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
......
...@@ -7,6 +7,7 @@ import { useState } from 'react'; ...@@ -7,6 +7,7 @@ import { useState } from 'react';
import IssuePage from './pages/issuePage'; import IssuePage from './pages/issuePage';
import { CommitPage } from './pages/commitGraphPage/CommitPage'; import { CommitPage } from './pages/commitGraphPage/CommitPage';
import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage'; import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage';
import CommitPageWrapper from "./pages/commitListPage/commitPageWrapper"
function App() { function App() {
const [testContext, setTestContext] = useState<string>('Admin'); const [testContext, setTestContext] = useState<string>('Admin');
...@@ -32,7 +33,7 @@ function App() { ...@@ -32,7 +33,7 @@ function App() {
<IssueGraphPage /> <IssueGraphPage />
</Route> </Route>
<Route exact path={"/commitlist"}> <Route exact path={"/commitlist"}>
<CommitPageWrapper/>
</Route> </Route>
<Route exact path={"/commitgraph"}> <Route exact path={"/commitgraph"}>
<GlobalCommitContext.Provider value = {{testContext, setTestContext}}> <GlobalCommitContext.Provider value = {{testContext, setTestContext}}>
......
.ArrowDiv{
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 40%;
margin-left: 30%;
}
.Arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.Right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.Left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.Button{
background-color: white;
color: black;
border: 2px solid #EB753C;
width: 50px;
}
.Button:hover {
background-color: #EFA646;
color: white;
}
.Button:disabled{
background-color: #E4F0F5;
border:#E4F0F5;
text-indent: -99999px;
}
.Description{
justify-content: space-between;
display: flex;
align-items: center;
border-bottom: solid 1px #EB753C;
overflow: auto;
}
.SingleCommit{
margin-bottom: 20px;
background-color: white;
border-radius: 10px;
padding: 25px;
border: solid #EB753C 1px;
text-align: center;
width: 75%;
display:inline-block;
}
.LoadingIcon{
margin-top:25%;
}
.UlList{
display: table;
list-style: none;
background-color: #d1e6ee;
border-radius: 10px;
padding: 2.5% 0;
width: 100%;
}
body{
width: 80%;
margin-left: 10%;
justify-content: center;
text-align: center;
}
import React, {FC, useState} from 'react';
import {Commit} from "../../utils/queryType";
import Select, {SingleValue} from "react-select";
import style from "./commitListPage.module.css"
interface iSingleCommit {
id: string,
created_at: Date,
title: string,
message: string,
author_name: string,
committer_name: string,
}
const SingleCommit: FC<iSingleCommit> = (props) => {
return (
<div className={style.SingleCommit}>
<h3>{props.title}</h3>
<div className={style.Description}>
<b>Message: </b>
<p>
{props.message}
</p>
</div>
<div className={style.Description}>
<b>Author: </b>
<p>
{props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth()+1}
- {props.created_at.getUTCHours()}:{props.created_at.getUTCMinutes()}
</p>
</div>
</div>)
}
interface commitProps {
commits: Commit[]
}
const CommitComponent = (props: commitProps) => {
let commit: Commit[] = props.commits
const commitList = commit?.map(c => <li><SingleCommit
author_name={c.author_name}
committer_name={c.committer_name}
created_at={new Date(c.created_at)}
id={c.id}
message={c.message}
title={c.title}/></li>)
return (
<div>
<ul className={style.UlList}>
{commitList}
{commitList?.length===0?<li>Opps! Too far, go back!</li>:<></>}
</ul>
</div>
);
};
export default CommitComponent
\ No newline at end of file
import React, {useEffect, useState} from 'react';
import CommitComponent from "./commitListPage"
import {useGitlabApi} from "../../utils/gitlab_api_service";
import {queryTypes, Commit} from "../../utils/queryType";
import style from "./commitListPage.module.css"
import Loader from "react-loader-spinner";
const CommitPageWrapper = () => {
const [pageNumber, setPageNumber] = useState(1)
const [disablePrev, setDisablePrev] = useState(pageNumber === 1)
const [disableNext, setDisableNext] = useState(false)
let {isLoading, error, data} = useGitlabApi("repository/commits?per_page=20&page=" + pageNumber)
function increase() {
setPageNumber(prev => prev + 1)
}
function decrease() {
if (pageNumber !== 1) {
setPageNumber(prev => prev - 1)
}
}
useEffect(() => {
setDisablePrev(pageNumber === 1)
setDisableNext((data as string)?.length === 0)
}, [pageNumber, data])
//circles, grid, Oval - standard,
return (
<div>
<h1>Commits</h1>
<div className={style.ArrowDiv}>
<button className={style.Button} disabled={disablePrev} onClick={decrease}>
<i className={`${style.Arrow} ${style.Left}`}></i>
</button>
<h4>
{pageNumber}
</h4>
<button className={style.Button} disabled={disableNext} onClick={increase}>
<i className={`${style.Arrow} ${style.Right}`}></i>
</button>
</div>
{isLoading ? <div className={style.LoadingIcon}><Loader
type="TailSpin"
color="#EB753C"
height={100}
width={100}
timeout={10000} //3 secs
/></div> : <CommitComponent commits={data as Commit[]}/>}
</div>
)
}
export default CommitPageWrapper;
\ No newline at end of file
...@@ -2,7 +2,7 @@ import axios, { AxiosError } from "axios"; ...@@ -2,7 +2,7 @@ import axios, { AxiosError } from "axios";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { Branch, Issue, Commit, ConnectionTest, queryTypes, Languages } from "./queryType"; import { Branch, Issue, Commit, ConnectionTest, queryTypes, Languages } from "./queryType";
export const useGitlabApi = (query: queryTypes|undefined) => { export const useGitlabApi = (query: queryTypes|undefined|string) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<AxiosError | undefined>(); const [error, setError] = useState<AxiosError | undefined>();
const [data, setData] = useState<Issue[] | Commit[] | Branch[] | ConnectionTest | Languages>(); const [data, setData] = useState<Issue[] | Commit[] | Branch[] | ConnectionTest | Languages>();
......
export enum queryTypes { export enum queryTypes {
AllBranches = "repository/branches/", AllBranches = "repository/branches/",
MergedBranches = "repository/merged_branches/", MergedBranches = "repository/merged_branches/",
AllCommits = "repository/commits/", AllCommits = "repository/commits?page=1",
AllIssues = "issues/", AllIssues = "issues/",
Languages = "languages", Languages = "languages",
Access="access_requests", Access="access_requests",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment