From d75ccf3a8c03711f2b8ea55b0d46cb4494423bef Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Tue, 3 Sep 2024 16:45:37 -0600 Subject: [PATCH] pages for editing --- .../calendar/DayItemsInModule.tsx | 30 +++++++++- .../[assignmentName]/AssignmentPreview.tsx | 58 +++++++++++++++++++ .../[assignmentName]/EditAssignment.tsx | 39 +++++++++++++ .../assignment/[assignmentName]/layout.tsx | 5 ++ .../assignment/[assignmentName]/loading.tsx | 10 ++++ .../assignment/[assignmentName]/page.tsx | 17 ++++++ .../[moduleName]/page/[pageName]/EditPage.tsx | 40 +++++++++++++ .../page/[pageName]/PagePreview.tsx | 13 +++++ .../[moduleName]/page/[pageName]/layout.tsx | 5 ++ .../[moduleName]/page/[pageName]/loading.tsx | 10 ++++ .../[moduleName]/page/[pageName]/page.tsx | 12 ++++ .../[moduleName]/quiz/[quizName]/EditQuiz.tsx | 5 +- .../quiz/[quizName]/QuizPreview.tsx | 1 - .../[moduleName]/quiz/[quizName]/layout.tsx | 5 ++ .../[moduleName]/quiz/[quizName]/loading.tsx | 10 ++++ nextjs/src/app/globals.css | 50 ++++++++++++++-- nextjs/src/app/layout.tsx | 5 +- 17 files changed, 303 insertions(+), 12 deletions(-) create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/layout.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/loading.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/page.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx create mode 100644 nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx diff --git a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx index d67b41d..569f99d 100644 --- a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx +++ b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx @@ -33,6 +33,7 @@ export default function DayItemsInModule({ } function Pages({ moduleName, day }: { moduleName: string; day: string }) { + const { courseName } = useCourseContext(); const { data: pageNames } = usePageNamesQuery(moduleName); const { data: pages } = usePagesQueries(moduleName, pageNames); const todaysPages = useMemo( @@ -72,7 +73,18 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) { ); }} > - {p.name} + + {p.name} + ))} @@ -82,8 +94,8 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) { function Quizzes({ moduleName, day }: { moduleName: string; day: string }) { const { data: quizNames } = useQuizNamesQuery(moduleName); const { data: quizzes } = useQuizzesQueries(moduleName, quizNames); - const { courseName } = useCourseContext(); + const todaysQuizzes = useMemo( () => quizzes.filter((q) => { @@ -142,6 +154,7 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) { function Assignments({ moduleName, day }: { moduleName: string; day: string }) { const { data: assignmentNames } = useAssignmentNamesQuery(moduleName); + const { courseName } = useCourseContext(); const { data: assignments } = useAssignmentsQueries( moduleName, assignmentNames @@ -183,7 +196,18 @@ function Assignments({ moduleName, day }: { moduleName: string; day: string }) { ); }} > - {a.name} + + {a.name} + ))} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx new file mode 100644 index 0000000..eea7fe5 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx @@ -0,0 +1,58 @@ +import { LocalAssignment } from "@/models/local/assignment/localAssignment"; +import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils"; +import React from "react"; + +export default function AssignmentPreview({ + assignment, +}: { + assignment: LocalAssignment; +}) { + return ( +
+
+
+
Due Date
+
{assignment.dueAt}
+
+
+
Lock Date
+
{assignment.lockAt}
+
+
+
Assignment Group Name
+
{assignment.localAssignmentGroupName}
+
+
+
Submission Types
+
+
    + {assignment.submissionTypes.map((t) => ( +
  • {t}
    • + ))} +
+
+
+
+
File Upload Types
+
+
    + {assignment.allowedFileUploadExtensions.map((t) => ( +
  • {t}
    • + ))} +
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx new file mode 100644 index 0000000..3d3e282 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx @@ -0,0 +1,39 @@ +"use client"; +import { MonacoEditor } from "@/components/editor/MonacoEditor"; +import { useAssignmentQuery } from "@/hooks/localCourse/assignmentHooks"; +import { localAssignmentMarkdown } from "@/models/local/assignment/localAssignment"; +import { useState } from "react"; +import AssignmentPreview from "./AssignmentPreview"; + +export default function EditAssignment({ + moduleName, + assignmentName, +}: { + assignmentName: string; + moduleName: string; +}) { + const { data: assignment } = useAssignmentQuery(moduleName, assignmentName); + const [assignmentText, setAssignmentText] = useState( + localAssignmentMarkdown.toMarkdown(assignment) + ); + const [error, setError] = useState(""); + + return ( +
+
+
+ +
+
+
{error && error}
+ +
+
+
+ +
+
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx new file mode 100644 index 0000000..1736e6e --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx @@ -0,0 +1,5 @@ +import React, { ReactNode, Suspense } from "react"; + +export default function layout({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx new file mode 100644 index 0000000..858e083 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx @@ -0,0 +1,10 @@ +import { Spinner } from "@/components/Spinner"; +import React from "react"; + +export default function Loading() { + return ( +
+ +
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx new file mode 100644 index 0000000..b42b836 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import EditAssignment from "./EditAssignment"; + +export default function Page({ + params: { moduleName, assignmentName }, +}: { + params: { assignmentName: string; moduleName: string }; +}) { + const decodedAssignmentName = decodeURIComponent(assignmentName); + const decodedModuleName = decodeURIComponent(moduleName); + return ( + + ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx new file mode 100644 index 0000000..136b9a1 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx @@ -0,0 +1,40 @@ +"use client"; + +import { MonacoEditor } from "@/components/editor/MonacoEditor"; +import { usePageQuery } from "@/hooks/localCourse/pageHooks"; +import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage"; +import { useState } from "react"; +import PagePreview from "./PagePreview"; + +export default function EditPage({ + moduleName, + pageName, +}: { + pageName: string; + moduleName: string; +}) { + const { data: page } = usePageQuery(moduleName, pageName); + const [pageText, setPageText] = useState( + localPageMarkdownUtils.toMarkdown(page) + ); + const [error, setError] = useState(""); + + return ( +
+
+
+ +
+
+
{error && error}
+ +
+
+
+ +
+
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx new file mode 100644 index 0000000..8f06b50 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx @@ -0,0 +1,13 @@ +import { LocalCoursePage } from "@/models/local/page/localCoursePage"; +import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils"; +import React from "react"; + +export default function PagePreview({ page }: { page: LocalCoursePage }) { + return ( +
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/layout.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/layout.tsx new file mode 100644 index 0000000..1736e6e --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/layout.tsx @@ -0,0 +1,5 @@ +import React, { ReactNode, Suspense } from "react"; + +export default function layout({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/loading.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/loading.tsx new file mode 100644 index 0000000..858e083 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/loading.tsx @@ -0,0 +1,10 @@ +import { Spinner } from "@/components/Spinner"; +import React from "react"; + +export default function Loading() { + return ( +
+ +
+ ); +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/page.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/page.tsx new file mode 100644 index 0000000..aaa1205 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/page.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import EditPage from "./EditPage"; + +export default async function Page({ + params: { moduleName, pageName }, +}: { + params: { pageName: string; moduleName: string }; +}) { + const decodedPageName = decodeURIComponent(pageName); + const decodedModuleName = decodeURIComponent(moduleName); + return ; +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx index 6ffa21a..3bbc3d6 100644 --- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx @@ -47,9 +47,10 @@ export default function EditQuiz({ return (
- {quiz.name}
- +
+ +
{error && error}
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx index 2289869..d398ac3 100644 --- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx @@ -61,7 +61,6 @@ export default function QuizPreview({ quiz }: { quiz: LocalQuiz }) { } function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) { - console.log(question); return (
Points: {question.points}
diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx new file mode 100644 index 0000000..1736e6e --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx @@ -0,0 +1,5 @@ +import React, { ReactNode, Suspense } from "react"; + +export default function layout({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx new file mode 100644 index 0000000..858e083 --- /dev/null +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx @@ -0,0 +1,10 @@ +import { Spinner } from "@/components/Spinner"; +import React from "react"; + +export default function Loading() { + return ( +
+ +
+ ); +} diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css index 6170d8a..368e1db 100644 --- a/nextjs/src/app/globals.css +++ b/nextjs/src/app/globals.css @@ -2,8 +2,6 @@ @tailwind components; @tailwind utilities; - - @layer utilities { .text-balance { text-wrap: balance; @@ -11,6 +9,48 @@ } /* monaco editor */ -.monaco-editor-background, .monaco-editor .margin { - background-color: black !important; -} \ No newline at end of file +.monaco-editor-background, +.monaco-editor .margin { + background-color: black !important; +} + +h1 { + @apply text-4xl font-bold; +} + +h2 { + @apply text-3xl font-semibold; +} + +h3 { + @apply text-2xl font-semibold; +} + +h4 { + @apply text-xl font-medium; +} + +h5 { + @apply text-lg font-medium; +} + +h6 { + @apply text-base font-medium; +} + +strong { + @apply font-semibold; +} + +ul { + list-style-type: disc; + padding-left: 1.5rem; /* list-inside equivalent */ +} + +ol { + list-style-type: decimal; + padding-left: 1.5rem; /* list-inside equivalent */ +} +hr { + @apply border-t border-gray-200 my-4; +} diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx index d7a5ec5..d73a44b 100644 --- a/nextjs/src/app/layout.tsx +++ b/nextjs/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import "./globals.css"; import Providers from "./providers"; +import { Suspense } from "react"; export const metadata: Metadata = { title: "Canvas Manager 2.0", @@ -14,7 +15,9 @@ export default function RootLayout({ return ( - {children} + + {children} + );