messing around with next.js

.vscode/settings.json

@@ -2,8 +2,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "json.validate.enable": true,
-    "javascript.preferences.importModuleSpecifierEnding": "js",
-    "typescript.preferences.importModuleSpecifierEnding": "js",
+    "javascript.preferences.importModuleSpecifierEnding": "auto",
+    "typescript.preferences.importModuleSpecifierEnding": "auto",
     "restoreTerminals.keepExistingTerminalsOpen": false,
     "restoreTerminals.runOnStartup": false,
     "restoreTerminals.terminals": [

external/oapi

@@ -1 +1 @@
-Subproject commit be9181459923f389ca4d8c48aa5ff55a70795e10
+Subproject commit dba9cb614835c69be8dbb4868e024767a5568be9

pnpm-lock.yaml

@@ -387,6 +387,9 @@ importers:
       typescript:
         specifier: 5.1.6
         version: 5.1.6
+      zustand:
+        specifier: ^4.3.9
+        version: 4.3.9(react@18.2.0)
 
 packages:
 
@@ -7640,6 +7643,14 @@ packages:
     dependencies:
       punycode: 2.3.0
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -7939,3 +7950,19 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
+
+  /zustand@4.3.9(react@18.2.0):
+    resolution: {integrity: sha512-Tat5r8jOMG1Vcsj8uldMyqYKC5IZvQif8zetmLHs9WoZlntTHmIoNM8TpLRY31ExncuUvUOXehd0kvahkuHjDw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false

web/package.json

@@ -15,13 +15,14 @@
         "autoprefixer": "10.4.14",
         "eslint": "8.45.0",
         "eslint-config-next": "13.4.10",
+        "lib": "workspace:*",
         "next": "13.4.10",
+        "oapilib": "workspace:*",
         "postcss": "8.4.26",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwindcss": "3.3.3",
         "typescript": "5.1.6",
-        "lib": "workspace:*",
-        "oapilib": "workspace:*"
+        "zustand": "^4.3.9"
     }
 }

web/src/app/page.tsx

@@ -1,12 +1,18 @@
-import {} from "lib";
+"use client";
+
+import type {} from "lib";
 import { API } from "oapilib";
+import { TestComponent } from "../components/test";
+import { useBearStore } from "@/components/state";
 
 const api = new API({
     baseURL: "http://localhost:3000",
     authentication: { headers: { Authorization: "Bearer banana" } },
 });
 
-export default async function Home() {
-    const deez = await api.get("/auth");
-    return <h1>{JSON.stringify(deez, null, 4)}</h1>;
+export default function Home() {
+    const state = useBearStore();
+    state.api = api; // todo fix this
+
+    return <TestComponent />;
 }

web/src/components/state.tsx

@@ -0,0 +1,10 @@
+import { API } from "oapilib";
+import { create } from "zustand";
+
+type State = {
+    api: API;
+};
+
+export const useBearStore = create<State>((set) => ({
+    api: new API({ baseURL: "http://localhost:3000" }),
+}));

web/src/components/test.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useBearStore } from "./state";
+import { AuthInfo } from "oapilib";
+
+export function TestComponent() {
+    const state = useBearStore();
+    const [data, setData] = useState<AuthInfo | null>(null);
+
+    useEffect(() => {
+        state.api.get("/auth").then((data) => setData(data));
+    });
+
+    return <div>{data ? JSON.stringify(data) : "loading"}</div>;
+}

web/tsconfig.json

@@ -1,28 +1,28 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    "exclude": ["node_modules"]
 }