mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #42 from learnhouse/feat/swr
Use SWR for GET requests
This commit is contained in:
Badr B
GitHub
commit
fb4a8d2882
27 changed files with 287 additions and 358 deletions
|
|
@ -1,41 +1,25 @@
|
|||
"use client";
|
||||
import { getBackendUrl } from "@services/config";
|
||||
import { getActivities } from "@services/courses/activity";
|
||||
import { getOrganizationContextInfo } from "@services/orgs";
|
||||
import { RequestBody } from "@services/utils/requests";
|
||||
import { getAPIUrl, getBackendUrl } from "@services/config";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
import React from "react";
|
||||
import { styled } from "styled-components";
|
||||
import useSWR from "swr";
|
||||
|
||||
function Activity(params: any) {
|
||||
let orgslug = params.params.orgslug;
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [activities, setActivities] = React.useState([]);
|
||||
|
||||
async function fetchActivities() {
|
||||
setIsLoading(true);
|
||||
const org = await getOrganizationContextInfo(orgslug);
|
||||
const activities = await getActivities(org.org_id);
|
||||
console.log(activities);
|
||||
|
||||
setActivities(activities);
|
||||
setIsLoading(false);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
fetchActivities();
|
||||
}, []);
|
||||
const { data: activities, error: error } = useSWR(`${getAPIUrl()}activity/org_slug/${orgslug}/activities`, swrFetcher);
|
||||
|
||||
return (
|
||||
<ActivityLayout>
|
||||
<h1>Activity</h1>
|
||||
<br />
|
||||
{isLoading ? (
|
||||
{error && <p>Failed to load</p>}
|
||||
{!activities ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<div>
|
||||
{activities.map((activity: any) => (
|
||||
<ActivityBox key={activity.activity_id}>
|
||||
|
||||
<ActivityMetadata>
|
||||
<ActivityThumbnail>
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${activity.course.thumbnail}`}></img>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
"use client";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import { Title } from "../../../../../components/UI/Elements/Styles/Title";
|
||||
import Layout from "../../../../../components/UI/Layout";
|
||||
import { getOrganizationContextInfo } from "../../../../../services/orgs";
|
||||
import { getOrgCourses } from "../../../../../services/courses/courses";
|
||||
import { createCollection } from "../../../../../services/collections";
|
||||
import { Title } from "@components/UI/Elements/Styles/Title";
|
||||
import { createCollection } from "@services/collections";
|
||||
import useSWR from "swr";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
import { getOrganizationContextInfo } from "@services/orgs";
|
||||
|
||||
function NewCollection(params : any) {
|
||||
const orgslug = params.params.orgslug;
|
||||
|
|
@ -13,19 +14,17 @@ function NewCollection(params : any) {
|
|||
const [org, setOrg] = React.useState({}) as any;
|
||||
const [description, setDescription] = React.useState("");
|
||||
const [selectedCourses, setSelectedCourses] = React.useState([]) as any;
|
||||
const [courses, setCourses] = React.useState([]) as any;
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
async function getCourses() {
|
||||
const { data: courses, error: error } = useSWR(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`, swrFetcher);
|
||||
|
||||
setIsLoading(true);
|
||||
React.useEffect(() => {
|
||||
async function getOrg() {
|
||||
const org = await getOrganizationContextInfo(orgslug);
|
||||
setOrg(org);
|
||||
const courses = await getOrgCourses(org.org_id);
|
||||
setCourses(courses);
|
||||
setIsLoading(false);
|
||||
}
|
||||
getOrg();
|
||||
}, []);
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(event.target.value);
|
||||
|
|
@ -48,20 +47,13 @@ function NewCollection(params : any) {
|
|||
router.push("/org/" + orgslug + "/collections");
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (params.params.orgslug) {
|
||||
getCourses();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [params.params.orgslug]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>Add new</Title>
|
||||
<br />
|
||||
<input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
|
||||
{isLoading ? (
|
||||
{!courses ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,32 @@
|
|||
"use client";
|
||||
import Layout from "../../../../components/UI/Layout";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Title } from "../../../../components/UI/Elements/Styles/Title";
|
||||
import { deleteCollection, getOrgCollections } from "../../../../services/collections";
|
||||
import { getOrganizationContextInfo } from "../../../../services/orgs";
|
||||
import { getBackendUrl } from "../../../../services/config";
|
||||
import { Title } from "@components/UI/Elements/Styles/Title";
|
||||
import { deleteCollection } from "@services/collections";
|
||||
import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
function Collections(params:any) {
|
||||
function Collections(params: any) {
|
||||
const orgslug = params.params.orgslug;
|
||||
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [collections, setCollections] = React.useState([]);
|
||||
|
||||
async function fetchCollections() {
|
||||
setIsLoading(true);
|
||||
const org = await getOrganizationContextInfo(orgslug);
|
||||
const collections = await getOrgCollections(org.org_id);
|
||||
setCollections(collections);
|
||||
setIsLoading(false);
|
||||
}
|
||||
const { data: collections, error: error } = useSWR(`${getAPIUrl()}collections/page/1/limit/10`, swrFetcher);
|
||||
|
||||
async function deleteCollectionAndFetch(collectionId: number) {
|
||||
setIsLoading(true);
|
||||
await deleteCollection(collectionId);
|
||||
await fetchCollections();
|
||||
setIsLoading(false);
|
||||
mutate(`${getAPIUrl()}collections/page/1/limit/10`);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchCollections();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>
|
||||
{orgslug} Collections :{" "}
|
||||
<Link href={"/collections/new"}>
|
||||
<Link href={getUriWithOrg(orgslug, "/collections/new")}>
|
||||
<button>+</button>
|
||||
</Link>{" "}
|
||||
</Title>
|
||||
{isLoading ? (
|
||||
{error && <p>Failed to load</p>}
|
||||
{!collections ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
import React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Header } from "../../../../../../components/UI/Header";
|
||||
import Layout from "../../../../../../components/UI/Layout";
|
||||
import { Title } from "../../../../../../components/UI/Elements/Styles/Title";
|
||||
import { Header } from "@components/UI/Header";
|
||||
import Layout from "@components/UI/Layout";
|
||||
import { Title } from "@components/UI/Elements/Styles/Title";
|
||||
import { DragDropContext, Droppable } from "react-beautiful-dnd";
|
||||
import { initialData, initialData2 } from "../../../../../../components/Drags/data";
|
||||
import Chapter from "../../../../../../components/Drags/Chapter";
|
||||
import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "../../../../../../services/courses/chapters";
|
||||
import { initialData, initialData2 } from "@components/Drags/data";
|
||||
import Chapter from "@components/Drags/Chapter";
|
||||
import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NewChapterModal from "../../../../../../components/Modals/CourseEdit/NewChapter";
|
||||
import NewLectureModal from "../../../../../../components/Modals/CourseEdit/NewLecture";
|
||||
import { createLecture, createFileLecture } from "../../../../../../services/courses/lectures";
|
||||
import NewChapterModal from "@components/Modals/CourseEdit/NewChapter";
|
||||
import NewLectureModal from "@components/Modals/CourseEdit/NewLecture";
|
||||
import { createLecture, createFileLecture } from "@services/courses/lectures";
|
||||
|
||||
function CourseEdit(params: any) {
|
||||
const router = useRouter();
|
||||
|
|
|
|||
|
|
@ -7,44 +7,24 @@ import { useRouter } from "next/navigation";
|
|||
import { getLecture } from "../../../../../../../../services/courses/lectures";
|
||||
import AuthProvider from "../../../../../../../../components/Security/AuthProvider";
|
||||
import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
|
||||
import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
|
||||
|
||||
function EditLecture(params: any) {
|
||||
const router = useRouter();
|
||||
const lectureid = params.params.lectureid;
|
||||
const courseid = params.params.courseid;
|
||||
const [lecture, setLecture] = React.useState<any>({});
|
||||
const [courseInfo, setCourseInfo] = React.useState({}) as any;
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const { data: courseInfo, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
|
||||
const { data: lecture, error: error_lecture } = useSWR(`${getAPIUrl()}lectures/lecture_${lectureid}`, swrFetcher);
|
||||
|
||||
async function fetchLectureData() {
|
||||
const lecture = await getLecture("lecture_" + lectureid);
|
||||
setLecture(lecture);
|
||||
}
|
||||
|
||||
async function fetchCourseInfo() {
|
||||
const course = await getCourseMetadata("course_" + courseid);
|
||||
setCourseInfo(course);
|
||||
}
|
||||
|
||||
async function fetchAllData() {
|
||||
await fetchLectureData();
|
||||
await fetchCourseInfo();
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (lectureid && courseid) {
|
||||
fetchAllData();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [lectureid, courseid ]);
|
||||
|
||||
return (
|
||||
<AuthProvider>
|
||||
{isLoading ? <div>Loading...</div> : <EditorWrapper course={courseInfo} lecture={lecture} content={lecture.content}></EditorWrapper>}
|
||||
{!courseInfo || !lecture ? <div>Loading...</div> : <EditorWrapper course={courseInfo} lecture={lecture} content={lecture.content}></EditorWrapper>}
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,54 +2,38 @@
|
|||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import React, { useMemo } from "react";
|
||||
import Layout from "../../../../../../../components/UI/Layout";
|
||||
import { getLecture } from "../../../../../../../services/courses/lectures";
|
||||
import { getBackendUrl } from "../../../../../../../services/config";
|
||||
import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
|
||||
import Layout from "@components/UI/Layout";
|
||||
import { getLecture } from "@services/courses/lectures";
|
||||
import { getAPIUrl, getBackendUrl } from "@services/config";
|
||||
import Canva from "@components/LectureViews/DynamicCanva/DynamicCanva";
|
||||
import styled from "styled-components";
|
||||
import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
|
||||
import { getCourse } from "@services/courses/courses";
|
||||
import VideoLecture from "@components/LectureViews/Video/Video";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { Check } from "lucide-react";
|
||||
import { maskLectureAsComplete } from "@services/courses/activity";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
|
||||
function LecturePage(params: any) {
|
||||
const router = useRouter();
|
||||
const lectureid = params.params.lectureid;
|
||||
const courseid = params.params.courseid;
|
||||
const orgslug = params.params.orgslug;
|
||||
const [lecture, setLecture] = React.useState<any>({});
|
||||
const [course, setCourse] = React.useState<any>({});
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
async function fetchLectureData() {
|
||||
setIsLoading(true);
|
||||
const lecture = await getLecture("lecture_" + lectureid);
|
||||
setLecture(lecture);
|
||||
}
|
||||
const { data: course, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
|
||||
const { data: lecture, error: error_lecture } = useSWR(`${getAPIUrl()}lectures/lecture_${lectureid}`, swrFetcher);
|
||||
|
||||
async function fetchCourseData() {
|
||||
const course = await getCourseMetadata("course_" + courseid);
|
||||
setCourse(course);
|
||||
setIsLoading(false);
|
||||
}
|
||||
console.log(course, lecture);
|
||||
|
||||
async function markLectureAsCompleteFront() {
|
||||
const activity = await maskLectureAsComplete("" + lectureid, courseid, lecture.lecture_id.replace("lecture_", ""));
|
||||
fetchCourseData();
|
||||
mutate(`${getAPIUrl()}lectures/lecture_${lectureid}`);
|
||||
mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (lectureid) {
|
||||
fetchLectureData();
|
||||
fetchCourseData();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [lectureid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading ? (
|
||||
{error_course && <p>Failed to load</p>}
|
||||
{!course || !lecture ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<LectureLayout>
|
||||
|
|
@ -85,13 +69,16 @@ function LecturePage(params: any) {
|
|||
})}
|
||||
</ChaptersWrapper>
|
||||
|
||||
{lecture ? (
|
||||
<CourseContent>
|
||||
{lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />}
|
||||
|
||||
<ActivityMarkerWrapper>
|
||||
{course.activity.lectures_marked_complete.includes("lecture_"+lectureid) && course.activity.status == "ongoing" ? (
|
||||
{course.activity.lectures_marked_complete &&
|
||||
course.activity.lectures_marked_complete.includes("lecture_" + lectureid) &&
|
||||
course.activity.status == "ongoing" ? (
|
||||
<button style={{ backgroundColor: "green" }}>
|
||||
<i>
|
||||
<Check size={20}></Check>
|
||||
|
|
@ -109,6 +96,9 @@ function LecturePage(params: any) {
|
|||
)}
|
||||
</ActivityMarkerWrapper>
|
||||
</CourseContent>
|
||||
) : (
|
||||
<div>Loading...</div>
|
||||
)}
|
||||
</LectureLayout>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -2,67 +2,55 @@
|
|||
import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
|
||||
import { closeActivity, createActivity } from "@services/courses/activity";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import Layout from "../../../../../components/UI/Layout";
|
||||
import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
|
||||
import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses";
|
||||
import { getAPIUrl, getBackendUrl } from "@services/config";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
|
||||
const CourseIdPage = (params: any) => {
|
||||
const router = useRouter();
|
||||
const courseid = params.params.courseid;
|
||||
const orgslug = params.params.orgslug;
|
||||
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [courseInfo, setCourseInfo] = React.useState({}) as any;
|
||||
|
||||
async function fetchCourseInfo() {
|
||||
const course = await getCourseMetadata("course_" + courseid);
|
||||
setCourseInfo(course);
|
||||
setIsLoading(false);
|
||||
}
|
||||
const { data: course, error: error } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
|
||||
|
||||
async function startActivity() {
|
||||
const activity = await createActivity("course_" + courseid);
|
||||
fetchCourseInfo();
|
||||
// Create activity
|
||||
await createActivity("course_" + courseid);
|
||||
|
||||
// Mutate course
|
||||
mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
|
||||
}
|
||||
|
||||
async function quitActivity() {
|
||||
let activity_id = courseInfo.activity.activity_id;
|
||||
let org_id = courseInfo.activity.org_id;
|
||||
console.log("activity", activity_id);
|
||||
// Get activity id and org id
|
||||
let activity_id = course.activity.activity_id;
|
||||
let org_id = course.activity.org_id;
|
||||
|
||||
// Close activity
|
||||
let activity = await closeActivity(activity_id, org_id);
|
||||
console.log(activity);
|
||||
|
||||
fetchCourseInfo();
|
||||
// Mutate course
|
||||
mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (courseid && orgslug) {
|
||||
fetchCourseInfo();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [courseid && orgslug]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading ? (
|
||||
{error && <p>Failed to load</p>}
|
||||
{!course ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<CoursePageLayout>
|
||||
<br></br>
|
||||
<p>Course</p>
|
||||
<h1>
|
||||
{courseInfo.course.name}{" "}
|
||||
{course.course.name}{" "}
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/edit`} rel="noopener noreferrer">
|
||||
<Pencil2Icon />
|
||||
</Link>{" "}
|
||||
</h1>
|
||||
<ChaptersWrapper>
|
||||
{courseInfo.chapters.map((chapter: any) => {
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
{chapter.lectures.map((lecture: any) => {
|
||||
|
|
@ -81,7 +69,7 @@ const CourseIdPage = (params: any) => {
|
|||
</ChaptersWrapper>
|
||||
|
||||
<CourseThumbnailWrapper>
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${courseInfo.course.thumbnail}`} alt="" />
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
|
||||
</CourseThumbnailWrapper>
|
||||
|
||||
<CourseMetaWrapper>
|
||||
|
|
@ -89,18 +77,18 @@ const CourseIdPage = (params: any) => {
|
|||
<h2>Description</h2>
|
||||
|
||||
<BoxWrapper>
|
||||
<p>{courseInfo.course.description}</p>
|
||||
<p>{course.course.description}</p>
|
||||
</BoxWrapper>
|
||||
|
||||
<h2>What you will learn</h2>
|
||||
<BoxWrapper>
|
||||
<p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
|
||||
<p>{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
|
||||
</BoxWrapper>
|
||||
|
||||
<h2>Course Lessons</h2>
|
||||
|
||||
<BoxWrapper>
|
||||
{courseInfo.chapters.map((chapter: any) => {
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
<h3>Chapter : {chapter.name}</h3>
|
||||
|
|
@ -123,8 +111,10 @@ const CourseIdPage = (params: any) => {
|
|||
</BoxWrapper>
|
||||
</CourseMetaLeft>
|
||||
<CourseMetaRight>
|
||||
{courseInfo.activity.status == "ongoing" ? (
|
||||
<button style={{backgroundColor:"red"}} onClick={quitActivity}>Quit Activity</button>
|
||||
{course.activity.status == "ongoing" ? (
|
||||
<button style={{ backgroundColor: "red" }} onClick={quitActivity}>
|
||||
Quit Activity
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={startActivity}>Start Activity</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,32 +3,21 @@ import Link from "next/link";
|
|||
import { useRouter } from "next/navigation";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Header } from "../../../../components/UI/Header";
|
||||
import Layout from "../../../../components/UI/Layout";
|
||||
import { Title } from "../../../../components/UI/Elements/Styles/Title";
|
||||
import { getBackendUrl } from "../../../../services/config";
|
||||
import { deleteCourseFromBackend, getOrgCourses } from "../../../../services/courses/courses";
|
||||
import { getOrganizationContextInfo } from "../../../../services/orgs";
|
||||
import { getAPIUrl, getBackendUrl } from "../../../../services/config";
|
||||
import { deleteCourseFromBackend } from "../../../../services/courses/courses";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
|
||||
const CoursesIndexPage = (params: any) => {
|
||||
const router = useRouter();
|
||||
const orgslug = params.params.orgslug;
|
||||
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [orgInfo, setOrgInfo] = React.useState(null);
|
||||
const [courses, setCourses] = React.useState([]);
|
||||
|
||||
async function fetchCourses() {
|
||||
const org = await getOrganizationContextInfo(orgslug);
|
||||
const response = await getOrgCourses(org.org_id);
|
||||
setCourses(response);
|
||||
setIsLoading(false);
|
||||
}
|
||||
const { data: courses, error: error } = useSWR(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`, swrFetcher);
|
||||
|
||||
async function deleteCourses(course_id: any) {
|
||||
const response = await deleteCourseFromBackend(course_id);
|
||||
const newCourses = courses.filter((course: any) => course.course_id !== course_id);
|
||||
setCourses(newCourses);
|
||||
await deleteCourseFromBackend(course_id);
|
||||
mutate(`${getAPIUrl()}courses/${orgslug}/page/1/limit/10`);
|
||||
}
|
||||
|
||||
// function to remove "course_" from the course_id
|
||||
|
|
@ -36,15 +25,6 @@ const CoursesIndexPage = (params: any) => {
|
|||
return course_id.replace("course_", "");
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (orgslug) {
|
||||
fetchCourses();
|
||||
if (courses.length > 0) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}, [isLoading, orgslug]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>
|
||||
|
|
@ -55,7 +35,8 @@ const CoursesIndexPage = (params: any) => {
|
|||
</Title>
|
||||
|
||||
<hr />
|
||||
{isLoading ? (
|
||||
{error && <p>Failed to load</p>}
|
||||
{!courses ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import "../../../styles/globals.css";
|
||||
import { Menu } from "../../../components/UI/Elements/Menu";
|
||||
import AuthProvider from "../../../components/Security/AuthProvider";
|
||||
import "@styles/globals.css";
|
||||
import { Menu } from "@components/UI/Elements/Menu";
|
||||
import AuthProvider from "@components/Security/AuthProvider";
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,64 +3,44 @@ import Link from "next/link";
|
|||
import React from "react";
|
||||
import Layout from "../../components/UI/Layout";
|
||||
import { Title } from "../../components/UI/Elements/Styles/Title";
|
||||
import { deleteOrganizationFromBackend, getUserOrganizations } from "../../services/orgs";
|
||||
import { deleteOrganizationFromBackend } from "@services/orgs";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { swrFetcher } from "@services/utils/requests";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
const Organizations = () => {
|
||||
const [userOrganizations, setUserOrganizations] = React.useState([]);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
|
||||
|
||||
async function fetchUserOrganizations() {
|
||||
const response = await getUserOrganizations();
|
||||
setUserOrganizations(response);
|
||||
console.log(response);
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
async function deleteOrganization(org_id:any) {
|
||||
async function deleteOrganization(org_id: any) {
|
||||
const response = await deleteOrganizationFromBackend(org_id);
|
||||
const newOrganizations = userOrganizations.filter((org:any) => org.org_id !== org_id);
|
||||
setUserOrganizations(newOrganizations);
|
||||
response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id));
|
||||
}
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsLoading(true);
|
||||
fetchUserOrganizations();
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<>
|
||||
<Title>
|
||||
Your Organizations{" "}
|
||||
<Link href={"/organizations/new"}>
|
||||
|
||||
<button>+</button>
|
||||
|
||||
</Link>
|
||||
</Title>
|
||||
<hr />
|
||||
{isLoading ? (
|
||||
{error && <p>Failed to load</p>}
|
||||
{!organizations ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div>
|
||||
{userOrganizations.map((org: any) => (
|
||||
{organizations.map((org: any) => (
|
||||
<div key={org.org_id}>
|
||||
<Link href={`/org/${org.slug}`}>
|
||||
|
||||
<h3>{org.name}</h3>
|
||||
|
||||
</Link>
|
||||
<button onClick={() => deleteOrganization(org.org_id)}>
|
||||
Delete
|
||||
</button>
|
||||
<button onClick={() => deleteOrganization(org.org_id)}>Delete</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,21 @@ import learnhouseIcon from "public/learnhouse_icon.png";
|
|||
import learnhouseLogo from "public/learnhouse_logo.png";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useRouter, useSearchParams, usePathname } from "next/navigation";
|
||||
import { headers } from "next/headers";
|
||||
import { getOrgFromUri, getUriWithOrg } from "@services/config";
|
||||
|
||||
export const Menu = (params : any) => {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const orgslug = getOrgFromUri(pathname);
|
||||
|
||||
export const Menu = ({ orgslug }: any) => {
|
||||
return (
|
||||
<GlobalHeader>
|
||||
<LogoArea>
|
||||
<Logo>
|
||||
<Image width={25} height={25} src={learnhouseIcon} alt="" />
|
||||
<Link href={"/"}>
|
||||
<Link href={getUriWithOrg(orgslug, "/")}>
|
||||
<Image width={108} height={28} src={learnhouseLogo} alt="" />
|
||||
</Link>
|
||||
</Logo>
|
||||
|
|
@ -29,14 +34,14 @@ export const Menu = ({ orgslug }: any) => {
|
|||
<MenuArea>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href={"/courses"}>Courses</Link>
|
||||
<Link href={getUriWithOrg(orgslug, "/courses")}>Courses</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={"/collections"}>Collections</Link>
|
||||
<Link href={getUriWithOrg(orgslug, "/collections")}>Collections</Link>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
<Link href={"/activity"}>Activity</Link>
|
||||
<Link href={getUriWithOrg(orgslug, "/activity")}>Activity</Link>
|
||||
</li>
|
||||
<li>More</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
interface LoginAndGetTokenResponse {
|
||||
access_token: "string";
|
||||
|
|
|
|||
|
|
@ -1,41 +1,9 @@
|
|||
import { getAPIUrl } from "./config";
|
||||
|
||||
export async function getOrgCollections(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()}collections/page/1/limit/10`, requestOptions)
|
||||
.then((result) => result.json())
|
||||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
|
||||
export async function getCollection(collection_slug: any) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
||||
const requestOptions: any = {
|
||||
method: "GET",
|
||||
headers: HeadersConfig,
|
||||
redirect: "follow",
|
||||
credentials: "include",
|
||||
};
|
||||
|
||||
return fetch(
|
||||
`${getAPIUrl()}collections/${collection_slug}`,
|
||||
requestOptions
|
||||
)
|
||||
.then((result) => result.json())
|
||||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
This file includes only POST, PUT, DELETE requests
|
||||
GET requests are called from the frontend using SWR (https://swr.vercel.app/)
|
||||
*/
|
||||
|
||||
export async function deleteCollection(collection_id: any) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
|
|
|||
|
|
@ -4,3 +4,18 @@ const LEARNHOUSE_BACKEND_URL = "http://localhost:1338/";
|
|||
export const getAPIUrl = () => LEARNHOUSE_API_URL;
|
||||
|
||||
export const getBackendUrl = () => LEARNHOUSE_BACKEND_URL;
|
||||
|
||||
export const getUriWithOrg = (orgslug: string, path: string) => {
|
||||
return `http://localhost:3000/org/${orgslug}${path}`;
|
||||
};
|
||||
|
||||
export const getOrgFromUri = (uri: any) => {
|
||||
// if url contains /org
|
||||
if (uri.includes("/org/")) {
|
||||
let org = uri.match(/\/org\/([\w]+)/)[1];
|
||||
return org;
|
||||
}
|
||||
else {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { RequestBody } from "@services/utils/requests";
|
||||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
/*
|
||||
This file includes only POST, PUT, DELETE requests
|
||||
|
|
@ -30,11 +30,3 @@ export async function maskLectureAsComplete(org_id: string, course_id: string, l
|
|||
return result;
|
||||
}
|
||||
|
||||
// get all activities
|
||||
export async function getActivities(org_id: string) {
|
||||
const result: any = await fetch(`${getAPIUrl()}activity/${org_id}/activities`, RequestBody("GET", null))
|
||||
.then((result) => result.json())
|
||||
.catch((error) => console.log("error", error));
|
||||
return result;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { initialData } from "../../components/Drags/data";
|
||||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
export async function getCourseChaptersMetadata(course_id: any) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
/*
|
||||
This file includes only POST, PUT, DELETE requests
|
||||
GET requests are called from the frontend using SWR (https://swr.vercel.app/)
|
||||
*/
|
||||
|
||||
export async function getOrgCourses(org_id: number) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
|
@ -31,22 +36,6 @@ export async function getCourse(course_id: string) {
|
|||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
|
||||
export async function getCourseMetadata(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/meta/${course_id}`, requestOptions)
|
||||
.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();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
export async function createLecture(data: any, chapter_id: any) {
|
||||
data.content = {};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
export async function uploadNewImageFile(file: any, lecture_id: string) {
|
||||
const HeadersConfig = new Headers();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getAPIUrl } from "../config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
export async function uploadNewVideoFile(file: any, lecture_id: string) {
|
||||
const HeadersConfig = new Headers();
|
||||
|
|
|
|||
|
|
@ -1,19 +1,9 @@
|
|||
import { getAPIUrl } from "./config";
|
||||
import { getAPIUrl } from "@services/config";
|
||||
|
||||
export async function getUserOrganizations() {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
||||
const requestOptions: any = {
|
||||
method: "GET",
|
||||
headers: HeadersConfig,
|
||||
redirect: "follow",
|
||||
credentials: "include",
|
||||
};
|
||||
|
||||
return fetch(`${getAPIUrl()}orgs/user/page/1/limit/10`, requestOptions)
|
||||
.then((result) => result.json())
|
||||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
/*
|
||||
This file includes only POST, PUT, DELETE requests
|
||||
GET requests are called from the frontend using SWR (https://swr.vercel.app/)
|
||||
*/
|
||||
|
||||
export async function createNewOrganization(body: any) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
|
@ -31,8 +21,6 @@ export async function createNewOrganization(body: any) {
|
|||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
|
||||
// export async function getOrganizationData(org_id) {}
|
||||
|
||||
export async function deleteOrganizationFromBackend(org_id: any) {
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
||||
|
|
@ -48,7 +36,6 @@ export async function deleteOrganizationFromBackend(org_id: any) {
|
|||
.catch((error) => console.log("error", error));
|
||||
}
|
||||
|
||||
// export async function updateOrganization(org_id) {}
|
||||
|
||||
export async function getOrganizationContextInfo(org_slug : any){
|
||||
const HeadersConfig = new Headers({ "Content-Type": "application/json" });
|
||||
|
|
|
|||
|
|
@ -12,3 +12,31 @@ export const RequestBody = (method: string, data: any) => {
|
|||
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 = {
|
||||
method: "GET",
|
||||
headers: HeadersConfig,
|
||||
redirect: "follow",
|
||||
credentials: "include",
|
||||
};
|
||||
|
||||
// If there is a body, add it to the request options
|
||||
if (body) {
|
||||
options.body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
// Fetch the data
|
||||
const res = await fetch(url, options);
|
||||
|
||||
// If the response is not in the 200 range, throw an error
|
||||
if (!res.ok) {
|
||||
const error = new Error("An error occurred while fetching the data.");
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Return the data
|
||||
return res.json();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"@components/*": ["components/*"],
|
||||
"@public/*": ["public/*"],
|
||||
"@images/*": ["public/img/*"],
|
||||
"@styles/*": ["styles/*"],
|
||||
"@services/*": ["services/*"],
|
||||
"@editor/*": ["components/Editor/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
from fastapi import APIRouter, Depends, Request
|
||||
from src.dependencies.auth import get_current_user
|
||||
from src.services.activity import Activity, add_lecture_to_activity, close_activity, create_activity, get_user_activities
|
||||
from src.services.activity import Activity, add_lecture_to_activity, close_activity, create_activity, get_user_activities, get_user_activities_orgslug
|
||||
|
||||
|
||||
router = APIRouter()
|
||||
|
|
@ -16,13 +16,20 @@ async def api_start_activity(request: Request, activity_object: Activity, user=D
|
|||
# TODO : get activity by user_is and org_id and course_id
|
||||
|
||||
|
||||
@router.get("/{org_id}/activities")
|
||||
async def api_get_activity_by_userid(request: Request, org_id: str, user=Depends(get_current_user)):
|
||||
@router.get("/org_id/{org_id}/activities")
|
||||
async def api_get_activity_by_orgid(request: Request, org_id: str, user=Depends(get_current_user)):
|
||||
"""
|
||||
Get a user activities
|
||||
"""
|
||||
return await get_user_activities(request, user, org_id=org_id)
|
||||
|
||||
@router.get("/org_slug/{org_slug}/activities")
|
||||
async def api_get_activity_by_orgslug(request: Request, org_slug: str, user=Depends(get_current_user)):
|
||||
"""
|
||||
Get a user activities using org slug
|
||||
"""
|
||||
return await get_user_activities_orgslug(request, user, org_slug=org_slug)
|
||||
|
||||
|
||||
@router.post("/{org_id}/add_lecture/{course_id}/{lecture_id}")
|
||||
async def api_add_lecture_to_activity(request: Request, org_id: str, course_id: str, lecture_id: str, user=Depends(get_current_user)):
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
from fastapi import APIRouter, Depends, UploadFile, Form, Request
|
||||
from src.dependencies.auth import get_current_user
|
||||
|
||||
from src.services.courses.courses import Course, create_course, get_course, get_course_meta, get_courses, update_course, delete_course, update_course_thumbnail
|
||||
from src.services.courses.courses import Course, create_course, get_course, get_course_meta, get_courses, get_courses_orgslug, update_course, delete_course, update_course_thumbnail
|
||||
from src.services.users import PublicUser
|
||||
|
||||
|
||||
|
|
@ -42,13 +42,20 @@ async def api_get_course_meta(request: Request,course_id: str, current_user: Pu
|
|||
return await get_course_meta(request, course_id, current_user=current_user)
|
||||
|
||||
|
||||
@router.get("/{org_id}/page/{page}/limit/{limit}")
|
||||
@router.get("/org_id/{org_id}/page/{page}/limit/{limit}")
|
||||
async def api_get_course_by(request: Request,page: int, limit: int, org_id: str):
|
||||
"""
|
||||
Get houses by page and limit
|
||||
"""
|
||||
return await get_courses(request,page, limit, org_id)
|
||||
|
||||
@router.get("/org_slug/{org_slug}/page/{page}/limit/{limit}")
|
||||
async def api_get_course_by_orgslug(request: Request,page: int, limit: int, org_slug: str):
|
||||
"""
|
||||
Get houses by page and limit
|
||||
"""
|
||||
return await get_courses_orgslug(request,page, limit, org_slug)
|
||||
|
||||
|
||||
@router.put("/{course_id}")
|
||||
async def api_update_course(request: Request,course_object: Course, course_id: str, current_user: PublicUser = Depends(get_current_user)):
|
||||
|
|
|
|||
|
|
@ -89,6 +89,36 @@ async def get_user_activities(request: Request, user: PublicUser, org_id: str):
|
|||
|
||||
return activities_metadata
|
||||
|
||||
async def get_user_activities_orgslug(request: Request, user: PublicUser, org_slug: str):
|
||||
activities = request.app.db["activities"]
|
||||
courses = request.app.db["courses"]
|
||||
coursechapters = request.app.db["coursechapters"]
|
||||
|
||||
activities_metadata = []
|
||||
|
||||
user_activities = activities.find(
|
||||
{"user_id": user.user_id}, {'_id': 0})
|
||||
|
||||
if not user_activities:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_409_CONFLICT, detail="No activities found")
|
||||
|
||||
for activity in user_activities:
|
||||
# get number of lectures in the course
|
||||
coursechapters = await get_coursechapters_meta(request, activity['course_id'], user)
|
||||
|
||||
# calculate progression using the number of lectures marked complete and the total number of lectures
|
||||
progression = round(
|
||||
len(activity['lectures_marked_complete']) / len(coursechapters['lectures']) * 100, 2)
|
||||
|
||||
course = courses.find_one({"course_id": activity['course_id']}, {'_id': 0})
|
||||
|
||||
# add progression to the activity
|
||||
one_activity = {"course": course, "activitydata": activity, "progression": progression}
|
||||
activities_metadata.append(one_activity)
|
||||
|
||||
return activities_metadata
|
||||
|
||||
|
||||
async def add_lecture_to_activity(request: Request, user: PublicUser, org_id: str, course_id: str, lecture_id: str):
|
||||
activities = request.app.db["activities"]
|
||||
|
|
|
|||
|
|
@ -258,6 +258,25 @@ async def get_courses(request: Request, page: int = 1, limit: int = 10, org_id:
|
|||
|
||||
return [json.loads(json.dumps(course, default=str)) for course in all_courses]
|
||||
|
||||
async def get_courses_orgslug(request: Request, page: int = 1, limit: int = 10, org_slug: str | None = None):
|
||||
courses = request.app.db["courses"]
|
||||
orgs = request.app.db["organizations"]
|
||||
# TODO : Get only courses that user is admin/has roles of
|
||||
|
||||
# get org_id from slug
|
||||
org = orgs.find_one({"slug": org_slug})
|
||||
|
||||
if not org:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_409_CONFLICT, detail=f"Organization does not exist")
|
||||
|
||||
# get all courses from database
|
||||
all_courses = courses.find({"org_id": org['org_id']}).sort(
|
||||
"name", 1).skip(10 * (page - 1)).limit(limit)
|
||||
|
||||
return [json.loads(json.dumps(course, default=str)) for course in all_courses]
|
||||
|
||||
|
||||
|
||||
#### Security ####################################################
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue