feat: add view for my pull requests and overall repository view (#6)

Author: AKharytonchyk

package-lock.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@iconify/react": "^5.2.0",
     "@mui/icons-material": "^6.1.6",
     "@mui/material": "^6.1.6",
     "@octokit/rest": "^21.0.2",

package.json

@@ -12,6 +12,7 @@ export const ConfigContext = React.createContext<{
   repositorySettings: Record<string, boolean>;
   handleRepositorySelect: (repository: string, selected: boolean) => void;
   saveRawSettings: (settings: Record<string, boolean> | undefined) => void;
+  user?: { login: string; avatar_url: string; url: string };
 }>({
   octokit: null,
   repositorySettings: {},
@@ -35,7 +36,7 @@ function App() {
       const octoKit = new GitService(
         (import.meta as any).env.VITE_GITHUB_API_URL ||
           "https://api.github.com",
-        token,
+        token
       );
       octoKit.testAuthentication().then((user) => {
         if (user.status !== 200) {
@@ -62,8 +63,8 @@ function App() {
         new GitService(
           (import.meta as any).env.VITE_GITHUB_API_URL ||
             "https://api.github.com",
-          localStorage.getItem("token") || "",
-        ),
+          localStorage.getItem("token") || ""
+        )
       );
     }
   }, []);
@@ -88,7 +89,7 @@ function App() {
         return newState;
       });
     },
-    [],
+    []
   );
 
   const saveRawSettings = React.useCallback(
@@ -98,12 +99,12 @@ function App() {
       setRepositorySettings(settings);
       localStorage.setItem("REPOSITORY_CONFIG", JSON.stringify(settings));
     },
-    [],
+    []
   );
 
   React.useEffect(() => {
     const repositoryConfig = JSON.parse(
-      localStorage.getItem("REPOSITORY_CONFIG") ?? "{}",
+      localStorage.getItem("REPOSITORY_CONFIG") ?? "{}"
     );
     setRepositorySettings(repositoryConfig);
   }, []);
@@ -116,6 +117,7 @@ function App() {
           repositorySettings,
           handleRepositorySelect,
           saveRawSettings,
+          user,
         }}
       >
         <AppBar

src/App.tsx

@@ -4,6 +4,8 @@ import BottomNavigation from "@mui/material/BottomNavigation";
 import BottomNavigationAction from "@mui/material/BottomNavigationAction";
 import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { PullRequestIcon } from "./icons/PullRequestIcon";
