storing api key and recent source docs locally

frontend/src/Navigation.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Hamburger from './assets/hamburger.svg';
@@ -12,7 +13,6 @@ import {
   selectApiKeyStatus,
   selectSelectedDocsStatus,
 } from './preferences/preferenceSlice';
-import { useState } from 'react';
 
 //TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
 //TODO - Need to add Discord and Github links

frontend/src/preferences/APIKeyModal.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { setApiKey } from './preferenceSlice';
+import { getLocalApiKey, setLocalApiKey } from './preferenceApi';
 
 export default function APIKeyModal({
   modalState,
@@ -20,19 +21,39 @@ export default function APIKeyModal({
     if (key.length <= 1) {
       setIsError(true);
     } else {
+      setLocalApiKey(key);
       dispatch(setApiKey(key));
       setModalState('INACTIVE');
-      setKey('');
       setIsError(false);
     }
   }
 
   function handleCancel() {
-    setKey('');
+    async function getApiKey() {
+      const localKey = await getLocalApiKey();
+      if (localKey) {
+        setKey(localKey);
+      }
+    }
+
+    getApiKey();
     setIsError(false);
     setModalState('INACTIVE');
   }
 
+  useEffect(() => {
+    async function getApiKey() {
+      const localKey = await getLocalApiKey();
+      if (localKey) {
+        dispatch(setApiKey(localKey));
+        setKey(localKey);
+        setModalState('INACTIVE');
+      }
+    }
+
+    getApiKey();
+  }, []);
+
   return (
     <div
       className={`${

frontend/src/preferences/SelectDocsModal.tsx

@@ -6,7 +6,12 @@ import {
   setSourceDocs,
   selectSourceDocs,
 } from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
+import {
+  getDocs,
+  Doc,
+  getLocalRecentDocs,
+  setLocalRecentDocs,
+} from './preferenceApi';
 
 export default function APIKeyModal({
   modalState,
@@ -27,15 +32,22 @@ export default function APIKeyModal({
     if (!localSelectedDocs) {
       setIsError(true);
     } else {
+      setLocalRecentDocs(localSelectedDocs);
       dispatch(setSelectedDocs(localSelectedDocs));
       setModalState('INACTIVE');
-      setLocalSelectedDocs(null);
       setIsError(false);
     }
   }
 
   function handleCancel() {
-    setLocalSelectedDocs(null);
+    async function getRecentDocs() {
+      const recentDocs = await getLocalRecentDocs();
+      if (recentDocs) {
+        setLocalSelectedDocs(recentDocs);
+      }
+    }
+
+    getRecentDocs();
     setIsError(false);
     setModalState('INACTIVE');
   }
@@ -46,6 +58,16 @@ export default function APIKeyModal({
       dispatch(setSourceDocs(data));
     }
 
+    async function getRecentDocs() {
+      const recentDocs = await getLocalRecentDocs();
+      if (recentDocs) {
+        dispatch(setSelectedDocs(recentDocs));
+        setLocalSelectedDocs(recentDocs);
+        setModalState('INACTIVE');
+      }
+    }
+
+    getRecentDocs();
     requestDocs();
   }, []);
 

frontend/src/preferences/preferenceApi.ts

@@ -0,0 +1,73 @@
+export type Doc = {
+  name: string;
+  language: string;
+  version: string;
+  description: string;
+  fullName: string;
+  dat: string;
+  docLink: string;
+  model: string;
+};
+
+//Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
+export async function getDocs(): Promise<Doc[] | null> {
+  try {
+    const response = await fetch(
+      'https://d3dg1063dc54p9.cloudfront.net/combined.json',
+    );
+    const data = await response.json();
+
+    const docs: Doc[] = [];
+
+    data.forEach((doc: object) => {
+      docs.push(doc as Doc);
+    });
+
+    return docs;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}
+
+export async function getLocalApiKey(): Promise<string | null> {
+  try {
+    const key = localStorage.getItem('DocsGPTApiKey');
+    if (key) {
+      return key;
+    }
+    return null;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}
+
+export async function getLocalRecentDocs(): Promise<Doc | null> {
+  try {
+    const doc = localStorage.getItem('DocsGPTRecentDocs');
+    if (doc) {
+      return JSON.parse(doc);
+    }
+    return null;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}
+
+export async function setLocalApiKey(key: string): Promise<void> {
+  try {
+    localStorage.setItem('DocsGPTApiKey', key);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export async function setLocalRecentDocs(doc: Doc): Promise<void> {
+  try {
+    localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(doc));
+  } catch (error) {
+    console.log(error);
+  }
+}

frontend/src/preferences/preferenceSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { Doc } from './selectDocsApi';
+import { Doc } from './preferenceApi';
 import store from '../store';
 
 interface Preference {

frontend/src/preferences/selectDocsApi.ts

@@ -1,33 +0,0 @@
-//Exporting Doc type from here since its the first place its used and seems needless to make an entire file for it.
-export type Doc = {
-  name: string;
-  language: string;
-  version: string;
-  description: string;
-  fullName: string;
-  dat: string;
-  docLink: string;
-  model: string;
-};
-
-//Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
-export async function getDocs(): Promise<Doc[] | null> {
-  try {
-    //Fetch default source docs
-    const response = await fetch(
-      'https://d3dg1063dc54p9.cloudfront.net/combined.json',
-    );
-    const data = await response.json();
-
-    //Create array of Doc objects
-    const docs: Doc[] = [];
-
-    data.forEach((doc: object) => {
-      docs.push(doc as Doc);
-    });
-
-    return docs;
-  } catch (error) {
-    return null;
-  }
-}