feat/add issue tracker (#11)

* feat: introduce repository issues

* feat: update web-vitals and vite dependencies; refactor reportWebVitals function

* feat: add AsyncChip component and refactor PullRequestCard and RepositoryCard imports

Author: AKharytonchyk

src/components/AsyncChip.tsx

@@ -0,0 +1,26 @@
+import Chip, { ChipOwnProps } from "@mui/material/Chip";
+import CircularProgress from "@mui/material/CircularProgress";
+
+export type AsyncChipProps = {
+  isLoading: boolean;
+  loaderColor?:
+    | "primary"
+    | "secondary"
+    | "error"
+    | "info"
+    | "success"
+    | "warning"
+    | "inherit";
+};
+
+export const AsyncChip: React.FC<AsyncChipProps & ChipOwnProps> = ({
+  isLoading,
+  loaderColor = "primary",
+  ...props
+}) => {
+  return isLoading ? (
+    <CircularProgress size={24} color={loaderColor} />
+  ) : (
+    <Chip {...props} />
+  );
+};

src/components/PullRequestCard.tsx src/components/Cards/PullRequestCard.tsxsrc/components/PullRequestCard.tsx renamed to src/components/Cards/PullRequestCard.tsx

@@ -9,20 +9,20 @@ import {
   Box,
   Tooltip,
 } from "@mui/material";
-import { PullRequest } from "../models/PullRequest";
+import { PullRequest } from "../../models/PullRequest";
 import {
   DesignServices,
   FileOpen,
   GitHub,
   Lock,
   Visibility,
 } from "@mui/icons-material";
-import { PullRequestChecks } from "./PullRequestChecks";
-import { PullRequestsApprovals } from "./PullRequestsApprovals";
-import { PullRequestMergeCheck } from "./PullRequestMergeCheck";
-import getContrastColor from "../utils/getContractColor";
-import replaceEmoticons from "../utils/replaceEmoticons";
-import { getColorForDaysInReview } from "../utils/getColorsForDaysInReview";
+import { PullRequestChecks } from "../PullRequestChecks";
+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;

…mponents/Repositories/RepositoryCard.tsx src/components/Cards/RepositoryCard.tsxsrc/components/Repositories/RepositoryCard.tsx renamed to src/components/Cards/RepositoryCard.tsx src/components/Repositories/RepositoryCard.tsx renamed to src/components/Cards/RepositoryCard.tsx

@@ -18,6 +18,7 @@ import React from "react";
 import { ConfigContext } from "../../context/ConfigContext";
 import { useQuery } from "@tanstack/react-query";
 import { Link as RouterLink } from "react-router";
+import { AsyncChip } from "../AsyncChip";
 
 export type RepositoryCardProps = {
   name: string;
@@ -103,26 +104,26 @@ export const RepositoryCard: React.FC<RepositoryCardProps> = ({ name }) => {
         <Stack direction="row" justifyContent={"space-between"}>
           <Stack direction="row" spacing={1} alignItems={"center"}>
             <Typography color="text.secondary">Max Days: </Typography>
-            <Chip
+            <AsyncChip
+              isLoading={loadingPulls}
               label={date}
               size="small"
               sx={{ bgcolor: badgeColor }}
-              icon={loadingPulls ? <CircularProgress /> : undefined}
             />
             <Typography color="text.secondary">PRs: </Typography>
-            <Chip
+            <AsyncChip
+              isLoading={loadingPulls}
               label={pulls?.length || 0}
               size="small"
               color="primary"
-              icon={loadingPulls ? <CircularProgress /> : undefined}
             />
             <Typography color="text.secondary">Issues: </Typography>
-            <Chip
+            <AsyncChip
               label={issues?.length || 0}
               size="small"
               color="primary"
               sx={{ bgcolor: loadingIssues ? "grey.300" : "" }}
-              icon={loadingIssues ? <CircularProgress /> : undefined}
+              isLoading={loadingIssues}
             />
           </Stack>
           <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>

src/pages/Dashboard.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { ConfigContext } from "../context/ConfigContext";
 import { PullRequest } from "../models/PullRequest";
-import PullRequestCard from "../components/PullRequestCard";
+import PullRequestCard from "../components/Cards/PullRequestCard";
 import {
   Box,
   Button,

src/pages/MyPullRequests.tsx

@@ -5,7 +5,7 @@ import { PullRequest } from "../models/PullRequest";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
 
-import PullRequestCard from "../components/PullRequestCard";
+import PullRequestCard from "../components/Cards/PullRequestCard";
 import { Typography } from "@mui/material";
 
 export const MyPullRequests: React.FC = () => {

src/pages/RepositoriesPage.tsx

@@ -7,7 +7,7 @@ import Grid from "@mui/material/Grid2";
 
 // import PullRequestCard from "../components/PullRequestCard";
 import { Typography } from "@mui/material";
-import { RepositoryCard } from "../components/Repositories/RepositoryCard";
+import { RepositoryCard } from "../components/Cards/RepositoryCard";
 
 export const RepositoriesPage: React.FC = () => {
   const { octokit, repositorySettings, user } = React.useContext(ConfigContext);

src/pages/RepositoryItem.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import React, { useMemo } from "react";
 import { ConfigContext } from "../context/ConfigContext";
 import { Link, useParams } from "react-router";
-import PullRequestCard from "../components/PullRequestCard";
+import PullRequestCard from "../components/Cards/PullRequestCard";
 import { IssueCard } from "../components/Cards/IssueCard";
 import { Grid2, Stack, Tab, Tabs, Tooltip, Typography } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";