feat: use swr for collections

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

@@ -1,7 +1,5 @@
 "use client";
 import { getAPIUrl, getBackendUrl } from "@services/config";
-import { getActivities } from "@services/courses/activity";
-import { getOrganizationContextInfo } from "@services/orgs";
 import { swrFetcher } from "@services/utils/requests";
 import React from "react";
 import { styled } from "styled-components";

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

@@ -1,39 +1,22 @@
 "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 } 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>
@@ -42,7 +25,8 @@ function Collections(params:any) {
           <button>+</button>
         </Link>{" "}
       </Title>
-      {isLoading ? (
+      {error && <p>Failed to load</p>}
+      {!collections ? (
         <div>Loading...</div>
       ) : (
         <div>

front/services/collections.ts

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