From 52bc9e556bd3b63fb4674ab7dcb21577fdb9a393 Mon Sep 17 00:00:00 2001 From: swve Date: Mon, 19 Jun 2023 21:12:31 +0200 Subject: [PATCH 1/8] fix: nextjs bugs with data mutations --- front/app/api/revalidate/route.ts | 2 +- .../(withmenu)/collections/admin.tsx | 8 +- .../(withmenu)/collections/new/page.tsx | 2 + .../[orgslug]/(withmenu)/collections/page.tsx | 2 +- .../[orgslug]/(withmenu)/courses/courses.tsx | 7 +- .../organization/general/organization.tsx | 8 +- .../Modals/Course/Create/CreateCourse.tsx | 6 +- front/components/UI/Elements/Menu/Menu.tsx | 4 +- front/package-lock.json | 174 +++++++++--------- front/package.json | 2 +- 10 files changed, 110 insertions(+), 105 deletions(-) diff --git a/front/app/api/revalidate/route.ts b/front/app/api/revalidate/route.ts index c3d0aa71..3ca5eec1 100644 --- a/front/app/api/revalidate/route.ts +++ b/front/app/api/revalidate/route.ts @@ -6,7 +6,7 @@ export async function GET(request: NextRequest) { revalidateTag(tag); return NextResponse.json( - { revalidated: true, now: Date.now() }, + { revalidated: true, now: Date.now(), tag }, { status: 200, headers: { diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx index 0acef9ba..a9002ab4 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx @@ -1,14 +1,17 @@ 'use client'; import { AuthContext } from '@components/Security/AuthProvider'; +import { getUriWithOrg } from '@services/config/config'; import { deleteCollection } from '@services/courses/collections'; import { revalidateTags } from '@services/utils/ts/requests'; import { Link, Trash } from 'lucide-react'; +import { useRouter } from 'next/navigation'; import React from 'react' const CollectionAdminEditsArea = (props: any) => { const org_roles_values = ["admin", "owner"]; const user_roles_values = ["role_admin"]; + const router = useRouter(); const auth: any = React.useContext(AuthContext); @@ -38,7 +41,8 @@ const CollectionAdminEditsArea = (props: any) => { await deleteCollection(collectionId); revalidateTags(["collections"]); // reload the page - window.location.reload(); + router.refresh(); + router.push(getUriWithOrg(props.orgslug, "/collections")); } // this is amazingly terrible code, but gotta release that MVP @@ -51,7 +55,7 @@ const CollectionAdminEditsArea = (props: any) => { - + ) } else { diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx index cf94e666..553d3468 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx @@ -45,7 +45,9 @@ function NewCollection(params: any) { }; await createCollection(collection); revalidateTags(["collections"]); + router.prefetch(getUriWithOrg(orgslug, "/collections")); router.push(getUriWithOrg(orgslug, "/collections")); + router.refresh(); }; diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx index 03035fec..d8fa1ae2 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx @@ -52,7 +52,7 @@ const CollectionsPage = async (params: any) => {
{collections.map((collection: any) => (
- +

{collection.name}

diff --git a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx index 19f9e17e..9525ff50 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx @@ -11,6 +11,7 @@ import React from 'react' import Image from 'next/image'; import { AuthContext } from '@components/Security/AuthProvider'; import { revalidateTags } from '@services/utils/ts/requests'; +import { useRouter } from 'next/navigation'; interface CourseProps { orgslug: string; @@ -26,12 +27,13 @@ function Courses(props: CourseProps) { const orgslug = props.orgslug; const courses = props.courses; const [newCourseModal, setNewCourseModal] = React.useState(false); + const router = useRouter(); async function deleteCourses(course_id: any) { await deleteCourseFromBackend(course_id); revalidateTags(['courses']); - // terrible, nextjs right now doesn't mutate the page when the data changes - window.location.reload(); + + router.refresh(); } async function closeNewCourseModal() { @@ -40,7 +42,6 @@ function Courses(props: CourseProps) { - return (
diff --git a/front/app/orgs/[orgslug]/settings/organization/general/organization.tsx b/front/app/orgs/[orgslug]/settings/organization/general/organization.tsx index bc26be95..7b1038f9 100644 --- a/front/app/orgs/[orgslug]/settings/organization/general/organization.tsx +++ b/front/app/orgs/[orgslug]/settings/organization/general/organization.tsx @@ -4,6 +4,7 @@ import { Field, Form, Formik } from 'formik'; import { updateOrganization, uploadOrganizationLogo } from '@services/settings/org'; import { UploadCloud } from 'lucide-react'; import { revalidateTags } from '@services/utils/ts/requests'; +import { useRouter } from 'next/navigation'; interface OrganizationValues { @@ -17,7 +18,7 @@ interface OrganizationValues { function OrganizationClient(props: any) { const [selectedFile, setSelectedFile] = useState(null); - + const router = useRouter(); // ... const handleFileChange = (event: React.ChangeEvent) => { @@ -33,9 +34,8 @@ function OrganizationClient(props: any) { await uploadOrganizationLogo(org_id, selectedFile); setSelectedFile(null); // Reset the selected file revalidateTags(['organizations']); - // reload the page - // terrible hack, it will fixed later - window.location.reload(); + router.refresh(); + } }; diff --git a/front/components/Modals/Course/Create/CreateCourse.tsx b/front/components/Modals/Course/Create/CreateCourse.tsx index f0d0aa9a..3cf34896 100644 --- a/front/components/Modals/Course/Create/CreateCourse.tsx +++ b/front/components/Modals/Course/Create/CreateCourse.tsx @@ -8,6 +8,7 @@ import React, { useState } from 'react' import { BarLoader } from 'react-spinners' import { mutate } from 'swr'; import { revalidateTags } from '@services/utils/ts/requests'; +import { useRouter } from 'next/navigation'; function CreateCourseModal({ closeModal, orgslug }: any) { const [isSubmitting, setIsSubmitting] = useState(false); @@ -15,6 +16,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) { const [description, setDescription] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [thumbnail, setThumbnail] = React.useState(null) as any; + const router = useRouter(); const [orgId, setOrgId] = React.useState(null) as any; @@ -46,9 +48,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) { if (status.org_id == orgId) { closeModal(); - // reload the page - // terrible, nextjs right now doesn't mutate the page when the data changes - window.location.reload(); + router.refresh(); } else { alert("Error creating course, please see console logs"); console.log(status); diff --git a/front/components/UI/Elements/Menu/Menu.tsx b/front/components/UI/Elements/Menu/Menu.tsx index 21ad6b8b..52e8dbf3 100644 --- a/front/components/UI/Elements/Menu/Menu.tsx +++ b/front/components/UI/Elements/Menu/Menu.tsx @@ -1,10 +1,8 @@ import React from "react"; -import learnhouseLogo from "public/learnhouse_logo.png"; import Link from "next/link"; -import Image from "next/image"; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; -import { getOrganizationContextInfo, getOrganizationContextInfoNoAsync } from "@services/organizations/orgs"; +import { getOrganizationContextInfo } from "@services/organizations/orgs"; import ClientComponentSkeleton from "@components/UI/Utils/ClientComp"; import { HeaderProfileBox } from "@components/Security/HeaderProfileBox"; diff --git a/front/package-lock.json b/front/package-lock.json index d2b6e54e..28d962dd 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -26,7 +26,7 @@ "formik": "^2.2.9", "framer-motion": "^7.3.6", "lucide-react": "^0.104.1", - "next": "^13.4.6", + "next": "^13.4.7-canary.1", "re-resizable": "^6.9.9", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", @@ -2123,9 +2123,9 @@ } }, "node_modules/@next/env": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.6.tgz", - "integrity": "sha512-nqUxEtvDqFhmV1/awSg0K2XHNwkftNaiUqCYO9e6+MYmqNObpKVl7OgMkGaQ2SZnFx5YqF0t60ZJTlyJIDAijg==" + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.1.tgz", + "integrity": "sha512-2ZA+CatMIujZ5G8gN8E0ndxnMwqSEa856KUqz0hxOSJxFMT26Uds2Z6tz82sFU8biNaq4lT7cUJhGKccTXTXsg==" }, "node_modules/@next/eslint-plugin-next": { "version": "13.0.6", @@ -2137,9 +2137,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.6.tgz", - "integrity": "sha512-ahi6VP98o4HV19rkOXPSUu+ovfHfUxbJQ7VVJ7gL2FnZRr7onEFC1oGQ6NQHpm8CxpIzSSBW79kumlFMOmZVjg==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.1.tgz", + "integrity": "sha512-LmqRfCFnBSI8HPis6es0wpH+2nX9/FiSqRYZsk8ibPWcIm37rq5Qwp5cAK3hQFWlJlNdTyGaJ1e49VKZUTEXBw==", "cpu": [ "arm64" ], @@ -2152,9 +2152,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.6.tgz", - "integrity": "sha512-13cXxKFsPJIJKzUqrU5XB1mc0xbUgYsRcdH6/rB8c4NMEbWGdtD4QoK9ShN31TZdePpD4k416Ur7p+deMIxnnA==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.1.tgz", + "integrity": "sha512-ngS/YWlBzhC2hb9Lmw6cCcks2aZRvFIB+iHlygZIELTfBPd9OUoRlOaa/KQLa/ycKwL2c8L8AFL67i3KQs5j3g==", "cpu": [ "x64" ], @@ -2167,9 +2167,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.6.tgz", - "integrity": "sha512-Ti+NMHEjTNktCVxNjeWbYgmZvA2AqMMI2AMlzkXsU7W4pXCMhrryAmAIoo+7YdJbsx01JQWYVxGe62G6DoCLaA==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.1.tgz", + "integrity": "sha512-5NDlJaba0tWz7mU6IpCfOQ5xDwXwFg4SV6IKLDoNFEchkmlAifW8y2i2OCdmaG+MDpODi3xUBkM1qP2Sd6oUMQ==", "cpu": [ "arm64" ], @@ -2182,9 +2182,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.6.tgz", - "integrity": "sha512-OHoC6gO7XfjstgwR+z6UHKlvhqJfyMtNaJidjx3sEcfaDwS7R2lqR5AABi8PuilGgi0BO0O0sCXqLlpp3a0emQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.1.tgz", + "integrity": "sha512-bYIMi8vhtlCvAMg2xa0CCeOZ0wOZoOKUd9w46qmWfddBUuhwJj5C+QKHXOG+oTxXIVxq14Ffkww9orafYV0R6g==", "cpu": [ "arm64" ], @@ -2197,9 +2197,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.6.tgz", - "integrity": "sha512-zHZxPGkUlpfNJCboUrFqwlwEX5vI9LSN70b8XEb0DYzzlrZyCyOi7hwDp/+3Urm9AB7YCAJkgR5Sp1XBVjHdfQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.1.tgz", + "integrity": "sha512-FvO2t5F02zzvWRybStIR5QZJnOSaznF6E7njBD0hcCeb3Il84rKJCc4DoMhcLt68YljI6tWhqlDbiy+7ghfJlg==", "cpu": [ "x64" ], @@ -2212,9 +2212,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.6.tgz", - "integrity": "sha512-K/Y8lYGTwTpv5ME8PSJxwxLolaDRdVy+lOd9yMRMiQE0BLUhtxtCWC9ypV42uh9WpLjoaD0joOsB9Q6mbrSGJg==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.1.tgz", + "integrity": "sha512-2kxqgbBvP+WUrKrrEcFqWGKrff5hGCmzEju5sbEZExuFV7sy+4nf5I9A9f0dFiP3z1hudVGJDrgbcDwt0Odvxw==", "cpu": [ "x64" ], @@ -2227,9 +2227,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.6.tgz", - "integrity": "sha512-U6LtxEUrjBL2tpW+Kr1nHCSJWNeIed7U7l5o7FiKGGwGgIlFi4UHDiLI6TQ2lxi20fAU33CsruV3U0GuzMlXIw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-u+IxAt8i/iYc760qAMlrs0yGyYNokRJpWWdVBwTQ7n5zsjpJ2xifga3r8fWEJwdRvH0yVx15IM/QYZXQOJ8TQA==", "cpu": [ "arm64" ], @@ -2242,9 +2242,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.6.tgz", - "integrity": "sha512-eEBeAqpCfhdPSlCZCayjCiyIllVqy4tcqvm1xmg3BgJG0G5ITiMM4Cw2WVeRSgWDJqQGRyyb+q8Y2ltzhXOWsQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-aChXbr2c0aEwMhhkl9+JT7A2x7JMpmP5NLD7m+Drt4Ss6NZYTwecJTFEt/AbtIm5V/pMYVb1UDZXJtfTKNiHhw==", "cpu": [ "ia32" ], @@ -2257,9 +2257,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.6.tgz", - "integrity": "sha512-OrZs94AuO3ZS5tnqlyPRNgfWvboXaDQCi5aXGve3o3C+Sj0ctMUV9+Do+0zMvvLRumR8E0PTWKvtz9n5vzIsWw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-AcZDEqMXW3Bm2dmhMc8metReCpx/NilC8LPKP44SFM97y5OaAfhG+47n0SAmhI9L8NaWMsZCS5NryM/6scyaWQ==", "cpu": [ "x64" ], @@ -6375,11 +6375,11 @@ "dev": true }, "node_modules/next": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/next/-/next-13.4.6.tgz", - "integrity": "sha512-sjVqjxU+U2aXZnYt4Ud6CTLNNwWjdSfMgemGpIQJcN3Z7Jni9xRWbR0ie5fQzCg87aLqQVhKA2ud2gPoqJ9lGw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.1.tgz", + "integrity": "sha512-IKmDxqALqXSSJHSdlslKq1Dry5x8gaQfXtOo8acyVRu0GDIc/Az8Hv/TWUkRGZPA76yllZeEf16LIv3QLkvLMA==", "dependencies": { - "@next/env": "13.4.6", + "@next/env": "13.4.7-canary.1", "@swc/helpers": "0.5.1", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", @@ -6395,15 +6395,15 @@ "node": ">=16.8.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "13.4.6", - "@next/swc-darwin-x64": "13.4.6", - "@next/swc-linux-arm64-gnu": "13.4.6", - "@next/swc-linux-arm64-musl": "13.4.6", - "@next/swc-linux-x64-gnu": "13.4.6", - "@next/swc-linux-x64-musl": "13.4.6", - "@next/swc-win32-arm64-msvc": "13.4.6", - "@next/swc-win32-ia32-msvc": "13.4.6", - "@next/swc-win32-x64-msvc": "13.4.6" + "@next/swc-darwin-arm64": "13.4.7-canary.1", + "@next/swc-darwin-x64": "13.4.7-canary.1", + "@next/swc-linux-arm64-gnu": "13.4.7-canary.1", + "@next/swc-linux-arm64-musl": "13.4.7-canary.1", + "@next/swc-linux-x64-gnu": "13.4.7-canary.1", + "@next/swc-linux-x64-musl": "13.4.7-canary.1", + "@next/swc-win32-arm64-msvc": "13.4.7-canary.1", + "@next/swc-win32-ia32-msvc": "13.4.7-canary.1", + "@next/swc-win32-x64-msvc": "13.4.7-canary.1" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", @@ -10056,9 +10056,9 @@ } }, "@next/env": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.6.tgz", - "integrity": "sha512-nqUxEtvDqFhmV1/awSg0K2XHNwkftNaiUqCYO9e6+MYmqNObpKVl7OgMkGaQ2SZnFx5YqF0t60ZJTlyJIDAijg==" + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.1.tgz", + "integrity": "sha512-2ZA+CatMIujZ5G8gN8E0ndxnMwqSEa856KUqz0hxOSJxFMT26Uds2Z6tz82sFU8biNaq4lT7cUJhGKccTXTXsg==" }, "@next/eslint-plugin-next": { "version": "13.0.6", @@ -10070,57 +10070,57 @@ } }, "@next/swc-darwin-arm64": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.6.tgz", - "integrity": "sha512-ahi6VP98o4HV19rkOXPSUu+ovfHfUxbJQ7VVJ7gL2FnZRr7onEFC1oGQ6NQHpm8CxpIzSSBW79kumlFMOmZVjg==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.1.tgz", + "integrity": "sha512-LmqRfCFnBSI8HPis6es0wpH+2nX9/FiSqRYZsk8ibPWcIm37rq5Qwp5cAK3hQFWlJlNdTyGaJ1e49VKZUTEXBw==", "optional": true }, "@next/swc-darwin-x64": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.6.tgz", - "integrity": "sha512-13cXxKFsPJIJKzUqrU5XB1mc0xbUgYsRcdH6/rB8c4NMEbWGdtD4QoK9ShN31TZdePpD4k416Ur7p+deMIxnnA==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.1.tgz", + "integrity": "sha512-ngS/YWlBzhC2hb9Lmw6cCcks2aZRvFIB+iHlygZIELTfBPd9OUoRlOaa/KQLa/ycKwL2c8L8AFL67i3KQs5j3g==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.6.tgz", - "integrity": "sha512-Ti+NMHEjTNktCVxNjeWbYgmZvA2AqMMI2AMlzkXsU7W4pXCMhrryAmAIoo+7YdJbsx01JQWYVxGe62G6DoCLaA==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.1.tgz", + "integrity": "sha512-5NDlJaba0tWz7mU6IpCfOQ5xDwXwFg4SV6IKLDoNFEchkmlAifW8y2i2OCdmaG+MDpODi3xUBkM1qP2Sd6oUMQ==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.6.tgz", - "integrity": "sha512-OHoC6gO7XfjstgwR+z6UHKlvhqJfyMtNaJidjx3sEcfaDwS7R2lqR5AABi8PuilGgi0BO0O0sCXqLlpp3a0emQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.1.tgz", + "integrity": "sha512-bYIMi8vhtlCvAMg2xa0CCeOZ0wOZoOKUd9w46qmWfddBUuhwJj5C+QKHXOG+oTxXIVxq14Ffkww9orafYV0R6g==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.6.tgz", - "integrity": "sha512-zHZxPGkUlpfNJCboUrFqwlwEX5vI9LSN70b8XEb0DYzzlrZyCyOi7hwDp/+3Urm9AB7YCAJkgR5Sp1XBVjHdfQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.1.tgz", + "integrity": "sha512-FvO2t5F02zzvWRybStIR5QZJnOSaznF6E7njBD0hcCeb3Il84rKJCc4DoMhcLt68YljI6tWhqlDbiy+7ghfJlg==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.6.tgz", - "integrity": "sha512-K/Y8lYGTwTpv5ME8PSJxwxLolaDRdVy+lOd9yMRMiQE0BLUhtxtCWC9ypV42uh9WpLjoaD0joOsB9Q6mbrSGJg==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.1.tgz", + "integrity": "sha512-2kxqgbBvP+WUrKrrEcFqWGKrff5hGCmzEju5sbEZExuFV7sy+4nf5I9A9f0dFiP3z1hudVGJDrgbcDwt0Odvxw==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.6.tgz", - "integrity": "sha512-U6LtxEUrjBL2tpW+Kr1nHCSJWNeIed7U7l5o7FiKGGwGgIlFi4UHDiLI6TQ2lxi20fAU33CsruV3U0GuzMlXIw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-u+IxAt8i/iYc760qAMlrs0yGyYNokRJpWWdVBwTQ7n5zsjpJ2xifga3r8fWEJwdRvH0yVx15IM/QYZXQOJ8TQA==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.6.tgz", - "integrity": "sha512-eEBeAqpCfhdPSlCZCayjCiyIllVqy4tcqvm1xmg3BgJG0G5ITiMM4Cw2WVeRSgWDJqQGRyyb+q8Y2ltzhXOWsQ==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-aChXbr2c0aEwMhhkl9+JT7A2x7JMpmP5NLD7m+Drt4Ss6NZYTwecJTFEt/AbtIm5V/pMYVb1UDZXJtfTKNiHhw==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.6.tgz", - "integrity": "sha512-OrZs94AuO3ZS5tnqlyPRNgfWvboXaDQCi5aXGve3o3C+Sj0ctMUV9+Do+0zMvvLRumR8E0PTWKvtz9n5vzIsWw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.1.tgz", + "integrity": "sha512-AcZDEqMXW3Bm2dmhMc8metReCpx/NilC8LPKP44SFM97y5OaAfhG+47n0SAmhI9L8NaWMsZCS5NryM/6scyaWQ==", "optional": true }, "@nicolo-ribaudo/chokidar-2": { @@ -13093,20 +13093,20 @@ "dev": true }, "next": { - "version": "13.4.6", - "resolved": "https://registry.npmjs.org/next/-/next-13.4.6.tgz", - "integrity": "sha512-sjVqjxU+U2aXZnYt4Ud6CTLNNwWjdSfMgemGpIQJcN3Z7Jni9xRWbR0ie5fQzCg87aLqQVhKA2ud2gPoqJ9lGw==", + "version": "13.4.7-canary.1", + "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.1.tgz", + "integrity": "sha512-IKmDxqALqXSSJHSdlslKq1Dry5x8gaQfXtOo8acyVRu0GDIc/Az8Hv/TWUkRGZPA76yllZeEf16LIv3QLkvLMA==", "requires": { - "@next/env": "13.4.6", - "@next/swc-darwin-arm64": "13.4.6", - "@next/swc-darwin-x64": "13.4.6", - "@next/swc-linux-arm64-gnu": "13.4.6", - "@next/swc-linux-arm64-musl": "13.4.6", - "@next/swc-linux-x64-gnu": "13.4.6", - "@next/swc-linux-x64-musl": "13.4.6", - "@next/swc-win32-arm64-msvc": "13.4.6", - "@next/swc-win32-ia32-msvc": "13.4.6", - "@next/swc-win32-x64-msvc": "13.4.6", + "@next/env": "13.4.7-canary.1", + "@next/swc-darwin-arm64": "13.4.7-canary.1", + "@next/swc-darwin-x64": "13.4.7-canary.1", + "@next/swc-linux-arm64-gnu": "13.4.7-canary.1", + "@next/swc-linux-arm64-musl": "13.4.7-canary.1", + "@next/swc-linux-x64-gnu": "13.4.7-canary.1", + "@next/swc-linux-x64-musl": "13.4.7-canary.1", + "@next/swc-win32-arm64-msvc": "13.4.7-canary.1", + "@next/swc-win32-ia32-msvc": "13.4.7-canary.1", + "@next/swc-win32-x64-msvc": "13.4.7-canary.1", "@swc/helpers": "0.5.1", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", diff --git a/front/package.json b/front/package.json index 7c1abd9e..d08c4320 100644 --- a/front/package.json +++ b/front/package.json @@ -27,7 +27,7 @@ "formik": "^2.2.9", "framer-motion": "^7.3.6", "lucide-react": "^0.104.1", - "next": "^13.4.6", + "next": "^13.4.7-canary.1", "re-resizable": "^6.9.9", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", From d5ad9e2f2fe6e3891ad1b3024dd83dc442b490b3 Mon Sep 17 00:00:00 2001 From: swve Date: Wed, 21 Jun 2023 21:13:01 +0200 Subject: [PATCH 2/8] feat: various UI updates --- .../activity/[activityid]/activity.tsx | 137 +++++-------- .../(withmenu)/course/[courseid]/course.tsx | 192 ++++-------------- .../course/[courseid]/edit/page.tsx | 44 ++-- front/app/orgs/[orgslug]/(withmenu)/page.tsx | 7 +- .../Callout/Info/InfoCalloutComponent.tsx | 14 +- .../Activities/DynamicCanva/DynamicCanva.tsx | 2 +- .../Pages/CourseEdit/Draggables/Activity.tsx | 2 +- .../Pages/CourseEdit/Draggables/Chapter.tsx | 31 +-- .../Pages/Courses/ActivityIndicators.tsx | 73 +++++++ front/components/UI/Modal/Modal.tsx | 3 +- 10 files changed, 214 insertions(+), 291 deletions(-) create mode 100644 front/components/Pages/Courses/ActivityIndicators.tsx diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx index bf498799..285784c1 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx @@ -10,6 +10,7 @@ import { Check } from "lucide-react"; import { markActivityAsComplete } from "@services/courses/activity"; import ToolTip from "@components/UI/Tooltip/Tooltip"; import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf"; +import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators"; interface ActivityClientProps { activityid: string; @@ -35,81 +36,60 @@ function ActivityClient(props: ActivityClientProps) { return ( <> - - 
{JSON.stringify(activity, null, 2)}
- - - - - - - -

Course

-

{course.course.name}

- - - - {course.chapters.map((chapter: any) => { - return ( - <> -
- {chapter.activities.map((activity: any) => { - return ( - - - - - - ); - })} -
-      - - ); - })} - +
+ 
{JSON.stringify(activity, null, 2)}
+ + + + + + + +

Course

+

{course.course.name}

+ + + - {activity ? ( + {activity ? ( +
- {activity.type == "dynamic" && } - {/* todo : use apis & streams instead of this */} - {activity.type == "video" && } + {activity.type == "dynamic" && } + {/* todo : use apis & streams instead of this */} + {activity.type == "video" && } - {activity.type == "documentpdf" && } + {activity.type == "documentpdf" && } - + - {course.trail.activities_marked_complete && - course.trail.activities_marked_complete.includes("activity_" + activityid) && - course.trail.status == "ongoing" ? ( - - ) : ( - - )} - - - ) : (
)} - {
} - + {course.trail.activities_marked_complete && + course.trail.activities_marked_complete.includes("activity_" + activityid) && + course.trail.status == "ongoing" ? ( + + ) : ( + + )} + + +
+ ) : (
)} + {
} +
); } -const ActivityLayout = styled.div``; const ActivityThumbnail = styled.div` padding-right: 30px; @@ -133,32 +113,8 @@ const ActivityInfo = styled.div` } `; -const ChaptersWrapper = styled.div` - display: flex; - // row - flex-direction: row; - width: 100%; - width: 1300px; - margin: 0 auto; -`; -const ChapterIndicator = styled.div < { active?: boolean, done?: boolean } > ` - border-radius: 20px; - height: 5px; - background: #151515; - border-radius: 3px; - width: 35px; - background-color: ${props => props.done ? "green" : (props.active ? "#9d9d9d" : "black")}; - margin: 10px; - margin-bottom: 0px; - margin-left: 0px; - - &:hover { - cursor: pointer; - background-color: #9d9d9d; - } -`; const ActivityTopWrapper = styled.div` width: 1300px; @@ -171,7 +127,6 @@ const CourseContent = styled.div` display: flex; flex-direction: column; background-color: white; - min-height: 600px; `; const ActivityMarkerWrapper = styled.div` diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx index d88b6ce8..cb29bdcb 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx @@ -2,68 +2,74 @@ import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons"; import { removeCourse, startCourse } from "@services/courses/activity"; import Link from "next/link"; -import React from "react"; +import React, { use } from "react"; import styled from "styled-components"; import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config"; import useSWR, { mutate } from "swr"; import ToolTip from "@components/UI/Tooltip/Tooltip"; import PageLoading from "@components/Pages/PageLoading"; import { revalidateTags } from "@services/utils/ts/requests"; +import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators"; +import { useRouter } from "next/navigation"; const CourseClient = (props: any) => { const courseid = props.courseid; const orgslug = props.orgslug; const course = props.course; + const router = useRouter(); async function startCourseUI() { // Create activity await startCourse("course_" + courseid, orgslug); revalidateTags(['courses']); + router.refresh(); } async function quitCourse() { - // Close activity let activity = await removeCourse("course_" + courseid, orgslug); // Mutate course revalidateTags(['courses']); + router.refresh(); } console.log(course); + return ( <> {!course ? ( ) : ( - -

Course

-

- {course.course.name}{" "} - - - {" "} -

+
+
+

Course

+

+ {course.course.name} +

+
- - - - - -

Description

+
- +
+ + + +
+
+

Description

+

{course.course.description}

- + + +

What you will learn

+ -

What you will learn

-

{course.learnings == ![] ? "no data" : course.learnings}

- + -

Course Lessons

- - +

Course Lessons

+ {course.chapters.map((chapter: any) => { return (
{
); })} - - - + + +
+
{course.trail.status == "ongoing" ? ( - ) : ( - + )} - - - +
+
+
)} ); }; -const CourseThumbnailWrapper = styled.div` - display: flex; - padding-bottom: 20px; - img { - width: 100%; - height: 300px; - object-fit: cover; - object-position: center; - background: url(), #d9d9d9; - border: 1px solid rgba(255, 255, 255, 0.19); - box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42); - border-radius: 7px; - } -`; -const CoursePageLayout = styled.div` - width: 1300px; - margin: 0 auto; - p { - margin-bottom: 0px; - letter-spacing: -0.05em; - color: #727272; - font-weight: 700; - } - h1 { - margin-top: 5px; - letter-spacing: -0.05em; - margin-bottom: 10px; - } -`; +const StyledBox = (props: any) => ( +
+ {props.children} +
-const ChaptersWrapper = styled.div` - display: flex; - width: 100%; -`; -const CourseIndicator = styled.div< { active?: boolean, done?: boolean } >` - border-radius: 20px; - height: 5px; - background: #151515; - border-radius: 3px; +); - background-color: ${props => props.done ? "green" : "black"}; - - width: 40px; - margin: 10px; - margin-bottom: 20px; - margin-left: 0px; - - &:hover { - cursor: pointer; - background-color: #9d9d9d; - } -`; - -const ChapterSeparator = styled.div` - display: flex; - flex-direction: row; - padding-right: 7px; -`; - -const BoxWrapper = styled.div` - background: #ffffff; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); - border-radius: 7px; - padding: 20px; - padding-top: 7px; - padding-left: 30px; - - p { - font-family: "DM Sans"; - font-style: normal; - font-weight: 500; - line-height: 16px; - letter-spacing: -0.02em; - - color: #9d9d9d; - } -`; - -const CourseMetaWrapper = styled.div` - display: flex; - justify-content: space-between; -`; - -const CourseMetaLeft = styled.div` - width: 80%; -`; - -const CourseMetaRight = styled.div` - background: #ffffff; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); - border-radius: 7px; - padding: 20px; - width: 30%; - display: flex; - height: 100%; - justify-content: center; - margin-left: 50px; - margin-top: 20px; - button { - width: 100%; - height: 50px; - background: #151515; - border-radius: 15px; - border: none; - color: white; - font-weight: 700; - font-family: "DM Sans"; - font-size: 16px; - letter-spacing: -0.05em; - transition: all 0.2s ease; - box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42); - - &:hover { - cursor: pointer; - background: #000000; - } - } -`; export default CourseClient; diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx index 0dda558b..3d9790c0 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx @@ -15,6 +15,7 @@ import { createActivity, createFileActivity, createExternalVideoActivity } from import { getOrganizationContextInfo } from "@services/organizations/orgs"; import Modal from "@components/UI/Modal/Modal"; import { denyAccessToUser } from "@services/utils/react/middlewares/views"; +import { Folders, Package2 } from "lucide-react"; function CourseEdit(params: any) { @@ -243,21 +244,7 @@ function CourseEdit(params: any) { Edit Course {" "} - <Modal - isDialogOpen={newChapterModal} - onOpenChange={setNewChapterModal} - minHeight="sm" - dialogContent={<NewChapterModal - closeModal={closeNewChapterModal} - submitChapter={submitChapter} - ></NewChapterModal>} - dialogTitle="Create chapter" - dialogDescription="Add a new chapter to the course" - dialogTrigger={ - <button> Add chapter + - </button> - } - /> + <button onClick={() => { @@ -287,7 +274,7 @@ function CourseEdit(params: any) { <br /> {winReady && ( - <ChapterlistWrapper> + <div className="flex flex-col max-w-7xl justify-center items-center mx-auto"> <DragDropContext onDragEnd={onDragEnd}> <Droppable key="chapters" droppableId="chapters" type="chapter"> {(provided) => ( @@ -312,7 +299,24 @@ function CourseEdit(params: any) { )} </Droppable> </DragDropContext> - </ChapterlistWrapper> + <Modal + isDialogOpen={newChapterModal} + onOpenChange={setNewChapterModal} + minHeight="sm" + dialogContent={<NewChapterModal + closeModal={closeNewChapterModal} + submitChapter={submitChapter} + ></NewChapterModal>} + dialogTitle="Create chapter" + dialogDescription="Add a new chapter to the course" + dialogTrigger={ + <div className="flex max-w-7xl bg-black shadow rounded-md text-white justify-center space-x-2 p-3 w-72 hover:bg-gray-900 hover:cursor-pointer"> + <Folders size={20} /> + <div>Add chapter +</div> + </div> + } + /> + </div> )} </Page > </> @@ -351,9 +355,5 @@ const Page = styled.div` } } `; -const ChapterlistWrapper = styled.div` - display: flex; - padding-left: 30px; - justify-content: center; -`; + export default CourseEdit; diff --git a/front/app/orgs/[orgslug]/(withmenu)/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/page.tsx index b51d1a7d..d9484001 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/page.tsx @@ -73,6 +73,7 @@ const OrgHomePage = async (params: any) => { </div> {/* Courses */} + <div className='h-5'></div> <Title title="Courses" type="cou" /> <div className="home_courses flex flex-wrap"> {courses.map((course: any) => ( @@ -92,13 +93,13 @@ const OrgHomePage = async (params: any) => { }; -const Title = (props: any) => { + const Title = (props: any) => { return ( - <div className="home_category_title flex my-5"> + <div className="home_category_title flex my-5 items-center"> <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4"> <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" /> </div> - <h1 className="font-bold text-lg">{props.title}</h1> + <h1 className="font-bold text-2xl">{props.title}</h1> </div> ) } diff --git a/front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx index e52430e0..b04503b9 100644 --- a/front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx +++ b/front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx @@ -7,7 +7,7 @@ function InfoCalloutComponent(props: any) { return ( <NodeViewWrapper> <InfoCalloutWrapper contentEditable={props.extension.options.editable}> - <AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" /> + <AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" /> </InfoCalloutWrapper> </NodeViewWrapper> ); @@ -17,7 +17,7 @@ const InfoCalloutWrapper = styled.div` display: flex; flex-direction: row; color: #1f3a8a; - background-color: #dbe9fe; + background-color: #dbe9fe; border: 1px solid #c1d9fb; border-radius: 16px; margin: 1rem 0; @@ -36,14 +36,6 @@ const InfoCalloutWrapper = styled.div` } `; -const DragHandle = styled.div` - position: absolute; - top: 0; - left: 0; - width: 1rem; - height: 100%; - cursor: move; - z-index: 1; -`; + export default InfoCalloutComponent; diff --git a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx index 59cc3497..b988b488 100644 --- a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx +++ b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx @@ -64,7 +64,7 @@ function Canva(props: Editor) { const CanvaWrapper = styled.div` padding-top: 20px; - width: 1300px; + width: 100%; margin: 0 auto; `; diff --git a/front/components/Pages/CourseEdit/Draggables/Activity.tsx b/front/components/Pages/CourseEdit/Draggables/Activity.tsx index c3afd69d..3ca68255 100644 --- a/front/components/Pages/CourseEdit/Draggables/Activity.tsx +++ b/front/components/Pages/CourseEdit/Draggables/Activity.tsx @@ -11,7 +11,7 @@ function Activity(props: any) { <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}> {(provided) => ( <div - className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> + className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2 w-auto" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> <p>{props.activity.name} </p> <Link href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`} diff --git a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx index a26b1c86..e0361818 100644 --- a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx +++ b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import Activity from "./Activity"; +import { PlusSquare } from "lucide-react"; function Chapter(props: any) { return ( @@ -16,16 +17,9 @@ function Chapter(props: any) { > <h3 className="pt-3 font-bold text-md"> {props.info.list.chapter.name} - <button - onClick={() => { - props.openNewActivityModal(props.info.list.chapter.id); - }} - > - - Create Activity - </button> - + + <button onClick={() => { props.deleteChapter(props.info.list.chapter.id); @@ -37,13 +31,24 @@ function Chapter(props: any) { <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity"> {(provided) => ( <ActivitiesList {...provided.droppableProps} ref={provided.innerRef}> - {props.info.list.activities.map((activity: any, index: any) => ( - <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity> - ))} - {provided.placeholder} + <div className="flex flex-col "> + {props.info.list.activities.map((activity: any, index: any) => ( + <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity> + ))} + {provided.placeholder} + + <div onClick={() => { + props.openNewActivityModal(props.info.list.chapter.id); + }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center outline outline-3 text-slate-500 outline-slate-200 bg-slate-50 hover:cursor-pointer"> + <PlusSquare className="" size={17} /> + <div className="text-sm mx-auto my-auto items-center font-bold">Add Activity</div> + </div> + </div> </ActivitiesList> + )} </Droppable> + </ChapterWrapper> )} </Draggable> diff --git a/front/components/Pages/Courses/ActivityIndicators.tsx b/front/components/Pages/Courses/ActivityIndicators.tsx new file mode 100644 index 00000000..b0fe82cf --- /dev/null +++ b/front/components/Pages/Courses/ActivityIndicators.tsx @@ -0,0 +1,73 @@ +import ToolTip from '@components/UI/Tooltip/Tooltip' +import { getUriWithOrg } from '@services/config/config' +import Link from 'next/link' +import React from 'react' + + +interface Props { + course: any + orgslug: string + current_activity?: any +} + +function ActivityIndicators(props: Props) { + const course = props.course + const orgslug = props.orgslug + const courseid = course.course.course_id.replace("course_", "") + + const done_activity_style = 'bg-teal-600 hover:bg-teal-700' + const black_activity_style = 'bg-black hover:bg-gray-700' + const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700' + + + function isActivityDone(activity: any) { + if (course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing") { + return true + } + return false + } + + function isActivityCurrent(activity: any) { + let activityid = activity.id.replace("activity_", "") + if (props.current_activity && props.current_activity == activityid) { + return true + } + return false + } + + function getActivityClass(activity: any) { + if (isActivityDone(activity)) { + return done_activity_style + } + if (isActivityCurrent(activity)) { + return current_activity_style + } + return black_activity_style + } + + + return ( + <div className='grid grid-flow-col justify-stretch space-x-6'> + {course.chapters.map((chapter: any) => { + return ( + <> + <div className='grid grid-flow-col justify-stretch space-x-2'> + {chapter.activities.map((activity: any) => { + return ( + <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}> + <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}> + <div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div> + + </Link> + </ToolTip> + ); + })} + </div> + </> + ); + })} + </div> + ) +} + +export default ActivityIndicators \ No newline at end of file diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx index dab976b9..350c099e 100644 --- a/front/components/UI/Modal/Modal.tsx +++ b/front/components/UI/Modal/Modal.tsx @@ -79,7 +79,7 @@ const contentClose = keyframes({ const DialogOverlay = styled(Dialog.Overlay, { backgroundColor: blackA.blackA9, position: 'fixed', - + zIndex: 500, inset: 0, animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, '&[data-state="closed"]': { @@ -111,6 +111,7 @@ const DialogContent = styled(Dialog.Content, { backgroundColor: 'white', borderRadius: 18, + zIndex: 501, boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', position: 'fixed', top: '50%', From f6d50627bd778b24dd5a1d517caafbe66cfb53f2 Mon Sep 17 00:00:00 2001 From: swve <bdswve@gmail.com> Date: Thu, 22 Jun 2023 18:26:25 +0200 Subject: [PATCH 3/8] feat: refactors + various UI changes --- .../activity/[activityid]/edit/loading.tsx | 2 +- .../activity/[activityid]/edit/page.tsx | 2 +- front/app/layout.tsx | 2 +- front/app/organizations/new/page.tsx | 3 +- front/app/organizations/page.tsx | 5 ++- .../collection/[collectionid]/error.tsx | 2 +- .../collection/[collectionid]/loading.tsx | 2 +- .../(withmenu)/collections/loading.tsx | 2 +- .../(withmenu)/collections/new/page.tsx | 3 +- .../[orgslug]/(withmenu)/collections/page.tsx | 11 ++++--- .../activity/[activityid]/activity.tsx | 2 +- .../activity/[activityid]/error.tsx | 2 +- .../activity/[activityid]/loading.tsx | 2 +- .../(withmenu)/course/[courseid]/course.tsx | 9 +++--- .../course/[courseid]/edit/page.tsx | 11 +++---- .../(withmenu)/course/[courseid]/error.tsx | 2 +- .../(withmenu)/course/[courseid]/loading.tsx | 2 +- .../[orgslug]/(withmenu)/courses/courses.tsx | 29 ++++++----------- .../[orgslug]/(withmenu)/courses/error.tsx | 2 +- .../[orgslug]/(withmenu)/courses/loading.tsx | 2 +- front/app/orgs/[orgslug]/(withmenu)/error.tsx | 2 +- .../app/orgs/[orgslug]/(withmenu)/layout.tsx | 2 +- .../app/orgs/[orgslug]/(withmenu)/loading.tsx | 2 +- front/app/orgs/[orgslug]/(withmenu)/page.tsx | 31 ++++++------------ .../orgs/[orgslug]/(withmenu)/trail/page.tsx | 20 ++++-------- front/app/orgs/[orgslug]/login/page.tsx | 4 +-- front/app/orgs/[orgslug]/signup/page.tsx | 4 +-- .../{ => Objects}/Editor/Editor.tsx | 4 +-- .../{ => Objects}/Editor/EditorWrapper.tsx | 2 +- .../Extensions/Callout/Info/InfoCallout.ts | 0 .../Callout/Info/InfoCalloutComponent.tsx | 0 .../Callout/Warning/WarningCallout.ts | 0 .../Warning/WarningCalloutComponent.tsx | 0 .../Editor/Extensions/Image/ImageBlock.ts | 0 .../Extensions/Image/ImageBlockComponent.tsx | 4 +-- .../MathEquation/MathEquationBlock.ts | 0 .../MathEquationBlockComponent.tsx | 0 .../Editor/Extensions/PDF/PDFBlock.ts | 0 .../Extensions/PDF/PDFBlockComponent.tsx | 4 +-- .../Editor/Extensions/Quiz/QuizBlock.ts | 0 .../Extensions/Quiz/QuizBlockComponent.tsx | 0 .../Editor/Extensions/Video/VideoBlock.ts | 0 .../Extensions/Video/VideoBlockComponent.tsx | 4 +-- .../Editor/Toolbar/ToolbarButtons.tsx | 2 +- .../Loaders}/PageLoading.tsx | 0 .../{UI/Elements => Objects}/Menu/Menu.tsx | 2 +- .../Elements => Objects}/Menu/ProfileArea.tsx | 0 .../Modals/Activities/Create/NewActivity.tsx | 0 .../Create/NewActivityModal/DocumentPdf.tsx | 2 +- .../Create/NewActivityModal/DynamicCanva.tsx | 2 +- .../Create/NewActivityModal/Video.tsx | 2 +- .../Modals/Chapters/NewChapter.tsx | 2 +- .../Modals/Course/Create/CreateCourse.tsx | 2 +- .../Activities/DynamicCanva/DynamicCanva.tsx | 12 +++---- .../Pages/Courses/ActivityIndicators.tsx | 2 +- .../{UI => StyledElements}/Error/Error.tsx | 0 .../{UI => StyledElements}/Form/Form.tsx | 0 .../{UI => StyledElements}/Modal/Modal.tsx | 0 .../Titles/TypeOfContentTitle.tsx | 32 +++++++++++++++++++ .../{UI => StyledElements}/Toast/Toast.tsx | 0 .../Tooltip/Tooltip.tsx | 0 .../Wrappers/GeneralWrapper.tsx | 10 ++++++ front/components/UI/Elements/Styles/Title.tsx | 7 ---- .../components/{UI => }/Utils/ClientComp.tsx | 0 .../{UI => Utils}/libs/styled-registry.tsx | 0 front/public/svg/collections.svg | 2 +- front/public/svg/courses.svg | 2 +- front/public/svg/trail.svg | 5 +++ front/tsconfig.json | 2 +- 69 files changed, 138 insertions(+), 130 deletions(-) rename front/components/{ => Objects}/Editor/Editor.tsx (98%) rename front/components/{ => Objects}/Editor/EditorWrapper.tsx (96%) rename front/components/{ => Objects}/Editor/Extensions/Callout/Info/InfoCallout.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx (100%) rename front/components/{ => Objects}/Editor/Extensions/Callout/Warning/WarningCallout.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx (100%) rename front/components/{ => Objects}/Editor/Extensions/Image/ImageBlock.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/Image/ImageBlockComponent.tsx (95%) rename front/components/{ => Objects}/Editor/Extensions/MathEquation/MathEquationBlock.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx (100%) rename front/components/{ => Objects}/Editor/Extensions/PDF/PDFBlock.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/PDF/PDFBlockComponent.tsx (93%) rename front/components/{ => Objects}/Editor/Extensions/Quiz/QuizBlock.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/Quiz/QuizBlockComponent.tsx (100%) rename front/components/{ => Objects}/Editor/Extensions/Video/VideoBlock.ts (100%) rename front/components/{ => Objects}/Editor/Extensions/Video/VideoBlockComponent.tsx (94%) rename front/components/{ => Objects}/Editor/Toolbar/ToolbarButtons.tsx (98%) rename front/components/{Pages => Objects/Loaders}/PageLoading.tsx (100%) rename front/components/{UI/Elements => Objects}/Menu/Menu.tsx (99%) rename front/components/{UI/Elements => Objects}/Menu/ProfileArea.tsx (100%) rename front/components/{ => Objects}/Modals/Activities/Create/NewActivity.tsx (100%) rename front/components/{ => Objects}/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx (96%) rename front/components/{ => Objects}/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx (96%) rename front/components/{ => Objects}/Modals/Activities/Create/NewActivityModal/Video.tsx (98%) rename front/components/{ => Objects}/Modals/Chapters/NewChapter.tsx (97%) rename front/components/{ => Objects}/Modals/Course/Create/CreateCourse.tsx (98%) rename front/components/{UI => StyledElements}/Error/Error.tsx (100%) rename front/components/{UI => StyledElements}/Form/Form.tsx (100%) rename front/components/{UI => StyledElements}/Modal/Modal.tsx (100%) create mode 100644 front/components/StyledElements/Titles/TypeOfContentTitle.tsx rename front/components/{UI => StyledElements}/Toast/Toast.tsx (100%) rename front/components/{UI => StyledElements}/Tooltip/Tooltip.tsx (100%) create mode 100644 front/components/StyledElements/Wrappers/GeneralWrapper.tsx delete mode 100644 front/components/UI/Elements/Styles/Title.tsx rename front/components/{UI => }/Utils/ClientComp.tsx (100%) rename front/components/{UI => Utils}/libs/styled-registry.tsx (100%) create mode 100644 front/public/svg/trail.svg diff --git a/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx index b3fd3bc3..3f902486 100644 --- a/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx +++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { // Or a custom loading skeleton component 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 2be18fae..37c19000 100644 --- a/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx +++ b/front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx @@ -1,7 +1,7 @@ import { default as React, } from "react"; import { useRouter } from "next/navigation"; import AuthProvider from "@components/Security/AuthProvider"; -import EditorWrapper from "@components/Editor/EditorWrapper"; +import EditorWrapper from "@components/Objects/Editor/EditorWrapper"; import { getAPIUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; import { getOrganizationContextInfo } from "@services/organizations/orgs"; diff --git a/front/app/layout.tsx b/front/app/layout.tsx index dfad1471..84c73f3a 100644 --- a/front/app/layout.tsx +++ b/front/app/layout.tsx @@ -1,6 +1,6 @@ "use client"; import "../styles/globals.css"; -import StyledComponentsRegistry from "../components/UI/libs/styled-registry"; +import StyledComponentsRegistry from "../components/Utils/libs/styled-registry"; import { motion } from "framer-motion"; export default function RootLayout({ children }: { children: React.ReactNode }) { diff --git a/front/app/organizations/new/page.tsx b/front/app/organizations/new/page.tsx index d80467e0..df43c47b 100644 --- a/front/app/organizations/new/page.tsx +++ b/front/app/organizations/new/page.tsx @@ -1,6 +1,5 @@ "use client"; import React from "react"; -import { Title } from "../../../components/UI/Elements/Styles/Title"; import { createNewOrganization } from "../../../services/organizations/orgs"; const Organizations = () => { @@ -35,7 +34,7 @@ const Organizations = () => { return ( <div> - <Title>New Organization +
New Organization
Name:
Description: diff --git a/front/app/organizations/page.tsx b/front/app/organizations/page.tsx index 84b3fb64..e2654448 100644 --- a/front/app/organizations/page.tsx +++ b/front/app/organizations/page.tsx @@ -1,7 +1,6 @@ "use client"; //todo: use server components import Link from "next/link"; import React from "react"; -import { Title } from "../../components/UI/Elements/Styles/Title"; import { deleteOrganizationFromBackend } from "@services/organizations/orgs"; import useSWR, { mutate } from "swr"; import { swrFetcher } from "@services/utils/ts/requests"; @@ -19,14 +18,14 @@ const Organizations = () => { return ( <> - + <div className="font-bold text-lg"> Your Organizations{" "} <Link href="/organizations/new"> <button className="bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 focus:outline-none"> + </button> </Link> - +
{error &&

Failed to load

} diff --git a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx index 9e4c3efb..8bac23db 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx @@ -1,6 +1,6 @@ 'use client'; // Error components must be Client Components -import ErrorUI from '@components/UI/Error/Error'; +import ErrorUI from '@components/StyledElements/Error/Error'; import { useEffect } from 'react'; export default function Error({ diff --git a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx index 9a7cafe9..ec352ab7 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { return ( diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/loading.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/loading.tsx index b3fd3bc3..3f902486 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/loading.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { // Or a custom loading skeleton component diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx index 553d3468..62b20dfe 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/new/page.tsx @@ -1,7 +1,6 @@ "use client"; import { useRouter } from "next/navigation"; import React from "react"; -import { Title } from "@components/UI/Elements/Styles/Title"; import { createCollection } from "@services/courses/collections"; import useSWR from "swr"; import { getAPIUrl, getUriWithOrg } from "@services/config/config"; @@ -54,7 +53,7 @@ function NewCollection(params: any) { return ( <>
- Add new +
Add new
{ const collections = await getOrgCollectionsWithAuthHeader(org_id, access_token_cookie ? access_token_cookie.value : null); return ( -
+
- + <TypeOfContentTitle title="Collections" type="col" /> <Link className="flex justify-center" href={getUriWithOrg(orgslug, "/collections/new")}> <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Collection + </button> </Link> </div> <div className="home_collections flex flex-wrap"> {collections.map((collection: any) => ( - <div className="pr-8 flex flex-col" key={collection.collection_id}> + <div className="flex flex-col py-3 px-3" key={collection.collection_id}> <CollectionAdminEditsArea org_id={org_id} collection_id={collection.collection_id} collection={collection} /> <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}> <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" > @@ -68,7 +69,7 @@ const CollectionsPage = async (params: any) => { </div> ))} </div> - </div> + </GeneralWrapperStyled> ); } diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx index 285784c1..068cd078 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx @@ -8,7 +8,7 @@ import VideoActivity from "@components/Pages/Activities/Video/Video"; import useSWR, { mutate } from "swr"; import { Check } from "lucide-react"; import { markActivityAsComplete } from "@services/courses/activity"; -import ToolTip from "@components/UI/Tooltip/Tooltip"; +import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf"; import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators"; diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/error.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/error.tsx index 9e4c3efb..8bac23db 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/error.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/error.tsx @@ -1,6 +1,6 @@ 'use client'; // Error components must be Client Components -import ErrorUI from '@components/UI/Error/Error'; +import ErrorUI from '@components/StyledElements/Error/Error'; import { useEffect } from 'react'; export default function Error({ diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/loading.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/loading.tsx index b3fd3bc3..3f902486 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/loading.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { // Or a custom loading skeleton component diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx index cb29bdcb..2e2580a4 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx @@ -6,11 +6,12 @@ import React, { use } from "react"; import styled from "styled-components"; import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config"; import useSWR, { mutate } from "swr"; -import ToolTip from "@components/UI/Tooltip/Tooltip"; -import PageLoading from "@components/Pages/PageLoading"; +import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; import { revalidateTags } from "@services/utils/ts/requests"; import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators"; import { useRouter } from "next/navigation"; +import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper"; const CourseClient = (props: any) => { const courseid = props.courseid; @@ -40,7 +41,7 @@ const CourseClient = (props: any) => { {!course ? ( <PageLoading></PageLoading> ) : ( - <div className="max-w-7xl mx-auto px-4 py-10 tracking-tight"> + <GeneralWrapperStyled> <div className="pb-3"> <p className="text-md font-bold text-gray-400 pb-2">Course</p> <h1 className="text-3xl -mt-3 font-bold"> @@ -107,7 +108,7 @@ const CourseClient = (props: any) => { )} </div> </div> - </div> + </GeneralWrapperStyled> )} </> ); diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx index 3d9790c0..423fa6f9 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx @@ -3,17 +3,16 @@ import React from "react"; import { useState, useEffect } from "react"; import styled from "styled-components"; -import { Title } from "@components/UI/Elements/Styles/Title"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; import { initialData, initialData2 } from "@components/Pages/CourseEdit/Draggables/data"; import Chapter from "@components/Pages/CourseEdit/Draggables/Chapter"; import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters"; import { useRouter } from "next/navigation"; -import NewChapterModal from "@components/Modals/Chapters/NewChapter"; -import NewActivityModal from "@components/Modals/Activities/Create/NewActivity"; +import NewChapterModal from "@components/Objects/Modals/Chapters/NewChapter"; +import NewActivityModal from "@components/Objects/Modals/Activities/Create/NewActivity"; import { createActivity, createFileActivity, createExternalVideoActivity } from "@services/courses/activities"; import { getOrganizationContextInfo } from "@services/organizations/orgs"; -import Modal from "@components/UI/Modal/Modal"; +import Modal from "@components/StyledElements/Modal/Modal"; import { denyAccessToUser } from "@services/utils/react/middlewares/views"; import { Folders, Package2 } from "lucide-react"; @@ -242,7 +241,7 @@ function CourseEdit(params: any) { return ( <> <Page> - <Title> + <div className="font-bold text-lg"> Edit Course {" "} @@ -253,7 +252,7 @@ function CourseEdit(params: any) { > Save </button> - +
-
+
- + <TypeOfContentTitle title="Courses" type="cou" /> <Modal isDialogOpen={newCourseModal} onOpenChange={setNewCourseModal} @@ -79,24 +79,13 @@ function Courses(props: CourseProps) { ))} </div> - </div> + </GeneralWrapperStyled> </div> ) } -export const Title = (props: any) => { - return ( - <div className="home_category_title flex my-5"> - <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4"> - <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" /> - </div> - <h1 className="font-bold text-lg">{props.title}</h1> - </div> - ) -} - const AdminEditsArea = (props: any) => { const org_roles_values = ["admin", "owner"]; const user_roles_values = ["role_admin"]; diff --git a/front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx b/front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx index 9e4c3efb..8bac23db 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx @@ -1,6 +1,6 @@ 'use client'; // Error components must be Client Components -import ErrorUI from '@components/UI/Error/Error'; +import ErrorUI from '@components/StyledElements/Error/Error'; import { useEffect } from 'react'; export default function Error({ diff --git a/front/app/orgs/[orgslug]/(withmenu)/courses/loading.tsx b/front/app/orgs/[orgslug]/(withmenu)/courses/loading.tsx index b3fd3bc3..3f902486 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/courses/loading.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/courses/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { // Or a custom loading skeleton component diff --git a/front/app/orgs/[orgslug]/(withmenu)/error.tsx b/front/app/orgs/[orgslug]/(withmenu)/error.tsx index 9e4c3efb..8bac23db 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/error.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/error.tsx @@ -1,6 +1,6 @@ 'use client'; // Error components must be Client Components -import ErrorUI from '@components/UI/Error/Error'; +import ErrorUI from '@components/StyledElements/Error/Error'; import { useEffect } from 'react'; export default function Error({ diff --git a/front/app/orgs/[orgslug]/(withmenu)/layout.tsx b/front/app/orgs/[orgslug]/(withmenu)/layout.tsx index 05df761a..f26f3813 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/layout.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/layout.tsx @@ -1,5 +1,5 @@ import "@styles/globals.css"; -import { Menu } from "@components/UI/Elements/Menu/Menu"; +import { Menu } from "@components/Objects/Menu/Menu"; import AuthProvider from "@components/Security/AuthProvider"; export default async function RootLayout({ children, params }: { children: React.ReactNode , params:any}) { diff --git a/front/app/orgs/[orgslug]/(withmenu)/loading.tsx b/front/app/orgs/[orgslug]/(withmenu)/loading.tsx index 9a7cafe9..ec352ab7 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/loading.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/loading.tsx @@ -1,4 +1,4 @@ -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; export default function Loading() { return ( diff --git a/front/app/orgs/[orgslug]/(withmenu)/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/page.tsx index d9484001..046bda78 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/page.tsx @@ -2,14 +2,15 @@ export const dynamic = 'force-dynamic'; import { Metadata, ResolvingMetadata } from 'next'; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; import { getCourse, getOrgCourses, getOrgCoursesWithAuthHeader } from "@services/courses/courses"; -import CoursesLogo from "public/svg/courses.svg"; -import CollectionsLogo from "public/svg/collections.svg"; + import Link from "next/link"; import Image from "next/image"; import { getOrgCollections, getOrgCollectionsWithAuthHeader } from "@services/courses/collections"; import { getOrganizationContextInfo } from '@services/organizations/orgs'; import { cookies } from 'next/headers'; +import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'; +import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'; type MetadataProps = { params: { orgslug: string }; @@ -50,12 +51,12 @@ const OrgHomePage = async (params: any) => { return ( <div> - <div className="max-w-7xl mx-auto px-4 py-10"> + <GeneralWrapperStyled> {/* Collections */} - <Title title="Collections" type="col" /> + <TypeOfContentTitle title="Collections" type="col" /> <div className="home_collections flex flex-wrap"> {collections.map((collection: any) => ( - <div className="pr-8 flex flex-col" key={collection.collection_id}> + <div className="flex flex-col py-3 px-3" key={collection.collection_id}> <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}> <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" > <h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1> @@ -74,35 +75,23 @@ const OrgHomePage = async (params: any) => { {/* Courses */} <div className='h-5'></div> - <Title title="Courses" type="cou" /> + <TypeOfContentTitle title="Courses" type="cou" /> <div className="home_courses flex flex-wrap"> {courses.map((course: any) => ( - <div className="pr-8" key={course.course_id}> + <div className="py-3 px-3" key={course.course_id}> <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}> - <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}> + <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover transition-all hover:scale-102" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}> </div> </Link> <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2> </div> ))} </div> - </div> + </GeneralWrapperStyled> </div> ); }; - const Title = (props: any) => { - return ( - <div className="home_category_title flex my-5 items-center"> - <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4"> - <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" /> - </div> - <h1 className="font-bold text-2xl">{props.title}</h1> - </div> - ) -} - - export default OrgHomePage; diff --git a/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx index b44645af..b32c1463 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx @@ -1,5 +1,7 @@ "use client"; -import PageLoading from "@components/Pages/PageLoading"; +import PageLoading from "@components/Objects/Loaders/PageLoading"; +import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle"; +import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper"; import { getAPIUrl, getBackendUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; import React from "react"; @@ -12,10 +14,8 @@ function Trail(params: any) { return ( - <TrailLayout> - <h1>Trail</h1> - <br /> - {error && <p>Failed to load</p>} + <GeneralWrapperStyled> + <TypeOfContentTitle title="Trail" type="tra" /> {!trail ? ( <PageLoading></PageLoading> ) : ( @@ -36,19 +36,13 @@ function Trail(params: any) { ))} </div> )} - </TrailLayout> + </GeneralWrapperStyled> ); } export default Trail; -const TrailLayout = styled.div` - display: flex; - margin: 0 auto; - width: 1300px; - height: 100%; - flex-direction: column; -`; + const TrailMetadata = styled.div` display: flex; diff --git a/front/app/orgs/[orgslug]/login/page.tsx b/front/app/orgs/[orgslug]/login/page.tsx index f64a72a2..fed24301 100644 --- a/front/app/orgs/[orgslug]/login/page.tsx +++ b/front/app/orgs/[orgslug]/login/page.tsx @@ -4,10 +4,10 @@ import React, { useState } from "react"; import { styled } from '@stitches/react'; import { Title } from "../../../../components/UI/Elements/Styles/Title"; import { loginAndGetToken } from "../../../../services/auth/auth"; -import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from '@components/UI/Form/Form'; +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from '@components/StyledElements/Form/Form'; import * as Form from '@radix-ui/react-form'; import { BarLoader } from 'react-spinners'; -import Toast from '@components/UI/Toast/Toast'; +import Toast from '@components/StyledElements/Toast/Toast'; import { toast } from 'react-hot-toast'; const Login = () => { diff --git a/front/app/orgs/[orgslug]/signup/page.tsx b/front/app/orgs/[orgslug]/signup/page.tsx index 3f0fc0db..29e13ff8 100644 --- a/front/app/orgs/[orgslug]/signup/page.tsx +++ b/front/app/orgs/[orgslug]/signup/page.tsx @@ -1,6 +1,5 @@ "use client"; import React from "react"; -import { Title } from "../../../../components/UI/Elements/Styles/Title"; import { signup } from "../../../../services/auth/auth"; import { useRouter } from "next/navigation"; @@ -39,9 +38,8 @@ const SignUp = (params: any) => { return ( <div> <div title="Sign up"> - <Title>Sign up +
Sign up
- {/* Create a login ui with tailwindcss */}
diff --git a/front/components/Editor/Editor.tsx b/front/components/Objects/Editor/Editor.tsx similarity index 98% rename from front/components/Editor/Editor.tsx rename to front/components/Objects/Editor/Editor.tsx index 19cfee84..a9b77fb8 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Objects/Editor/Editor.tsx @@ -4,7 +4,7 @@ import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import Collaboration from "@tiptap/extension-collaboration"; import CollaborationCursor from "@tiptap/extension-collaboration-cursor"; -import { AuthContext } from "../Security/AuthProvider"; +import { AuthContext } from "../../Security/AuthProvider"; import learnhouseIcon from "public/learnhouse_icon.png"; import { ToolbarButtons } from "./Toolbar/ToolbarButtons"; import { motion, AnimatePresence } from "framer-motion"; @@ -23,7 +23,7 @@ import { Eye, Save } from "lucide-react"; import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock"; import PDFBlock from "./Extensions/PDF/PDFBlock"; import QuizBlock from "./Extensions/Quiz/QuizBlock"; -import ToolTip from "@components/UI/Tooltip/Tooltip"; +import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import Link from "next/link"; interface Editor { diff --git a/front/components/Editor/EditorWrapper.tsx b/front/components/Objects/Editor/EditorWrapper.tsx similarity index 96% rename from front/components/Editor/EditorWrapper.tsx rename to front/components/Objects/Editor/EditorWrapper.tsx index 3119a71e..ed09a6d9 100644 --- a/front/components/Editor/EditorWrapper.tsx +++ b/front/components/Objects/Editor/EditorWrapper.tsx @@ -5,7 +5,7 @@ import { WebrtcProvider } from "y-webrtc"; import Editor from "./Editor"; import { updateActivity } from "@services/courses/activities"; import { toast } from "react-hot-toast"; -import Toast from "@components/UI/Toast/Toast"; +import Toast from "@components/StyledElements/Toast/Toast"; interface EditorWrapperProps { content: string; diff --git a/front/components/Editor/Extensions/Callout/Info/InfoCallout.ts b/front/components/Objects/Editor/Extensions/Callout/Info/InfoCallout.ts similarity index 100% rename from front/components/Editor/Extensions/Callout/Info/InfoCallout.ts rename to front/components/Objects/Editor/Extensions/Callout/Info/InfoCallout.ts diff --git a/front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx similarity index 100% rename from front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx rename to front/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx diff --git a/front/components/Editor/Extensions/Callout/Warning/WarningCallout.ts b/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts similarity index 100% rename from front/components/Editor/Extensions/Callout/Warning/WarningCallout.ts rename to front/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts diff --git a/front/components/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx b/front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx similarity index 100% rename from front/components/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx rename to front/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx diff --git a/front/components/Editor/Extensions/Image/ImageBlock.ts b/front/components/Objects/Editor/Extensions/Image/ImageBlock.ts similarity index 100% rename from front/components/Editor/Extensions/Image/ImageBlock.ts rename to front/components/Objects/Editor/Extensions/Image/ImageBlock.ts diff --git a/front/components/Editor/Extensions/Image/ImageBlockComponent.tsx b/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx similarity index 95% rename from front/components/Editor/Extensions/Image/ImageBlockComponent.tsx rename to front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx index 0751e19c..0825fa13 100644 --- a/front/components/Editor/Extensions/Image/ImageBlockComponent.tsx +++ b/front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx @@ -5,8 +5,8 @@ import { Resizable } from 're-resizable'; import * as AspectRatio from '@radix-ui/react-aspect-ratio'; import { AlertCircle, AlertTriangle, Image, ImagePlus, Info } from "lucide-react"; -import { getImageFile, uploadNewImageFile } from "../../../../services/blocks/Image/images"; -import { getBackendUrl } from "../../../../services/config/config"; +import { getImageFile, uploadNewImageFile } from "../../../../../services/blocks/Image/images"; +import { getBackendUrl } from "../../../../../services/config/config"; function ImageBlockComponent(props: any) { const [image, setImage] = React.useState(null); diff --git a/front/components/Editor/Extensions/MathEquation/MathEquationBlock.ts b/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlock.ts similarity index 100% rename from front/components/Editor/Extensions/MathEquation/MathEquationBlock.ts rename to front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlock.ts diff --git a/front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx b/front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx similarity index 100% rename from front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx rename to front/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx diff --git a/front/components/Editor/Extensions/PDF/PDFBlock.ts b/front/components/Objects/Editor/Extensions/PDF/PDFBlock.ts similarity index 100% rename from front/components/Editor/Extensions/PDF/PDFBlock.ts rename to front/components/Objects/Editor/Extensions/PDF/PDFBlock.ts diff --git a/front/components/Editor/Extensions/PDF/PDFBlockComponent.tsx b/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx similarity index 93% rename from front/components/Editor/Extensions/PDF/PDFBlockComponent.tsx rename to front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx index eaf8bc7f..52c125d0 100644 --- a/front/components/Editor/Extensions/PDF/PDFBlockComponent.tsx +++ b/front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx @@ -2,8 +2,8 @@ import { NodeViewWrapper } from "@tiptap/react"; import React from "react"; import styled from "styled-components"; import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info } from "lucide-react"; -import { getPDFFile, uploadNewPDFFile } from "../../../../services/blocks/Pdf/pdf"; -import { getBackendUrl } from "../../../../services/config/config"; +import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf"; +import { getBackendUrl } from "../../../../../services/config/config"; function PDFBlockComponent(props: any) { const [pdf, setPDF] = React.useState(null); diff --git a/front/components/Editor/Extensions/Quiz/QuizBlock.ts b/front/components/Objects/Editor/Extensions/Quiz/QuizBlock.ts similarity index 100% rename from front/components/Editor/Extensions/Quiz/QuizBlock.ts rename to front/components/Objects/Editor/Extensions/Quiz/QuizBlock.ts diff --git a/front/components/Editor/Extensions/Quiz/QuizBlockComponent.tsx b/front/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx similarity index 100% rename from front/components/Editor/Extensions/Quiz/QuizBlockComponent.tsx rename to front/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx diff --git a/front/components/Editor/Extensions/Video/VideoBlock.ts b/front/components/Objects/Editor/Extensions/Video/VideoBlock.ts similarity index 100% rename from front/components/Editor/Extensions/Video/VideoBlock.ts rename to front/components/Objects/Editor/Extensions/Video/VideoBlock.ts diff --git a/front/components/Editor/Extensions/Video/VideoBlockComponent.tsx b/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx similarity index 94% rename from front/components/Editor/Extensions/Video/VideoBlockComponent.tsx rename to front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx index cb324c52..2911d8ec 100644 --- a/front/components/Editor/Extensions/Video/VideoBlockComponent.tsx +++ b/front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx @@ -2,8 +2,8 @@ import { NodeViewWrapper } from "@tiptap/react"; import { AlertTriangle, Image, Video } from "lucide-react"; import React from "react"; import styled from "styled-components"; -import { getBackendUrl } from "../../../../services/config/config"; -import { uploadNewVideoFile } from "../../../../services/blocks/Video/video"; +import { getBackendUrl } from "../../../../../services/config/config"; +import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video"; function VideoBlockComponents(props: any) { const [video, setVideo] = React.useState(null); diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx similarity index 98% rename from front/components/Editor/Toolbar/ToolbarButtons.tsx rename to front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx index 3dd9fcac..7f04b6c7 100644 --- a/front/components/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon } from "@radix-ui/react-icons"; import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react"; -import ToolTip from "@components/UI/Tooltip/Tooltip"; +import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; export const ToolbarButtons = ({ editor, props }: any) => { if (!editor) { diff --git a/front/components/Pages/PageLoading.tsx b/front/components/Objects/Loaders/PageLoading.tsx similarity index 100% rename from front/components/Pages/PageLoading.tsx rename to front/components/Objects/Loaders/PageLoading.tsx diff --git a/front/components/UI/Elements/Menu/Menu.tsx b/front/components/Objects/Menu/Menu.tsx similarity index 99% rename from front/components/UI/Elements/Menu/Menu.tsx rename to front/components/Objects/Menu/Menu.tsx index 52e8dbf3..4baf3e1d 100644 --- a/front/components/UI/Elements/Menu/Menu.tsx +++ b/front/components/Objects/Menu/Menu.tsx @@ -3,7 +3,7 @@ import React from "react"; import Link from "next/link"; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; import { getOrganizationContextInfo } from "@services/organizations/orgs"; -import ClientComponentSkeleton from "@components/UI/Utils/ClientComp"; +import ClientComponentSkeleton from "@components/Utils/ClientComp"; import { HeaderProfileBox } from "@components/Security/HeaderProfileBox"; export const Menu = async (props: any) => { diff --git a/front/components/UI/Elements/Menu/ProfileArea.tsx b/front/components/Objects/Menu/ProfileArea.tsx similarity index 100% rename from front/components/UI/Elements/Menu/ProfileArea.tsx rename to front/components/Objects/Menu/ProfileArea.tsx diff --git a/front/components/Modals/Activities/Create/NewActivity.tsx b/front/components/Objects/Modals/Activities/Create/NewActivity.tsx similarity index 100% rename from front/components/Modals/Activities/Create/NewActivity.tsx rename to front/components/Objects/Modals/Activities/Create/NewActivity.tsx diff --git a/front/components/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx b/front/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx similarity index 96% rename from front/components/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx rename to front/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx index 01310a84..c231271d 100644 --- a/front/components/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx +++ b/front/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx @@ -1,4 +1,4 @@ -import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form"; +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form"; import React, { useState } from "react"; import * as Form from '@radix-ui/react-form'; import BarLoader from "react-spinners/BarLoader"; diff --git a/front/components/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx b/front/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx similarity index 96% rename from front/components/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx rename to front/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx index c4e711e0..72722376 100644 --- a/front/components/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx +++ b/front/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx @@ -1,4 +1,4 @@ -import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form"; +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form"; import React, { useState } from "react"; import * as Form from '@radix-ui/react-form'; import BarLoader from "react-spinners/BarLoader"; diff --git a/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx b/front/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx similarity index 98% rename from front/components/Modals/Activities/Create/NewActivityModal/Video.tsx rename to front/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx index a510ae11..ef855e4a 100644 --- a/front/components/Modals/Activities/Create/NewActivityModal/Video.tsx +++ b/front/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx @@ -1,4 +1,4 @@ -import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form"; +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form"; import React, { useState } from "react"; import * as Form from '@radix-ui/react-form'; import BarLoader from "react-spinners/BarLoader"; diff --git a/front/components/Modals/Chapters/NewChapter.tsx b/front/components/Objects/Modals/Chapters/NewChapter.tsx similarity index 97% rename from front/components/Modals/Chapters/NewChapter.tsx rename to front/components/Objects/Modals/Chapters/NewChapter.tsx index 6f6c0cfa..3d4b563b 100644 --- a/front/components/Modals/Chapters/NewChapter.tsx +++ b/front/components/Objects/Modals/Chapters/NewChapter.tsx @@ -1,4 +1,4 @@ -import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/UI/Form/Form"; +import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/StyledElements/Form/Form"; import { FormMessage } from "@radix-ui/react-form"; import * as Form from '@radix-ui/react-form'; import React, { useState } from "react"; diff --git a/front/components/Modals/Course/Create/CreateCourse.tsx b/front/components/Objects/Modals/Course/Create/CreateCourse.tsx similarity index 98% rename from front/components/Modals/Course/Create/CreateCourse.tsx rename to front/components/Objects/Modals/Course/Create/CreateCourse.tsx index 3cf34896..f4a49c82 100644 --- a/front/components/Modals/Course/Create/CreateCourse.tsx +++ b/front/components/Objects/Modals/Course/Create/CreateCourse.tsx @@ -1,4 +1,4 @@ -import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/UI/Form/Form' +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/StyledElements/Form/Form' import * as Form from '@radix-ui/react-form' import { getAPIUrl, getUriWithOrg } from '@services/config/config'; import { FormMessage } from "@radix-ui/react-form"; diff --git a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx index b988b488..c79b99fd 100644 --- a/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx +++ b/front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx @@ -4,12 +4,12 @@ import StarterKit from "@tiptap/starter-kit"; import { styled } from "styled-components"; import Youtube from "@tiptap/extension-youtube"; // Custom Extensions -import InfoCallout from "@editor/Extensions/Callout/Info/InfoCallout"; -import WarningCallout from "@editor/Extensions/Callout/Warning/WarningCallout"; -import ImageBlock from "@editor/Extensions/Image/ImageBlock"; -import VideoBlock from "@editor/Extensions/Video/VideoBlock"; -import MathEquationBlock from "@components/Editor/Extensions/MathEquation/MathEquationBlock"; -import PDFBlock from "@components/Editor/Extensions/PDF/PDFBlock"; +import InfoCallout from "@components/Objects/Editor/Extensions/Callout/Info/InfoCallout"; +import WarningCallout from "@components/Objects/Editor/Extensions/Callout/Warning/WarningCallout"; +import ImageBlock from "@components/Objects/Editor/Extensions/Image/ImageBlock"; +import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock"; +import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock"; +import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock"; interface Editor { content: string; diff --git a/front/components/Pages/Courses/ActivityIndicators.tsx b/front/components/Pages/Courses/ActivityIndicators.tsx index b0fe82cf..9e738e54 100644 --- a/front/components/Pages/Courses/ActivityIndicators.tsx +++ b/front/components/Pages/Courses/ActivityIndicators.tsx @@ -1,4 +1,4 @@ -import ToolTip from '@components/UI/Tooltip/Tooltip' +import ToolTip from '@components/StyledElements/Tooltip/Tooltip' import { getUriWithOrg } from '@services/config/config' import Link from 'next/link' import React from 'react' diff --git a/front/components/UI/Error/Error.tsx b/front/components/StyledElements/Error/Error.tsx similarity index 100% rename from front/components/UI/Error/Error.tsx rename to front/components/StyledElements/Error/Error.tsx diff --git a/front/components/UI/Form/Form.tsx b/front/components/StyledElements/Form/Form.tsx similarity index 100% rename from front/components/UI/Form/Form.tsx rename to front/components/StyledElements/Form/Form.tsx diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/StyledElements/Modal/Modal.tsx similarity index 100% rename from front/components/UI/Modal/Modal.tsx rename to front/components/StyledElements/Modal/Modal.tsx diff --git a/front/components/StyledElements/Titles/TypeOfContentTitle.tsx b/front/components/StyledElements/Titles/TypeOfContentTitle.tsx new file mode 100644 index 00000000..a06da92b --- /dev/null +++ b/front/components/StyledElements/Titles/TypeOfContentTitle.tsx @@ -0,0 +1,32 @@ +import Image from 'next/image' +import CoursesLogo from "public/svg/courses.svg"; +import CollectionsLogo from "public/svg/collections.svg"; +import TrailLogo from "public/svg/trail.svg"; + +function TypeOfContentTitle(props: { title: string, type: string }) { + + function getLogo() { + if (props.type == "col") { + return CollectionsLogo; + } + + else if (props.type == "cou") { + return CoursesLogo; + } + + else if (props.type == "tra") { + return TrailLogo; + } + } + + return ( +
+
+ Courses logo +
+

{props.title}

+
+ ) +} + +export default TypeOfContentTitle \ No newline at end of file diff --git a/front/components/UI/Toast/Toast.tsx b/front/components/StyledElements/Toast/Toast.tsx similarity index 100% rename from front/components/UI/Toast/Toast.tsx rename to front/components/StyledElements/Toast/Toast.tsx diff --git a/front/components/UI/Tooltip/Tooltip.tsx b/front/components/StyledElements/Tooltip/Tooltip.tsx similarity index 100% rename from front/components/UI/Tooltip/Tooltip.tsx rename to front/components/StyledElements/Tooltip/Tooltip.tsx diff --git a/front/components/StyledElements/Wrappers/GeneralWrapper.tsx b/front/components/StyledElements/Wrappers/GeneralWrapper.tsx new file mode 100644 index 00000000..e6eb908c --- /dev/null +++ b/front/components/StyledElements/Wrappers/GeneralWrapper.tsx @@ -0,0 +1,10 @@ + +function GeneralWrapperStyled({ children }: { children: React.ReactNode }) { + return ( +
{children}
+ ) +} + +export default GeneralWrapperStyled \ No newline at end of file diff --git a/front/components/UI/Elements/Styles/Title.tsx b/front/components/UI/Elements/Styles/Title.tsx deleted file mode 100644 index 89144b91..00000000 --- a/front/components/UI/Elements/Styles/Title.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from "styled-components"; - -export const Title = styled.h1` - font-size: 1.5em; - padding-left: 20px; - font-weight: 500; -`; diff --git a/front/components/UI/Utils/ClientComp.tsx b/front/components/Utils/ClientComp.tsx similarity index 100% rename from front/components/UI/Utils/ClientComp.tsx rename to front/components/Utils/ClientComp.tsx diff --git a/front/components/UI/libs/styled-registry.tsx b/front/components/Utils/libs/styled-registry.tsx similarity index 100% rename from front/components/UI/libs/styled-registry.tsx rename to front/components/Utils/libs/styled-registry.tsx diff --git a/front/public/svg/collections.svg b/front/public/svg/collections.svg index c8c608f5..3997e8b0 100644 --- a/front/public/svg/collections.svg +++ b/front/public/svg/collections.svg @@ -1,3 +1,3 @@ - + diff --git a/front/public/svg/courses.svg b/front/public/svg/courses.svg index 1fe47207..822447d5 100644 --- a/front/public/svg/courses.svg +++ b/front/public/svg/courses.svg @@ -1,3 +1,3 @@ - + diff --git a/front/public/svg/trail.svg b/front/public/svg/trail.svg new file mode 100644 index 00000000..0012f34b --- /dev/null +++ b/front/public/svg/trail.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/front/tsconfig.json b/front/tsconfig.json index e8fc70c6..beb1d3e4 100644 --- a/front/tsconfig.json +++ b/front/tsconfig.json @@ -26,7 +26,7 @@ "@images/*": ["public/img/*"], "@styles/*": ["styles/*"], "@services/*": ["services/*"], - "@editor/*": ["components/Editor/*"] + "@editor/*": ["components/Objects/Editor/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx","**/**/*.tsx", ".next/types/**/*.ts"], From d351e8864da9268a0110214d91f76f671507acb3 Mon Sep 17 00:00:00 2001 From: swve Date: Thu, 22 Jun 2023 18:27:13 +0200 Subject: [PATCH 4/8] feat: implement elements authorization + bump next --- .../collection/[collectionid]/page.tsx | 5 +- .../(withmenu)/collections/admin.tsx | 60 +----- .../[orgslug]/(withmenu)/collections/page.tsx | 6 +- .../[orgslug]/(withmenu)/courses/courses.tsx | 109 ++++------- .../Security/AuthenticatedClientElement.tsx | 49 +++++ front/package-lock.json | 174 +++++++++--------- front/package.json | 2 +- 7 files changed, 187 insertions(+), 218 deletions(-) create mode 100644 front/components/Security/AuthenticatedClientElement.tsx diff --git a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx index 7a79fa23..f96b7734 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx @@ -1,3 +1,4 @@ +import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper"; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; import { getCollectionByIdWithAuthHeader } from "@services/courses/collections"; import { getOrganizationContextInfo } from "@services/organizations/orgs"; @@ -38,7 +39,7 @@ const CollectionPage = async (params : any) => { } - return
+ return

Collection

{col.name}


@@ -56,7 +57,7 @@ const CollectionPage = async (params : any) => { -
; + ; }; export default CollectionPage; \ No newline at end of file diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx index a9002ab4..04a9307d 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/admin.tsx @@ -1,5 +1,6 @@ 'use client'; +import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'; import { AuthContext } from '@components/Security/AuthProvider'; import { getUriWithOrg } from '@services/config/config'; import { deleteCollection } from '@services/courses/collections'; @@ -9,33 +10,7 @@ import { useRouter } from 'next/navigation'; import React from 'react' const CollectionAdminEditsArea = (props: any) => { - const org_roles_values = ["admin", "owner"]; - const user_roles_values = ["role_admin"]; const router = useRouter(); - const auth: any = React.useContext(AuthContext); - - - // this is amazingly terrible code, but gotta release that MVP - // TODO: fix this - - function isAuthorized() { - const org_id = props.collection.org_id; - const org_roles = auth.userInfo.user_object.orgs; - const user_roles = auth.userInfo.user_object.roles; - const org_role = org_roles.find((org: any) => org.org_id == org_id); - const user_role = user_roles.find((role: any) => role.org_id == org_id); - - if (org_role && user_role) { - if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) { - return true; - } - else { - return false; - } - } else { - return false; - } - } const deleteCollectionUI = async (collectionId: number) => { await deleteCollection(collectionId); @@ -45,30 +20,15 @@ const CollectionAdminEditsArea = (props: any) => { router.push(getUriWithOrg(props.orgslug, "/collections")); } - // this is amazingly terrible code, but gotta release that MVP - // TODO: fix this - - if (auth.isAuthenticated) { - if (isAuthorized()) { - return ( -
- - -
- ) - } else { - return ( -
- ) - } - } - else { - return ( -
- ) - } + return ( + +
+ +
+ + ) } export default CollectionAdminEditsArea; \ No newline at end of file diff --git a/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx index 235be9e3..a933fab0 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/collections/page.tsx @@ -1,12 +1,10 @@ +import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement"; import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle"; import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper"; import { getBackendUrl, getUriWithOrg } from "@services/config/config"; import { deleteCollection, getOrgCollectionsWithAuthHeader } from "@services/courses/collections"; -import { getCourseMetadataWithAuthHeader } from "@services/courses/courses"; import { getOrganizationContextInfo } from "@services/organizations/orgs"; -import { revalidateTags } from "@services/utils/ts/requests"; import { Metadata } from "next"; -import { revalidateTag } from "next/cache"; import { cookies } from "next/headers"; import Link from "next/link"; import CollectionAdminEditsArea from "./admin"; @@ -46,9 +44,11 @@ const CollectionsPage = async (params: any) => {
+ +
{collections.map((collection: any) => ( diff --git a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx index af667d97..1257e34b 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx @@ -14,6 +14,7 @@ import { revalidateTags } from '@services/utils/ts/requests'; import { useRouter } from 'next/navigation'; import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'; import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle'; +import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'; interface CourseProps { orgslug: string; @@ -47,28 +48,30 @@ function Courses(props: CourseProps) {
- } - dialogTitle="Create Course" - dialogDescription="Create a new course" - dialogTrigger={ - - } - /> + + } + dialogTitle="Create Course" + dialogDescription="Create a new course" + dialogTrigger={ + + } + /> +
-
+
{courses.map((course: any) => ( -
- +
+
@@ -86,64 +89,20 @@ function Courses(props: CourseProps) { ) } -const AdminEditsArea = (props: any) => { - const org_roles_values = ["admin", "owner"]; - const user_roles_values = ["role_admin"]; - - const auth: any = React.useContext(AuthContext); - console.log("auth: ", auth); - - - // this is amazingly terrible code, but gotta release that MVP - // TODO: fix this - - function isAuthorized() { - const org_id = props.course.org_id; - const org_roles = auth.userInfo.user_object.orgs; - const user_roles = auth.userInfo.user_object.roles; - const org_role = org_roles.find((org: any) => org.org_id == org_id); - const user_role = user_roles.find((role: any) => role.org_id == org_id); - - if (org_role && user_role) { - if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) { - return true; - } - else { - return false; - } - } else { - return false; - } - } - - // this is amazingly terrible code, but gotta release that MVP - // TODO: fix this - - if (auth.isAuthenticated) { - if (isAuthorized()) { - return ( -
- - - - -
- ) - } else { - return ( -
- ) - } - } - else { - return ( -
- ) - } +const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => { + return ( +
+ + + + +
+ + ) } diff --git a/front/components/Security/AuthenticatedClientElement.tsx b/front/components/Security/AuthenticatedClientElement.tsx new file mode 100644 index 00000000..126a458a --- /dev/null +++ b/front/components/Security/AuthenticatedClientElement.tsx @@ -0,0 +1,49 @@ +'use client'; +import React from "react"; +import { AuthContext } from "./AuthProvider"; + +interface AuthenticatedClientElementProps { + children: React.ReactNode; + checkMethod: 'authentication' | 'roles'; + orgId?: string; + +} + +function AuthenticatedClientElement(props: AuthenticatedClientElementProps) { + const auth: any = React.useContext(AuthContext); + + // Available roles + const org_roles_values = ["admin", "owner"]; + const user_roles_values = ["role_admin"]; + + + async function checkRoles() { + const org_id = props.orgId; + const org_roles = auth.userInfo.user_object.orgs; + const user_roles = auth.userInfo.user_object.roles; + const org_role = org_roles.find((org: any) => org.org_id == org_id); + const user_role = user_roles.find((role: any) => role.org_id == org_id); + + if (org_role && user_role) { + if (org_roles_values.includes(org_role.org_role) && user_roles_values.includes(user_role.role_id)) { + return true; + } + else { + return false; + } + } else { + return false; + } + } + + + + if ((props.checkMethod == 'authentication' && auth.isAuthenticated) || (auth.isAuthenticated && props.checkMethod == 'roles' && checkRoles())) { + return <>{props.children}; + } + return <>; + + +} + +export default AuthenticatedClientElement \ No newline at end of file diff --git a/front/package-lock.json b/front/package-lock.json index 28d962dd..93f6cc59 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -26,7 +26,7 @@ "formik": "^2.2.9", "framer-motion": "^7.3.6", "lucide-react": "^0.104.1", - "next": "^13.4.7-canary.1", + "next": "^13.4.7-canary.4", "re-resizable": "^6.9.9", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", @@ -2123,9 +2123,9 @@ } }, "node_modules/@next/env": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.1.tgz", - "integrity": "sha512-2ZA+CatMIujZ5G8gN8E0ndxnMwqSEa856KUqz0hxOSJxFMT26Uds2Z6tz82sFU8biNaq4lT7cUJhGKccTXTXsg==" + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.4.tgz", + "integrity": "sha512-dThTh5tfoySszTdUeu5BNacqpV72QWH8RkdlMEulpXyeInaJPnSaRhvpmT2S70tv+uRkKvUtfiFFFp+Cc/qhSA==" }, "node_modules/@next/eslint-plugin-next": { "version": "13.0.6", @@ -2137,9 +2137,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.1.tgz", - "integrity": "sha512-LmqRfCFnBSI8HPis6es0wpH+2nX9/FiSqRYZsk8ibPWcIm37rq5Qwp5cAK3hQFWlJlNdTyGaJ1e49VKZUTEXBw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.4.tgz", + "integrity": "sha512-1iTgrJ0QdMjcdcfTTqHcHczELJSdDMHwMbgv/34+OQHQKiD/iUIfA1fGCSjF2FKMGY6bcf/hivknvU/WriW+eg==", "cpu": [ "arm64" ], @@ -2152,9 +2152,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.1.tgz", - "integrity": "sha512-ngS/YWlBzhC2hb9Lmw6cCcks2aZRvFIB+iHlygZIELTfBPd9OUoRlOaa/KQLa/ycKwL2c8L8AFL67i3KQs5j3g==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.4.tgz", + "integrity": "sha512-ISZIhquYKNjlM5VzKkUXzsd7sZv3UQvBDj0H5YhYf3sKnemAtCQFQuPzLDDYfr7sHeUQYUrYJTmuBe3b6txXhg==", "cpu": [ "x64" ], @@ -2167,9 +2167,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.1.tgz", - "integrity": "sha512-5NDlJaba0tWz7mU6IpCfOQ5xDwXwFg4SV6IKLDoNFEchkmlAifW8y2i2OCdmaG+MDpODi3xUBkM1qP2Sd6oUMQ==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.4.tgz", + "integrity": "sha512-Em/pek7kLEcdGl75nXzdV3uWFr+9iXiCpVGpQFo2KKsMBiWxQW2tfXaZI3CJFmmfgtcDKU9RBFmsr7lejd6LWA==", "cpu": [ "arm64" ], @@ -2182,9 +2182,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.1.tgz", - "integrity": "sha512-bYIMi8vhtlCvAMg2xa0CCeOZ0wOZoOKUd9w46qmWfddBUuhwJj5C+QKHXOG+oTxXIVxq14Ffkww9orafYV0R6g==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.4.tgz", + "integrity": "sha512-e/+MQ9I9EjriTK1BoXiGWCjhCPLbPLl2qIAmYDge3Nedn5bgOEvZ/KfKDhF/ZNyV6/nomI5Vy4Wt7IrCleq80Q==", "cpu": [ "arm64" ], @@ -2197,9 +2197,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.1.tgz", - "integrity": "sha512-FvO2t5F02zzvWRybStIR5QZJnOSaznF6E7njBD0hcCeb3Il84rKJCc4DoMhcLt68YljI6tWhqlDbiy+7ghfJlg==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.4.tgz", + "integrity": "sha512-l/edze3fPIkbF11PdDF2ryHsqZOMKAVkZFnqet8j3j3lJbn8ytB7lygq/+PP2XGJfkSyoi8yVfgbHjWaVVorxA==", "cpu": [ "x64" ], @@ -2212,9 +2212,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.1.tgz", - "integrity": "sha512-2kxqgbBvP+WUrKrrEcFqWGKrff5hGCmzEju5sbEZExuFV7sy+4nf5I9A9f0dFiP3z1hudVGJDrgbcDwt0Odvxw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.4.tgz", + "integrity": "sha512-KPQM4Wu3vhau90HB4DaJ94mGEpcu3/XfHli/5R6d4Dv12hOCbvMBU9tBX0HD6Epng4jwRliWhvNxZE2B/hCfBA==", "cpu": [ "x64" ], @@ -2227,9 +2227,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-u+IxAt8i/iYc760qAMlrs0yGyYNokRJpWWdVBwTQ7n5zsjpJ2xifga3r8fWEJwdRvH0yVx15IM/QYZXQOJ8TQA==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-fvohejq2OZHGTHYe4caf4xTlqtMBrsqKwMJnTaq3XEdsXgkkoBGmJS53rNGGIGRPI3IgwvvpgVNEwxJjswjCeA==", "cpu": [ "arm64" ], @@ -2242,9 +2242,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-aChXbr2c0aEwMhhkl9+JT7A2x7JMpmP5NLD7m+Drt4Ss6NZYTwecJTFEt/AbtIm5V/pMYVb1UDZXJtfTKNiHhw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-g+a2ELe2iPYNy4QQp0GKQzCwvrkPM1Vc+CDLcOz47K0ERp+LR08krDtprMjBuZvo7VP7z8+23edCnfaT8jQibA==", "cpu": [ "ia32" ], @@ -2257,9 +2257,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-AcZDEqMXW3Bm2dmhMc8metReCpx/NilC8LPKP44SFM97y5OaAfhG+47n0SAmhI9L8NaWMsZCS5NryM/6scyaWQ==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-EVOdAT2QkAaLr/tjr77MhKwcj30zZwTDU2xWFOhwT3CFoLkrpU3krPE/YGvJa3eDb/lm0/H1mq9EmzHEJRfQew==", "cpu": [ "x64" ], @@ -6375,11 +6375,11 @@ "dev": true }, "node_modules/next": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.1.tgz", - "integrity": "sha512-IKmDxqALqXSSJHSdlslKq1Dry5x8gaQfXtOo8acyVRu0GDIc/Az8Hv/TWUkRGZPA76yllZeEf16LIv3QLkvLMA==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.4.tgz", + "integrity": "sha512-12wtYa0EWHFdiVGyP4fOp4BzmSV0glh4see0/EDcGUwL2fTpmrs6UxPZVGZ2gh0Nrk25YQ8vKBzO1F6mrUuQcw==", "dependencies": { - "@next/env": "13.4.7-canary.1", + "@next/env": "13.4.7-canary.4", "@swc/helpers": "0.5.1", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", @@ -6395,15 +6395,15 @@ "node": ">=16.8.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "13.4.7-canary.1", - "@next/swc-darwin-x64": "13.4.7-canary.1", - "@next/swc-linux-arm64-gnu": "13.4.7-canary.1", - "@next/swc-linux-arm64-musl": "13.4.7-canary.1", - "@next/swc-linux-x64-gnu": "13.4.7-canary.1", - "@next/swc-linux-x64-musl": "13.4.7-canary.1", - "@next/swc-win32-arm64-msvc": "13.4.7-canary.1", - "@next/swc-win32-ia32-msvc": "13.4.7-canary.1", - "@next/swc-win32-x64-msvc": "13.4.7-canary.1" + "@next/swc-darwin-arm64": "13.4.7-canary.4", + "@next/swc-darwin-x64": "13.4.7-canary.4", + "@next/swc-linux-arm64-gnu": "13.4.7-canary.4", + "@next/swc-linux-arm64-musl": "13.4.7-canary.4", + "@next/swc-linux-x64-gnu": "13.4.7-canary.4", + "@next/swc-linux-x64-musl": "13.4.7-canary.4", + "@next/swc-win32-arm64-msvc": "13.4.7-canary.4", + "@next/swc-win32-ia32-msvc": "13.4.7-canary.4", + "@next/swc-win32-x64-msvc": "13.4.7-canary.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", @@ -10056,9 +10056,9 @@ } }, "@next/env": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.1.tgz", - "integrity": "sha512-2ZA+CatMIujZ5G8gN8E0ndxnMwqSEa856KUqz0hxOSJxFMT26Uds2Z6tz82sFU8biNaq4lT7cUJhGKccTXTXsg==" + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.7-canary.4.tgz", + "integrity": "sha512-dThTh5tfoySszTdUeu5BNacqpV72QWH8RkdlMEulpXyeInaJPnSaRhvpmT2S70tv+uRkKvUtfiFFFp+Cc/qhSA==" }, "@next/eslint-plugin-next": { "version": "13.0.6", @@ -10070,57 +10070,57 @@ } }, "@next/swc-darwin-arm64": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.1.tgz", - "integrity": "sha512-LmqRfCFnBSI8HPis6es0wpH+2nX9/FiSqRYZsk8ibPWcIm37rq5Qwp5cAK3hQFWlJlNdTyGaJ1e49VKZUTEXBw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.7-canary.4.tgz", + "integrity": "sha512-1iTgrJ0QdMjcdcfTTqHcHczELJSdDMHwMbgv/34+OQHQKiD/iUIfA1fGCSjF2FKMGY6bcf/hivknvU/WriW+eg==", "optional": true }, "@next/swc-darwin-x64": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.1.tgz", - "integrity": "sha512-ngS/YWlBzhC2hb9Lmw6cCcks2aZRvFIB+iHlygZIELTfBPd9OUoRlOaa/KQLa/ycKwL2c8L8AFL67i3KQs5j3g==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.7-canary.4.tgz", + "integrity": "sha512-ISZIhquYKNjlM5VzKkUXzsd7sZv3UQvBDj0H5YhYf3sKnemAtCQFQuPzLDDYfr7sHeUQYUrYJTmuBe3b6txXhg==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.1.tgz", - "integrity": "sha512-5NDlJaba0tWz7mU6IpCfOQ5xDwXwFg4SV6IKLDoNFEchkmlAifW8y2i2OCdmaG+MDpODi3xUBkM1qP2Sd6oUMQ==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.7-canary.4.tgz", + "integrity": "sha512-Em/pek7kLEcdGl75nXzdV3uWFr+9iXiCpVGpQFo2KKsMBiWxQW2tfXaZI3CJFmmfgtcDKU9RBFmsr7lejd6LWA==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.1.tgz", - "integrity": "sha512-bYIMi8vhtlCvAMg2xa0CCeOZ0wOZoOKUd9w46qmWfddBUuhwJj5C+QKHXOG+oTxXIVxq14Ffkww9orafYV0R6g==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.7-canary.4.tgz", + "integrity": "sha512-e/+MQ9I9EjriTK1BoXiGWCjhCPLbPLl2qIAmYDge3Nedn5bgOEvZ/KfKDhF/ZNyV6/nomI5Vy4Wt7IrCleq80Q==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.1.tgz", - "integrity": "sha512-FvO2t5F02zzvWRybStIR5QZJnOSaznF6E7njBD0hcCeb3Il84rKJCc4DoMhcLt68YljI6tWhqlDbiy+7ghfJlg==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.7-canary.4.tgz", + "integrity": "sha512-l/edze3fPIkbF11PdDF2ryHsqZOMKAVkZFnqet8j3j3lJbn8ytB7lygq/+PP2XGJfkSyoi8yVfgbHjWaVVorxA==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.1.tgz", - "integrity": "sha512-2kxqgbBvP+WUrKrrEcFqWGKrff5hGCmzEju5sbEZExuFV7sy+4nf5I9A9f0dFiP3z1hudVGJDrgbcDwt0Odvxw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.7-canary.4.tgz", + "integrity": "sha512-KPQM4Wu3vhau90HB4DaJ94mGEpcu3/XfHli/5R6d4Dv12hOCbvMBU9tBX0HD6Epng4jwRliWhvNxZE2B/hCfBA==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-u+IxAt8i/iYc760qAMlrs0yGyYNokRJpWWdVBwTQ7n5zsjpJ2xifga3r8fWEJwdRvH0yVx15IM/QYZXQOJ8TQA==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-fvohejq2OZHGTHYe4caf4xTlqtMBrsqKwMJnTaq3XEdsXgkkoBGmJS53rNGGIGRPI3IgwvvpgVNEwxJjswjCeA==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-aChXbr2c0aEwMhhkl9+JT7A2x7JMpmP5NLD7m+Drt4Ss6NZYTwecJTFEt/AbtIm5V/pMYVb1UDZXJtfTKNiHhw==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-g+a2ELe2iPYNy4QQp0GKQzCwvrkPM1Vc+CDLcOz47K0ERp+LR08krDtprMjBuZvo7VP7z8+23edCnfaT8jQibA==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.1.tgz", - "integrity": "sha512-AcZDEqMXW3Bm2dmhMc8metReCpx/NilC8LPKP44SFM97y5OaAfhG+47n0SAmhI9L8NaWMsZCS5NryM/6scyaWQ==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.7-canary.4.tgz", + "integrity": "sha512-EVOdAT2QkAaLr/tjr77MhKwcj30zZwTDU2xWFOhwT3CFoLkrpU3krPE/YGvJa3eDb/lm0/H1mq9EmzHEJRfQew==", "optional": true }, "@nicolo-ribaudo/chokidar-2": { @@ -13093,20 +13093,20 @@ "dev": true }, "next": { - "version": "13.4.7-canary.1", - "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.1.tgz", - "integrity": "sha512-IKmDxqALqXSSJHSdlslKq1Dry5x8gaQfXtOo8acyVRu0GDIc/Az8Hv/TWUkRGZPA76yllZeEf16LIv3QLkvLMA==", + "version": "13.4.7-canary.4", + "resolved": "https://registry.npmjs.org/next/-/next-13.4.7-canary.4.tgz", + "integrity": "sha512-12wtYa0EWHFdiVGyP4fOp4BzmSV0glh4see0/EDcGUwL2fTpmrs6UxPZVGZ2gh0Nrk25YQ8vKBzO1F6mrUuQcw==", "requires": { - "@next/env": "13.4.7-canary.1", - "@next/swc-darwin-arm64": "13.4.7-canary.1", - "@next/swc-darwin-x64": "13.4.7-canary.1", - "@next/swc-linux-arm64-gnu": "13.4.7-canary.1", - "@next/swc-linux-arm64-musl": "13.4.7-canary.1", - "@next/swc-linux-x64-gnu": "13.4.7-canary.1", - "@next/swc-linux-x64-musl": "13.4.7-canary.1", - "@next/swc-win32-arm64-msvc": "13.4.7-canary.1", - "@next/swc-win32-ia32-msvc": "13.4.7-canary.1", - "@next/swc-win32-x64-msvc": "13.4.7-canary.1", + "@next/env": "13.4.7-canary.4", + "@next/swc-darwin-arm64": "13.4.7-canary.4", + "@next/swc-darwin-x64": "13.4.7-canary.4", + "@next/swc-linux-arm64-gnu": "13.4.7-canary.4", + "@next/swc-linux-arm64-musl": "13.4.7-canary.4", + "@next/swc-linux-x64-gnu": "13.4.7-canary.4", + "@next/swc-linux-x64-musl": "13.4.7-canary.4", + "@next/swc-win32-arm64-msvc": "13.4.7-canary.4", + "@next/swc-win32-ia32-msvc": "13.4.7-canary.4", + "@next/swc-win32-x64-msvc": "13.4.7-canary.4", "@swc/helpers": "0.5.1", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", diff --git a/front/package.json b/front/package.json index d08c4320..df569dca 100644 --- a/front/package.json +++ b/front/package.json @@ -27,7 +27,7 @@ "formik": "^2.2.9", "framer-motion": "^7.3.6", "lucide-react": "^0.104.1", - "next": "^13.4.7-canary.1", + "next": "^13.4.7-canary.4", "re-resizable": "^6.9.9", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", From 3a898eb29a2dc85f0c74103fbc4d45ca14423bb0 Mon Sep 17 00:00:00 2001 From: swve Date: Thu, 22 Jun 2023 19:42:49 +0200 Subject: [PATCH 5/8] feat: improve activities UI --- .../activity/[activityid]/activity.tsx | 224 +++++++----------- .../(withmenu)/course/[courseid]/course.tsx | 2 +- .../Activities/DocumentPdf/DocumentPdf.tsx | 71 +----- .../Pages/Activities/Video/Video.tsx | 63 +---- .../Pages/Courses/ActivityIndicators.tsx | 2 +- .../StyledElements/Tooltip/Tooltip.tsx | 24 +- 6 files changed, 110 insertions(+), 276 deletions(-) diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx index 068cd078..1501d19f 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx @@ -1,16 +1,15 @@ "use client"; import Link from "next/link"; -import React, { useMemo } from "react"; +import React from "react"; import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config"; import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva"; -import styled from "styled-components"; import VideoActivity from "@components/Pages/Activities/Video/Video"; -import useSWR, { mutate } from "swr"; import { Check } from "lucide-react"; import { markActivityAsComplete } from "@services/courses/activity"; -import ToolTip from "@components/StyledElements/Tooltip/Tooltip"; import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf"; import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators"; +import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper"; +import { useRouter } from "next/navigation"; interface ActivityClientProps { activityid: string; @@ -20,6 +19,8 @@ interface ActivityClientProps { course: any; } + + function ActivityClient(props: ActivityClientProps) { const activityid = props.activityid; const courseid = props.courseid; @@ -27,149 +28,104 @@ function ActivityClient(props: ActivityClientProps) { const activity = props.activity; const course = props.course; - - async function markActivityAsCompleteFront() { - const trail = await markActivityAsComplete(orgslug, courseid, activityid); - mutate(`${getAPIUrl()}activities/activity_${activityid}`); - mutate(`${getAPIUrl()}courses/meta/course_${courseid}`); + function getChapterName(chapterId: string) { + let chapterName = ""; + course.chapters.forEach((chapter: any) => { + if (chapter.chapter_id === chapterId) { + chapterName = chapter.name; + } + }); + return chapterName; } + + + + return ( <> -
- 
{JSON.stringify(activity, null, 2)}
- - - - - - - -

Course

-

{course.course.name}

- - - - - {activity ? ( -
- - {activity.type == "dynamic" && } - {/* todo : use apis & streams instead of this */} - {activity.type == "video" && } - - {activity.type == "documentpdf" && } - - - - {course.trail.activities_marked_complete && - course.trail.activities_marked_complete.includes("activity_" + activityid) && - course.trail.status == "ongoing" ? ( - - ) : ( - - )} - - + +
+
+
+ + + +
+
+

Course

+

{course.course.name}

+
- ) : (
)} - {
} -
+ + +
+
+

Chapter : {getChapterName(activity.chapter_id)}

+

{activity.name}

+
+
+ + +
+
+ + {activity ? ( +
+
+ {activity.type == "dynamic" && } + {/* todo : use apis & streams instead of this */} + {activity.type == "video" && } + + {activity.type == "documentpdf" && } + +
+ + +
+
+
+ ) : (
)} + {
} +
+ ); } -const ActivityThumbnail = styled.div` - padding-right: 30px; - justify-self: center; - img { - box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42); - border-radius: 7px; - width: 100px; - height: 57px; - } -`; -const ActivityInfo = styled.div` - h1 { - margin-top: 0px; + +export function MarkStatus(props: { activityid: string, course: any, orgslug: string, courseid: string }) { + const router = useRouter(); + + + async function markActivityAsCompleteFront() { + const trail = await markActivityAsComplete(props.orgslug, props.courseid, props.activityid); + router.refresh(); } - p { - margin-top: 0; - margin-bottom: 0; - font-weight: 700; - } -`; + return ( + <>{props.course.trail.activities_marked_complete && + props.course.trail.activities_marked_complete.includes("activity_" + props.activityid) && + props.course.trail.status == "ongoing" ? ( +
+ + + {" "} + Already completed +
+ ) : ( +
+ {" "} + + + {" "} + Mark as complete +
+ )} + ) +} - -const ActivityTopWrapper = styled.div` - width: 1300px; - padding-top: 50px; - margin: 0 auto; - display: flex; -`; - -const CourseContent = styled.div` - display: flex; - flex-direction: column; - background-color: white; -`; - -const ActivityMarkerWrapper = styled.div` - display: block; - width: 1300px; - justify-content: flex-end; - margin: 0 auto; - align-items: center; - - button { - background-color: #151515; - border: none; - padding: 18px; - border-radius: 15px; - margin: 15px; - margin-left: 20px; - margin-top: 20px; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - margin: auto; - color: white; - font-weight: 700; - font-family: "DM Sans"; - font-size: 16px; - letter-spacing: -0.05em; - box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42); - - i { - margin-right: 5px; - - // center the icon - display: flex; - align-items: center; - justify-content: center; - } - - &:hover { - background-color: #000000; - } - } -`; - export default ActivityClient; diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx index 2e2580a4..fc323f5c 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx @@ -56,7 +56,7 @@ const CourseClient = (props: any) => { -
+

Description

diff --git a/front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx b/front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx index 4c907a5e..bdd1c56d 100644 --- a/front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx +++ b/front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx @@ -1,75 +1,18 @@ import { getBackendUrl } from "@services/config/config"; import React from "react"; -import styled from "styled-components"; function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) { - function getChapterName() { - let chapterName = ""; - let chapterId = activity.chapter_id; - course.chapters.forEach((chapter: any) => { - if (chapter.chapter_id === chapterId) { - chapterName = chapter.name; - } - }); - return chapterName; - } - + return ( - - -

Chapter : {getChapterName()}

- {activity.name} - - -