+import { RepositoryIcon } from "./icons/RepositoryIcon";
 
 export type AuthHeaderProps = {
   user: {
@@ -44,6 +46,21 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
           value="/"
           title="Dashboard"
         />
+        <BottomNavigationAction
+          label="My PRs"
+          icon={<PullRequestIcon />}
+          sx={{ backgroundColor: "#f5f5f5" }}
+          value="/my-pull-requests"
+          title="My PRs"
+        />
+
+        <BottomNavigationAction
+          label="Repositories"
+          icon={<RepositoryIcon />}
+          sx={{ backgroundColor: "#f5f5f5" }}
+          value="/repositories"
+          title="Repositories"
+        />
         <BottomNavigationAction
           label="Coverage"
           icon={<Biotech />}

src/components/AuthHeader.tsx

@@ -124,53 +124,46 @@ export const PullRequestFilters: React.FC<PullRequestFiltersProps> = ({
     {
       name: "Authors",
       options: authors,
-      setSelected: (authors: string[]) => onFilterChange("authors", authors),
+      onChange: (authors: string[]) => onFilterChange("authors", authors),
     },
     {
       name: "Reviewers",
       options: reviewers,
-      setSelected: (reviewers: string[]) =>
-        onFilterChange("reviewers", reviewers),
+      onChange: (reviewers: string[]) => onFilterChange("reviewers", reviewers),
     },
     {
       name: "Assignees",
       options: assignees,
-      setSelected: (assignees: string[]) =>
-        onFilterChange("assignees", assignees),
+      onChange: (assignees: string[]) => onFilterChange("assignees", assignees),
     },
     {
       name: "Repositories",
       options: repositories,
-      setSelected: (repositories: string[]) =>
+      onChange: (repositories: string[]) =>
         onFilterChange("repositories", repositories),
     },
     {
       name: "Include Labels",
       options: labels.filter(
         (label) => !filterValues.excludeLabels.includes(label)
       ),
-      setSelected: (includeLabels: string[]) =>
+      onChange: (includeLabels: string[]) =>
         onFilterChange("includeLabels", includeLabels),
     },
     {
       name: "Exclude Lables",
       options: labels.filter(
         (label) => !filterValues.includeLabels.includes(label)
       ),
-      setSelected: (excludeLabels: string[]) =>
+      onChange: (excludeLabels: string[]) =>
         onFilterChange("excludeLabels", excludeLabels),
     },
   ];
 
   return (
     <Box>
       {multiselectFIlterOptions.map((filter) => (
-        <MultiselectFilter
-          key={filter.name}
-          name={filter.name}
-          options={filter.options}
-          onChange={filter.setSelected}
-        />
+        <MultiselectFilter key={filter.name} {...filter} />
       ))}
     </Box>
   );

src/components/Dashboard/PullRequestFilters.tsx

@@ -4,7 +4,7 @@ import { Typography, Box } from "@mui/material";
 const PATSetupGuide = () => {
   return (
     <>
-      <Typography paragraph>
+      <Typography component="p">
         A Personal Access Token (PAT) on GitHub allows third-party applications
         to interact with your GitHub account securely. Follow these steps to
         create a PAT:
@@ -35,7 +35,7 @@ const PATSetupGuide = () => {
         <Typography variant="body1" component="div">
           7. Click <strong>Generate token</strong>.
         </Typography>
-        <Typography paragraph>
+        <Typography component="p">
           After clicking <strong>Generate token</strong>, make sure to copy your
           new personal access token. You won’t be able to see it again!
         </Typography>

src/components/PATSetupGuide.tsx

@@ -9,7 +9,6 @@ import {
   Box,
   Tooltip,
 } from "@mui/material";
-import { green, red, amber } from "@mui/material/colors";
 import { PullRequest } from "../models/PullRequest";
 import {
   DesignServices,
@@ -23,23 +22,13 @@ import { PullRequestsApprovals } from "./PullRequestsApprovals";
 import { PullRequestMergeCheck } from "./PullRequestMergeCheck";
 import getContrastColor from "../utils/getContractColor";
 import replaceEmoticons from "../utils/replaceEmoticons";
+import { getColorForDaysInReview } from "../utils/getColorsForDaysInReview";
 
 interface PullRequestCardProps {
   pr: PullRequest;
 }
 
 const PullRequestCard: React.FC<PullRequestCardProps> = ({ pr }) => {
-  const getColorForDaysInReview = (createdAt: Date) => {
-    const today = new Date();
-    const daysInReview = Math.floor(
-      (today.getTime() - new Date(createdAt).getTime()) / (1000 * 3600 * 24),
-    );
-
-    if (daysInReview < 3) return green[500];
-    if (daysInReview < 7) return amber[500];
-    return red[500];
-  };
-
   return (
     <Card sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
       <CardActions
@@ -124,7 +113,7 @@ const PullRequestCard: React.FC<PullRequestCardProps> = ({ pr }) => {
             <Chip
               label={Math.floor(
                 (new Date().getTime() - new Date(pr.created_at).getTime()) /
-                  (1000 * 3600 * 24),
+                  (1000 * 3600 * 24)
               )}
               sx={{ bgcolor: getColorForDaysInReview(pr.created_at) }}
               size="small"

src/components/PullRequestCard.tsx

@@ -0,0 +1,98 @@
+import {
+  Card,
+  CardContent,
+  Chip,
+  Box,
+  Typography,
+  Tooltip,
+  Link,
+} from "@mui/material";
+import { PullRequest } from "../../models/PullRequest";
+import { LanguageIcon } from "../icons/LanguageIcon";
+import { useMemo } from "react";
+import { getColorForDaysInReview } from "../../utils/getColorsForDaysInReview";
+import { Visibility } from "@mui/icons-material";
+
+export type RepositoryCardProps = {
+  name: string;
+  pulls: PullRequest[];
+};
+
+export const RepositoryCard: React.FC<RepositoryCardProps> = ({ pulls }) => {
+  const [
+    {
+      base: { repo },
+    },
+  ] = pulls;
+
+  const oldestPr = useMemo(() => {
+    return pulls.sort(
+      (prA, prB) => prA.created_at.getTime() - prB.created_at.getTime()
+    )[0];
+  }, [pulls]);
+
+  return (
+    <Card
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minWidth: 320,
+      }}
+    >
+      <CardContent
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          paddingBottom: 1,
+          height: "100%",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 1,
+            mb: 1,
+          }}
+        >
+          <LanguageIcon language={repo.language} />
+          <Typography variant="h6">{repo.full_name}</Typography>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 1,
+            mt: "auto",
+          }}
+        >
+          <Typography color="text.secondary">Max Days: </Typography>
+          <Chip
+            label={Math.floor(
+              (new Date().getTime() - oldestPr.created_at?.getTime()) /
+                (1000 * 3600 * 24)
+            )}
+            size="small"
+            sx={{ bgcolor: getColorForDaysInReview(oldestPr.created_at) }}
+          />
+          {"|"}
+          <Typography color="text.secondary">PRs: </Typography>
+          <Chip label={pulls.length} size="small" color="primary" />
+          <Link
+            href={repo.html_url + "/pulls"}
+            sx={{ marginLeft: "auto" }}
+            target="_blank"
+            rel="noopener"
+          >
+            <Tooltip title="View PRs">
+              <Visibility />
+            </Tooltip>
+          </Link>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};

src/components/Repositories/RepositoryCard.tsx

@@ -14,7 +14,7 @@ const Outline: React.FC<{ text: string }> = ({ text }) => {
 const PATSetupGuide = () => {
   return (
     <>
-      <Typography paragraph>
+      <Typography component="p">
         To be able to see pull request you would need to pick the project first.
         Follow these steps to configure your projects:
       </Typography>
@@ -42,7 +42,7 @@ const PATSetupGuide = () => {
         <Typography variant="body1" component="div">
           7. When finished just click outside the dialog to close it.
         </Typography>
-        <Typography paragraph sx={{ marginTop: 2 }}>
+        <Typography component="p" sx={{ marginTop: 2 }}>
           All the selection would be saved automatically in your browser. As
           soon as you select the repositories you would be able to see the pull
           requests if any are available.