feat: hide show task buttons on clicking next prev
This commit is contained in:
mehedi-hasan
parent
a7049fc9e2
commit
40265d8c72
|
|
@ -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 (
|
||||
<>
|
||||
<StoreProvider lastUpdate={new Date().getTime()}>
|
||||
{/* <StoreProvider lastUpdate={new Date().getTime()}> */}
|
||||
<Header />
|
||||
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className="w-full pt-16">{children}</main>
|
||||
</div>
|
||||
</StoreProvider>
|
||||
{/* </StoreProvider> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,15 +29,13 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
|
|||
|
||||
const content = await markdownToHtml(tutorial?.content || "");
|
||||
return (
|
||||
<>
|
||||
<TaskPage
|
||||
params={params}
|
||||
langTutorial={langTutorial}
|
||||
tutorial={tutorial}
|
||||
tutorialIndex={tutorialIndex}
|
||||
content={content}
|
||||
/>
|
||||
</>
|
||||
<TaskPage
|
||||
params={params}
|
||||
langTutorial={langTutorial}
|
||||
tutorial={tutorial}
|
||||
tutorialIndex={tutorialIndex}
|
||||
content={content}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${inter.className} overflow-x-hidden`}>
|
||||
<Providers>
|
||||
<Toaster />
|
||||
{children}
|
||||
</Providers>
|
||||
<StoreProvider lastUpdate={new Date().getTime()}>
|
||||
<Providers>
|
||||
<Toaster />
|
||||
|
||||
{children}
|
||||
</Providers>
|
||||
</StoreProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="md:hidden">
|
||||
<div className="flex items-center justify-center gap-4 fixed w-screen bottom-0 left-0 z-50 px-4 py-3 bg-background border-t">
|
||||
<Button
|
||||
variant={activeMobileView === "tutorial" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("tutorial")}
|
||||
<div className="md:hidden">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4 fixed w-screen bottom-0 left-0 z-50 px-4 py-3 bg-background border-t transition-transform",
|
||||
isTaskPageLoading ? "translate-y-full" : "translate-y-0",
|
||||
)}
|
||||
>
|
||||
Tutorial
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeMobileView === "code" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("code")}
|
||||
>
|
||||
Code
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeMobileView === "output" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("output")}
|
||||
>
|
||||
Output
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant={activeMobileView === "tutorial" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("tutorial")}
|
||||
>
|
||||
Tutorial
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeMobileView === "code" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("code")}
|
||||
>
|
||||
Code
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeMobileView === "output" ? "default" : "outline"}
|
||||
onClick={() => setActiveMobileView("output")}
|
||||
>
|
||||
Output
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:hidden w-full h-full">
|
||||
<div
|
||||
|
|
@ -121,6 +142,7 @@ const TaskPage = ({
|
|||
<div>
|
||||
{langTutorial?.tutorial[tutorialIndex - 1] && (
|
||||
<Link
|
||||
onClick={() => updateTaskPageLoading(true)}
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) - 1
|
||||
}`}
|
||||
|
|
@ -136,6 +158,7 @@ const TaskPage = ({
|
|||
<div>
|
||||
{langTutorial?.tutorial[tutorialIndex + 1] && (
|
||||
<Link
|
||||
onClick={() => updateTaskPageLoading(true)}
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
Number(params.taskId[1]) + 1
|
||||
}`}
|
||||
|
|
@ -173,7 +196,7 @@ const TaskPage = ({
|
|||
></div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div >
|
||||
<div>
|
||||
{langTutorial?.tutorial[tutorialIndex - 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
|
|
@ -188,7 +211,7 @@ const TaskPage = ({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div >
|
||||
<div>
|
||||
{langTutorial?.tutorial[tutorialIndex + 1] && (
|
||||
<Link
|
||||
href={`/dashboard/task/${params.taskId[0]}/${
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@ export interface StoreInterface {
|
|||
// decrement: () => 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,
|
||||
})},
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue