feat: Refactor the result view and components related (#1435)

frontend/src/ProjectData.tsx

@@ -97,3 +97,14 @@ export function filterDuplicateBadSmells(params: BadSmell[]) {
     ({ snippet }, index) => !ids.includes(snippet, index + 1)
   );
 }
+export const getProject = gql`
+  query getProject($projectName: String!) {
+    getProjectWithName(projectName: $projectName) {
+      projectName
+      projectUrl
+      commits {
+        commitHash
+      }
+    }
+  }
+`;

frontend/src/component/AppErrorMessage.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+import { Error } from '@mui/icons-material';
+
+type AppErrorMessageProps = {
+  message: string;
+};
+
+export function AppErrorMessage(props: AppErrorMessageProps) {
+  let { message } = props;
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Error />
+      <Typography>{message}</Typography>
+    </div>
+  );
+}

frontend/src/component/AppLoadingBar.tsx

@@ -0,0 +1,6 @@
+import { LinearProgress } from '@mui/material';
+import React from 'react';
+
+export function AppLoadingBar() {
+  return <LinearProgress sx={{ margin: 5 }} />;
+}

frontend/src/component/ProjectCard.tsx → frontend/src/component/AppProjectCard.tsx

@@ -12,18 +12,9 @@ import { useNavigate } from 'react-router-dom';
 import { Project } from '../data/Project';
 import GitHubIcon from '@mui/icons-material/GitHub';
 
