Skip to content

Commit

Permalink
Buckets sorting [storage] (#2188)
Browse files Browse the repository at this point in the history
* sorting ready

* remove undefined
  • Loading branch information
tanmoyAtb authored Jun 15, 2022
1 parent 3c24aa5 commit 024743b
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 12 deletions.
3 changes: 2 additions & 1 deletion packages/storage-ui/src/Components/Elements/BucketRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ const BucketRow = ({ bucket, onRemoveBucket, handleContextMenu }: Props) => {
{bucket.name || bucket.id}
</TableCell>
<TableCell
data-cy="cell-file-system-type">
data-cy="cell-file-system-type"
>
{bucket.file_system_type === "ipfs" ? "IPFS MFS" : "Chainsafe" }
</TableCell>
<TableCell>
Expand Down
76 changes: 65 additions & 11 deletions packages/storage-ui/src/Components/Pages/BucketsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { Bucket, FileSystemType } from "@chainsafe/files-api-client"
import { Helmet } from "react-helmet-async"
import AnchorMenu, { AnchorMenuPosition } from "../UI-components/AnchorMenu"

export const desktopGridSettings = "3fr 110px 150px 70px !important"
export const desktopGridSettings = "3fr 150px 150px 70px !important"
export const mobileGridSettings = "3fr 100px 100px 70px !important"

const useStyles = makeStyles(({ breakpoints, animation, constants, typography }: CSSTheme) =>
Expand Down Expand Up @@ -121,16 +121,21 @@ const useStyles = makeStyles(({ breakpoints, animation, constants, typography }:
})
)

type SortColumn = "name" | "file_system" | "size"
type SortDirection = "ascend" | "descend"

const BucketsPage = () => {
const classes = useStyles()
const { storageBuckets, createBucket, refreshBuckets, removeBucket } = useStorage()
const { accountRestricted } = useStorageApi()
const [isCreateBucketModalOpen, setIsCreateBucketModalOpen] = useState(false)
const [bucketToRemove, setBucketToRemove] = useState<Bucket | undefined>()
const [isRemovingBucket, setIsRemovingBucket] = useState(false)
const bucketsToShow = useMemo(() => storageBuckets.filter(b => b.status === "created"), [storageBuckets])
const [contextMenuPosition, setContextMenuPosition] = useState<AnchorMenuPosition | null>(null)
const [contextMenuOptions, setContextMenuOptions] = useState<IMenuItem[]>([])
const [sortColumn, setSortColumn] = useState<SortColumn | undefined>(undefined)
const [sortDirection, setSortDirection] = useState<SortDirection>("descend")

const generalContextMenuOptions: IMenuItem[] = useMemo(() => [
{
contents: (
Expand All @@ -145,11 +150,6 @@ const BucketsPage = () => {
}
], [classes])

const bucketNameValidationSchema = useMemo(
() => bucketNameValidator(bucketsToShow.map(b => b.name))
, [bucketsToShow]
)

usePageTrack()

useEffect(() => {
Expand All @@ -168,6 +168,36 @@ const BucketsPage = () => {
})
}, [bucketToRemove, removeBucket])

const bucketsToShow: Bucket[] = useMemo(() => {
let temp = []
const filteredBuckets = storageBuckets.filter(b => b.status === "created")

switch (sortColumn) {
case "name": {
temp = filteredBuckets.sort((a, b) => a.name?.localeCompare(b.name || "") || 0)
break
}
case "size": {
temp = filteredBuckets.sort((a, b) => (a.size < b.size ? -1 : 1))
break
}
case "file_system": {
temp = filteredBuckets.sort((a, b) => a.file_system_type?.localeCompare(b.file_system_type || "") || 0)
break
}
default: {
temp = filteredBuckets
break
}
}
return sortColumn && sortDirection === "descend" ? temp.reverse() : temp
}, [storageBuckets, sortDirection, sortColumn])

const bucketNameValidationSchema = useMemo(
() => bucketNameValidator(bucketsToShow.map(b => b.name))
, [bucketsToShow]
)

const formik = useFormik({
initialValues:{
name: "",
Expand Down Expand Up @@ -207,6 +237,21 @@ const BucketsPage = () => {
})
}, [generalContextMenuOptions])

const handleSortToggle = (
targetColumn: SortColumn
) => {
if (sortColumn !== targetColumn) {
setSortColumn(targetColumn)
setSortDirection("descend")
} else {
if (sortDirection === "ascend") {
setSortDirection("descend")
} else {
setSortDirection("ascend")
}
}
}

return (
<div className={classes.root}>
<Helmet>
Expand Down Expand Up @@ -256,22 +301,31 @@ const BucketsPage = () => {
>
<TableHeadCell
data-cy="table-header-name"
sortButtons={false}
align="left"
sortButtons={true}
onSortChange={() => handleSortToggle("name")}
sortDirection={sortColumn === "name" ? sortDirection : undefined}
sortActive={sortColumn === "name"}
>
<Trans>Name</Trans>
</TableHeadCell>
<TableHeadCell
data-cy="table-header-file-system"
sortButtons={false}
align="left"
align="center"
sortButtons={true}
onSortChange={() => handleSortToggle("file_system")}
sortDirection={sortColumn === "file_system" ? sortDirection : undefined}
sortActive={sortColumn === "file_system"}
>
<Trans>File System</Trans>
</TableHeadCell>
<TableHeadCell
data-cy="table-header-size"
sortButtons={false}
align="center"
sortButtons={true}
onSortChange={() => handleSortToggle("size")}
sortDirection={sortColumn === "size" ? sortDirection : undefined}
sortActive={sortColumn === "size"}
>
<Trans>Size</Trans>
</TableHeadCell>
Expand Down

0 comments on commit 024743b

Please sign in to comment.