From 14a80b91cef8618776294babf41d3a2fed70a066 Mon Sep 17 00:00:00 2001 From: tanmoy12 Date: Mon, 12 Jul 2021 22:25:47 +0600 Subject: [PATCH 1/4] sorted on dates by default --- .../src/Components/Pages/CidsPage.tsx | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx index 7c75a7074c..35f8071bbe 100644 --- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx @@ -1,4 +1,4 @@ -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" @@ -6,9 +6,10 @@ 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({ @@ -53,6 +54,29 @@ const CidsPage = () => { const classes = useStyles() const { pins } = useStorage() const [addCIDOpen, setAddCIDOpen] = useState(false) + const [column] = useState<"size" | "date_uploaded">("date_uploaded") + const [direction] = useState<"ascend" | "descend" | undefined>("descend") + + const sortedPins: PinStatus[] = useMemo(() => { + let temp = [] + + switch (column) { + default: { + // case "name": { + temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1)) + break + } + case "size": { + temp = pins.sort((a, b) => (a.info?.size < b.info?.size ? -1 : 1)) + break + } + case "date_uploaded": { + temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1)) + break + } + } + return direction === "descend" ? temp.reverse() : temp + }, [pins, direction, column]) return ( <> @@ -121,7 +145,7 @@ const CidsPage = () => { - {pins.map((pinStatus, index) => + {sortedPins.map((pinStatus, index) => Date: Mon, 12 Jul 2021 22:28:02 +0600 Subject: [PATCH 2/4] removed unnecessary comments --- packages/storage-ui/src/Components/Pages/CidsPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx index 35f8071bbe..96e3d7dadb 100644 --- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx @@ -62,7 +62,6 @@ const CidsPage = () => { switch (column) { default: { - // case "name": { temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1)) break } From c020ced8725ebdf7bf5435e51047aa4e67691fce Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Tue, 13 Jul 2021 17:08:01 +0600 Subject: [PATCH 3/4] Update packages/storage-ui/src/Components/Pages/CidsPage.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- packages/storage-ui/src/Components/Pages/CidsPage.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx index 96e3d7dadb..eb9c788e84 100644 --- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx @@ -61,15 +61,11 @@ const CidsPage = () => { let temp = [] switch (column) { - default: { - temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1)) - break - } case "size": { temp = pins.sort((a, b) => (a.info?.size < b.info?.size ? -1 : 1)) break } - case "date_uploaded": { + default: { temp = pins.sort((a, b) => (a.created < b.created ? -1 : 1)) break } From 61a3f81e72cf3397ca809ab05fb0fa108a716dd7 Mon Sep 17 00:00:00 2001 From: tanmoy12 Date: Wed, 14 Jul 2021 00:04:21 +0600 Subject: [PATCH 4/4] added sort directions --- .../src/Components/Pages/CidsPage.tsx | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx index eb9c788e84..dcf0255435 100644 --- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx @@ -50,17 +50,35 @@ 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 [column] = useState<"size" | "date_uploaded">("date_uploaded") - const [direction] = useState<"ascend" | "descend" | undefined>("descend") + const [sortColumn, setSortColumn] = useState("date_uploaded") + const [sortDirection, setSortDirection] = useState("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 (column) { + switch (sortColumn) { case "size": { temp = pins.sort((a, b) => (a.info?.size < b.info?.size ? -1 : 1)) break @@ -70,8 +88,8 @@ const CidsPage = () => { break } } - return direction === "descend" ? temp.reverse() : temp - }, [pins, direction, column]) + return sortDirection === "descend" ? temp.reverse() : temp + }, [pins, sortDirection, sortColumn]) return ( <> @@ -118,13 +136,19 @@ const CidsPage = () => { Cid handleSortToggle("date_uploaded")} + sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined} + sortActive={sortColumn === "date_uploaded"} align="center" > Created handleSortToggle("size")} + sortDirection={sortColumn === "size" ? sortDirection : undefined} + sortActive={sortColumn === "size"} align="center" > Size