feat: Enhance Pull Requests dashboard with sorting options (#17)

Author: AKharytonchyk

src/components/PullRequestsApprovals.tsx

@@ -56,7 +56,10 @@ export const PullRequestsApprovals: React.FC<PullRequestsApprovalsProps> = ({
   const approvalAvatars = React.useMemo(
     () =>
       allApprovals?.map((approval) => (
-        <Tooltip key={approval.user.login} title={approval.state}>
+        <Tooltip
+          key={approval.user.login}
+          title={`${approval.state} by ${approval.user.login}`}
+        >
           <Badge
             {...getBadgeProps(approval.state)}
             sx={{ height: "1em", display: "flex", alignItems: "center" }}
@@ -88,7 +91,7 @@ export const PullRequestsApprovals: React.FC<PullRequestsApprovalsProps> = ({
         {isLoading ? (
           <CircularProgress size={24} />
         ) : (
-          <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             {" "}
             {approvals.length ? approvalAvatars : "No reviews"}{" "}
           </Box>

src/pages/Dashboard.tsx

@@ -5,10 +5,15 @@ import PullRequestCard from "../components/Cards/PullRequestCard";
 import {
   Box,
   Button,
-  FormControlLabel,
+  FormControl,
   FormGroup,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
   Switch,
   Tooltip,
+  Typography,
 } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import LandingPage from "./LandingPage";
@@ -18,12 +23,17 @@ import { Navigate } from "react-router";
 import PRLoadingPage from "./PRLoadingPage";
 import { PullRequestFilters } from "../components/Dashboard/PullRequestFilters";
 import { FilterList } from "@mui/icons-material";
+import SortIconOutlined from "@mui/icons-material/Sort";
 
 export const Dashboard: React.FC = () => {
   const { octokit, repositorySettings } = React.useContext(ConfigContext);
   const [activeRepositories, setActiveRepositories] = React.useState<string[]>(
     []
   );
+  const [orderByDate, setOrderByDate] = React.useState<"Repository" | "Date">(
+    "Repository"
+  );
+  const [order, setOrder] = React.useState<"asc" | "desc">("asc");
 
   useEffect(() => {
     setActiveRepositories(
@@ -58,15 +68,29 @@ export const Dashboard: React.FC = () => {
   const [showFilters, setShowFilters] = React.useState<boolean>(false);
 
   const filteredPulls = React.useMemo(() => {
-    return data.filter((pull) => {
+    const pullRequests = data.filter((pull) => {
       if (!pull) return false;
       if (!showDrafts && pull.draft) return false;
       if (!pull.title.toLowerCase().includes(filter.toLowerCase()))
         return false;
 
       return true;
     });
-  }, [data, filter, showDrafts]);
+
+    pullRequests.sort((a, b) => {
+      if (orderByDate === "Repository") {
+        return order === "asc"
+          ? a.base.repo.name.localeCompare(b.base.repo.name)
+          : b.base.repo.name.localeCompare(a.base.repo.name);
+      } else {
+        return order === "asc"
+          ? new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+          : new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+      }
+    });
+
+    return pullRequests;
+  }, [data, filter, showDrafts, orderByDate, order]);
 
   const [displayedPulls, setDisplayedPulls] = React.useState<PullRequest[]>(
     filteredPulls as PullRequest[]
@@ -94,15 +118,45 @@ export const Dashboard: React.FC = () => {
                 onChange={setFilter}
                 size="small"
               />
-              <FormGroup sx={{ m: 1 }}>
-                <FormControlLabel
-                  control={
-                    <Switch
-                      checked={showDrafts}
-                      onChange={() => setShowDrafts(!showDrafts)}
-                    />
-                  }
-                  label="Show Drafts"
+              <FormControl
+                sx={{ m: 1, alignItems: "center", flexDirection: "row" }}
+              >
+                <Typography id="select-order-label" sx={{ pr: 2 }}>
+                  Order By:
+                </Typography>
+                <Select
+                  value={orderByDate}
+                  variant="standard"
+                  labelId="select-order-label"
+                  label="Order By"
+                  onChange={(e) => setOrderByDate(e.target.value as any)}
+                  sx={{ minWidth: 120 }}
+                >
+                  <MenuItem value={"Repository"}>Repository</MenuItem>
+                  <MenuItem value={"Date"}>Date</MenuItem>
+                </Select>
+              </FormControl>
+              <Tooltip title={order === "asc" ? "Ascending" : "Descending"}>
+                <IconButton
+                  size="small"
+                  onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
+                >
+                  <SortIconOutlined
+                    sx={{
+                      transform: order === "asc" ? "rotate(180deg)" : "none",
+                    }}
+                  />
+                </IconButton>
+              </Tooltip>
+              <FormGroup
+                sx={{ m: 1, alignItems: "center", flexDirection: "row" }}
+              >
+                <InputLabel id="select-order-label" sx={{ pr: 2 }}>
+                  Show Drafts
+                </InputLabel>
+                <Switch
+                  checked={showDrafts}
+                  onChange={() => setShowDrafts(!showDrafts)}
                 />
               </FormGroup>
               <Tooltip title={showFilters ? "Hide Filters" : "Show Filters"}>