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

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "GitHub Tracker",
+  "name": "github-tracker",
   "private": true,
   "version": "0.0.0",
   "type": "module",

src/hooks/useGitHubAuth.ts

@@ -1,25 +1,45 @@
-import { useState, useMemo } from 'react';
-import { Octokit } from '@octokit/core';
+import { useState, 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('');
 
-  const octokit = useMemo(() => {
-    if (!username) return null;
-    if(token){
-    return new Octokit({ auth: token });
+  useEffect(() => {
+    if (username) {
+      sessionStorage.setItem('tracker_username', username);
+    } else {
+      sessionStorage.removeItem('tracker_username');
+    }
+    if (token) {
+      sessionStorage.setItem('tracker_token', token);
+    } else {
+      sessionStorage.removeItem('tracker_token');
     }
-    return new Octokit();
   }, [username, token]);
 
-  const getOctokit = () => octokit;
+  const getOctokit = () => {
+    try {
+      setError('');
+      if (!username) return null;
+      if (token) {
+        return new Octokit({ auth: token });
+      }
+      return new Octokit();
+    } catch (err: any) {
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    }
+  };
 
   return {
     username,
     setUsername,
     token,
     setToken,
+    error,
+    setError,
     getOctokit,
   };
 };

src/pages/Tracker/Tracker.tsx

@@ -69,15 +69,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"]
 }