Sorted by dates by default

packages/storage-ui/src/Components/Pages/CidsPage.tsx

@@ -1,14 +1,15 @@
-import React, { useState } from "react"
+import React, { useMemo, useState } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { Button, PlusIcon, Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components"
 import { useStorage } from "../../Contexts/StorageContext"
 import { Trans } from "@lingui/macro"
 import CidRow from "../Elements/CidRow"
 import { CSSTheme } from "../../Themes/types"
 import AddCIDModal from "../Modules/AddCIDModal"
+import { PinStatus } from "@chainsafe/files-api-client"
 
-export const desktopGridSettings = "3fr 190px 190px 190px 190px 70px !important"
-export const mobileGridSettings = "3fr 190px 190px 190px 190px 70px !important"
+export const desktopGridSettings = "3fr 160px 120px 120px 140px 70px !important"
+export const mobileGridSettings = "3fr 160px 120px 120px 140px 70px !important"
 
 const useStyles = makeStyles(({ animation, breakpoints, constants }: CSSTheme) =>
   createStyles({
@@ -49,10 +50,46 @@ const useStyles = makeStyles(({ animation, breakpoints, constants }: CSSTheme) =
   })
 )
 
+type SortColumn = "size" | "date_uploaded"
+type SortDirection = "ascend" | "descend"
+
 const CidsPage = () => {
   const classes = useStyles()
   const { pins } = useStorage()
   const [addCIDOpen, setAddCIDOpen] = useState(false)
+  const [sortColumn, setSortColumn] = useState<SortColumn>("date_uploaded")
+  const [sortDirection, setSortDirection] = useState<SortDirection>("descend")
+
+  const handleSortToggle = (
+    targetColumn: SortColumn
+  ) => {
+    if (sortColumn !== targetColumn) {
+      setSortColumn(targetColumn)
+      setSortDirection("descend")
+    } else {
+      if (sortDirection === "ascend") {
+        setSortDirection("descend")
+      } else {
+        setSortDirection("ascend")
+      }
+    }
+  }
+
+  const sortedPins: PinStatus[] = useMemo(() => {
+    let temp = []
+
+    switch (sortColumn) {
+    case "size": {
+      temp = pins.sort((a, b) => (a.info?.size < b.info?.size ? -1 : 1))
+      break
+    }
+    default: {
+      temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1))
+      break
+    }
+    }
+    return sortDirection === "descend" ? temp.reverse() : temp
+  }, [pins, sortDirection, sortColumn])
 
   return (
     <>
@@ -99,13 +136,19 @@ const CidsPage = () => {
                 <Trans>Cid</Trans>
               </TableHeadCell>
               <TableHeadCell
-                sortButtons={false}
+                sortButtons={true}
+                onSortChange={() => handleSortToggle("date_uploaded")}
+                sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined}
+                sortActive={sortColumn === "date_uploaded"}
                 align="center"
               >
                 <Trans>Created</Trans>
               </TableHeadCell>
               <TableHeadCell
-                sortButtons={false}
+                sortButtons={true}
+                onSortChange={() => handleSortToggle("size")}
+                sortDirection={sortColumn === "size" ? sortDirection : undefined}
+                sortActive={sortColumn === "size"}
                 align="center"
               >
                 <Trans>Size</Trans>
@@ -121,7 +164,7 @@ const CidsPage = () => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {pins.map((pinStatus, index) =>
+            {sortedPins.map((pinStatus, index) =>
               <CidRow
                 pinStatus={pinStatus}
                 key={index}