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 {" "}
{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 :{" "}
{" "}
-
-
{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 = {