diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx index 360beeab..55ec892d 100644 --- a/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx +++ b/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx @@ -226,22 +226,22 @@ function CourseEdit(params: any) { return ( <> -
+ - Edit Course Chapters{" "} + Edit Course {" "} <button onClick={() => { setNewChapterModal(true); }} > - + + Add chapter + </button> <button onClick={() => { updateChapters(); }} > - Save Chapters + Save </button> {newChapterModal && } @@ -283,12 +283,46 @@ function CourseEdit(params: any) { )} + ); } +const Page = styled.div` + height: 100%; + width: 100%; + min-height: 100vh; + min-width: 100vw; + padding-top: 30px; + + // dots background + background-image: radial-gradient(#4744446b 1px, transparent 1px), radial-gradient(#4744446b 1px, transparent 1px); + background-position: 0 0, 25px 25px; + background-size: 50px 50px; + background-attachment: fixed; + background-repeat: repeat; + + button { + margin-left: 10px; + background-color: #000000; + border: none; + border-radius: 5px; + padding: 5px 10px; + color: white; + font-size: 13px; + cursor: pointer; + transition: 0.2s; + font-family: "DM Sans", sans-serif; + &:hover { + background-color: #474444; + + transition: 0.2s; + } + } +`; const ChapterlistWrapper = styled.div` display: flex; padding-left: 30px; + justify-content: center; `; export default CourseEdit; diff --git a/front/app/_orgs/[orgslug]/courses/page.tsx b/front/app/_orgs/[orgslug]/courses/page.tsx index 29cf16ea..d19e3026 100644 --- a/front/app/_orgs/[orgslug]/courses/page.tsx +++ b/front/app/_orgs/[orgslug]/courses/page.tsx @@ -8,6 +8,7 @@ import { getAPIUrl, getBackendUrl } from "../../../../services/config"; import { deleteCourseFromBackend } from "../../../../services/courses/courses"; import useSWR, { mutate } from "swr"; import { swrFetcher } from "@services/utils/requests"; +import { Edit2, Trash } from "lucide-react"; const CoursesIndexPage = (params: any) => { const router = useRouter(); @@ -28,35 +29,33 @@ const CoursesIndexPage = (params: any) => { return ( <> - {orgslug} Courses :{" "} + Courses :{" "} <Link href={"/courses/new"}> <button>+</button> </Link>{" "} - -
{error &&

Failed to load

} {!courses ? (
Loading...
) : ( -
+ {courses.map((course: any) => (
-

{course.name}

- + + + + + - - - - - + +

{course.name}

))} -
+ )} ); @@ -64,11 +63,11 @@ const CoursesIndexPage = (params: any) => { export default CoursesIndexPage; -const CourseWrapper = styled.div` +const CourseThumbnail = styled.div` display: flex; img { - width: 269px; - height: 151px; + width: 249px; + height: 131px; background: url(), #d9d9d9; border: 1px solid rgba(255, 255, 255, 0.19); @@ -76,3 +75,36 @@ const CourseWrapper = styled.div` border-radius: 7px; } `; + +const CourseWrapper = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 auto; + max-width: 1500px; + div { + h2 { + margin: 0; + padding: 0; + margin-top: 10px; + font-size: 18px; + font-weight: 600; + width: 250px; + height: 50px; + color: #424242; + } + button { + margin: 4px 0; + border: none; + border-radius: 7px; + background: #000000; + opacity: 0.4; + font-family: "DM Sans", sans-serif; + + color: #ffffff; + font-size: 12px; + font-weight: 600; + cursor: pointer; + } + } +`; diff --git a/front/components/Drags/Chapter.tsx b/front/components/Drags/Chapter.tsx index 609661d8..344456c0 100644 --- a/front/components/Drags/Chapter.tsx +++ b/front/components/Drags/Chapter.tsx @@ -48,15 +48,22 @@ function Chapter(props: any) { } const ChapterWrapper = styled.div` - margin-bottom: 5px; - padding: 11px; - background-color: #00000010; - width: 310px; + margin-bottom: 20px; + padding: 4px; + background-color: #ffffffc5; + width: 900px; + font-size: 15px; display: block; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.19); box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%); transition: all 0.2s ease; + + + h3{ + padding-left: 20px; + padding-right: 20px; + } `; const LecturesList = styled.div` diff --git a/front/components/Drags/Lecture.tsx b/front/components/Drags/Lecture.tsx index abdd9652..eb097f4d 100644 --- a/front/components/Drags/Lecture.tsx +++ b/front/components/Drags/Lecture.tsx @@ -29,14 +29,15 @@ function Lecture(props: any) { } export const LectureWrapper = styled.div` - padding: 10px; + padding: 2px; padding-left: 17px; list-style: none; /* padding-left: 2px; */ - background-color: #8c949c33; - border-radius: 28px; + background-color: #f4f4f4c5; + border-radius: 7px; margin: 15px; - + display: flex; + align-items: center; &:hover { background-color: #8c949c7b; } diff --git a/front/components/Modals/CourseEdit/NewLecture.tsx b/front/components/Modals/CourseEdit/NewLecture.tsx index fcdae52d..7e890234 100644 --- a/front/components/Modals/CourseEdit/NewLecture.tsx +++ b/front/components/Modals/CourseEdit/NewLecture.tsx @@ -47,11 +47,12 @@ const LectureChooserWrapper = styled.div` `; const LectureButton = styled.button` - padding: 20px; - border-radius: 10px; + padding: 40px; + border-radius: 10px !important; border: none; - font-size: 50px; - background-color: #8c949c33; + font-size: 80px !important; + margin: 40px; + background-color: #8c949c33 !important; cursor: pointer; &:hover { background-color: #8c949c7b; diff --git a/front/services/collections.ts b/front/services/collections.ts index 96f8a87d..839ba84d 100644 --- a/front/services/collections.ts +++ b/front/services/collections.ts @@ -1,4 +1,5 @@ import { getAPIUrl } from "./config"; +import { RequestBody } from "./utils/requests"; /* This file includes only POST, PUT, DELETE requests @@ -6,36 +7,14 @@ import { getAPIUrl } from "./config"; */ export async function deleteCollection(collection_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "DELETE", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - return fetch( - `${getAPIUrl()}collections/${collection_id}`, - requestOptions - ) + return fetch(`${getAPIUrl()}collections/${collection_id}`, RequestBody("DELETE", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } // Create a new collection export async function createCollection(collection: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(collection), - }; - - return fetch(`${getAPIUrl()}collections/`, requestOptions) + return fetch(`${getAPIUrl()}collections/`, RequestBody("POST", collection)) .then((result) => result.json()) .catch((error) => console.log("error", error)); -} \ No newline at end of file +} diff --git a/front/services/courses/chapters.ts b/front/services/courses/chapters.ts index 79819c95..68c713f6 100644 --- a/front/services/courses/chapters.ts +++ b/front/services/courses/chapters.ts @@ -1,82 +1,41 @@ import { initialData } from "../../components/Drags/data"; import { getAPIUrl } from "@services/config"; +import { RequestBody } from "@services/utils/requests"; +/* + This file includes only POST, PUT, DELETE requests + GET requests are called from the frontend using SWR (https://swr.vercel.app/) +*/ + +//TODO : depreciate this function export async function getCourseChaptersMetadata(course_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - const data: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, requestOptions) + const data: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - console.log("data", data); - return data; } export async function updateChaptersMetadata(course_id: any, data: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "PUT", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(data), - }; - - const result: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, requestOptions) + const result: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("PUT", data)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - - console.log("result", result); - + return result; } export async function createChapter(data: any, course_id: any) { - console.log("data", data, course_id); - - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(data), - }; - - const result: any = await fetch(`${getAPIUrl()}chapters/?course_id=course_${course_id}`, requestOptions) + const result: any = await fetch(`${getAPIUrl()}chapters/?course_id=course_${course_id}`, RequestBody("POST", data)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - console.log("result", result); - return result; } -export async function deleteChapter (coursechapter_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "DELETE", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - const result: any = await fetch(`${getAPIUrl()}chapters/${coursechapter_id}`, requestOptions) +export async function deleteChapter(coursechapter_id: any) { + const result: any = await fetch(`${getAPIUrl()}chapters/${coursechapter_id}`, RequestBody("DELETE", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - console.log("result", result); - return result; } diff --git a/front/services/courses/courses.ts b/front/services/courses/courses.ts index d8e29f10..8f957613 100644 --- a/front/services/courses/courses.ts +++ b/front/services/courses/courses.ts @@ -1,4 +1,5 @@ import { getAPIUrl } from "@services/config"; +import { RequestBody, RequestBodyForm } from "@services/utils/requests"; /* This file includes only POST, PUT, DELETE requests @@ -6,39 +7,22 @@ import { getAPIUrl } from "@services/config"; */ export async function getOrgCourses(org_id: number) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); + - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - return fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, requestOptions) + return fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function getCourse(course_id: string) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - // todo : add course id to url - return fetch(`${getAPIUrl()}courses/${course_id}`, requestOptions) + return fetch(`${getAPIUrl()}courses/${course_id}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function createNewCourse(org_id: string, course_body: any, thumbnail: any) { - const HeadersConfig = new Headers(); // Send file thumbnail as form data const formData = new FormData(); @@ -48,30 +32,16 @@ export async function createNewCourse(org_id: string, course_body: any, thumbnai formData.append("mini_description", "course_body.mini_description"); formData.append("public", "true"); - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: formData, - }; - return fetch(`${getAPIUrl()}courses/?org_id=${org_id}`, requestOptions) + return fetch(`${getAPIUrl()}courses/?org_id=${org_id}`, RequestBodyForm("POST", formData)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function deleteCourseFromBackend(course_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); + - const requestOptions: any = { - method: "DELETE", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - return fetch(`${getAPIUrl()}courses/${course_id}`, requestOptions) + return fetch(`${getAPIUrl()}courses/${course_id}`, RequestBody("DELETE", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } diff --git a/front/services/courses/lectures.ts b/front/services/courses/lectures.ts index c46c351a..2f961f09 100644 --- a/front/services/courses/lectures.ts +++ b/front/services/courses/lectures.ts @@ -1,23 +1,13 @@ import { getAPIUrl } from "@services/config"; +import { RequestBody, RequestBodyForm } from "@services/utils/requests"; export async function createLecture(data: any, chapter_id: any) { data.content = {}; - console.log("data", data, chapter_id); // remove chapter_id from data delete data.chapterId; - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(data), - }; - - const result: any = await fetch(`${getAPIUrl()}lectures/?coursechapter_id=${chapter_id}`, requestOptions) + const result: any = await fetch(`${getAPIUrl()}lectures/?coursechapter_id=${chapter_id}`, RequestBody("POST", data)) .then((result) => result.json()) .catch((error) => console.log("error", error)); @@ -27,15 +17,9 @@ export async function createLecture(data: any, chapter_id: any) { } export async function createFileLecture(file: File, type: string, data: any, chapter_id: any) { - - - const HeadersConfig = new Headers(); - // Send file thumbnail as form data const formData = new FormData(); formData.append("coursechapter_id", chapter_id); - console.log("type" , type); - let endpoint = `${getAPIUrl()}lectures/video`; @@ -45,36 +29,17 @@ export async function createFileLecture(file: File, type: string, data: any, cha endpoint = `${getAPIUrl()}lectures/video`; } - console.log(); - - - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: formData, - }; - - const result: any = await fetch(endpoint, requestOptions) + const result: any = await fetch(endpoint, RequestBodyForm("POST", formData)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - - console.log("result", result); return result; } export async function getLecture(lecture_id: any) { - const requestOptions: any = { - method: "GET", - redirect: "follow", - credentials: "include", - }; - - const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, requestOptions) + const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); @@ -82,17 +47,7 @@ export async function getLecture(lecture_id: any) { } export async function updateLecture(data: any, lecture_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "PUT", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(data), - }; - - const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, requestOptions) + const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, RequestBody("PUT", data)) .then((result) => result.json()) .catch((error) => console.log("error", error)); diff --git a/front/services/files/images.ts b/front/services/files/images.ts index e661469e..35f449f4 100644 --- a/front/services/files/images.ts +++ b/front/services/files/images.ts @@ -1,38 +1,20 @@ import { getAPIUrl } from "@services/config"; +import { RequestBody, RequestBodyForm } from "@services/utils/requests"; export async function uploadNewImageFile(file: any, lecture_id: string) { - const HeadersConfig = new Headers(); - // Send file thumbnail as form data const formData = new FormData(); formData.append("file_object", file); formData.append("lecture_id", lecture_id); - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: formData, - }; - - return fetch(`${getAPIUrl()}files/picture`, requestOptions) + return fetch(`${getAPIUrl()}files/picture`, RequestBodyForm("POST", formData)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function getImageFile(file_id: string) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - // todo : add course id to url - return fetch(`${getAPIUrl()}files/picture?file_id=${file_id}`, requestOptions) + return fetch(`${getAPIUrl()}files/picture?file_id=${file_id}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); -} \ No newline at end of file +} diff --git a/front/services/files/video.ts b/front/services/files/video.ts index 622e69c0..eaa10e22 100644 --- a/front/services/files/video.ts +++ b/front/services/files/video.ts @@ -1,38 +1,19 @@ import { getAPIUrl } from "@services/config"; +import { RequestBody, RequestBodyForm } from "@services/utils/requests"; export async function uploadNewVideoFile(file: any, lecture_id: string) { - const HeadersConfig = new Headers(); - // Send file thumbnail as form data const formData = new FormData(); formData.append("file_object", file); formData.append("lecture_id", lecture_id); - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: formData, - }; - - return fetch(`${getAPIUrl()}files/video`, requestOptions) + return fetch(`${getAPIUrl()}files/video`, RequestBodyForm("POST", formData)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function getVideoFile(file_id: string) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - - return fetch(`${getAPIUrl()}files/video?file_id=${file_id}`, requestOptions) + return fetch(`${getAPIUrl()}files/video?file_id=${file_id}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); -} \ No newline at end of file +} diff --git a/front/services/orgs.ts b/front/services/orgs.ts index b7b945ff..44e74cdb 100644 --- a/front/services/orgs.ts +++ b/front/services/orgs.ts @@ -1,4 +1,5 @@ import { getAPIUrl } from "@services/config"; +import { RequestBody } from "./utils/requests"; /* This file includes only POST, PUT, DELETE requests @@ -6,49 +7,19 @@ import { getAPIUrl } from "@services/config"; */ export async function createNewOrganization(body: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "POST", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - body: JSON.stringify(body), - }; - - return fetch(`${getAPIUrl()}orgs/`, requestOptions) + return fetch(`${getAPIUrl()}orgs/`, RequestBody("POST", body)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } export async function deleteOrganizationFromBackend(org_id: any) { - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "DELETE", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - return fetch(`${getAPIUrl()}orgs/${org_id}`, requestOptions) + return fetch(`${getAPIUrl()}orgs/${org_id}`, RequestBody("DELETE", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); } - -export async function getOrganizationContextInfo(org_slug : any){ - const HeadersConfig = new Headers({ "Content-Type": "application/json" }); - - const requestOptions: any = { - method: "GET", - headers: HeadersConfig, - redirect: "follow", - credentials: "include", - }; - - return fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, requestOptions) +export async function getOrganizationContextInfo(org_slug: any) { + return fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, RequestBody("GET", null)) .then((result) => result.json()) .catch((error) => console.log("error", error)); - -} \ No newline at end of file +} diff --git a/front/services/utils/requests.ts b/front/services/utils/requests.ts index b81b4dfe..3f4e6466 100644 --- a/front/services/utils/requests.ts +++ b/front/services/utils/requests.ts @@ -12,8 +12,19 @@ export const RequestBody = (method: string, data: any) => { return options; }; -export const swrFetcher = async (url: string, body: any) => { +export const RequestBodyForm = (method: string, data: any) => { + let HeadersConfig = new Headers({}); + let options: any = { + method: method, + headers: HeadersConfig, + redirect: "follow", + credentials: "include", + body: data, + }; + return options; +}; +export const swrFetcher = async (url: string, body: any) => { // Create the request options let HeadersConfig = new Headers({ "Content-Type": "application/json" }); let options: any = {