瀏覽代碼

feat(files): persist filters and search to localStorage

- Save enabled datasets, search term, sort field/direction, and page size
- Restore user preferences on page reload
- Use namespaced localStorage keys (fileList:*) to avoid conflicts
Timothy Pomeroy 1 月之前
父節點
當前提交
67ccd3fc0c
共有 1 個文件被更改,包括 69 次插入8 次删除
  1. 69 8
      apps/web/src/app/files/FileList.tsx

+ 69 - 8
apps/web/src/app/files/FileList.tsx

@@ -44,17 +44,78 @@ export default function FileList() {
     enabled: !!datasets
   });
 
-  // State for filters and search
-  const [enabledDatasets, setEnabledDatasets] = useState<Set<string>>(
-    new Set()
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [sortField, setSortField] = useState<"input" | "date">("date");
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+  // State for filters and search - initialize from localStorage
+  const [enabledDatasets, setEnabledDatasets] = useState<Set<string>>(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("fileList:enabledDatasets");
+      return saved ? new Set(JSON.parse(saved)) : new Set();
+    }
+    return new Set();
+  });
+  const [searchTerm, setSearchTerm] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("fileList:searchTerm") || "";
+    }
+    return "";
+  });
+  const [sortField, setSortField] = useState<"input" | "date">(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("fileList:sortField");
+      return (saved as "input" | "date") || "date";
+    }
+    return "date";
+  });
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("fileList:sortDirection");
+      return (saved as "asc" | "desc") || "desc";
+    }
+    return "desc";
+  });
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("fileList:pageSize");
+      return saved ? parseInt(saved) : 25;
+    }
+    return 25;
+  });
+
+  // Save filters to localStorage
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(
+        "fileList:enabledDatasets",
+        JSON.stringify(Array.from(enabledDatasets))
+      );
+    }
+  }, [enabledDatasets]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("fileList:searchTerm", searchTerm);
+    }
+  }, [searchTerm]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("fileList:sortField", sortField);
+    }
+  }, [sortField]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("fileList:sortDirection", sortDirection);
+    }
+  }, [sortDirection]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("fileList:pageSize", pageSize.toString());
+    }
+  }, [pageSize]);
 
   // Initialize enabled datasets when datasets are loaded
   useEffect(() => {