openAPI (#43)

* chores_lint_errors_and_path_issues

* feature_db_py

* fix_audio_issue

* chores_lint_error

* fix_openAPI_switching

* chore_module_insert

.gitignore

@@ -21,5 +21,5 @@ dist/
 out*/
 venv/
 
-
+.env
 linguaphoto/.env

frontend/package.json

@@ -15,6 +15,7 @@
     "clsx": "^2.1.1",
     "holderjs": "^2.9.9",
     "nth-check": "^2.1.1",
+    "openapi-fetch": "^0.12.2",
     "react": "^18.3.1",
     "react-beautiful-dnd-grid": "^0.1.3-alpha",
     "react-bootstrap-icons": "^1.11.4",

frontend/src/App.tsx

@@ -13,7 +13,6 @@ import LoginPage from "pages/Login";
 import NotFound from "pages/NotFound";
 import SubscriptionTypePage from "pages/SubscriptioinType";
 import SubscriptionCancelPage from "pages/Subscription";
-import Test from "pages/Test";
 import PrivateRoute from "ProtectedRoute";
 import { Container } from "react-bootstrap";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
@@ -30,7 +29,6 @@ const App = () => {
                 <Container>
                   <Routes>
                     <Route path="/" element={<Home />} />
-                    <Route path="/test" element={<Test />} />
                     <Route path="/404" element={<NotFound />} />
                     <Route
                       path="/collections"

frontend/src/api/api.ts

@@ -75,11 +75,9 @@ export class Api {
     return response.data;
   }
   public async translateImages(images: Array<string>): Promise<Array<Image>> {
-    const response = await this.api.post(
-      "/translate",
-      { images },
-      { timeout: 300000 },
-    );
+    const response = await this.api.post("/translate", images, {
+      timeout: 300000,
+    });
     return response.data;
   }
 

frontend/src/contexts/AuthContext.tsx

@@ -1,53 +1,111 @@
 // src/context/AuthContext.tsx
-import { read_me } from "api/auth";
+import { components, paths } from "gen/api";
+import createClient, { Client } from "openapi-fetch";
 import React, {
   createContext,
   ReactNode,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from "react";
-import { Response } from "types/auth";
 
 interface AuthContextType {
-  auth: Response | null;
-  setAuth: React.Dispatch<React.SetStateAction<Response | null>>;
+  auth: components["schemas"]["UserInfoResponseItem"] | undefined;
+  setAuth: React.Dispatch<
+    React.SetStateAction<
+      components["schemas"]["UserInfoResponseItem"] | undefined
+    >
+  >;
+  setApiKeyId: React.Dispatch<React.SetStateAction<string | null>>;
   signout: () => void;
+  apiKeyId: string | null;
+  client: Client<paths>;
 }
 
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
+const getLocalStorageAuth = (): string | null => {
+  return localStorage.getItem("token");
+};
+
+export const setLocalStorageAuth = (id: string) => {
+  localStorage.setItem("token", id);
+};
+
+export const deleteLocalStorageAuth = () => {
+  localStorage.removeItem("token");
+};
 
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
 const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [auth, setAuth] = useState<Response | null>(null);
+  const [auth, setAuth] = useState<
+    components["schemas"]["UserInfoResponseItem"] | undefined
+  >(undefined);
+  const [apiKeyId, setApiKeyId] = useState<string | null>(
+    getLocalStorageAuth(),
+  );
   const signout = () => {
     localStorage.removeItem("token");
-    setAuth({});
+    setAuth(undefined);
+    setApiKeyId("");
   };
+  const client = useMemo(
+    () =>
+      createClient<paths>({
+        baseUrl: process.env.REACT_APP_BACKEND_URL,
+      }),
+    [apiKeyId],
+  );
   useEffect(() => {
-    const token = localStorage.getItem("token");
-    if (token) {
-      const fetch_data = async (token: string) => {
-        try {
-          const response = await read_me(token);
-          setAuth(response);
-        } catch {
-          return;
+    if (apiKeyId !== null) {
+      setLocalStorageAuth(apiKeyId);
+      client.use({
+        async onRequest({ request }) {
+          request.headers.set("Authorization", `Bearer ${apiKeyId}`);
+          return request;
+        },
+        async onResponse({ response }) {
+          return response;
+        },
+      });
+    }
+  }, [apiKeyId, client]);
+  useEffect(() => {
+    if (apiKeyId) {
+      const fetch_data = async () => {
+        const { data, error } = await client.GET("/me");
+        if (error) {
+          console.error("Failed to fetch current user", error);
+        } else {
+          setAuth(data);
+          setApiKeyId(data.token);
         }
       };
-      fetch_data(token);
+      fetch_data();
     } else signout();
-  }, []);
+  }, [apiKeyId, client]);
+
   useEffect(() => {
-    if (auth?.token) {
-      localStorage.setItem("token", auth.token);
+    if (apiKeyId !== null) {
+      client.use({
+        async onRequest({ request }) {
+          request.headers.set("Authorization", `Bearer ${apiKeyId}`);
+          return request;
+        },
+        async onResponse({ response }) {
+          return response;
+        },
+      });
     }
-  }, [auth?.token]);
+  }, [apiKeyId, client]);
   return (
     <AuthContext.Provider
       value={{
         auth,
         setAuth,
         signout,
+        client,
+        apiKeyId,
+        setApiKeyId,
       }}
     >
       {children}

frontend/src/contexts/api.tsx

@@ -0,0 +1,28 @@
+import type { paths } from "gen/api";
+import { Client } from "openapi-fetch";
+
+export default class api {
+  public client: Client<paths>;
+
+  constructor(client: Client<paths>) {
+    this.client = client;
+  }
+
+  public async upload(files: File[], listing_id: string) {
+    return await this.client.POST("/artifacts/upload/{listing_id}", {
+      body: {
+        files: [],
+      },
+      params: {
+        path: {
+          listing_id,
+        },
+      },
+      bodySerializer() {
+        const fd = new FormData();
+        files.forEach((file) => fd.append("files", file));
+        return fd;
+      },
+    });
+  }
+}