feat: use swr for activity

front/app/_orgs/[orgslug]/activity/page.tsx

@@ -1,41 +1,27 @@
 "use client";
-import { getBackendUrl } from "@services/config";
+import { getAPIUrl, getBackendUrl } from "@services/config";
 import { getActivities } from "@services/courses/activity";
 import { getOrganizationContextInfo } from "@services/orgs";
-import {  RequestBody } from "@services/utils/requests";
+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>

front/app/organizations/page.tsx

@@ -3,17 +3,17 @@ 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 } 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 { 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) {
     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 (
@@ -26,11 +26,11 @@ const Organizations = () => {
       </Title>
       <hr />
       {error && <p>Failed to load</p>}
-      {!data ? (
+      {!organizations ? (
         <p>Loading...</p>
       ) : (
         <div>
-          {data.map((org: any) => (
+          {organizations.map((org: any) => (
             <div key={org.org_id}>
               <Link href={`/org/${org.slug}`}>
                 <h3>{org.name}</h3>

front/services/courses/activity.ts

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

front/services/orgs.ts

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