From 40265d8c72334647e6df95b502601600e5238134 Mon Sep 17 00:00:00 2001 From: mehedi-hasan Date: Tue, 23 Apr 2024 22:55:05 +0600 Subject: [PATCH] feat: hide show task buttons on clicking next prev --- .../(dashboard)/dashboard/(quiz)/layout.tsx | 6 +- .../(task)/task/[...taskId]/page.tsx | 16 ++--- src/app/layout.tsx | 12 ++-- src/components/task-page.tsx | 69 ++++++++++++------- src/lib/quiz-store.ts | 10 +++ 5 files changed, 74 insertions(+), 39 deletions(-) diff --git a/src/app/(dashboard)/dashboard/(quiz)/layout.tsx b/src/app/(dashboard)/dashboard/(quiz)/layout.tsx index 200d0f7..0498a35 100644 --- a/src/app/(dashboard)/dashboard/(quiz)/layout.tsx +++ b/src/app/(dashboard)/dashboard/(quiz)/layout.tsx @@ -1,6 +1,6 @@ import Header from "@/components/layout/header"; import Sidebar from "@/components/layout/sidebar"; -import StoreProvider from "@/lib/store-provider"; +// import StoreProvider from "@/lib/store-provider"; import { createClient } from "@/utils/supabase/server"; import type { Metadata } from "next"; import { redirect } from "next/navigation"; @@ -29,14 +29,14 @@ export default async function DashboardLayout({ return ( <> - + {/* */}
{children}
- + {/* */} ); } diff --git a/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx b/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx index c69d5a1..70266df 100644 --- a/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx +++ b/src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx @@ -29,15 +29,13 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => { const content = await markdownToHtml(tutorial?.content || ""); return ( - <> - - + ); }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 48d6102..2604ed9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import "@uploadthing/react/styles.css"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import StoreProvider from "@/lib/store-provider"; const inter = Inter({ subsets: ["latin"] }); @@ -21,10 +22,13 @@ export default async function RootLayout({ return ( - - - {children} - + + + + + {children} + + ); diff --git a/src/components/task-page.tsx b/src/components/task-page.tsx index 25fb5f7..5d8b574 100644 --- a/src/components/task-page.tsx +++ b/src/components/task-page.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { ScrollArea } from "@/components/ui/scroll-area"; import { ResizableHandle, @@ -14,6 +14,8 @@ import { cn } from "@/lib/utils"; import EditorWindow from "@/components/task/editor-window"; import Image from "next/image"; import ThemeToggle from "./layout/ThemeToggle/theme-toggle"; +import { useQuizStore } from "@/lib/quiz-store"; +import { useShallow } from "zustand/react/shallow"; interface LangTutorial { id: number; @@ -48,29 +50,48 @@ const TaskPage = ({ "tutorial" | "code" | "output" >("tutorial"); + const { isTaskPageLoading, updateTaskPageLoading } = useQuizStore( + useShallow((store) => ({ + isTaskPageLoading: store.isTaskPageLoading, + updateTaskPageLoading: store.updateTaskPageLoading, + })), + ); + + useEffect(() => { + if (typeof window !== "undefined") { + console.log(isTaskPageLoading); + updateTaskPageLoading(false); + } + }, []); + return ( <> -
-
- - - -
+ + + +
{langTutorial?.tutorial[tutorialIndex - 1] && ( updateTaskPageLoading(true)} href={`/dashboard/task/${params.taskId[0]}/${ Number(params.taskId[1]) - 1 }`} @@ -136,6 +158,7 @@ const TaskPage = ({
{langTutorial?.tutorial[tutorialIndex + 1] && ( updateTaskPageLoading(true)} href={`/dashboard/task/${params.taskId[0]}/${ Number(params.taskId[1]) + 1 }`} @@ -173,7 +196,7 @@ const TaskPage = ({ >
-
+
{langTutorial?.tutorial[tutorialIndex - 1] && ( -
+
{langTutorial?.tutorial[tutorialIndex + 1] && ( void; reset: () => void; correctAns: string[]; + + isTaskPageLoading: boolean; + updateTaskPageLoading: (value: boolean) => void; } function getDefaultInitialState() { @@ -67,6 +70,7 @@ function getDefaultInitialState() { secondsRemaining: 210, totalCorrectAns: 0, correctAns: [], + isTaskPageLoading: false, }; } @@ -174,5 +178,11 @@ export function initializeStore(preloadedState: PreloadedStoreInterface) { // set({ // count: getDefaultInitialState().count, // }), + + updateTaskPageLoading: (value) => { + console.log(value) + set({ + isTaskPageLoading: value, + })}, })); }