Update the components and logic

Author: Overk1lls

src/App.tsx

@@ -1,11 +1,5 @@
 import AppRouter from './components/AppRouter';
-import { isSignedIn } from './app/auth';
-import { Navigate } from 'react-router-dom';
 
 export default function App() {
-  return (
-    isSignedIn()
-      ? <AppRouter />
-      : <Navigate to="/" />
-  );
+  return <AppRouter />;
 }

src/app/auth.ts

@@ -1,7 +1,7 @@
-import { AxiosInstance } from "axios";
-import { isExpiredTokenResponse } from "./axios";
-import { LocalStorageKeys } from "./const";
-import { ErrorCode, LogicError } from "./errors";
+import { AxiosInstance } from 'axios';
+import { isExpiredTokenResponse } from './axios';
+import { LocalStorageKeys } from './const';
+import { ErrorCode, LogicError } from './errors';
 
 export interface AccessTokenResponse {
   accessToken: {
@@ -15,7 +15,10 @@ export function setAccessToken(token: string) {
   localStorage.setItem(LocalStorageKeys.AccessToken, token);
 }
 
-// TODO: redirect to the login page
+export function setCode(code: string) {
+  localStorage.setItem(LocalStorageKeys.Code, code);
+}
+
 export function signOut() {
   localStorage.removeItem(LocalStorageKeys.AccessToken);
   localStorage.removeItem(LocalStorageKeys.Code);
@@ -28,7 +31,7 @@ export function isSignedIn() {
 export async function refreshAccessToken(client: AxiosInstance) {
   try {
     const { data } = await client.post<AccessTokenResponse>('/auth', { code: getAuthCode() });
-    localStorage.setItem(LocalStorageKeys.AccessToken, data.accessToken.access_token);
+    setAccessToken(data.accessToken.access_token);
   } catch (error) {
     if (isExpiredTokenResponse(error)) {
       signOut();

src/app/axios.ts

@@ -1,6 +1,6 @@
-import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
-import { getAccessToken, refreshAccessToken } from "./auth";
-import { ServerErrorCode } from "./errors";
+import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
+import { getAccessToken, refreshAccessToken } from './auth';
+import { ServerErrorCode } from './errors';
 
 export interface AxiosClient {
   protectedClient: AxiosInstance;
@@ -19,21 +19,25 @@ export function createAxiosClient(baseUrl: string): AxiosClient {
       req.headers = {};
     }
     req.headers.Authorization = 'Bearer ' + getAccessToken();
+    return req;
   });
 
-  protectedClient.interceptors.response.use((res) => res, async (error) => {
-    if (isExpiredTokenResponse(error)) {
-      await refreshAccessToken(publicClient);
-      return protectedClient.request(error.config);
+  protectedClient.interceptors.response.use(
+    (res) => res,
+    async (error) => {
+      if (isExpiredTokenResponse(error)) {
+        await refreshAccessToken(publicClient);
+        return protectedClient.request(error.config);
+      }
+      throw error;
     }
-    throw error;
-  });
+  );
 
   return {
     protectedClient,
-    publicClient
+    publicClient,
   };
-};
+}
 
 export function isExpiredTokenResponse(error: unknown): error is AxiosError {
   return (

src/app/config.ts

@@ -1,4 +1,6 @@
-import { Nullable } from "./types";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { Nullable } from './types';
 
 export interface Config {
   githubClientId: string;
@@ -7,7 +9,7 @@ export interface Config {
   redirectUrl: string;
 }
 
-let config: Readonly<Nullable<Config>>;
+let config: Readonly<Nullable<Config>> = null;
 
 export function getConfig() {
   if (!config) {
@@ -29,4 +31,4 @@ export function getConfig() {
     };
   }
   return config;
-};
+}

src/app/errors.ts

@@ -1,3 +1,5 @@
+import { SerializedError } from '@reduxjs/toolkit';
+
 export enum ErrorCode {
   NotSignedIn = 'signIn.no',
   UserNotLoaded = 'user.not.loaded',
@@ -18,4 +20,8 @@ export class LogicError extends Error {
   constructor(public readonly code: ErrorCode, message?: string, cause?: Error) {
     super(message, cause);
   }
-}
+}
+
+export function isSerializedError(error: any): error is SerializedError {
+  return 'code' in error && 'message' in error;
+}

src/app/store.ts

@@ -4,9 +4,13 @@ import { branchesApi } from '../features/branch/branchAPI';
 import { commitsApi } from '../features/commits/commitsAPI';
 import { repositoriesApi } from '../features/repositories/repositoriesAPI';
 import { userApi } from '../features/user/userAPI';
+import organizationReducer from '../features/organization/organizationSlice';
+import repositoryReducer from '../features/repositories/repositorySlice';
 
 export const store = configureStore({
   reducer: {
+    orgReducer: organizationReducer,
+    repoReducer: repositoryReducer,
     [branchesApi.reducerPath]: branchesApi.reducer,
     [repositoriesApi.reducerPath]: repositoriesApi.reducer,
     [commitsApi.reducerPath]: commitsApi.reducer,

src/app/types.ts

@@ -1 +1,2 @@
-export type Nullable<T> = T | null;
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;

src/components/AppRouter.tsx

@@ -1,9 +1,9 @@
-import { lazy, Suspense } from "react";
-import { useRoutes } from "react-router-dom";
-import CircularProgress from "@mui/material/CircularProgress";
+import { lazy, Suspense } from 'react';
+import { useRoutes } from 'react-router-dom';
+import LoginPage from '../pages/Login/Login';
+import CircularProgress from '@mui/material/CircularProgress';
 
-const LazyLoginPage = lazy(() => import('../pages/Login'));
-const LazyHomePage = lazy(() => import('../pages/Home'));
+const LazyHomePage = lazy(() => import('../pages/Home/Home'));
 
 export enum RouteName {
   Home = '/home',
@@ -13,11 +13,7 @@ export default function AppRouter() {
   return useRoutes([
     {
       index: true,
-      element: (
-        <Suspense fallback={<CircularProgress />}>
-          <LazyLoginPage />
-        </Suspense>
-      ),
+      element: <LoginPage />,
     },
     {
       path: RouteName.Home,
@@ -26,6 +22,6 @@ export default function AppRouter() {
           <LazyHomePage />
         </Suspense>
       ),
-    }
+    },
   ]);
 }

src/components/CommitsTable.tsx

@@ -1,94 +1,101 @@
-import { useEffect, useState } from 'react';
-import { useLazyGetRepositoryCommitsQuery } from '../features/commits/commitsAPI';
+import { FC, useState } from 'react';
 import { DataGrid, GridColumns } from '@mui/x-data-grid';
 import { Commit } from '../models/commits';
-import Link from '@mui/material/Link';
+import { useAppSelector } from '../app/hooks';
+import { useCommits } from '../hooks/useCommits';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
 
 const DEFAULT_ROWS_PER_PAGE = 10;
 
 interface CommitRow {
   id: number;
   author: string;
   committer: string;
-  message: JSX.Element;
+  message: string;
   date: string;
 }
 
 const commitsTableColumns: GridColumns<CommitRow> = [
   { field: 'author', headerName: 'Author', width: 150 },
   { field: 'committer', headerName: 'Committer', width: 150 },
-  { field: 'message', headerName: 'Message', width: 600 },
-  { field: 'date', headerName: 'Date', width: 150 },
+  { field: 'message', headerName: 'Message', width: 650 },
+  { field: 'date', headerName: 'Date', width: 175 },
 ];
 
 type CommitsTableProps = {
   org: string;
-  repo: string;
-}
+};
 
-export default function CommitsTable({ org, repo }: CommitsTableProps) {
+const CommitsTable: FC<CommitsTableProps> = ({ org }) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);
-  const [commits, setCommits] = useState<Commit[]>();
-  const [triggerCommitsQuery] = useLazyGetRepositoryCommitsQuery({ refetchOnReconnect: true });
 
-  useEffect(() => {
-    const searchForCommits = setTimeout(async () => {
-      const { data } = await triggerCommitsQuery({
-        username: org,
-        repository: repo
-      }, true);
-      setCommits(data?.commits);
-    }, 600);
-    return () => clearTimeout(searchForCommits);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [repo, triggerCommitsQuery]);
+  const repo = useAppSelector((state) => state.repoReducer.name);
+  const [commits, isLoading, , error, isUninitialized] = useCommits(org, repo);
 
   const handleChangeRowsPerPage = (newPage: number) => {
     setRowsPerPage(newPage);
     setPage(0);
   };
 
   return (
-    <Box sx={{ height: 400, width: '100%' }}>
-      {commits && (<>
-        <Toolbar sx={{
-          pl: { sm: 2 },
-          pr: { xs: 1, sm: 1 },
-        }}>
-          <Typography
-            sx={{ flex: '1 1 100%' }}
-            variant="h6"
-            id="tableTitle"
-            component="div"
+    <Container maxWidth="xl">
+      <Box sx={{ height: 400, width: '100%' }}>
+        {!isUninitialized && (
+          <Toolbar
+            sx={{
+              pl: { sm: 2 },
+              pr: { xs: 1, sm: 1 },
+            }}
           >
-            Commits List
-          </Typography>
-        </Toolbar>
-        {/* TODO: error / loading */}
-        <DataGrid
-          disableSelectionOnClick
-          page={page}
-          pageSize={rowsPerPage}
-          rowsPerPageOptions={[5, 10, 15]}
-          onPageChange={(newPage) => setPage(newPage)}
-          onPageSizeChange={handleChangeRowsPerPage}
-          density="compact"
-          rows={commits.map((commit, i) => ({
-            id: i,
-            author: commit.commit.author.name,
-            committer: commit.commit.committer.name,
-            message: (
-              <Link href={commit.html_url}>{commit.commit.message}</Link>
-            ),
-            date: commit.commit.committer.date,
-          }))}
-          columns={commitsTableColumns}
-        />
-      </>)}
-    </Box>
+            <Typography
+              sx={{
+                flex: '1 1 100%',
+                alignItems: 'center',
+                alignContent: 'center',
+                justifyContent: 'center',
+                justifyItems: 'center',
+              }}
+              variant="h6"
+              id="tableTitle"
+              component="div"
+            >
+              Commits List
+            </Typography>
+          </Toolbar>
+        )}
+        {commits ? (
+          <DataGrid
+            disableSelectionOnClick
+            page={page}
+            pageSize={rowsPerPage}
+            rowsPerPageOptions={[5, 10, 15]}
+            onPageChange={(newPage) => setPage(newPage)}
+            onPageSizeChange={handleChangeRowsPerPage}
+            density="compact"
+            rows={mapCommits(commits)}
+            columns={commitsTableColumns}
+            loading={isLoading}
+          />
+        ) : (
+          <DataGrid columns={commitsTableColumns} rows={[]} error={error} loading={isLoading} />
+        )}
+      </Box>
+    </Container>
   );
-}
+};
+
+export function mapCommits(commits: Commit[]) {
+  return commits.map((commit, i) => ({
+    id: i,
+    author: commit.commit.author.name,
+    committer: commit.commit.committer.name,
+    message: commit.commit.message,
+    date: commit.commit.committer.date,
+  }));
+}
+
+export default CommitsTable;