mehedi
/
skilld-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: hide show task buttons on clicking next prev

This commit is contained in:
mehedi-hasan 2024-04-23 22:55:05 +06:00
parent a7049fc9e2
commit 40265d8c72
5 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(dashboard)/dashboard/(quiz)/layout.tsx
View File

@ -1,6 +1,6 @@
import Header from "@/components/layout/header"; import Header from "@/components/layout/header";
import Sidebar from "@/components/layout/sidebar"; 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 { createClient } from "@/utils/supabase/server";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
@ -29,14 +29,14 @@ export default async function DashboardLayout({
return ( return (
<> <>
<StoreProvider lastUpdate={new Date().getTime()}> {/* <StoreProvider lastUpdate={new Date().getTime()}> */}
<Header /> <Header />
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
<Sidebar /> <Sidebar />
<main className="w-full pt-16">{children}</main> <main className="w-full pt-16">{children}</main>
</div> </div>
</StoreProvider> {/* </StoreProvider> */}
</> </>
); );
} }

16
src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
View File

@ -29,15 +29,13 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
const content = await markdownToHtml(tutorial?.content || ""); const content = await markdownToHtml(tutorial?.content || "");
return ( return (
<> <TaskPage
<TaskPage params={params}
params={params} langTutorial={langTutorial}
langTutorial={langTutorial} tutorial={tutorial}
tutorial={tutorial} tutorialIndex={tutorialIndex}
tutorialIndex={tutorialIndex} content={content}
content={content} />
/>
</>
); );
}; };

12
src/app/layout.tsx
View File

@ -4,6 +4,7 @@ import "@uploadthing/react/styles.css";
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import StoreProvider from "@/lib/store-provider";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -21,10 +22,13 @@ export default async function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`${inter.className} overflow-x-hidden`}> <body className={`${inter.className} overflow-x-hidden`}>
<Providers> <StoreProvider lastUpdate={new Date().getTime()}>
<Toaster /> <Providers>
{children} <Toaster />
</Providers>
{children}
</Providers>
</StoreProvider>
</body> </body>
</html> </html>
); );

69
src/components/task-page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
import { import {
ResizableHandle, ResizableHandle,
@ -14,6 +14,8 @@ import { cn } from "@/lib/utils";
import EditorWindow from "@/components/task/editor-window"; import EditorWindow from "@/components/task/editor-window";
import Image from "next/image"; import Image from "next/image";
import ThemeToggle from "./layout/ThemeToggle/theme-toggle"; import ThemeToggle from "./layout/ThemeToggle/theme-toggle";
import { useQuizStore } from "@/lib/quiz-store";
import { useShallow } from "zustand/react/shallow";
interface LangTutorial { interface LangTutorial {
id: number; id: number;
@ -48,29 +50,48 @@ const TaskPage = ({
"tutorial" | "code" | "output" "tutorial" | "code" | "output"
>("tutorial"); >("tutorial");
const { isTaskPageLoading, updateTaskPageLoading } = useQuizStore(
useShallow((store) => ({
isTaskPageLoading: store.isTaskPageLoading,
updateTaskPageLoading: store.updateTaskPageLoading,
})),
);
useEffect(() => {
if (typeof window !== "undefined") {
console.log(isTaskPageLoading);
updateTaskPageLoading(false);
}
}, []);
return ( return (
<> <>
<div className="md:hidden"> <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"> <div
<Button className={cn(
variant={activeMobileView === "tutorial" ? "default" : "outline"} "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",
onClick={() => setActiveMobileView("tutorial")} isTaskPageLoading ? "translate-y-full" : "translate-y-0",
)}
> >
Tutorial <Button
</Button> variant={activeMobileView === "tutorial" ? "default" : "outline"}
<Button onClick={() => setActiveMobileView("tutorial")}
variant={activeMobileView === "code" ? "default" : "outline"} >
onClick={() => setActiveMobileView("code")} Tutorial
> </Button>
Code <Button
</Button> variant={activeMobileView === "code" ? "default" : "outline"}
<Button onClick={() => setActiveMobileView("code")}
variant={activeMobileView === "output" ? "default" : "outline"} >
onClick={() => setActiveMobileView("output")} Code
> </Button>
Output <Button
</Button> variant={activeMobileView === "output" ? "default" : "outline"}
</div> onClick={() => setActiveMobileView("output")}
>
Output
</Button>
</div>
</div> </div>
<div className="md:hidden w-full h-full"> <div className="md:hidden w-full h-full">
<div <div
@ -121,6 +142,7 @@ const TaskPage = ({
<div> <div>
{langTutorial?.tutorial[tutorialIndex - 1] && ( {langTutorial?.tutorial[tutorialIndex - 1] && (
<Link <Link
onClick={() => updateTaskPageLoading(true)}
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${
Number(params.taskId[1]) - 1 Number(params.taskId[1]) - 1
}`} }`}
@ -136,6 +158,7 @@ const TaskPage = ({
<div> <div>
{langTutorial?.tutorial[tutorialIndex + 1] && ( {langTutorial?.tutorial[tutorialIndex + 1] && (
<Link <Link
onClick={() => updateTaskPageLoading(true)}
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${
Number(params.taskId[1]) + 1 Number(params.taskId[1]) + 1
}`} }`}
@ -173,7 +196,7 @@ const TaskPage = ({
></div> ></div>
<div className="flex justify-between"> <div className="flex justify-between">
<div > <div>
{langTutorial?.tutorial[tutorialIndex - 1] && ( {langTutorial?.tutorial[tutorialIndex - 1] && (
<Link <Link
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${
@ -188,7 +211,7 @@ const TaskPage = ({
)} )}
</div> </div>
<div > <div>
{langTutorial?.tutorial[tutorialIndex + 1] && ( {langTutorial?.tutorial[tutorialIndex + 1] && (
<Link <Link
href={`/dashboard/task/${params.taskId[0]}/${ href={`/dashboard/task/${params.taskId[0]}/${

10
src/lib/quiz-store.ts
View File

@ -40,6 +40,9 @@ export interface StoreInterface {
// decrement: () => void; // decrement: () => void;
reset: () => void; reset: () => void;
correctAns: string[]; correctAns: string[];
isTaskPageLoading: boolean;
updateTaskPageLoading: (value: boolean) => void;
} }
function getDefaultInitialState() { function getDefaultInitialState() {
@ -67,6 +70,7 @@ function getDefaultInitialState() {
secondsRemaining: 210, secondsRemaining: 210,
totalCorrectAns: 0, totalCorrectAns: 0,
correctAns: [], correctAns: [],
isTaskPageLoading: false,
}; };
} }
@ -174,5 +178,11 @@ export function initializeStore(preloadedState: PreloadedStoreInterface) {
// set({ // set({
// count: getDefaultInitialState().count, // count: getDefaultInitialState().count,
// }), // }),
updateTaskPageLoading: (value) => {
console.log(value)
set({
isTaskPageLoading: value,
})},
})); }));
} }