feat: save filters to local storage

Peppermint-Lab · Nov 11, 2024 · 804c021 · 804c021
1 parent d59518b
commit 804c021
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 31 deletions.
diff --git a/apps/client/pages/issues/closed.tsx b/apps/client/pages/issues/closed.tsx
@@ -1,37 +1,37 @@
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
 import Loader from "react-spinners/ClipLoader";
-import { useState, useMemo, useEffect } from "react";
 
+import { toast } from "@/shadcn/hooks/use-toast";
+import { cn } from "@/shadcn/lib/utils";
+import { Button } from "@/shadcn/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/shadcn/ui/command";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
-  ContextMenuTrigger,
   ContextMenuSub,
-  ContextMenuSubTrigger,
   ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
 } from "@/shadcn/ui/context-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
 import { getCookie } from "cookies-next";
+import { CheckIcon, Filter, X } from "lucide-react";
 import moment from "moment";
 import Link from "next/link";
 import { useQuery } from "react-query";
 import { useUser } from "../../store/session";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
-import { CheckIcon, Filter, X } from "lucide-react";
-import { Button } from "@/shadcn/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/shadcn/ui/command";
-import { cn } from "@/shadcn/lib/utils";
-import { toast } from "@/shadcn/hooks/use-toast";
 
 async function getUserTickets(token: any) {
   const res = await fetch(`/api/v1/tickets/completed`, {
@@ -83,11 +83,32 @@ export default function Tickets() {
   const normal = "bg-green-100 text-green-800";
 
   const [filterSelected, setFilterSelected] = useState();
-  const [selectedPriorities, setSelectedPriorities] = useState<string[]>([]);
-  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
-  const [selectedAssignees, setSelectedAssignees] = useState<string[]>([]);
+  const [selectedPriorities, setSelectedPriorities] = useState<string[]>(() => {
+    const saved = localStorage.getItem('closed_selectedPriorities');
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
+    const saved = localStorage.getItem('closed_selectedStatuses');
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(() => {
+    const saved = localStorage.getItem('closed_selectedAssignees');
+    return saved ? JSON.parse(saved) : [];
+  });
   const [users, setUsers] = useState<any[]>([]);
 
+  useEffect(() => {
+    localStorage.setItem('closed_selectedPriorities', JSON.stringify(selectedPriorities));
+  }, [selectedPriorities]);
+
+  useEffect(() => {
+    localStorage.setItem('closed_selectedStatuses', JSON.stringify(selectedStatuses));
+  }, [selectedStatuses]);
+
+  useEffect(() => {
+    localStorage.setItem('closed_selectedAssignees', JSON.stringify(selectedAssignees));
+  }, [selectedAssignees]);
+
   const handlePriorityToggle = (priority: string) => {
     setSelectedPriorities((prev) =>
       prev.includes(priority)

diff --git a/apps/client/pages/issues/index.tsx b/apps/client/pages/issues/index.tsx
@@ -82,9 +82,28 @@ export default function Tickets() {
   const low = "bg-blue-100 text-blue-800";
   const normal = "bg-green-100 text-green-800";
 
-  const [selectedPriorities, setSelectedPriorities] = useState<string[]>([]);
-  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
-  const [selectedAssignees, setSelectedAssignees] = useState<string[]>([]);
+  const [selectedPriorities, setSelectedPriorities] = useState<string[]>(() => {
+    const saved = localStorage.getItem('all_selectedPriorities');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
+    const saved = localStorage.getItem('all_selectedStatuses');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(() => {
+    const saved = localStorage.getItem('all_selectedAssignees');
+    return saved ? JSON.parse(saved) : [];
+  });
+
+  // Update local storage when filters change
+  useEffect(() => {
+    localStorage.setItem('all_selectedPriorities', JSON.stringify(selectedPriorities));
+    localStorage.setItem('all_selectedStatuses', JSON.stringify(selectedStatuses));
+    localStorage.setItem('all_selectedAssignees', JSON.stringify(selectedAssignees));
+  }, [selectedPriorities, selectedStatuses, selectedAssignees]);
+
   const [users, setUsers] = useState<any[]>([]);
 
   const handlePriorityToggle = (priority: string) => {

diff --git a/apps/client/pages/issues/open.tsx b/apps/client/pages/issues/open.tsx
@@ -83,11 +83,41 @@ export default function Tickets() {
   const normal = "bg-green-100 text-green-800";
 
   const [filterSelected, setFilterSelected] = useState();
-  const [selectedPriorities, setSelectedPriorities] = useState<string[]>([]);
-  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
-  const [selectedAssignees, setSelectedAssignees] = useState<string[]>([]);
+  const [selectedPriorities, setSelectedPriorities] = useState<string[]>(() => {
+    const saved = localStorage.getItem('open_selectedPriorities');
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
+    const saved = localStorage.getItem('open_selectedStatuses');
+    return saved ? JSON.parse(saved) : [];
+  });
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(() => {
+    const saved = localStorage.getItem('open_selectedAssignees');
+    return saved ? JSON.parse(saved) : [];
+  });
   const [users, setUsers] = useState<any[]>([]);
 
+  useEffect(() => {
+    localStorage.setItem('open_selectedPriorities', JSON.stringify(selectedPriorities));
+  }, [selectedPriorities]);
+
+  useEffect(() => {
+    localStorage.setItem('open_selectedStatuses', JSON.stringify(selectedStatuses));
+  }, [selectedStatuses]);
+
+  useEffect(() => {
+    localStorage.setItem('open_selectedAssignees', JSON.stringify(selectedAssignees));
+  }, [selectedAssignees]);
+
+  const clearAllFilters = () => {
+    setSelectedPriorities([]);
+    setSelectedStatuses([]);
+    setSelectedAssignees([]);
+    localStorage.removeItem('open_selectedPriorities');
+    localStorage.removeItem('open_selectedStatuses');
+    localStorage.removeItem('open_selectedAssignees');
+  };
+
   const handlePriorityToggle = (priority: string) => {
     setSelectedPriorities((prev) =>
       prev.includes(priority)
@@ -480,11 +510,7 @@ export default function Tickets() {
                       variant="ghost"
                       size="sm"
                       className="h-6 px-2 text-xs"
-                      onClick={() => {
-                        setSelectedPriorities([]);
-                        setSelectedStatuses([]);
-                        setSelectedAssignees([]);
-                      }}
+                      onClick={clearAllFilters}
                     >
                       Clear all
                     </Button>