feat: use Next.js on demand revalidation

front/app/api/revalidate/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { revalidateTag } from "next/cache";
+
+export async function GET(request: NextRequest) {
+  const tag: any = request.nextUrl.searchParams.get("tag");
+  revalidateTag(tag);
+
+  return NextResponse.json(
+    { revalidated: true, now: Date.now() },
+    {
+      status: 200,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization",
+      },
+    }
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/courses/courses.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link';
 import React from 'react'
 import Image from 'next/image';
 import { AuthContext } from '@components/Security/AuthProvider';
+import { revalidateTags } from '@services/utils/ts/requests';
 
 interface CourseProps {
     orgslug: string;
@@ -28,13 +29,14 @@ function Courses(props: CourseProps) {
 
     async function deleteCourses(course_id: any) {
         await deleteCourseFromBackend(course_id);
+        revalidateTags(['courses']);
     }
 
     async function closeNewCourseModal() {
         setNewCourseModal(false);
     }
 
-    
+
 
 
     return (
@@ -103,7 +105,7 @@ const AdminEditsArea = (props: any) => {
 
     // this is amazingly terrible code, but gotta release that MVP
     // TODO: fix this
-    
+
     function isAuthorized() {
         const org_id = props.course.org_id;
         const org_roles = auth.userInfo.user_object.orgs;

front/app/orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -11,11 +11,11 @@ export const metadata: Metadata = {
 
 const CoursesPage = async (params: any) => {
   const orgslug = params.params.orgslug;
-  const courses = await getOrgCourses(orgslug, { revalidate: 360 });
+  const courses = await getOrgCourses(orgslug, { revalidate: 360, tags: ['courses'] });
 
   return (
     <div>
-      <Courses orgslug={orgslug} courses={courses}/>
+      <Courses orgslug={orgslug} courses={courses} />
     </div>
   );
 };

front/app/orgs/[orgslug]/(withmenu)/page.tsx

@@ -22,7 +22,7 @@ export async function generateMetadata(
 ): Promise<Metadata> {
 
   // Get Org context information 
-  const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800 });
+  const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
   return {
     title: org.name + " — Home",
     description: org.description,
@@ -31,7 +31,7 @@ export async function generateMetadata(
 
 const OrgHomePage = async (params: any) => {
   const orgslug = params.params.orgslug;
-  const courses = await getOrgCourses(orgslug, { revalidate: 360 });
+  const courses = await getOrgCourses(orgslug, { revalidate: 360 , tags: ['courses'] });
   const collections = await getOrgCollections();
 
   // function to remove "course_" from the course_id

front/components/Modals/Course/Create/CreateCourse.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel,  Input, Textarea } from '@components/UI/Form/Form'
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/UI/Form/Form'
 import * as Form from '@radix-ui/react-form'
 import { getAPIUrl, getUriWithOrg } from '@services/config/config';
 import { FormMessage } from "@radix-ui/react-form";
@@ -7,6 +7,7 @@ import { getOrganizationContextInfo } from '@services/organizations/orgs';
 import React, { useState } from 'react'
 import { BarLoader } from 'react-spinners'
 import { mutate } from 'swr';
+import { revalidateTags } from '@services/utils/ts/requests';
 
 function CreateCourseModal({ closeModal, orgslug }: any) {
     const [isSubmitting, setIsSubmitting] = useState(false);
@@ -19,7 +20,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
 
 
     const getOrgMetadata = async () => {
-        const org = await getOrganizationContextInfo(orgslug);
+        const org = await getOrganizationContextInfo(orgslug, { revalidate: 360, tags: ['organizations'] });
         setOrgId(org.org_id);
     }
 
@@ -40,7 +41,7 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
         e.preventDefault();
         setIsSubmitting(true);
         let status = await createNewCourse(orgId, { name, description }, thumbnail);
-        mutate(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`);
+        revalidateTags(['courses']);
         setIsSubmitting(false);
 
         if (status.org_id == orgId) {

front/services/config/config.ts

@@ -1,4 +1,4 @@
-const LEARNHOUSE_HTTP_PROTOCOL = process.env.NEXT_PUBLIC_LEARNHOUSE_HTTPS === "true" ? "https://" : "http://";
+export const LEARNHOUSE_HTTP_PROTOCOL = process.env.NEXT_PUBLIC_LEARNHOUSE_HTTPS === "true" ? "https://" : "http://";
 const LEARNHOUSE_API_URL = `${process.env.NEXT_PUBLIC_LEARNHOUSE_API_URL}`;
 const LEARNHOUSE_BACKEND_URL = `${process.env.NEXT_PUBLIC_LEARNHOUSE_BACKEND_URL}`;
 export const LEARNHOUSE_DOMAIN = process.env.NEXT_PUBLIC_LEARNHOUSE_DOMAIN;

front/services/utils/ts/requests.ts

@@ -1,5 +1,6 @@
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context";
 import { denyAccessToUser } from "../react/middlewares/views";
+import { LEARNHOUSE_DOMAIN, LEARNHOUSE_HTTP_PROTOCOL } from "@services/config/config";
 
 export const RequestBody = (method: string, data: any, next: any) => {
   let HeadersConfig = new Headers({ "Content-Type": "application/json" });
@@ -69,3 +70,9 @@ export const errorHandling = (res: any) => {
   }
   return res.json();
 };
+
+export const revalidateTags = (tags: string[]) => {
+  tags.forEach((tag) => {
+    fetch(`${LEARNHOUSE_HTTP_PROTOCOL}${LEARNHOUSE_DOMAIN}/api/revalidate?tag=${tag}`);
+  });
+};