diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx index d7bfa2cd..68b17623 100644 --- a/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx @@ -9,10 +9,13 @@ import { deleteCourseFromBackend } from "@services/courses/courses"; import useSWR, { mutate } from "swr"; import { swrFetcher } from "@services/utils/ts/requests"; import { Edit2, Trash } from "lucide-react"; +import Modal from "@components/UI/Modal/Modal"; +import CreateCourseModal from "@components/Pages/CreateCourse/CreateCourse"; const CoursesIndexPage = (params: any) => { const router = useRouter(); const orgslug = params.params.orgslug; + const [newCourseModal, setNewCourseModal] = React.useState(false); const { data: courses, error: error } = useSWR(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`, swrFetcher); @@ -21,18 +24,34 @@ const CoursesIndexPage = (params: any) => { mutate(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`); } + async function closeNewCourseModal() { + setNewCourseModal(false); + } + // function to remove "course_" from the course_id function removeCoursePrefix(course_id: string) { return course_id.replace("course_", ""); } - + return ( <> - Courses :{" "} - <Link href={getUriWithOrg(orgslug, "/courses/new")}> - <button>+</button> - </Link>{" "} + Courses {" "} + <Modal + isDialogOpen={newCourseModal} + onOpenChange={setNewCourseModal} + minHeight="md" + dialogContent={<CreateCourseModal + closeModal={closeNewCourseModal} + orgslug={orgslug} + ></CreateCourseModal>} + dialogTitle="Create Course" + dialogDescription="Create a new course" + dialogTrigger={ + <button> Add Course + + </button> + } + /> {error &&

Failed to load

} {!courses ? ( diff --git a/front/components/Pages/CreateCourse/CreateCourse.tsx b/front/components/Pages/CreateCourse/CreateCourse.tsx new file mode 100644 index 00000000..0f34dab9 --- /dev/null +++ b/front/components/Pages/CreateCourse/CreateCourse.tsx @@ -0,0 +1,111 @@ +import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from '@components/UI/Form/Form' +import * as Form from '@radix-ui/react-form' +import { getAPIUrl, getUriWithOrg } from '@services/config/config'; +import { createNewCourse } from '@services/courses/courses'; +import { getOrganizationContextInfo } from '@services/organizations/orgs'; +import React, { useState } from 'react' +import { BarLoader } from 'react-spinners' +import { mutate } from 'swr'; + +function CreateCourseModal({ closeModal, orgslug }: any) { + const [isSubmitting, setIsSubmitting] = useState(false); + const [name, setName] = React.useState(""); + const [description, setDescription] = React.useState(""); + const [isLoading, setIsLoading] = React.useState(false); + const [thumbnail, setThumbnail] = React.useState(null) as any; + + const [orgId, setOrgId] = React.useState(null) as any; + + + const getOrgMetadata = async () => { + const org = await getOrganizationContextInfo(orgslug); + setOrgId(org.org_id); + } + + + const handleNameChange = (event: React.ChangeEvent) => { + setName(event.target.value); + }; + + const handleDescriptionChange = (event: React.ChangeEvent) => { + setDescription(event.target.value); + }; + + const handleThumbnailChange = (event: React.ChangeEvent) => { + setThumbnail(event.target.files[0]); + }; + + const handleSubmit = async (e: any) => { + e.preventDefault(); + setIsSubmitting(true); + let status = await createNewCourse(orgId, { name, description }, thumbnail); + mutate(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`); + setIsSubmitting(false); + + if (status.org_id == orgId) { + closeModal(); + } else { + alert("Error creating course, please see console logs"); + console.log(status); + } + + }; + + React.useEffect(() => { + if (orgslug) { + getOrgMetadata(); + } + }, [isLoading, orgslug]); + + return ( + + + + Course name + Please provide a course name + + + + + + + + Course description + Please provide a course description + + +