From 9249aeafad7056c320a89782d573eea7ffe45fe2 Mon Sep 17 00:00:00 2001 From: swve Date: Mon, 22 May 2023 18:16:37 +0000 Subject: [PATCH] feat: migrate editor page to server component --- .../activity/[activityid]/edit/loading.tsx | 9 ++++ .../activity/[activityid]/edit/page.tsx | 54 ++++++++++++------- front/components/Editor/Editor.tsx | 1 + front/components/Editor/EditorWrapper.tsx | 1 + front/components/UI/Modal/Modal.tsx | 3 +- front/components/UI/Toast/Toast.tsx | 1 + front/components/UI/Tooltip/Tooltip.tsx | 19 +++---- 7 files changed, 60 insertions(+), 28 deletions(-) create mode 100644 front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx diff --git a/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx new file mode 100644 index 00000000..b3fd3bc3 --- /dev/null +++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx @@ -0,0 +1,9 @@ +import PageLoading from "@components/Pages/PageLoading"; + +export default function Loading() { + // Or a custom loading skeleton component + return ( + + ) + +} \ No newline at end of file diff --git a/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx b/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx index 8e6e2b82..ee63e047 100644 --- a/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx +++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx @@ -1,34 +1,52 @@ - -"use client"; -import { default as React, useEffect, useRef } from "react"; - - +import { default as React, } from "react"; import { useRouter } from "next/navigation"; -import { getActivity } from "@services/courses/activities"; import AuthProvider from "@components/Security/AuthProvider"; import EditorWrapper from "@components/Editor/EditorWrapper"; -import useSWR, { mutate } from "swr"; -import { getAPIUrl, getOrgFromUri } from "@services/config/config"; +import { getAPIUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; +import { getOrganizationContextInfo } from "@services/organizations/orgs"; +import { getCourseMetadataWithAuthHeader } from "@services/courses/courses"; +import { cookies } from "next/headers"; +import { Metadata } from "next"; +import { getActivityWithAuthHeader } from "@services/courses/activities"; +type MetadataProps = { + params: { orgslug: string, courseid: string, activityid: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}; -function EditActivity(params: any) { - const router = useRouter(); +export async function generateMetadata( + { params }: MetadataProps, +): Promise { + const cookieStore = cookies(); + const access_token_cookie: any = cookieStore.get('access_token_cookie'); + + // Get Org context information + const course_meta = await getCourseMetadataWithAuthHeader(params.courseid, { revalidate: 360, tags: ['courses'] }, access_token_cookie.value) + + return { + title: `Edit - ${course_meta.course.name} Activity`, + description: course_meta.course.mini_description, + }; +} + +const EditActivity = async (params: any) => { + const cookieStore = cookies(); + const access_token_cookie: any = cookieStore.get('access_token_cookie'); const activityid = params.params.activityid; const courseid = params.params.courseid; const orgslug = params.params.orgslug; - const { data: courseInfo, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher); - const { data: activity, error: error_activity } = useSWR(`${getAPIUrl()}activities/activity_${activityid}`, swrFetcher); - + const courseInfo = await getCourseMetadataWithAuthHeader(courseid, { revalidate: 0, tags: ['courses'] }, access_token_cookie.value) + const activity = await getActivityWithAuthHeader(activityid, { revalidate: 0, tags: ['activities'] }, access_token_cookie.value) - - return ( - - {!courseInfo || !activity ?
Loading...
: } - +
+ + + +
); } diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx index 34f12a21..19cfee84 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Editor/Editor.tsx @@ -1,3 +1,4 @@ +'use client'; import React from "react"; import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; diff --git a/front/components/Editor/EditorWrapper.tsx b/front/components/Editor/EditorWrapper.tsx index 6b5bc38e..3119a71e 100644 --- a/front/components/Editor/EditorWrapper.tsx +++ b/front/components/Editor/EditorWrapper.tsx @@ -1,3 +1,4 @@ +'use client'; import { default as React, } from "react"; import * as Y from "yjs"; import { WebrtcProvider } from "y-webrtc"; diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx index 6b234cdc..dab976b9 100644 --- a/front/components/UI/Modal/Modal.tsx +++ b/front/components/UI/Modal/Modal.tsx @@ -1,3 +1,4 @@ +'use client'; import React from 'react'; import * as Dialog from '@radix-ui/react-dialog'; import { styled, keyframes } from '@stitches/react'; @@ -44,7 +45,7 @@ const Modal = (params: ModalParams) => ( {params.addDefCloseButton ? ( - Close + Close ) : null} diff --git a/front/components/UI/Toast/Toast.tsx b/front/components/UI/Toast/Toast.tsx index b297ec45..e7d43ffe 100644 --- a/front/components/UI/Toast/Toast.tsx +++ b/front/components/UI/Toast/Toast.tsx @@ -1,3 +1,4 @@ +'use client'; import React from 'react' import { Toaster } from 'react-hot-toast'; diff --git a/front/components/UI/Tooltip/Tooltip.tsx b/front/components/UI/Tooltip/Tooltip.tsx index c2291a3d..8a8cf0fe 100644 --- a/front/components/UI/Tooltip/Tooltip.tsx +++ b/front/components/UI/Tooltip/Tooltip.tsx @@ -1,3 +1,4 @@ +'use client'; import React from 'react'; import * as Tooltip from '@radix-ui/react-tooltip'; import { styled, keyframes } from '@stitches/react'; @@ -6,14 +7,14 @@ import { PlusIcon } from '@radix-ui/react-icons'; type TooltipProps = { - sideOffset?: number; - content: React.ReactNode; - children: React.ReactNode; - slateBlack?: boolean; + sideOffset?: number; + content: React.ReactNode; + children: React.ReactNode; + slateBlack?: boolean; }; const ToolTip = (props: TooltipProps) => { - + return ( @@ -58,10 +59,10 @@ const closeAndFade = keyframes({ const TooltipContent = styled(Tooltip.Content, { - variants : { + variants: { slateBlack: { true: { - backgroundColor:" #5a5a5a", + backgroundColor: " #5a5a5a", color: 'white', }, }, @@ -71,7 +72,7 @@ const TooltipContent = styled(Tooltip.Content, { padding: '5px 10px', fontSize: 12, lineHeight: 1, - color:"black", + color: "black", backgroundColor: 'rgba(217, 217, 217, 0.50)', zIndex: 4, boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', @@ -97,7 +98,7 @@ const TooltipContent = styled(Tooltip.Content, { const TooltipArrow = styled(Tooltip.Arrow, { fill: 'white', - + }); const IconButton = styled('button', {