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

.gitignore

@@ -18,6 +18,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

src/App.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react';
 import IssuePage from './pages/issuePage';
 import { CommitPage } from './pages/commitGraphPage/CommitPage';
 import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage';
+import CommitPageWrapper from "./pages/commitListPage/commitPageWrapper"
 
 function App() {
     const [testContext, setTestContext] = useState<string>('Admin');    
@@ -32,7 +33,7 @@ function App() {
                     <IssueGraphPage />
                 </Route>
                 <Route exact path={"/commitlist"}>
-
+                    <CommitPageWrapper/>
                 </Route>
                 <Route exact path={"/commitgraph"}>
                     <GlobalCommitContext.Provider value = {{testContext, setTestContext}}>

src/pages/commitListPage/commitListPage.module.css

+.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;
+}
+

src/pages/commitListPage/commitListPage.tsx

+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

src/pages/commitListPage/commitPageWrapper.tsx

+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

src/utils/gitlab_api_service.ts

@@ -2,7 +2,7 @@ import axios, { AxiosError } from "axios";
 import { useCallback, useEffect, useState } from "react";
 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 [error, setError] = useState<AxiosError | undefined>();
     const [data, setData] = useState<Issue[] | Commit[] | Branch[] | ConnectionTest | Languages>();

src/utils/queryType.ts

 export enum queryTypes {
     AllBranches = "repository/branches/",
     MergedBranches = "repository/merged_branches/",
-    AllCommits = "repository/commits/",
+    AllCommits = "repository/commits?page=1",
     AllIssues = "issues/",  
     Languages = "languages",  
     Access="access_requests",