wip: questionsPage (/xyz) refactor within /abc route, context test, b…

…rowserTab title test
kalkulacka-one · Jan 9, 2025 · d82d4b1 · d82d4b1
1 parent 5a180e2
commit d82d4b1
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 0 deletions.
diff --git a/apps/web/app/abc/components/counter.tsx b/apps/web/app/abc/components/counter.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useCounterStore } from "../providers/counterStoreProvider";
+
+export default function Counter() {
+  const { count, incrementCount, decrementCount } = useCounterStore(
+    (state) => state,
+  );
+
+  return (
+    <div>
+      Count: {count}
+      <hr />
+      <button type="button" onClick={() => void incrementCount()}>
+        Increment Count
+      </button>
+      <button type="button" onClick={() => void decrementCount()}>
+        Decrement Count
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/app/abc/counter/page.tsx b/apps/web/app/abc/counter/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import Counter from "../components/counter";
+
+export default function Page() {
+  return (
+    <div>
+      <Counter />
+    </div>
+  );
+}
diff --git a/apps/web/app/abc/layout.tsx b/apps/web/app/abc/layout.tsx
@@ -0,0 +1,21 @@
+import "../globals.css";
+import "@repo/design-system/styles";
+import "@repo/design-system/themes/theme-default";
+import { CounterStoreProvider } from "./providers/counterStoreProvider";
+import UrlUpdater from "./utils/urlUpdater";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <CounterStoreProvider>
+        <UrlUpdater>
+          <body>{children}</body>
+        </UrlUpdater>
+      </CounterStoreProvider>
+    </html>
+  );
+}
diff --git a/apps/web/app/abc/page.tsx b/apps/web/app/abc/page.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Question = {
+  id: string;
+  title: string;
+  statement: string;
+  detail: string;
+  tags: string[];
+};
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [questions, setQuestions] = useState([]);
+
+  useEffect(() => {
+    // make a generic fn
+    async function fetchQuestions() {
+      const res = await fetch(
+        "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+      );
+      const data = await res.json();
+      setQuestions(data);
+      setIsLoading(false);
+    }
+    fetchQuestions();
+  }, []);
+
+  // loading ui
+  if (isLoading) {
+    return <h1>Data is Loading</h1>;
+  }
+  // loaded ui
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div>
+        {questions?.map((question: Question) => {
+          return (
+            <div key={question.id} className="m-4 bg-red-400">
+              <span>{question.statement}</span>
+            </div>
+          );
+        })}
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/app/abc/providers/counterStoreProvider.tsx b/apps/web/app/abc/providers/counterStoreProvider.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { type ReactNode, createContext, useRef, useContext } from "react";
+import { useStore } from "zustand";
+
+import { type CounterStore, createCounterStore } from "../store";
+
+export type CounterStoreApi = ReturnType<typeof createCounterStore>;
+
+export const CounterStoreContext = createContext<CounterStoreApi | undefined>(
+  undefined,
+);
+
+export interface CounterStoreProviderProps {
+  children: ReactNode;
+}
+
+export const CounterStoreProvider = ({
+  children,
+}: CounterStoreProviderProps) => {
+  const storeRef = useRef<CounterStoreApi>();
+  if (!storeRef.current) {
+    storeRef.current = createCounterStore();
+  }
+
+  return (
+    <CounterStoreContext.Provider value={storeRef.current}>
+      {children}
+    </CounterStoreContext.Provider>
+  );
+};
+
+export const useCounterStore = <T,>(
+  selector: (store: CounterStore) => T,
+): T => {
+  const counterStoreContext = useContext(CounterStoreContext);
+
+  if (!counterStoreContext) {
+    throw new Error(`useCounterStore must be used within CounterStoreProvider`);
+  }
+
+  return useStore(counterStoreContext, selector);
+};
diff --git a/apps/web/app/abc/store.ts b/apps/web/app/abc/store.ts
@@ -0,0 +1,26 @@
+import { createStore } from "zustand/vanilla";
+
+export type CounterState = {
+  count: number;
+};
+
+export type CounterActions = {
+  decrementCount: () => void;
+  incrementCount: () => void;
+};
+
+export type CounterStore = CounterState & CounterActions;
+
+export const defaultInitState: CounterState = {
+  count: 0,
+};
+
+export const createCounterStore = (
+  initState: CounterState = defaultInitState,
+) => {
+  return createStore<CounterStore>()((set) => ({
+    ...initState,
+    decrementCount: () => set((state) => ({ count: state.count - 1 })),
+    incrementCount: () => set((state) => ({ count: state.count + 1 })),
+  }));
+};
diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -0,0 +1,19 @@
+"use client";
+import { useEffect } from "react";
+import { useCounterStore } from "../providers/counterStoreProvider";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function UrlUpdater({ children }: Props) {
+  const count = useCounterStore((state) => state.count);
+
+  useEffect(() => {
+    function changeTitle() {
+      document.title = `Hello World: ${count}`;
+    }
+    changeTitle();
+  }, [count]);
+  return children;
+}