-class ProjectCard extends React.Component<Project> {
-  render() {
-    return (
-      <div>
-        <ProjectListItem {...this.props} />
-      </div>
-    );
-  }
-}
-
-function ProjectListItem(project: Project) {
+export function AppProjectCard({ project }: ProjectCardProps) {
   const navigate = useNavigate();
+  console.log(project);
   return (
     <>
       <Card
@@ -74,6 +65,7 @@ function ProjectListItem(project: Project) {
     </>
   );
 }
+
 function urlToGitHubHandle(params: string) {
   if (params === undefined) {
     return '';
@@ -83,8 +75,11 @@ function urlToGitHubHandle(params: string) {
   url.pop();
   return url.pop();
 }
-export default ProjectCard;
+export default AppProjectCard;
 
 function toLink(project: Project): string {
   return '/resultview/' + project.projectName;
 }
+interface ProjectCardProps {
+  project: Project;
+}

frontend/src/component/BadSmellList.tsx

@@ -5,7 +5,6 @@ import {
   AccordionSummary,
   Box,
   Card,
-  LinearProgress,
   Divider,
   Link,
   Stack,
@@ -17,13 +16,14 @@ import { fetchBadSmellsforHashQuery } from '../ProjectData';
 import JavaCodeBlock from './JavaCodeBlock';
 import React, { useMemo, useState } from 'react';
 import { StyledDivider } from './StyledDivider';
+import { AppLoadingBar } from './AppLoadingBar';
 
-export default function BadSmellList(project: Project) {
+export default function BadSmellList({ project, hash }: BadSmellListProps) {
   const [badSmellFilter] = useState(['']);
 
   const { data, error, loading } = useQuery(fetchBadSmellsforHashQuery, {
     variables: {
-      hash: project.commitHashes[0],
+      hash: hash,
     },
   });
   const filteredBadSmells = useMemo(() => {
@@ -44,7 +44,7 @@ export default function BadSmellList(project: Project) {
     console.error(error);
   }
   if (loading) {
-    return <LinearProgress />;
+    return <AppLoadingBar />;
   }
 
   return (
@@ -55,7 +55,11 @@ export default function BadSmellList(project: Project) {
       <br />
       <Box display={'flex'} flexDirection={'row'}>
         <Box display="inline-block" width={'100%'}>
-          <BadSmellBlocks badSmells={filteredBadSmells} project={project} />
+          <BadSmellBlocks
+            badSmells={filteredBadSmells}
+            project={project}
+            hash={hash}
+          />
         </Box>
       </Box>
     </div>
@@ -65,13 +69,15 @@ export default function BadSmellList(project: Project) {
 function BadSmellBlocks({
   badSmells,
   project,
+  hash,
 }: {
   badSmells: BadSmell[];
   project: Project;
+  hash: string;
 }) {
-  return <>{CodeBlocks(badSmells, project)}</>;
+  return <>{CodeBlocks(badSmells, project, hash)}</>;
 }
-function CodeBlocks(params: BadSmell[], project: Project) {
+function CodeBlocks(params: BadSmell[], project: Project, hash: string) {
   return Array.from(groupByRuleID(params)).map((badSmell) => {
     return (
       <div key={badSmell[0].toString()}>
@@ -101,7 +107,11 @@ function CodeBlocks(params: BadSmell[], project: Project) {
                       {badSmell.messageMarkdown}
                     </Typography>
                     <JavaCodeBlock code={badSmell.snippet} />
-                    <BadSmellCardFooter badSmell={badSmell} project={project} />
+                    <BadSmellCardFooter
+                      badSmell={badSmell}
+                      project={project}
+                      hash={hash}
+                    />
                     <StyledDivider
                       thickness={2}
                       color="orange"
@@ -118,11 +128,11 @@ function CodeBlocks(params: BadSmell[], project: Project) {
   });
 }
 
-function createGithubLink(badSmell: BadSmell, project: Project) {
+function createGithubLink(badSmell: BadSmell, project: Project, hash: string) {
   return (
     project.projectUrl +
     '/tree/' +
-    project.commitHashes[0] +
+    hash +
     '/' +
     badSmell.filePath +
     '#L' +
@@ -162,28 +172,34 @@ function BadSmellCardHeader(badSmell: BadSmell) {
 function BadSmellCardFooter({
   badSmell,
   project,
+  hash,
 }: {
   badSmell: BadSmell;
   project: Project;
+  hash: string;
 }) {
   return (
     <>
       <StyledDivider thickness={2} color="black" orientation="horizontal" />
       <Typography padding="10px" fontSize={18}>
         In file {badSmell.filePath} at line {badSmell.position.startLine}
       </Typography>
-      {GitHubLink(badSmell, project)}
+      {GitHubLink(badSmell, project, hash)}
     </>
   );
 }
-function GitHubLink(badSmell: BadSmell, project: Project) {
+function GitHubLink(badSmell: BadSmell, project: Project, hash: string) {
   return (
     <Link
       padding="10px"
-      href={createGithubLink(badSmell, project)}
+      href={createGithubLink(badSmell, project, hash)}
       underline="hover"
     >
       See on GitHub
     </Link>
   );
 }
+interface BadSmellListProps {
+  project: Project;
+  hash: string;
+}

frontend/src/component/DashBoardItem.tsx

@@ -21,7 +21,7 @@ function DashBoardItem(project: Project) {
           </Box>
           <Box marginLeft={5} display={'inline-block'} alignSelf={'flex-end'}>
             <Typography variant="body1">
-              {project.commitHashes.length} Commits
+              {project.commits.length} Commits
             </Typography>
           </Box>
         </CardActionArea>

frontend/src/component/HashSelector.tsx

@@ -1,59 +1,39 @@
-import {
-  Button,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@mui/material';
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router';
+import { FormControl, MenuItem, Select, Typography } from '@mui/material';
+import React from 'react';
 import { Project } from '../data/Project';
+import { GitHubCommit } from '../data/GitHubCommit';
 
-function HashSelector(project: Project) {
-  const navigate = useNavigate();
-  const [selectedHash, setSelectedHash] = useState(project.commitHashes[0]);
+export function HashSelector({ project, hash, setHash }: HashSelectorProps) {
   return (
-    <div>
+    <>
       <Typography align="center" variant="h6">
         Choose a hash to view the results
       </Typography>
-      <br />
       <FormControl
         sx={{ display: 'flex', justifyContent: 'center', minWidth: 200 }}
       >
-        <InputLabel id="hash-select-label">Commit Hash</InputLabel>
         <Select
-          labelId="hash-select-label"
           id="hash-select"
-          value={selectedHash}
-          onChange={(event) => handleHashChange(event.target.value as string)}
+          value={hash}
+          onChange={(event) => {
+            setHash(event.target.value as string);
+          }}
         >
-          {project.commitHashes.map((hash: string) => (
-            <MenuItem key={hash} value={hash}>
-              {hash}
+          {project.commits.map((hash: GitHubCommit) => (
+            <MenuItem key={hash.commitHash} value={hash.commitHash}>
+              {hash.commitHash}
             </MenuItem>
           ))}
         </Select>
       </FormControl>
-      <br />
-      <br />
-      <Button
-        variant="contained"
-        onClick={() => navigate(toLink(project, selectedHash))}
-      >
-        View Results
-      </Button>
-    </div>
+    </>
   );
-
-  function handleHashChange(hash: string) {
-    setSelectedHash(hash);
-  }
 }
 
 export default HashSelector;
 
-function toLink(project: Project, hash: string): string {
-  return '/resultview/' + project.projectName + '/' + hash;
+interface HashSelectorProps {
+  project: Project;
+  hash: string;
+  setHash: (hash: string) => void;
 }

frontend/src/component/Sidebar.tsx

@@ -67,7 +67,10 @@ function Sidebar() {
     {
       title: 'Statistics',
       url: '/statistics',
-      subLinks: [{ title: 'Organizations', url: '/statistics/organizations' }, { title: 'About', url: '/about' }],
+      subLinks: [
+        { title: 'Organizations', url: '/statistics/organizations' },
+        { title: 'About', url: '/about' },
+      ],
     },
   ];
 

frontend/src/data/GitHubCommit.tsx

@@ -1,6 +1,3 @@
-import { AnalyzerStatus } from './AnalyzerStatus';
-
 export type GitHubCommit = {
-  analyzerStatuses: AnalyzerStatus[];
-  commitHash: String;
+  commitHash: string;
 };

frontend/src/data/Project.tsx

@@ -3,6 +3,5 @@ import { GitHubCommit } from './GitHubCommit';
 export type Project = {
   projectName: string;
   projectUrl: string;
-  commitHashes: string[];
   commits: GitHubCommit[];
 };

frontend/src/gql/graphql-types.ts

@@ -281,6 +281,13 @@ export type LoginQueryVariables = Exact<{
 
 export type LoginQuery = { __typename?: 'Query', login?: string | null };
 
+export type GetProjectQueryVariables = Exact<{
+  projectName: Scalars['String']['input'];
+}>;
+
+
+export type GetProjectQuery = { __typename?: 'Query', getProjectWithName?: { __typename?: 'Project', projectName?: string | null, projectUrl?: string | null, commits?: Array<{ __typename?: 'GitHubCommit', commitHash?: string | null } | null> | null } | null };
+
 
 export const GetProjectsDocument = gql`
     query getProjects {
@@ -606,4 +613,48 @@ export function useLoginSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOpti
 export type LoginQueryHookResult = ReturnType<typeof useLoginQuery>;
 export type LoginLazyQueryHookResult = ReturnType<typeof useLoginLazyQuery>;
 export type LoginSuspenseQueryHookResult = ReturnType<typeof useLoginSuspenseQuery>;
-export type LoginQueryResult = Apollo.QueryResult<LoginQuery, LoginQueryVariables>;
+export type LoginQueryResult = Apollo.QueryResult<LoginQuery, LoginQueryVariables>;
+export const GetProjectDocument = gql`
+    query getProject($projectName: String!) {
+  getProjectWithName(projectName: $projectName) {
+    projectName
+    projectUrl
+    commits {
+      commitHash
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetProjectQuery__
+ *
+ * To run a query within a React component, call `useGetProjectQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProjectQuery({
+ *   variables: {
+ *      projectName: // value for 'projectName'
+ *   },
+ * });
+ */
+export function useGetProjectQuery(baseOptions: Apollo.QueryHookOptions<GetProjectQuery, GetProjectQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProjectQuery, GetProjectQueryVariables>(GetProjectDocument, options);
+      }
+export function useGetProjectLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProjectQuery, GetProjectQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProjectQuery, GetProjectQueryVariables>(GetProjectDocument, options);
+        }
+export function useGetProjectSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GetProjectQuery, GetProjectQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<GetProjectQuery, GetProjectQueryVariables>(GetProjectDocument, options);
+        }
+export type GetProjectQueryHookResult = ReturnType<typeof useGetProjectQuery>;
+export type GetProjectLazyQueryHookResult = ReturnType<typeof useGetProjectLazyQuery>;
+export type GetProjectSuspenseQueryHookResult = ReturnType<typeof useGetProjectSuspenseQuery>;
+export type GetProjectQueryResult = Apollo.QueryResult<GetProjectQuery, GetProjectQueryVariables>;

frontend/src/index.tsx

@@ -59,7 +59,7 @@ const router = createBrowserRouter([
     ),
   },
   {
-    path: 'resultview/:name',
+    path: 'results/:name',
     element: <LandingPage children={<ResultView />} />,
     children: [
       {