Fix: Implement filter and auth credentials persistence on page refresh (#291)

src/hooks/useGitHubAuth.ts

@@ -1,11 +1,16 @@
-import { useState, useMemo } from 'react';
-import { Octokit } from '@octokit/core';
+import { useState, useMemo, useEffect } from 'react';
+import { Octokit } from 'octokit';
 
 export const useGitHubAuth = () => {
-  const [username, setUsername] = useState('');
-  const [token, setToken] = useState('');
+  const [username, setUsername] = useState(() => sessionStorage.getItem('tracker_username') || '');
+  const [token, setToken] = useState(() => sessionStorage.getItem('tracker_token') || '');
   const [error, setError] = useState('');
 
+  useEffect(() => {
+    sessionStorage.setItem('tracker_username', username);
+    sessionStorage.setItem('tracker_token', token);
+  }, [username, token]);
+
   const octokit = useMemo(() => {
     if (!username || !token) return null;
     return new Octokit({ auth: token });

src/pages/Tracker/Tracker.tsx

@@ -68,15 +68,26 @@ const Home: React.FC = () => {
     fetchData,
   } = useGitHubData(getOctokit);
 
-  const [tab, setTab] = useState(0);
-  const [page, setPage] = useState(0);
-
-  const [issueFilter, setIssueFilter] = useState("all");
-  const [prFilter, setPrFilter] = useState("all");
-  const [searchTitle, setSearchTitle] = useState("");
-  const [selectedRepo, setSelectedRepo] = useState("");
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
+  const [tab, setTab] = useState(() => Number(localStorage.getItem('tracker_tab')) || 0);
+  const [page, setPage] = useState(() => Number(localStorage.getItem('tracker_page')) || 0);
+
+  const [issueFilter, setIssueFilter] = useState(() => localStorage.getItem('tracker_issueFilter') || "all");
+  const [prFilter, setPrFilter] = useState(() => localStorage.getItem('tracker_prFilter') || "all");
+  const [searchTitle, setSearchTitle] = useState(() => localStorage.getItem('tracker_searchTitle') || "");
+  const [selectedRepo, setSelectedRepo] = useState(() => localStorage.getItem('tracker_selectedRepo') || "");
+  const [startDate, setStartDate] = useState(() => localStorage.getItem('tracker_startDate') || "");
+  const [endDate, setEndDate] = useState(() => localStorage.getItem('tracker_endDate') || "");
+
+  useEffect(() => {
+    localStorage.setItem('tracker_tab', String(tab));
+    localStorage.setItem('tracker_page', String(page));
+    localStorage.setItem('tracker_issueFilter', issueFilter);
+    localStorage.setItem('tracker_prFilter', prFilter);
+    localStorage.setItem('tracker_searchTitle', searchTitle);
+    localStorage.setItem('tracker_selectedRepo', selectedRepo);
+    localStorage.setItem('tracker_startDate', startDate);
+    localStorage.setItem('tracker_endDate', endDate);
+  }, [tab, page, issueFilter, prFilter, searchTitle, selectedRepo, startDate, endDate]);
 
   // Fetch data when username, tab, or page changes
   useEffect(() => {

tsconfig.app.json

@@ -19,8 +19,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }