diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index d1e52d1..148d0e7 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Input, useTheme } from "@mui/material"; +import { Box, Grid, Input, Select, MenuItem, useTheme } from "@mui/material"; import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import { useDispatch, useSelector } from "react-redux"; @@ -42,6 +42,7 @@ export const Home = ({ mode }: HomeProps) => { const isFiltering = useSelector((state: RootState) => state.file.isFiltering); const filterValue = useSelector((state: RootState) => state.file.filterValue); const [isLoading, setIsLoading] = useState(false); + const [sortOption, setSortOption] = useState("Newest"); const filterType = useSelector((state: RootState) => state.file.filterType); const setFilterType = payload => { @@ -296,6 +297,19 @@ export const Home = ({ mode }: HomeProps) => { /> )} + + + + { filtersToDefault(); @@ -340,7 +354,7 @@ export const Home = ({ mode }: HomeProps) => { maxWidth: "1400px", }} > - + { +export const IssueList = ({ issues, sortOption }: FileListProps) => { const hashMapIssues = useSelector( (state: RootState) => state.file.hashMapFiles ); @@ -67,10 +68,43 @@ export const IssueList = ({ issues }: FileListProps) => { return issues.filter((issue: any) => hashMapIssues[issue.id]?.isValid); }, [issues, hashMapIssues]); + const ts = (value: number | string | undefined): number => { + if (value == null) return 0; + return typeof value === "number" + ? value + : Date.parse(value); + }; + + const sortedIssues = useMemo(() => { + const sorted = [...filteredIssues]; + switch (sortOption) { + case "Oldest": + sorted.sort((a, b) => ts(a.created) - ts(b.created)); + break; + case "User": + sorted.sort((a, b) => (a.user || "").localeCompare(b.user || "", undefined, { sensitivity: "base" })); + break; + case "Bounty": + sorted.sort((a, b) => { + const bountyA = Number(a.bountyData?.amount) || 0; + const bountyB = Number(b.bountyData?.amount) || 0; + if (bountyA === bountyB) { + return ts(b.created) - ts(a.created); + } + return bountyB - bountyA; + }); + break; + case "Newest": + default: + sorted.sort((a, b) => ts(b.created) - ts(a.created)); + } + return sorted; + }, [filteredIssues, sortOption]); + return ( - {filteredIssues.map((issue: any, index: number) => { - const existingFile = hashMapIssues[issue?.id]; + {sortedIssues.map((issue: Issue, index: number) => { + const existingFile = hashMapIssues[issue.id]; let hasHash = false; let issueObj = issue; if (existingFile) { @@ -217,7 +251,7 @@ export const IssueList = ({ issues }: FileListProps) => { {issueObj?.created && ( - {formatDate(issueObj.created)} + {formatDate(ts(issueObj.created))} )}