Migrated headers over to Redux (#14)

* still don't know why the headers aren't working

* removed old state stuff

src/App.tsx

@@ -11,8 +11,6 @@ import UpdateForm from "./app/explorer/update_form";
 import { selectResources, store } from './state/store';
 import { Provider } from 'react-redux'
 import { useAppSelector } from "./hooks/store";
-import { HeadersContext } from "./state/StateContext";
-import { useState } from "react";
 
 function createRoutes(resources: ResourceSchema[]): RouteObject[] {
   const routes = [{
@@ -52,12 +50,9 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
 }
 
 function App() {
-  const [headers, setHeaders] = useState("");
   return (
     <Provider store={store} >
-      <HeadersContext.Provider value={{ headers: headers, setHeaders: setHeaders}}>
         <Routes />
-      </HeadersContext.Provider>
     </Provider>
   );
 }

src/app/explorer/form.tsx

@@ -5,7 +5,9 @@ import { useMemo, } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { toast } from "@/hooks/use-toast";
-import { useHeaders } from "@/state/StateContext";
+import { useAppSelector } from "@/hooks/store";
+import { selectHeaders } from "@/state/store";
+import { ResourceSchema } from "@/state/openapi";
 
 type CreateFormProps = {
     resource: ResourceSchema
@@ -15,7 +17,7 @@ export default function CreateForm(props: CreateFormProps) {
     const form = useForm();
     const navigate = useNavigate();
 
-    const {headers, setHeaders} = useHeaders();
+    const headers = useAppSelector(selectHeaders);
 
     const onSubmit = ((value) => {
         // Value is the properly formed JSON body.

src/app/explorer/resource_list.tsx

@@ -7,7 +7,8 @@ import { MoreHorizontal } from "lucide-react";
 import { toast } from "@/hooks/use-toast";
 import { ResourceSchema } from "@/state/openapi";
 import { ResourceInstance } from "@/state/fetch";
-import { useHeaders } from "@/state/StateContext";
+import { selectHeaders } from "@/state/store";
+import { useAppSelector } from "@/hooks/store";
 
 type ResourceListState = {
     resources: ResourceInstance[],
@@ -57,7 +58,7 @@ export default function ResourceList(props: ResourceListProps) {
 
     function createColumns(r: ResourceSchema | undefined): object[] {
         if(r) {
-            let columns = r.properties().map((prop) => {
+            const columns = r.properties().map((prop) => {
                 return {accessorKey: prop.name, header: prop.name}
             });
             columns.push(dropDownMenuColumn);
@@ -74,7 +75,7 @@ export default function ResourceList(props: ResourceListProps) {
             resources: [],
         });
 
-    const {headers, setHeaders} = useHeaders();
+    const headers = useAppSelector(selectHeaders);
 
     function deleteResource(r: object) {
         const result = state?.resources.find((result: ResourceInstance) => result.id === r.id);

src/components/app-sidebar.tsx

@@ -3,6 +3,7 @@ import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
+  SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarInput,
@@ -12,16 +13,18 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar";
 import { Link } from "react-router-dom";
-import { useAppSelector } from "@/hooks/store";
-import { selectResources } from "@/state/store";
-import { useHeaders } from "@/state/StateContext";
+import { useAppDispatch, useAppSelector } from "@/hooks/store";
+import { selectHeaders, selectResources, setHeaders } from "@/state/store";
+import { Label } from "./ui/label";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const resources = useAppSelector(selectResources);
 
   return (
     <Sidebar collapsible="icon" {...props}>
-      <SidebarHeader></SidebarHeader>
+      <SidebarHeader>
+        <HeadersInput />
+      </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupLabel>Resources</SidebarGroupLabel>
@@ -37,23 +40,34 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             ))}
           </SidebarMenu>
         </SidebarGroup>
-        <p>Headers</p>
-        <p>key:value, comma-deliniated</p>
-        <TextBoxComponent />
       </SidebarContent>
       <SidebarRail />
     </Sidebar>
   );
 }
 
-export function TextBoxComponent() {
-  const {headers, setHeaders} = useHeaders();
+export function HeadersInput() {
+  const headers = useAppSelector(selectHeaders);
+  const dispatch = useAppDispatch();
 
   const handleTextChange = (event) => {
-    setHeaders(event.target.value);
+    dispatch(setHeaders(event.target.value));
   };
 
   return (
-    <SidebarInput type="text" value={headers!} onChange={handleTextChange} />
+    <form>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="headers" className="sr-only">
+            Headers
+          </Label>
+          <SidebarInput id="headers"
+            placeholder="Headers - Key:value, comma-delineated"
+            type="text"
+            value={headers!}
+            onChange={handleTextChange} />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
   );
 }

src/state/store.ts

@@ -2,6 +2,7 @@ import { configureStore } from '@reduxjs/toolkit'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { OpenAPI } from './openapi'
 
+// Schema reducers + selectors.
 interface SchemaState {
   value: OpenAPI | null
 }
@@ -23,12 +24,6 @@ const schemaSlice = createSlice({
 const {setSchema} = schemaSlice.actions;
 const schemaReducer = schemaSlice.reducer;
 
-const store = configureStore({
-    reducer: {
-        schema: schemaReducer,
-    }
-})
-
 export const selectResources = (state: RootState) => {
   if (state.schema.value != null) {
     return state.schema.value.resources();
@@ -37,7 +32,42 @@ export const selectResources = (state: RootState) => {
   }
 }
 
-export {setSchema, schemaReducer, store}
+// Headers reducers + selectors.
+interface HeadersState {
+  value: string
+}
+
+const initialHeadersState: HeadersState = {
+  value: ""
+}
+
+const headersSlice = createSlice({
+  name: 'headers',
+  initialState: initialHeadersState,
+  reducers: {
+    setHeaders: (state, action: PayloadAction<string>) => {
+      state.value = action.payload
+    }
+  }
+})
+
+const {setHeaders} = headersSlice.actions;
+const headersReducer = headersSlice.reducer;
+
+export const selectHeaders = (state: RootState) => state.headers.value;
+
+
+
+// Store
+const store = configureStore({
+    reducer: {
+        schema: schemaReducer,
+        headers: headersReducer
+    }
+})
+
+
+export {setSchema, schemaReducer, store, setHeaders}
 
 
 // Infer the `RootState` and `AppDispatch` types from the store itself