feat(client): added custom sorter for dates

EchoSkorJjj · Jan 4, 2024 · 47b0343 · 47b0343
1 parent 03910ae
commit 47b0343
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 33 deletions.
diff --git a/client/src/features/components/table/ColumnFilter.tsx b/client/src/features/components/table/ColumnFilter.tsx
@@ -9,9 +9,21 @@ import {
   MenuList,
   VStack,
 } from "@chakra-ui/react";
+import { FilterFn } from "@tanstack/react-table";
 
 import { ColumnButtonProps } from "~features/interfaces";
 
+// eslint-disable-next-line
+export const customCategoryFilter: FilterFn<any> = (
+  row,
+  columnId,
+  filterValue,
+) => {
+  const rowValue = Number(row.getValue(columnId));
+  const filterNumber = Number(filterValue);
+  return rowValue === filterNumber;
+};
+
 export const ColumnFilter: React.FC<ColumnButtonProps> = ({ column }) => {
   // eslint-disable-next-line
   const [state, setState] = useState(null as null | { value: any });

diff --git a/client/src/features/components/table/ColumnSorter.tsx b/client/src/features/components/table/ColumnSorter.tsx
@@ -1,9 +1,23 @@
 import { FaCaretDown, FaChevronDown, FaChevronUp } from "react-icons/fa";
 import { IconButton } from "@chakra-ui/react";
-import type { SortDirection } from "@tanstack/react-table";
+import type { SortDirection, SortingFn } from "@tanstack/react-table";
 
 import { ColumnButtonProps } from "~features/interfaces";
 
+// eslint-disable-next-line
+export const customCreatedAtSorter: SortingFn<any> = (rowA, rowB, columnId) => {
+  const rowAValue = rowA.getValue(columnId) as string;
+  const rowBValue = rowB.getValue(columnId) as string;
+
+  const dateA = new Date(rowAValue).getTime();
+  const dateB = new Date(rowBValue).getTime();
+
+  if (isNaN(dateA)) return -1;
+  if (isNaN(dateB)) return 1;
+
+  return dateA - dateB;
+};
+
 export const ColumnSorter: React.FC<ColumnButtonProps> = ({ column }) => {
   if (!column.getCanSort()) {
     return null;

diff --git a/client/src/features/pages/posts/PostColumns.tsx b/client/src/features/pages/posts/PostColumns.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
 import {
   Button,
@@ -15,30 +14,26 @@ import {
   PopoverHeader,
   PopoverTrigger,
   Select,
+  Tooltip,
   useToast,
 } from "@chakra-ui/react";
-import { ColumnDef, FilterFn } from "@tanstack/react-table";
+import { ColumnDef } from "@tanstack/react-table";
 
 import { useCategoryStore, usePostStore } from "~shared/store";
 
 import { getAllCategories } from "~features/components/data";
+import {
+  customCategoryFilter,
+  customCreatedAtSorter,
+} from "~features/components/table";
 import { FilterElementProps, IPost } from "~features/interfaces";
 
 export const usePostColumns = (): ColumnDef<IPost>[] => {
-  const navigate = useNavigate();
   const toast = useToast();
   const [activePopoverId, setActivePopoverId] = useState<number | null>(null);
   const { removePost } = usePostStore();
   const { categories, setCategories } = useCategoryStore();
 
-  const handleEdit = (id: number) => {
-    navigate(`/posts/edit/${id}`);
-  };
-
-  const handleView = (id: number) => {
-    navigate(`/posts/show/${id}`);
-  };
-
   const handleDelete = (id: number) => {
     setActivePopoverId(id);
   };
@@ -50,12 +45,6 @@ export const usePostColumns = (): ColumnDef<IPost>[] => {
     setActivePopoverId(null);
   };
 
-  const customCategoryFilter: FilterFn<any> = (row, columnId, filterValue) => {
-    const rowValue = Number(row.getValue(columnId));
-    const filterNumber = Number(filterValue);
-    return rowValue === filterNumber;
-  };
-
   const fetchAllCategories = async () => {
     // TODO: Replace with actual API call
 
@@ -143,6 +132,7 @@ export const usePostColumns = (): ColumnDef<IPost>[] => {
       accessorKey: "createdAt",
       header: "Created At",
       enableColumnFilter: false,
+      sortingFn: customCreatedAtSorter,
       cell: (info) => {
         const dateValue = info.getValue() as string;
 
@@ -161,19 +151,24 @@ export const usePostColumns = (): ColumnDef<IPost>[] => {
       enableSorting: false,
       cell: (info) => (
         <HStack>
-          <IconButton
-            aria-label="View"
-            icon={<ViewIcon />}
-            onClick={() => handleView(info.row.original.id)}
-            variant="outline"
-          />
-          <IconButton
-            aria-label="Edit"
-            icon={<EditIcon />}
-            onClick={() => handleEdit(info.row.original.id)}
-            variant="outline"
-          />
-
+          <Tooltip hasArrow label="View Post" bg="gray.300" color="black">
+            <IconButton
+              aria-label="View"
+              as="a"
+              icon={<ViewIcon />}
+              href={`/posts/show/${info.row.original.id}`}
+              variant="outline"
+            />
+          </Tooltip>
+          <Tooltip hasArrow label="Edit Post" bg="blue.600">
+            <IconButton
+              aria-label="Edit"
+              as="a"
+              icon={<EditIcon />}
+              href={`/posts/edit/${info.row.original.id}`}
+              variant="outline"
+            />
+          </Tooltip>
           <Popover
             returnFocusOnClose={false}
             isOpen={activePopoverId === info.row.original.id}
@@ -190,12 +185,12 @@ export const usePostColumns = (): ColumnDef<IPost>[] => {
                 colorScheme="red"
               />
             </PopoverTrigger>
-            <PopoverContent>
+            <PopoverContent textAlign="center">
               <PopoverHeader fontWeight="semibold">Confirmation</PopoverHeader>
               <PopoverArrow />
               <PopoverCloseButton />
               <PopoverBody>Are you sure?</PopoverBody>
-              <PopoverFooter display="flex" justifyContent="flex-end">
+              <PopoverFooter display="flex" justifyContent="center">
                 <ButtonGroup size="sm">
                   <Button
                     variant="outline"