wip: migrated from mockup counter store to questions store, update co…

…mponents and layout accordingly
kalkulacka-one · Jan 9, 2025 · 0f3bcea · 0f3bcea
1 parent c37dc88
commit 0f3bcea
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 121 deletions.
diff --git a/apps/web/app/abc/[currentQuestion]/page.tsx b/apps/web/app/abc/[currentQuestion]/page.tsx
@@ -1,24 +1,18 @@
 "use client";
 
-import { useCounterStore } from "../providers/counterStoreProvider";
-
-type Question = {
-  id: string;
-  title: string;
-  statement: string;
-  detail: string;
-  tags: string[];
-};
+import { useQuestionsStore } from "../providers/storeProvider";
 
 export default function Page() {
-  const questions = useCounterStore((state) => state.questions);
-  const currentQuestion = useCounterStore((state) => state.currentQuestion);
-  const prevQuestion = useCounterStore((state) => state.prevQuestion);
-  const skipQuestion = useCounterStore((state) => state.skipQuestion);
+  const questions = useQuestionsStore((state) => state.questions);
+  const collection = useQuestionsStore((state) => state.collection);
+  const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
+  const prevQuestion = useQuestionsStore((state) => state.prevQuestion);
+  const skipQuestion = useQuestionsStore((state) => state.skipQuestion);
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
+    <main className="flex min-h-screen flex-col items-center p-24">
+      <div className="bg-red-200">
+        <h2>Questions</h2>
         {questions?.map((question: string, index) => {
           if (currentQuestion === index + 1) {
             return (
@@ -29,6 +23,19 @@ export default function Page() {
           }
         })}
       </div>
+      <div className="bg-red-200">
+        <h2>Collection</h2>
+        {collection?.map((item: string, index) => {
+          if (currentQuestion === index + 1) {
+            return (
+              <div key={index} className="m-4 bg-red-400">
+                <span>{item}</span>
+              </div>
+            );
+          }
+        })}
+      </div>
+
       <button onClick={skipQuestion}>Skip question</button>
       <button onClick={prevQuestion}>Prev question</button>
     </main>

diff --git a/apps/web/app/abc/components/counter.tsx b/apps/web/app/abc/components/counter.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useCounterStore } from "../providers/counterStoreProvider";
+import { useQuestionsStore } from "../providers/storeProvider";
 
 export default function Counter() {
-  const { count, incrementCount, decrementCount } = useCounterStore(
+  const { count, incrementCount, decrementCount } = useQuestionsStore(
     (state) => state,
   );
 

diff --git a/apps/web/app/abc/layout.tsx b/apps/web/app/abc/layout.tsx
@@ -1,21 +1,24 @@
 import "../globals.css";
 import "@repo/design-system/styles";
 import "@repo/design-system/themes/theme-default";
-import { CounterStoreProvider } from "./providers/counterStoreProvider";
+import { StoreProvider } from "./providers/storeProvider";
 import UrlUpdater from "./utils/urlUpdater";
 
+const collection = ["Collection 1", "Collection 2", "Collection 3"];
+
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  console.log(collection);
   return (
     <html lang="en">
-      <CounterStoreProvider>
+      <StoreProvider collection={collection}>
         <UrlUpdater>
           <body>{children}</body>
         </UrlUpdater>
-      </CounterStoreProvider>
+      </StoreProvider>
     </html>
   );
 }
diff --git a/apps/web/app/abc/page.tsx b/apps/web/app/abc/page.tsx
@@ -1,42 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCounterStore } from "./providers/counterStoreProvider";
-
-type Question = {
-  id: string;
-  title: string;
-  statement: string;
-  detail: string;
-  tags: string[];
-};
-
 export default function Page() {
-  // const [isLoading, setIsLoading] = useState(true);
-  const questions = useCounterStore((state) => state.questions);
-  const currentQuestion = useCounterStore((state) => state.currentQuestion);
-  const prevQuestion = useCounterStore((state) => state.prevQuestion);
-  const skipQuestion = useCounterStore((state) => state.skipQuestion);
-  // 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>Needs redirect</div>

diff --git a/apps/web/app/abc/providers/counterStoreProvider.tsx b/apps/web/app/abc/providers/counterStoreProvider.tsx
diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { type ReactNode, createContext, useRef, useContext } from "react";
+import { type StoreApi, createStore, useStore } from "zustand";
+
+type Store = {
+  count: number;
+  questions: string[];
+  currentQuestion: number;
+  collection: string[];
+  decrementCount: () => void;
+  incrementCount: () => void;
+  prevQuestion: () => void;
+  skipQuestion: () => void;
+};
+
+export const StoreContext = createContext<StoreApi<Store> | undefined>(
+  undefined,
+);
+
+// update to props with children
+export interface StoreProviderProps {
+  children: ReactNode;
+  collection: string[];
+}
+
+export const StoreProvider = ({ children, collection }: StoreProviderProps) => {
+  const storeRef = useRef<StoreApi<Store> | undefined>();
+  if (!storeRef.current) {
+    storeRef.current = createStore<Store>((set) => ({
+      collection,
+      count: 1,
+      questions: ["Item 1", "Item 2", "Item 3"],
+      currentQuestion: 1,
+      decrementCount: () => set((state) => ({ count: state.count - 1 })),
+      incrementCount: () => set((state) => ({ count: state.count + 1 })),
+      prevQuestion: () =>
+        set((state) => ({ currentQuestion: state.currentQuestion - 1 })),
+      skipQuestion: () =>
+        set((state) => ({ currentQuestion: state.currentQuestion + 1 })),
+    }));
+  }
+
+  return (
+    <StoreContext.Provider value={storeRef.current}>
+      {children}
+    </StoreContext.Provider>
+  );
+};
+
+export function useQuestionsStore<U>(selector: (state: Store) => U): U {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error("Missing StoreProvider");
+  }
+  return useStore(store, selector);
+}
diff --git a/apps/web/app/abc/store.ts b/apps/web/app/abc/store.ts
@@ -4,6 +4,7 @@ export type CounterState = {
   count: number;
   questions: string[];
   currentQuestion: number;
+  collection: string[];
 };
 
 export type CounterActions = {
@@ -14,23 +15,3 @@ export type CounterActions = {
 };
 
 export type CounterStore = CounterState & CounterActions;
-
-export const defaultInitState: CounterState = {
-  count: 0,
-  questions: ["Item 1", "Item 2", "Item 3"],
-  currentQuestion: 1,
-};
-
-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 })),
-    prevQuestion: () =>
-      set((state) => ({ currentQuestion: state.currentQuestion - 1 })),
-    skipQuestion: () =>
-      set((state) => ({ currentQuestion: state.currentQuestion + 1 })),
-  }));
-};
diff --git a/apps/web/app/abc/utils/urlUpdater.tsx b/apps/web/app/abc/utils/urlUpdater.tsx
@@ -1,13 +1,13 @@
 "use client";
 import { useEffect } from "react";
-import { useCounterStore } from "../providers/counterStoreProvider";
+import { useQuestionsStore } from "../providers/storeProvider";
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function UrlUpdater({ children }: Props) {
-  const currentQuestion = useCounterStore((state) => state.currentQuestion);
+  const currentQuestion = useQuestionsStore((state) => state.currentQuestion);
 
   useEffect(() => {
     // change url