Merge pull request #45 from learnhouse/chore/refactor

chore: reformat chapters ts

front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx

@@ -226,22 +226,22 @@ function CourseEdit(params: any) {
 
   return (
     <>
-      <Header></Header>
+    <Page>
       <Title>
-        Edit Course Chapters{" "}
+        Edit Course {" "}
         <button
           onClick={() => {
             setNewChapterModal(true);
           }}
         >
-          +
+          Add chapter +
         </button>
         <button
           onClick={() => {
             updateChapters();
           }}
         >
-          Save Chapters
+          Save 
         </button>
       </Title>
       {newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
@@ -283,12 +283,46 @@ function CourseEdit(params: any) {
           </DragDropContext>
         </ChapterlistWrapper>
       )}
+      </Page>
     </>
   );
 }
 
+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;

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 (
     <>
       <Title>
-        {orgslug} Courses :{" "}
+        Courses :{" "}
         <Link href={"/courses/new"}>
           <button>+</button>
         </Link>{" "}
       </Title>
-
-      <hr />
       {error && <p>Failed to load</p>}
       {!courses ? (
         <div>Loading...</div>
       ) : (
-        <div>
+        <CourseWrapper>
           {courses.map((course: any) => (
             <div key={course.course_id}>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
-                <h2>{course.name}</h2>
+                <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
-                <CourseWrapper>
+                 Delete <Trash size={10}></Trash>
+                </button>
+                <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
+                  <button>Edit <Edit2 size={10} ></Edit2></button>
+                </Link>
+                <CourseThumbnail>
                   <img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
-                </CourseWrapper>
+                </CourseThumbnail>
-              </Link>
+                <h2>{course.name}</h2>
-              <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
-                Delete
-              </button>
-              <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
-                <button>Edit Chapters</button>
               </Link>
             </div>
           ))}
-        </div>
+        </CourseWrapper>
       )}
     </>
   );
@@ -64,11 +63,11 @@ const CoursesIndexPage = (params: any) => {
 
 export default CoursesIndexPage;
 
-const CourseWrapper = styled.div`
+const CourseThumbnail = styled.div`
   display: flex;
   img {
-    width: 269px;
+    width: 249px;
-    height: 151px;
+    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;
+    }
+  }
+`;

front/components/Drags/Chapter.tsx

@@ -48,15 +48,22 @@ function Chapter(props: any) {
 }
 
 const ChapterWrapper = styled.div`
-  margin-bottom: 5px;
+  margin-bottom: 20px;
-  padding: 11px;
+  padding: 4px;
-  background-color: #00000010;
+  background-color: #ffffffc5;
-  width: 310px;
+  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`

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;
+  background-color: #f4f4f4c5;
-  border-radius: 28px;
+  border-radius: 7px;
   margin: 15px;
-
+  display: flex;
+  align-items: center;
   &:hover {
     background-color: #8c949c7b;
   }

front/components/Modals/CourseEdit/NewLecture.tsx

@@ -47,11 +47,12 @@ const LectureChooserWrapper = styled.div`
 `;
 
 const LectureButton = styled.button`
-  padding: 20px;
+  padding: 40px;
-  border-radius: 10px;
+  border-radius: 10px !important;
   border: none;
-  font-size: 50px;
+  font-size: 80px !important;
-  background-color: #8c949c33;
+  margin: 40px;
+  background-color: #8c949c33 !important;
   cursor: pointer;
   &:hover {
     background-color: #8c949c7b;

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" });
+  return fetch(`${getAPIUrl()}collections/${collection_id}`, RequestBody("DELETE", null))
-
-  const requestOptions: any = {
-    method: "DELETE",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  return fetch(
-    `${getAPIUrl()}collections/${collection_id}`,
-    requestOptions
-  )
     .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" });
+  return fetch(`${getAPIUrl()}collections/`, RequestBody("POST", collection))
-
-  const requestOptions: any = {
-    method: "POST",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-    body: JSON.stringify(collection),
-  };
-
-  return fetch(`${getAPIUrl()}collections/`, requestOptions)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
-}
+}

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 data: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("GET", null))
-
-  const requestOptions: any = {
-    method: "GET",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  const data: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, requestOptions)
     .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 result: any = await fetch(`${getAPIUrl()}chapters/meta/course_${course_id}`, RequestBody("PUT", data))
