persistant store for authorization

components/editor/main/index.tsx

@@ -2,7 +2,6 @@
 import { useState } from "react";
 
 import { ApiRoute } from "@/utils/type";
-import axios from "@/utils/axios";
 
 import { Endpoint } from "./endpoint";
 import { Request } from "./request";

components/editor/main/request.tsx

@@ -1,6 +1,7 @@
+"use client";
 import { Toggle } from "@/components/input/toggle";
 import { TextInput } from "@/components/input/input";
-import { ApiRoute } from "@/utils/type";
+import { usePersistentState } from "@/utils/usePersistentState";
 
 export const Request = ({
   parameters,
@@ -11,11 +12,17 @@ export const Request = ({
   children: React.ReactElement;
   onChange: (key: string, value: string | boolean) => void;
 }) => {
+  const [headers, setHeaders] = usePersistentState("headers", {
+    Authorization: "hf_api_key",
+  });
+
+  console.log(headers);
+
   return (
     <div className="h-full bg-slate-900 p-5">
       {children}
       {parameters && (
-        <div className="mt-6 grid grid-cols-2 gap-6">
+        <div className="mt-6 grid grid-cols-2 gap-6 w-full">
           <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
             Optional parameters
           </p>
@@ -45,6 +52,20 @@ export const Request = ({
             ))}
         </div>
       )}
+      <div className="mt-8 grid grid-cols-1 gap-6 w-full">
+        <p className="text-slate-200 uppercase text-xs font-semibold">
+          Headers
+        </p>
+        <TextInput
+          value={headers?.Authorization}
+          label="Authorization"
+          placeholder="Authorization"
+          onlyAlphaNumeric={false}
+          onChange={(Authorization) =>
+            setHeaders({ ...headers, Authorization })
+          }
+        />
+      </div>
     </div>
   );
 };

components/input/input.tsx

@@ -5,20 +5,23 @@ interface Props {
   onChange: (value: string) => void;
   placeholder?: string;
   label?: string;
+  onlyAlphaNumeric?: boolean;
 }
 
 export const TextInput: React.FC<Props> = ({
   value,
   onChange,
   placeholder,
+  onlyAlphaNumeric = true,
   label,
 }) => {
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
     // Only allow numbers or strings
-    if (/^[0-9a-zA-Z]*$/.test(newValue)) {
-      onChange(newValue);
+    if (onlyAlphaNumeric && /^[0-9a-zA-Z]*$/.test(newValue)) {
+      return onChange(newValue);
     }
+    onChange(newValue);
   };
 
   return (

utils/axios.ts

@@ -4,7 +4,6 @@ const axios = redaxios.create({
   baseURL: process.env.NEXT_PUBLIC_APP_APIURL,
   headers: {
     'Content-Type': 'application/json',
-    Authorization: `Bearer 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`,
   },
 });
 

utils/usePersistentState.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import axios from "@/utils/axios";
+
+export const usePersistentState = (key: string, defaultValue: any) => {
+  const [state, setState] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const persistedState = localStorage?.getItem(key);
+      if (persistedState) {
+        axios.defaults.headers = {...JSON.parse(persistedState), Authorization: `Bearer ${JSON.parse(persistedState).Authorization}`}
+      }
+      return persistedState !== null ? JSON.parse(persistedState) : defaultValue;
+    }
+    return defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+    axios.defaults.headers = {...state, Authorization: `Bearer ${state.Authorization}`}
+  }, [key, state]);
+
+  return [state, setState];
+}