Fix commits loading & error display

Author: Overk1lls

src/app/errors.ts

@@ -1,4 +1,5 @@
 import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
 
 export enum ErrorCode {
   NotSignedIn = 'signIn.no',
@@ -25,3 +26,7 @@ export class LogicError extends Error {
 export function isSerializedError(error: any): error is SerializedError {
   return 'code' in error && 'message' in error;
 }
+
+export function isFetchBaseQueryError(error: any): error is FetchBaseQueryError {
+  return 'data' in error && 'status' in error;
+}

src/components/CommitsTable/CommitsTable.tsx

@@ -1,8 +1,9 @@
 import { FC, useState } from 'react';
-import { DataGrid, GridColumns } from '@mui/x-data-grid';
+import { DataGrid, GridCellParams, GridColumns } from '@mui/x-data-grid';
 import { Commit } from '../../models/commit';
 import { useAppSelector } from '../../app/hooks';
 import { useCommits } from '../../hooks/useCommits';
+import { Optional } from '../../app/types';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -11,7 +12,7 @@ import Container from '@mui/material/Container';
 const DEFAULT_ROWS_PER_PAGE = 10;
 
 interface CommitRow {
-  id: number;
+  id: string;
   author: string;
   committer: string;
   message: string;
@@ -34,17 +35,24 @@ const CommitsTable: FC<CommitsTableProps> = ({ org }) => {
   const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);
 
   const repo = useAppSelector((state) => state.repoReducer.name);
-  const [commits, isLoading, , error, isUninitialized] = useCommits(org, repo);
+  const [commits, isLoading, isError, , isUninitialized] = useCommits(org, repo);
 
   const handleChangeRowsPerPage = (newPage: number) => {
     setRowsPerPage(newPage);
     setPage(0);
   };
 
+  const handleRowClick = (params: GridCellParams) => {
+    if (commits?.length) {
+      const commit = commits.find((commit) => commit.commit.message === params.row.message);
+      window.open(commit?.html_url, '_blank');
+    }
+  };
+
   return (
     <Container maxWidth="xl">
-      <Box sx={{ height: 400, width: '100%' }}>
-        {!isUninitialized && (
+      {!isUninitialized && (
+        <Box sx={{ height: 400, width: '100%' }}>
           <Toolbar
             sx={{
               pl: { sm: 2 },
@@ -66,8 +74,6 @@ const CommitsTable: FC<CommitsTableProps> = ({ org }) => {
               Commits List
             </Typography>
           </Toolbar>
-        )}
-        {commits ? (
           <DataGrid
             disableSelectionOnClick
             page={page}
@@ -79,23 +85,32 @@ const CommitsTable: FC<CommitsTableProps> = ({ org }) => {
             rows={mapCommits(commits)}
             columns={commitsTableColumns}
             loading={isLoading}
+            error={isError === true || undefined}
+            onCellClick={handleRowClick}
+            sx={{
+              '& .MuiDataGrid-cell:hover': {
+                color: 'primary.main',
+                textDecoration: 'underline',
+                cursor: 'pointer',
+              },
+            }}
           />
-        ) : (
-          <DataGrid columns={commitsTableColumns} rows={[]} error={error} loading={isLoading} />
-        )}
-      </Box>
+        </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 function mapCommits(commits: Optional<Commit[]>) {
+  return commits
+    ? commits.map((commit) => ({
+        id: commit.sha,
+        author: commit.commit.author.name,
+        committer: commit.commit.committer.name,
+        message: commit.commit.message,
+        date: commit.commit.committer.date,
+      }))
+    : [];
 }
 
 export default CommitsTable;

src/hooks/useCommits.ts

@@ -21,7 +21,9 @@ export function useCommits(owner: string, repo: string): CommitsHookReturnType {
 
   useEffect(() => {
     const searchForRepos = setTimeout(async () => {
-      await trigger({ owner, repo }, true);
+      if (owner && repo) {
+        await trigger({ owner, repo }, true);
+      }
     }, 1500);
 
     return () => {