-
-  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)
     .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 result: any = await fetch(`${getAPIUrl()}chapters/?course_id=course_${course_id}`, RequestBody("POST", data))
-  
-  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)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 
-  console.log("result", result);
-  
   return result;
 }
 
-export async function deleteChapter (coursechapter_id: any) {
+export async function deleteChapter(coursechapter_id: any) {
-  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+  const result: any = await fetch(`${getAPIUrl()}chapters/${coursechapter_id}`, RequestBody("DELETE", null))
-
-  const requestOptions: any = {
-    method: "DELETE",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  const result: any = await fetch(`${getAPIUrl()}chapters/${coursechapter_id}`, requestOptions)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 
-  console.log("result", result);
-  
   return result;
 }

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 = {
+  return fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, RequestBody("GET", null))
-    method: "GET",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  return fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, requestOptions)
     .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 = {
+  return fetch(`${getAPIUrl()}courses/${course_id}`, RequestBody("DELETE", null))
-    method: "DELETE",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  return fetch(`${getAPIUrl()}courses/${course_id}`, requestOptions)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 }

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 result: any = await fetch(`${getAPIUrl()}lectures/?coursechapter_id=${chapter_id}`, RequestBody("POST", data))
-
-  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)
     .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 result: any = await fetch(endpoint, RequestBodyForm("POST", formData))
-  
-
-  const requestOptions: any = {
-    method: "POST",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-    body: formData,
-  };
-
-  const result: any = await fetch(endpoint, requestOptions)
     .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 = {
+  const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, RequestBody("GET", null))
-    method: "GET",
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  const result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, requestOptions)
     .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 result: any = await fetch(`${getAPIUrl()}lectures/${lecture_id}`, RequestBody("PUT", data))
-
-  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)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 

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 = {
+  return fetch(`${getAPIUrl()}files/picture`, RequestBodyForm("POST", formData))
-    method: "POST",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-    body: formData,
-  };
-
-  return fetch(`${getAPIUrl()}files/picture`, requestOptions)
     .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));
-}
+}

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 = {
+  return fetch(`${getAPIUrl()}files/video`, RequestBodyForm("POST", formData))
-    method: "POST",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-    body: formData,
-  };
-
-  return fetch(`${getAPIUrl()}files/video`, requestOptions)
     .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" });
+  return fetch(`${getAPIUrl()}files/video?file_id=${file_id}`, RequestBody("GET", null))
-
-  const requestOptions: any = {
-    method: "GET",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  
-  return fetch(`${getAPIUrl()}files/video?file_id=${file_id}`, requestOptions)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
-}
+}

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" });
+  return fetch(`${getAPIUrl()}orgs/`, RequestBody("POST", body))
-
-  const requestOptions: any = {
-    method: "POST",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-    body: JSON.stringify(body),
-  };
-
-  return fetch(`${getAPIUrl()}orgs/`, requestOptions)
     .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" });
+  return fetch(`${getAPIUrl()}orgs/${org_id}`, RequestBody("DELETE", null))
-
-  const requestOptions: any = {
-    method: "DELETE",
-    headers: HeadersConfig,
-    redirect: "follow",
-    credentials: "include",
-  };
-
-  return fetch(`${getAPIUrl()}orgs/${org_id}`, requestOptions)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 }
 
-
+export async function getOrganizationContextInfo(org_slug: any) {
-export async function getOrganizationContextInfo(org_slug : any){
+  return fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, RequestBody("GET", null))
-  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)
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
-
+}
-}

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 = {