feat: add repository filtering

src/components/PullRequestCard.tsx

@@ -12,7 +12,6 @@ import {
 import { green, red, amber } from "@mui/material/colors";
 import { PullRequest } from "../models/PullRequest";
 import { DesignServices, FileOpen, GitHub, Lock, Visibility } from "@mui/icons-material";
-import { ConfigContext } from "../App";
 import { PullRequestChecks } from "./PullRequestChecks";
 import { PullRequestsApprovals } from "./PullRequestsApprovals";
 
@@ -21,22 +20,6 @@ interface PullRequestCardProps {
 }
 
 const PullRequestCard: React.FC<PullRequestCardProps> = ({ pr }) => {
-  const { octokit } = React.useContext(ConfigContext);
-  const [checkStatus, setCheckStatus] = React.useState<string>("pending");
-  const [aoorovals, setApprovals] = React.useState<number>(0);
-
-  React.useEffect(() => {
-    if (!octokit) return;
-
-    octokit.getPRChecksStatus(pr.base.repo.owner.login, pr.base.repo.name, pr.number).then((status) => {
-      console.log(`getPRChecksStatus: ${pr.number} ${pr.base.repo.name}`, status.data);
-    });
-
-    octokit.getPRApprovals(pr.base.repo.owner.login, pr.base.repo.name, pr.number).then((approvals) => {
-      console.log('getPRApprovals', approvals.data);
-    });
-  }, [pr, octokit]);
-
   const getColorForDaysInReview = (createdAt: Date) => {
     const today = new Date();
     const daysInReview = Math.floor(
@@ -92,8 +75,8 @@ const PullRequestCard: React.FC<PullRequestCardProps> = ({ pr }) => {
         <Link href={pr.html_url} target="_blank" rel="noopener">#{pr.number}</Link> {pr.title}
         </Typography>
         <Box sx={{ display: "flex", gap: 1, alignItems: "center", justifyContent: "space-between", paddingTop: 2, marginTop: 'auto' }}>
-          <Typography color="text.secondary">
-            Days in review:{" "}
+          <Box sx={{ display: "flex", alignItems: "center", flexDirection: "row", gap: 1}}>
+            <Typography color="text.secondary">Days in review:{" "}</Typography>
             <Chip
               label={Math.floor(
                 (new Date().getTime() - new Date(pr.created_at).getTime()) /
@@ -102,7 +85,7 @@ const PullRequestCard: React.FC<PullRequestCardProps> = ({ pr }) => {
               sx={{ bgcolor: getColorForDaysInReview(pr.created_at) }}
               size="small"
             />
-          </Typography>
+          </Box>
           {"|"}
           <PullRequestChecks owner = {pr.base.repo.owner.login} repo = {pr.base.repo.name} prNumber = {pr.number}/>
           {"|"}

src/components/PullRequestChecks.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ConfigContext } from "../App";
 import { CheckRun } from "../models/CheckRun";
-import { Box, Dialog, Link, Modal, Typography } from "@mui/material";
+import { Box, Dialog, Link, Typography } from "@mui/material";
 import { CheckCircle, Error, ErrorOutline } from "@mui/icons-material";
 
 export type PullRequestChecksProps = {

src/components/PullRequestsApprovals.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ConfigContext } from "../App";
 import { Approvals } from "../models/Approvals";
-import { Avatar, Badge, Typography, Box } from '@mui/material';
+import { Avatar, Badge, Box } from '@mui/material';
 
 export type PullRequestsApprovalsProps = {
   owner: string;
@@ -45,14 +45,14 @@ export const PullRequestsApprovals: React.FC<PullRequestsApprovalsProps> = ({
   const allApprovals = React.useMemo(() => approvals?.filter((approval) => approval.state !== "DISMISSED"), [approvals]);
 
   const approvalAvatars = React.useMemo(() => allApprovals?.map((approval) => (
-    <Badge {...getBadgeProps(approval.state)} sx={{ height: "1em", display: "flex", alignItems: "center" }}>
+    <Badge key={approval.user.login} {...getBadgeProps(approval.state)} sx={{ height: "1em", display: "flex", alignItems: "center" }}>
       <Avatar key={approval.user.login} alt={approval.user.login} src={approval.user.avatar_url} sx={{height: "1.5em", width: "1.5em"}} />
     </Badge>
     )), [allApprovals]);
 
   return <>
-    <Typography color="text.secondary" sx={{display: "flex", gap: 1, alignItems: "center", marginRight: "auto" }}>
+    <Box color="text.secondary" sx={{display: "flex", gap: 1, alignItems: "center", marginRight: "auto" }}>
       Approvals: <Box sx={{ display: "flex", alignItems: "center" }}> {approvals.length ? approvalAvatars : "Not reviews"} </Box>
-    </Typography>
+    </Box>
   </>;
 }

src/components/RepoSettingAccordion.tsx

@@ -25,7 +25,7 @@ export type RepoSettingAccordionProps = {
 };
 
 export const RepoSettingAccordion: React.FC<RepoSettingAccordionProps> = ({org, type}) => {
-  const { octokit, handleRepositorySelect } = React.useContext(ConfigContext);
+  const { octokit, handleRepositorySelect, repositorySettings } = React.useContext(ConfigContext);
   const [isLoading, setIsLoading] = React.useState(false);
   const [repos, setRepos] = React.useState<Repository[]>([]);
   const [selectedRepos, setSelectedRepos] = React.useState<Repository[]>([]);
@@ -57,10 +57,19 @@ export const RepoSettingAccordion: React.FC<RepoSettingAccordionProps> = ({org,
 
   const repoList = useMemo(
     () =>
-      selectedRepos.map((repo) => (
+      selectedRepos
+      .sort((a, b) => {
+        const repoAHasSettingsTrue = repositorySettings[a.full_name] === true ? 0 : 1;
+        const repoBHasSettingsTrue = repositorySettings[b.full_name] === true ? 0 : 1;
+        if (repoAHasSettingsTrue !== repoBHasSettingsTrue) {
+          return repoAHasSettingsTrue - repoBHasSettingsTrue;
+        }
+        return a.full_name.localeCompare(b.full_name);
+      })
+      .map((repo) => (
         <RepositorySelector key={repo.id} repository={repo} />
       )),
-    [selectedRepos]
+    [selectedRepos, repositorySettings]
   );
 
   const handleSelectAll = React.useCallback(() => {
@@ -81,8 +90,6 @@ export const RepoSettingAccordion: React.FC<RepoSettingAccordionProps> = ({org,
     [repos]
   );
 
-
-
   const title = React.useMemo(() => {
     switch (type) {
       case "org":

src/components/RepositorySelector.tsx

@@ -1,5 +1,12 @@
 import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
-import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import {
+  Button,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Snackbar,
+  Typography,
+} from "@mui/material";
 import React from "react";
 import { Repository } from "../models/Repository";
 import { ConfigContext } from "../App";
@@ -8,21 +15,59 @@ export type RepositorySelectorProps = {
   repository: Repository;
 };
 
+const Action: React.FC<{onUndo: () => void}> = ({onUndo}) => (
+  <React.Fragment>
+    <Button color="secondary" size="small" onClick={onUndo}>
+      UNDO
+    </Button>
+  </React.Fragment>
+);
+
 export const RepositorySelector: React.FC<RepositorySelectorProps> = ({
   repository,
 }) => {
   const { repositorySettings, handleRepositorySelect } =
     React.useContext(ConfigContext);
 
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = React.useCallback(() => {
+    handleRepositorySelect(
+      repository.full_name,
+      !repositorySettings[repository.full_name]
+    );
+    setOpen(true);
+  }, [handleRepositorySelect, repository, repositorySettings]);
+
+  const handleUndo = React.useCallback(() => {
+    handleRepositorySelect(
+      repository.full_name,
+      !repositorySettings[repository.full_name]
+    );
+    setOpen(false);
+  }, [handleRepositorySelect, repository, repositorySettings]);
+
+  const handleClose = React.useCallback((e: any) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    setOpen(false);
+  }, []);
+
+  const message = React.useMemo(() => {
+    return repositorySettings[repository.full_name] ? (
+      <Typography>
+        Repository <strong>{repository.name.toUpperCase()}</strong> was moved to the top of the list
+      </Typography>
+    ) : (
+      <Typography>
+        Repository <strong>{repository.name.toUpperCase()}</strong> was moved to the bottom of the list
+      </Typography>
+    );} , [repository, repositorySettings]);
+
   return (
     <ListItemButton
       key={repository.id}
-      onClick={() =>
-        handleRepositorySelect(
-          repository.full_name,
-          !repositorySettings[repository.full_name]
-        )
-      }
+      onClick={handleSelect}
     >
       <ListItemText primary={repository.full_name} />
       <ListItemIcon>
@@ -32,6 +77,13 @@ export const RepositorySelector: React.FC<RepositorySelectorProps> = ({
           <CheckBoxOutlineBlank />
         )}
       </ListItemIcon>
+      <Snackbar
+        open={open}
+        onClose={handleClose}
+        message={message}
+        autoHideDuration={2000}
+        action={<Action onUndo={handleUndo} />}
+      />
     </ListItemButton>
   );
 };

src/service/gitService.ts

@@ -31,7 +31,7 @@ export class GitService {
 
   async getRepos(owner: string) {
     const repos = await this.octokit.paginate(this.octokit.repos.listForOrg, {org: owner, per_page: 100, timeout: 5000});
-    return repos.filter((repo) => !repo.archived);
+    return repos.filter((repo) => !repo.archived).sort((a, b) => a.name.localeCompare(b.name));
   }
 
   async getStaredRepos() {