wip: remove unused components and restructure question handling in th…

…e store, introduced mockup guide
kalkulacka-one · Jan 9, 2025 · 4162d12 · 4162d12
1 parent 7829734
commit 4162d12
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 77 deletions.
diff --git a/apps/web/app/abc/[currentQuestion]/page.tsx → apps/web/app/abc/[questionNumber]/page.tsx b/apps/web/app/abc/[currentQuestion]/page.tsx → apps/web/app/abc/[questionNumber]/page.tsx
@@ -4,28 +4,15 @@ import { useQuestionsStore } from "../providers/storeProvider";
 
 export default function Page() {
   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 p-24">
-      <div className="bg-red-200">
-        <h2>Questions</h2>
-        {questions?.map((question: string, index) => {
-          if (currentQuestion === index + 1) {
-            return (
-              <div key={index} className="m-4 bg-red-400">
-                <span>{question}</span>
-              </div>
-            );
-          }
-        })}
-      </div>
       <div className="bg-red-200">
         <h2>Collection</h2>
-        {collection?.map((item: string, index) => {
+        {questions?.map((item: string, index) => {
           if (currentQuestion === index + 1) {
             return (
               <div key={index} className="m-4 bg-red-400">

diff --git a/apps/web/app/abc/components/counter.tsx b/apps/web/app/abc/components/counter.tsx
diff --git a/apps/web/app/abc/counter/page.tsx b/apps/web/app/abc/counter/page.tsx
diff --git a/apps/web/app/abc/layout.tsx b/apps/web/app/abc/layout.tsx
@@ -7,7 +7,7 @@ import getQuestions from "./utils/getQuestions";
 
 const baseUrl = "https://dummyjson.com/c/7ee4-a7f4-4977-bb54";
 
-const collection = await getQuestions(baseUrl);
+const questions = await getQuestions(baseUrl);
 
 export default async function RootLayout({
   children,
@@ -16,7 +16,7 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en">
-      <StoreProvider collection={collection}>
+      <StoreProvider questions={questions}>
         <UrlUpdater>
           <body>{children}</body>
         </UrlUpdater>

diff --git a/apps/web/app/abc/navod/[guideNumber]/page.tsx b/apps/web/app/abc/navod/[guideNumber]/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useQuestionsStore } from "../../providers/storeProvider";
+
+export default function Page() {
+  const guideNumber = useQuestionsStore((state) => state.guideNumber);
+  const guideContent = useQuestionsStore((state) => state.guideContent);
+  const prevGuide = useQuestionsStore((state) => state.prevGuide);
+  const nextGuide = useQuestionsStore((state) => state.nextGuide);
+  return (
+    <main className="flex min-h-screen flex-col items-center p-24">
+      <div className="bg-red-200">
+        <h2>Collection</h2>
+        {guideContent?.map((guide: string, index) => {
+          if (guideNumber === index + 1) {
+            return (
+              <div key={index} className="m-4 bg-red-400">
+                <span>{guide}</span>
+              </div>
+            );
+          }
+        })}
+      </div>
+
+      <button onClick={nextGuide}>Skip question</button>
+      <button onClick={prevGuide}>Prev question</button>
+    </main>
+  );
+}
diff --git a/apps/web/app/abc/navod/page.tsx b/apps/web/app/abc/navod/page.tsx
@@ -0,0 +1,19 @@
+// use middleware for redirection
+"use client";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useQuestionsStore } from "../providers/storeProvider";
+export default function Page() {
+  const path = usePathname();
+  const router = useRouter();
+  const guideNumber = useQuestionsStore((state) => state.guideNumber);
+  console.log(typeof path);
+  useEffect(() => {
+    console.log("Use effect");
+    if (path === "/abc/navod") {
+      router.push(`/abc/navod/${guideNumber}`);
+    }
+  }, []);
+
+  return <h1>Redirect to guide</h1>;
+}
diff --git a/apps/web/app/abc/providers/storeProvider.tsx b/apps/web/app/abc/providers/storeProvider.tsx
@@ -3,15 +3,17 @@
 import { type ReactNode, createContext, useRef, useContext } from "react";
 import { type StoreApi, createStore, useStore } from "zustand";
 
+// divide store, to the external file?
+
 type Store = {
-  count: number;
   questions: string[];
   currentQuestion: number;
-  collection: string[];
-  decrementCount: () => void;
-  incrementCount: () => void;
   prevQuestion: () => void;
   skipQuestion: () => void;
+  nextGuide: () => void;
+  prevGuide: () => void;
+  guideNumber: number;
+  guideContent: string[];
 };
 
 export const StoreContext = createContext<StoreApi<Store> | undefined>(
@@ -21,23 +23,23 @@ export const StoreContext = createContext<StoreApi<Store> | undefined>(
 // update to props with children
 export interface StoreProviderProps {
   children: ReactNode;
-  collection: string[];
+  questions: string[];
 }
 
-export const StoreProvider = ({ children, collection }: StoreProviderProps) => {
+export const StoreProvider = ({ children, questions }: 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"],
+      questions,
       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 })),
+      guideNumber: 1,
+      guideContent: ["Guide item 1", "Guide item 2", "Guide item 3"],
+      prevGuide: () => set((state) => ({ guideNumber: state.guideNumber - 1 })),
+      nextGuide: () => set((state) => ({ guideNumber: state.guideNumber + 1 })),
     }));
   }
 

diff --git a/apps/web/app/abc/store.ts b/apps/web/app/abc/store.ts