refactor: move complex routing logic to wouter

Author: dubisdev

README.md

@@ -42,7 +42,7 @@
 The app works with the OpenAI API, so you need to get an API key to use it.
 
 1. Get the API key [here](https://platform.openai.com/account/api-keys).
-2. Click the `⚙️` icon or type `:settings:` in the QuickGPT search bar
+2. Click the `⚙️` icon in the QuickGPT search bar
 3. Paste it in the `OpenAI API Key` field
 4. Start using it!
 

package.json

@@ -22,6 +22,7 @@
     "react-syntax-highlighter": "15.5.0",
     "tauri-settings": "0.3.4",
     "the-new-css-reset": "1.11.2",
+    "wouter": "2.12.1",
     "zustand": "4.5.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,27 +1,21 @@
-import { lazy, Suspense } from "react";
-import { useInputStore } from "./state/inputStore";
-import { useGptResponseStore } from "./state/gptResponseStore";
 import { InputBox } from "./components/InputBox";
 import styles from "./styles.module.css";
-
-const GptResponseLazy = lazy(() => import("./components/GptResponse"));
-const SettingsLazy = lazy(() => import("./components/Settings"));
-const ErrorLazy = lazy(() => import("./components/ErrorMessage"));
+import { Route, Router } from "wouter";
+import { useHashLocation } from "./hooks/useHashLocation";
+import { ErrorRoute, ResponseRoute, Routes, SettingsRoute } from "./Routes/routes";
 
 export const QuickGpt = () => {
-  const input = useInputStore(s => s.input)
-  const [gptResponse, gptResponseError] = useGptResponseStore(s => [s.gptResponse, s.error])
-
-  const shouldDisplaySettings = input.match(/^:settings:$/i);
-  const shouldDisplayGptResponse = !shouldDisplaySettings && gptResponse && !gptResponseError;
-
   return (
     <div data-tauri-drag-region className={styles.container}>
       <InputBox />
 
-      {shouldDisplayGptResponse && <Suspense><GptResponseLazy /></Suspense>}
-      {shouldDisplaySettings && <Suspense><SettingsLazy /></Suspense>}
-      {gptResponseError && <Suspense><ErrorLazy error={gptResponseError} /></Suspense>}
+      <Router hook={useHashLocation}>
+        <Route path={Routes.Response}><ResponseRoute /></Route>
+        <Route path={Routes.Settings}><SettingsRoute /></Route>
+        <Route path={Routes.Error}><ErrorRoute /></Route>
+        <Route></Route>
+      </Router>
+
     </div>
   );
 }

src/App.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react"
+import ErrorMessageComponent from "../components/ErrorMessage"
+import { useGptResponseStore } from "../state/gptResponseStore"
+import { Routes } from "./routes"
+import { useHashLocation } from "../hooks/useHashLocation"
+
+export const ErrorRoute = () => {
+    const error = useGptResponseStore(s => s.error)
+    const [_, navigate] = useHashLocation()
+
+    useEffect(() => {
+        if (!error) {
+            navigate(Routes.Home)
+        }
+    }, [error])
+
+    return <ErrorMessageComponent />
+}

src/Routes/Error.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react"
+import ResponseComponent from "../components/GptResponse"
+import { useGptResponseStore } from "../state/gptResponseStore"
+import { useHashLocation } from "../hooks/useHashLocation"
+import { Routes } from "./routes"
+
+export const ResponseRoute = () => {
+    const [_, navigate] = useHashLocation()
+    const [loadingResponse, gptResponse] = useGptResponseStore(s => [s.loadingResponse, s.gptResponse])
+    const error = useGptResponseStore(s => s.error)
+
+    useEffect(() => {
+        if (error) {
+            return navigate(Routes.Error)
+        }
+
+        if (!loadingResponse && !gptResponse) {
+            navigate(Routes.Home)
+        }
+    }, [loadingResponse, gptResponse, error])
+
+    return <ResponseComponent />
+}

src/Routes/Response.tsx

@@ -0,0 +1,5 @@
+import SettingsComponent from "../components/Settings"
+
+export const SettingsRoute = () => {
+    return <SettingsComponent />
+}

src/Routes/Settings.tsx

@@ -0,0 +1,10 @@
+export { ErrorRoute } from "./Error";
+export { SettingsRoute } from "./Settings";
+export { ResponseRoute } from "./Response";
+
+export const enum Routes {
+    Home = "/",
+    Settings = "/settings",
+    Response = "/response",
+    Error = "/error"
+}

src/Routes/routes.ts

@@ -1,6 +1,8 @@
+import { useGptResponseStore } from "../state/gptResponseStore";
 import { ResultLayout } from "./ResultLayout"
 
-const ErrorMessage = ({ error }: { error: string }) => {
+const ErrorMessage = () => {
+    const error = useGptResponseStore(s => s.error)
     return <ResultLayout>
         Error: {error}
         <br />

src/components/ErrorMessage.tsx

@@ -6,30 +6,31 @@ import styles from "./inputbox.module.css"
 import { useGptResponseStore } from "../state/gptResponseStore"
 import { LoadingIcon } from "./LoadingIcon"
 import { SettingsIcon } from "./SettingsIcon"
+import { useHashLocation } from "../hooks/useHashLocation"
+import { Routes } from "../Routes/routes"
 
 export const InputBox = () => {
+    const [_, navigate] = useHashLocation()
     const inputRef = useRef<HTMLInputElement>(null)
     const [input, setInput] = useInputStore(s => [s.input, s.setInput])
     const loading = useGptResponseStore(s => s.loadingResponse)
 
     useEffect(() => {
-        listen("focus-input", () => {
-            inputRef.current?.focus()
-        })
+        listen("focus-input", () => { inputRef.current?.focus() })
         listen("set-input", ({ payload }) => {
             inputRef.current?.focus()
             setInput(payload as string)
         })
     }, [])
 
-
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setInput(event.target.value);
     }
 
     const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === "Enter") {
             askGpt(input)
+            navigate(Routes.Response)
         }
     };
 
@@ -43,6 +44,6 @@ export const InputBox = () => {
             className={styles.inputBox}
             value={input}
         />
-        {loading ? <LoadingIcon /> : <button className={styles.settingsIcon} onClick={() => setInput(":settings:")}><SettingsIcon /></button>}
+        {loading ? <LoadingIcon /> : <SettingsIcon />}
     </div>
 }