diff --git a/src/core/components/media_tester/youtube_video_url_tester.tsx b/src/core/components/media_tester/youtube_video_url_tester.tsx index 555d3ae..e156830 100644 --- a/src/core/components/media_tester/youtube_video_url_tester.tsx +++ b/src/core/components/media_tester/youtube_video_url_tester.tsx @@ -12,7 +12,6 @@ export function YouTubeVideoUrlTester({ media: OptionalStringValueProperty; setMedia: Dispatch>; }) { - console.log(media); return (
{media.status !== "success" && ( diff --git a/src/features/admin_tools/index.tsx b/src/features/admin_tools/index.tsx index bb0d0b5..7c8cc04 100644 --- a/src/features/admin_tools/index.tsx +++ b/src/features/admin_tools/index.tsx @@ -3,9 +3,11 @@ import { LessonSideBar } from "./lesson_side_bar"; import { ThemeSideBar } from "./theme_side_bar"; import { InteractiveFeedbacks } from "@/core/components/interactive_feedbacks"; import { useAdminViewModelContext } from "../theme_page/view_model/context_providers/admin_view_model"; +import { useBaseViewModelContext } from "../theme_page/view_model/context_providers/base_view_model"; export function AdminTools() { const { stalling, snackbar, setSnackbar } = useAdminViewModelContext()!; + const { activeLesson } = useBaseViewModelContext()!; const [isThemeSideBarOpen, setIsThemeSideBarOpen] = useState(false); const [isLessonSideBarOpen, setIsLessonSideBarOpen] = useState(false); @@ -16,11 +18,14 @@ export function AdminTools() { isOpen={isThemeSideBarOpen} setIsOpen={setIsThemeSideBarOpen} /> - + {activeLesson !== null && ( + + )} >; hide: boolean; + activeLesson: number; }) { const pathname = usePathname(); const { push } = useRouter(); const [modified, setModified] = useState(false); const [adminLessonTitle, setAdminLessonTitle] = useState(""); const [adminLessonExplanation, setAdminLessonExplanation] = useState(""); - const { activeLesson, lessons } = useBaseViewModelContext()!; + const { lessons } = useBaseViewModelContext()!; const { saveLesson, createNewLesson, diff --git a/src/features/landing_page_view/theme_card/theme_card.tsx b/src/features/landing_page_view/theme_card/theme_card.tsx index 18d9084..55bd137 100644 --- a/src/features/landing_page_view/theme_card/theme_card.tsx +++ b/src/features/landing_page_view/theme_card/theme_card.tsx @@ -10,7 +10,7 @@ export function ThemeCard({ themeMeta }: { themeMeta: ThemeMetaDTO }) { return (
  • { return ; })} + {/* */}
    • diff --git a/src/features/theme_page/model/base_view_model.ts b/src/features/theme_page/model/base_view_model.ts index da8c94d..547f7db 100644 --- a/src/features/theme_page/model/base_view_model.ts +++ b/src/features/theme_page/model/base_view_model.ts @@ -18,7 +18,7 @@ export interface BaseViewModel { setThemeYoutubeVideoUrl: Dispatch< SetStateAction >; - activeLesson: number; + activeLesson: number | null; setActiveLesson: Dispatch>; isActivityDialogOpen: boolean; openActivity: (activity: Activity) => void; diff --git a/src/features/theme_page/view/tab_bar/tab_bar.tsx b/src/features/theme_page/view/tab_bar/tab_bar.tsx index f66b9b8..d37c1ee 100644 --- a/src/features/theme_page/view/tab_bar/tab_bar.tsx +++ b/src/features/theme_page/view/tab_bar/tab_bar.tsx @@ -3,9 +3,11 @@ import { useBaseViewModelContext } from "../../view_model/context_providers/base import { BaseViewModel } from "../../model/base_view_model"; export function TabBar() { - const { lessons, activeLesson, setActiveLesson, isAdmin } = + const { lessons, activeLesson, setActiveLesson } = useBaseViewModelContext() as BaseViewModel; + if (!activeLesson) return null; + return ( { + if (!activeLesson) return; setStalling(true); const lessonId = lessons.meta[activeLesson].id; const resObj = await fetch(`/api/admin/temalar/${themeId}/${lessonId}`, { @@ -169,6 +168,7 @@ export function useAdminViewModel(): AdminViewModel { }; const deleteLesson = async () => { + if (!activeLesson) return; setStalling(true); const lessonId = lessons.meta[activeLesson].id; const resObj = await fetch(`/api/admin/temalar/${themeId}/${lessonId}`, { @@ -205,10 +205,11 @@ export function useAdminViewModel(): AdminViewModel { ); return newLessons; }); - setActiveLesson((prev) => (prev === 0 ? prev : prev - 1)); + setActiveLesson((prev) => (prev ? (prev === 0 ? null : prev - 1) : null)); }; const createNewActivity = async () => { + if (!activeLesson) return; setStalling(true); const lessonId = lessons.meta[activeLesson].id; const resObj = await fetch(`/api/admin/temalar/${themeId}/${lessonId}`, { @@ -260,6 +261,7 @@ export function useAdminViewModel(): AdminViewModel { activityIndex: number; activityId: string; }) => { + if (!activeLesson) return; setStalling(true); const lessonId = lessons.meta[activeLesson].id; const resObj = await fetch( diff --git a/src/features/theme_page/view_model/use_base_view_model.tsx b/src/features/theme_page/view_model/use_base_view_model.tsx index 540c34c..638163b 100644 --- a/src/features/theme_page/view_model/use_base_view_model.tsx +++ b/src/features/theme_page/view_model/use_base_view_model.tsx @@ -13,7 +13,9 @@ export function useBaseViewModel( theme.youtubeVideoUrl ); const [lessons, setLessons] = useState(theme.lessons); - const [activeLesson, setActiveLesson] = useState(0); + const [activeLesson, setActiveLesson] = useState( + theme.lessons.meta.length > 0 ? 0 : null + ); // ACTIVITY DIALOG const [activeActivity, setActiveActivity] = useState | null>( diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx index c7aa321..617c519 100644 --- a/src/pages/admin/index.tsx +++ b/src/pages/admin/index.tsx @@ -1,13 +1,21 @@ import { ThemeMetaDTO } from "@/core/models/dtos/theme_meta_dto"; -import { ThemeReposityImplementation } from "@/core/models/repositories/theme_repository_implementation"; import { LandingPageView } from "@/features/landing_page_view"; import Head from "next/head"; +import { useEffect, useState } from "react"; + +export default function AdminPage() { + const [themeMetas, setThemeMetas] = useState([]); + + const fetchThemeMetas = async () => { + const resObj = await fetch(`/api/admin/temalar`); + const res = (await resObj.json()) as ThemeMetaDTO[]; + setThemeMetas(res); + }; + + useEffect(() => { + fetchThemeMetas(); + }, []); -export default function AdminPage({ - themeMetas, -}: { - themeMetas: ThemeMetaDTO[]; -}) { return ( <> @@ -18,14 +26,3 @@ export default function AdminPage({ ); } - -export async function getServerSideProps() { - const themeRepository = new ThemeReposityImplementation(); - const themeMetas = await themeRepository.getThemeMetas(); - - return { - props: { - themeMetas, - }, - }; -} diff --git a/src/pages/admin/temalar/[theme]/index.tsx b/src/pages/admin/temalar/[theme]/index.tsx index 3644e43..6430bbc 100644 --- a/src/pages/admin/temalar/[theme]/index.tsx +++ b/src/pages/admin/temalar/[theme]/index.tsx @@ -1,20 +1,33 @@ import { GetServerSidePropsContext } from "next"; -import { ThemeReposityImplementation } from "@/core/models/repositories/theme_repository_implementation"; import { Theme } from "@/core/models/entities/learning_unit"; import { ThemePage as ThemePageElement } from "@/features/theme_page"; +import { useEffect, useState } from "react"; -export default function ThemePage({ themeData }: { themeData: Theme }) { - return ; +export default function ThemePage({ themeId }: { themeId: string }) { + const [themeData, setThemeData] = useState(); + + const fetchTheme = async (themeId: string) => { + const resObj = await fetch(`/api/admin/temalar/${themeId}`); + const res = (await resObj.json()) as Theme; + setThemeData(Theme.from(res)); + }; + + useEffect(() => { + fetchTheme(themeId); + }, [themeId]); + + if (themeData) return ; + + return ( +
    +

    Merhaba Admin!

    +

    Tema Yükleniyor...

    +
    + ); } export async function getServerSideProps(context: GetServerSidePropsContext) { - const path = context.params as unknown as { theme: string }; - const themeRepository = new ThemeReposityImplementation(); - const themeData = await themeRepository.getThemeData(path.theme); + const { theme } = context.params as unknown as { theme: string }; - return { - props: { - themeData, - }, - }; + return { props: { themeId: theme } }; } diff --git a/src/pages/api/admin/temalar/[theme]/index.ts b/src/pages/api/admin/temalar/[theme]/index.ts index b46a0b3..03e1611 100644 --- a/src/pages/api/admin/temalar/[theme]/index.ts +++ b/src/pages/api/admin/temalar/[theme]/index.ts @@ -27,6 +27,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) { } return res.status(501).json({ error: "Unsopported action" }); + } else if (req.method === "GET") { + const theme = req.query.theme as string; + const themeData = await themeRepo.getThemeData(theme); + return res.status(200).json(themeData); } return res.status(501).json({ error: "Unsopported request method" }); diff --git a/src/pages/api/admin/temalar/index.ts b/src/pages/api/admin/temalar/index.ts index cae0042..5ad6739 100644 --- a/src/pages/api/admin/temalar/index.ts +++ b/src/pages/api/admin/temalar/index.ts @@ -1,7 +1,10 @@ import type { NextApiRequest, NextApiResponse } from "next"; import { ThemeReposityImplementation } from "@/core/models/repositories/theme_repository_implementation"; -async function handler(req: NextApiRequest, res: NextApiResponse) { +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { const themeRepo = new ThemeReposityImplementation(); if (req.method === "PUT") { @@ -18,9 +21,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) { } return res.status(501).json({ error: "Unsopported action" }); + } else if (req.method === "GET") { + const themeMetas = await themeRepo.getThemeMetas(); + return res.status(200).json(themeMetas); } return res.status(501).json({ error: "Unsopported request method" }); } - -export default handler; diff --git a/src/styles/globals.scss b/src/styles/globals.scss index e7ef3bf..1052f6a 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -80,6 +80,18 @@ div.simple-card { } } +div.admin-waiting-room { + height: 100vh; + width: 100%; + display: flex; + flex-direction: column; + row-gap: 3rem; + justify-content: center; + align-items: center; + font-size: 120%; + text-align: center; +} + @media (max-width: 400px) { html { font-size: 75%; /* this is the base font size for screens smaller than 400px */