Moved Doc type to selectDocsApi

Moved /api/docs.ts to /preference/selectDocsApi.ts
Added all source docs to redux

frontend/src/Navigation.tsx

@@ -108,17 +108,16 @@ export default function Navigation({
       >
         <img src={Hamburger} alt="menu toggle" className="w-7" />
       </button>
-
-      <APIKeyModal
-        modalState={apiKeyModalState}
-        setModalState={setApiKeyModalState}
-        isCancellable={isApiKeySet}
-      />
       <SelectDocsModal
         modalState={selectedDocsModalState}
         setModalState={setSelectedDocsModalState}
         isCancellable={isSelectedDocsSet}
       />
+      <APIKeyModal
+        modalState={apiKeyModalState}
+        setModalState={setApiKeyModalState}
+        isCancellable={isApiKeySet}
+      />
     </>
   );
 }

frontend/src/api/docs.ts

@@ -1,22 +0,0 @@
-import { Doc } from '../models/misc';
-
-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: Array<Doc> = [];
-
-    data.forEach((doc: Doc) => {
-      docs.push(doc);
-    });
-
-    return docs;
-  } catch (error) {
-    return null;
-  }
-}

frontend/src/models/misc.ts

@@ -3,14 +3,3 @@ export type ActiveState = 'ACTIVE' | 'INACTIVE';
 export type User = {
   avatar: string;
 };
-
-export type Doc = {
-  name: string;
-  language: string;
-  version: string;
-  description: string;
-  fullName: string;
-  dat: string;
-  docLink: string;
-  model: string;
-};

frontend/src/preferences/SelectDocsModal.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState, Doc } from '../models/misc';
+import { ActiveState } from '../models/misc';
-import { setSelectedDocs } from './preferenceSlice';
+import { Doc } from './selectDocsApi';
-import { getDocs } from '../api/docs';
+import {
+  setSelectedDocs,
+  setSourceDocs,
+  selectSourceDocs,
+} from './preferenceSlice';
+import { getDocs } from './selectDocsApi';
 
 export default function APIKeyModal({
   modalState,
@@ -14,7 +19,7 @@ export default function APIKeyModal({
   isCancellable?: boolean;
 }) {
   const dispatch = useDispatch();
-  const [docs, setDocs] = useState<Doc[] | null>(null);
+  const docs = useSelector(selectSourceDocs);
   const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -39,7 +44,7 @@ export default function APIKeyModal({
   useEffect(() => {
     async function requestDocs() {
       const data = await getDocs();
-      setDocs(data);
+      dispatch(setSourceDocs(data));
     }
 
     requestDocs();

frontend/src/preferences/preferenceSlice.ts

@@ -1,15 +1,17 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { Doc } from '../models/misc';
+import { Doc } from './selectDocsApi';
 import store from '../store';
 
 interface Preference {
   apiKey: string;
   selectedDocs: Doc | null;
+  sourceDocs: Doc[] | null;
 }
 
 const initialState: Preference = {
   apiKey: '',
   selectedDocs: null,
+  sourceDocs: null,
 };
 
 export const prefSlice = createSlice({
@@ -21,11 +23,16 @@ export const prefSlice = createSlice({
     },
     setSelectedDocs: (state, action) => {
       state.selectedDocs = action.payload;
+      console.log('setSelectedDocs', state.selectedDocs);
+    },
+    setSourceDocs: (state, action) => {
+      state.sourceDocs = action.payload;
+      console.log('setSourceDocs', state.sourceDocs);
     },
   },
 });
 
-export const { setApiKey, setSelectedDocs } = prefSlice.actions;
+export const { setApiKey, setSelectedDocs, setSourceDocs } = prefSlice.actions;
 export default prefSlice.reducer;
 
 type RootState = ReturnType<typeof store.getState>;
@@ -35,3 +42,5 @@ export const selectApiKeyStatus = (state: RootState) =>
   !!state.preference.apiKey;
 export const selectSelectedDocsStatus = (state: RootState) =>
   !!state.preference.selectedDocs;
+export const selectSourceDocs = (state: RootState) =>
+  state.preference.sourceDocs;

frontend/src/preferences/selectDocsApi.ts

@@ -0,0 +1,33 @@
+//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: Doc) => {
+      docs.push(doc);
+    });
+
+    return docs;
+  } catch (error) {
+    return null;
+  }
+}