feat: use swr for activity

This commit is contained in:
swve 2023-01-24 22:21:37 +01:00
parent cad10078ae
commit 007ed6c8ea
6 changed files with 56 additions and 54 deletions

View file

@ -1,41 +1,27 @@
"use client"; "use client";
import { getBackendUrl } from "@services/config"; import { getAPIUrl, getBackendUrl } from "@services/config";
import { getActivities } from "@services/courses/activity"; import { getActivities } from "@services/courses/activity";
import { getOrganizationContextInfo } from "@services/orgs"; import { getOrganizationContextInfo } from "@services/orgs";
import { RequestBody } from "@services/utils/requests"; import { swrFetcher } from "@services/utils/requests";
import React from "react"; import React from "react";
import { styled } from "styled-components"; import { styled } from "styled-components";
import useSWR from "swr"; import useSWR from "swr";
function Activity(params: any) { function Activity(params: any) {
let orgslug = params.params.orgslug; let orgslug = params.params.orgslug;
const [isLoading, setIsLoading] = React.useState(true); const { data: activities, error: error } = useSWR(`${getAPIUrl()}activity/org_slug/${orgslug}/activities`, swrFetcher);
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();
}, []);
return ( return (
<ActivityLayout> <ActivityLayout>
<h1>Activity</h1> <h1>Activity</h1>
<br /> <br />
{isLoading ? ( {error && <p>Failed to load</p>}
{!activities ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<div> <div>
{activities.map((activity: any) => ( {activities.map((activity: any) => (
<ActivityBox key={activity.activity_id}> <ActivityBox key={activity.activity_id}>
<ActivityMetadata> <ActivityMetadata>
<ActivityThumbnail> <ActivityThumbnail>
<img src={`${getBackendUrl()}content/uploads/img/${activity.course.thumbnail}`}></img> <img src={`${getBackendUrl()}content/uploads/img/${activity.course.thumbnail}`}></img>

View file

@ -3,17 +3,17 @@ import Link from "next/link";
import React from "react"; import React from "react";
import Layout from "../../components/UI/Layout"; import Layout from "../../components/UI/Layout";
import { Title } from "../../components/UI/Elements/Styles/Title"; import { Title } from "../../components/UI/Elements/Styles/Title";
import { deleteOrganizationFromBackend } from "../../services/orgs"; import { deleteOrganizationFromBackend } from "@services/orgs";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
import { swrFetcher } from "@services/utils/requests"; import { swrFetcher } from "@services/utils/requests";
import { getAPIUrl } from "@services/config"; import { getAPIUrl } from "@services/config";
const Organizations = () => { const Organizations = () => {
const { data, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher) const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
async function deleteOrganization(org_id: any) { async function deleteOrganization(org_id: any) {
const response = await deleteOrganizationFromBackend(org_id); const response = await deleteOrganizationFromBackend(org_id);
response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, data.filter((org: any) => org.org_id !== org_id)); response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id));
} }
return ( return (
@ -26,11 +26,11 @@ const Organizations = () => {
</Title> </Title>
<hr /> <hr />
{error && <p>Failed to load</p>} {error && <p>Failed to load</p>}
{!data ? ( {!organizations ? (
<p>Loading...</p> <p>Loading...</p>
) : ( ) : (
<div> <div>
{data.map((org: any) => ( {organizations.map((org: any) => (
<div key={org.org_id}> <div key={org.org_id}>
<Link href={`/org/${org.slug}`}> <Link href={`/org/${org.slug}`}>
<h3>{org.name}</h3> <h3>{org.name}</h3>

View file

@ -1,5 +1,5 @@
import { RequestBody } from "@services/utils/requests"; import { RequestBody } from "@services/utils/requests";
import { getAPIUrl } from "../config"; import { getAPIUrl } from "@services/config";
/* /*
This file includes only POST, PUT, DELETE requests 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; 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;
}

View file

@ -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" }); This file includes only POST, PUT, DELETE requests
GET requests are called from the frontend using SWR (https://swr.vercel.app/)
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));
}
export async function createNewOrganization(body: any) { export async function createNewOrganization(body: any) {
const HeadersConfig = new Headers({ "Content-Type": "application/json" }); const HeadersConfig = new Headers({ "Content-Type": "application/json" });
@ -31,8 +21,6 @@ export async function createNewOrganization(body: any) {
.catch((error) => console.log("error", error)); .catch((error) => console.log("error", error));
} }
// export async function getOrganizationData(org_id) {}
export async function deleteOrganizationFromBackend(org_id: any) { export async function deleteOrganizationFromBackend(org_id: any) {
const HeadersConfig = new Headers({ "Content-Type": "application/json" }); 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)); .catch((error) => console.log("error", error));
} }
// export async function updateOrganization(org_id) {}
export async function getOrganizationContextInfo(org_slug : any){ export async function getOrganizationContextInfo(org_slug : any){
const HeadersConfig = new Headers({ "Content-Type": "application/json" }); const HeadersConfig = new Headers({ "Content-Type": "application/json" });

View file

@ -1,6 +1,6 @@
from fastapi import APIRouter, Depends, Request from fastapi import APIRouter, Depends, Request
from src.dependencies.auth import get_current_user 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() 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 # TODO : get activity by user_is and org_id and course_id
@router.get("/{org_id}/activities") @router.get("/org_id/{org_id}/activities")
async def api_get_activity_by_userid(request: Request, org_id: str, user=Depends(get_current_user)): async def api_get_activity_by_orgid(request: Request, org_id: str, user=Depends(get_current_user)):
""" """
Get a user activities Get a user activities
""" """
return await get_user_activities(request, user, org_id=org_id) 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}") @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)): async def api_add_lecture_to_activity(request: Request, org_id: str, course_id: str, lecture_id: str, user=Depends(get_current_user)):

View file

@ -89,6 +89,36 @@ async def get_user_activities(request: Request, user: PublicUser, org_id: str):
return activities_metadata 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): async def add_lecture_to_activity(request: Request, user: PublicUser, org_id: str, course_id: str, lecture_id: str):
activities = request.app.db["activities"] activities = request.app.db["activities"]