Merge pull request #45 from learnhouse/chore/refactor

chore: reformat chapters ts
This commit is contained in:
Badr B 2023-02-04 17:27:34 +01:00 committed by GitHub
commit 1d0ce89aa3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 163 additions and 280 deletions

View file

@ -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;

View file

@ -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>
<CourseWrapper>
<button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
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>
</Link>
<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>
</CourseThumbnail>
<h2>{course.name}</h2>
</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;
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;
}
}
`;

View file

@ -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`

View file

@ -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;
}

View file

@ -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;

View file

@ -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));
}
}

View file

@ -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;
}

View file

@ -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));
}

View file

@ -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));

View file

@ -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));
}
}

View file

@ -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));
}
}

View file

@ -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));
}
}

View file

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