feat: introduce trail api and depreciate old api

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import { closeActivity, createActivity } from "@services/courses/activity";
+import {  removeCourse, startCourse } from "@services/courses/activity";
 import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
@@ -13,21 +13,19 @@ const CourseIdPage = (params: any) => {
   const orgslug = params.params.orgslug;
   const { data: course, error: error } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
 
-  async function startActivity() {
+  async function startCourseUI() {
     // Create activity
-    await createActivity("course_" + courseid);
+    await startCourse("course_" + courseid,  orgslug);
 
     // Mutate course
     mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
   }
 
-  async function quitActivity() {
-    // Get activity id and org id
-    let activity_id = course.activity.activity_id;
-    let org_id = course.activity.org_id;
+  async function quitCourse() {
+
 
     // Close activity
-    let activity = await closeActivity(activity_id, org_id);
+    let activity = await removeCourse("course_" + courseid,  orgslug);
     console.log(activity);
 
     // Mutate course
@@ -111,12 +109,12 @@ const CourseIdPage = (params: any) => {
               </BoxWrapper>
             </CourseMetaLeft>
             <CourseMetaRight>
-              {course.activity.status == "ongoing" ? (
-                <button style={{ backgroundColor: "red" }} onClick={quitActivity}>
-                  Quit Activity
+              {course.trail.status == "ongoing" ? (
+                <button style={{ backgroundColor: "red" }} onClick={quitCourse}>
+                  Quit Course
                 </button>
               ) : (
-                <button onClick={startActivity}>Start Activity</button>
+                <button onClick={startCourseUI}>Start Course</button>
               )}
             </CourseMetaRight>
           </CourseMetaWrapper>

front/app/_orgs/[orgslug]/(withmenu)/layout.tsx

@@ -7,7 +7,7 @@ export default function RootLayout({ children, params }: { children: React.React
   return (
     <>
       <AuthProvider>
-        <Menu></Menu>
+        <Menu orgslug={params.orgslug}></Menu>
         {children}
       </AuthProvider>
     </>

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

@@ -5,42 +5,43 @@ import React from "react";
 import { styled } from "styled-components";
 import useSWR from "swr";
 
-function Activity(params: any) {
+function Trail(params: any) {
   let orgslug = params.params.orgslug;
-  const { data: activities, error: error } = useSWR(`${getAPIUrl()}activity/org_slug/${orgslug}/activities`, swrFetcher);
-
+  const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
+  
+  
   return (
-    <ActivityLayout>
-      <h1>Activity</h1>
+    <TrailLayout>
+      <h1>Trail</h1>
       <br />
       {error && <p>Failed to load</p>}
-      {!activities ? (
+      {!trail ? (
         <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>
-                </ActivityThumbnail>
-                <ActivityInfo>
+          {trail.courses.map((course: any) => (
+            <TrailBox key={trail.trail_id}>
+              <TrailMetadata>
+                <TrailThumbnail>
+                  <img src={`${getBackendUrl()}content/uploads/img/${course.course_object.thumbnail}`}></img>
+                </TrailThumbnail>
+                <TrailInfo>
                   <h2>Course</h2>
-                  <h3>{activity.course.name}</h3>
-                </ActivityInfo>
-              </ActivityMetadata>
-              <ActivityProgress progress={activity.progression} />
-            </ActivityBox>
+                  <h3>{course.course_object.name}</h3>
+                </TrailInfo>
+              </TrailMetadata>
+              <TrailProgress progress={course.progress} />
+            </TrailBox>
           ))}
         </div>
       )}
-    </ActivityLayout>
+    </TrailLayout>
   );
 }
 
-export default Activity;
+export default Trail;
 
-const ActivityLayout = styled.div`
+const TrailLayout = styled.div`
   display: flex;
   margin: 0 auto;
   width: 1300px;
@@ -48,13 +49,13 @@ const ActivityLayout = styled.div`
   flex-direction: column;
 `;
 
-const ActivityMetadata = styled.div`
+const TrailMetadata = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
 `;
-const ActivityBox = styled.div`
+const TrailBox = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -67,7 +68,7 @@ const ActivityBox = styled.div`
   background: #ffffff;
 `;
 
-const ActivityThumbnail = styled.div`
+const TrailThumbnail = styled.div`
   padding-right: 30px;
   height: 100%;
   border-radius: 7px 0px 0px 7px;
@@ -78,7 +79,7 @@ const ActivityThumbnail = styled.div`
   }
 `;
 
-const ActivityInfo = styled.div`
+const TrailInfo = styled.div`
   width: 100%;
   height: 100%;
   background: #ffffff;
@@ -99,7 +100,7 @@ const ActivityInfo = styled.div`
   }
 `;
 
-const ActivityProgress = styled.div`
+const TrailProgress = styled.div`
   margin-top: 10px;
   border-radius: 20px;
   height: 10px;

front/components/UI/Elements/Menu.tsx

@@ -10,10 +10,11 @@ import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { headers } from "next/headers";
 import { getOrgFromUri, getUriWithOrg } from "@services/config/config";
 
-export const Menu = (params : any) => {
+export const Menu = (props : any ) => {
   const router = useRouter();
   const pathname = usePathname();
-  const orgslug = getOrgFromUri();
+  const orgslug = props.orgslug;
+  
   
   return (
     <GlobalHeader>
@@ -41,7 +42,7 @@ export const Menu = (params : any) => {
           </li>
           <li>
             {" "}
-            <Link href={getUriWithOrg(orgslug, "/activity")}>Activity</Link>
+            <Link href={getUriWithOrg(orgslug, "/trail")}>Trail</Link>
           </li>
           <li>More</li>
         </ul>

front/services/config/config.ts

@@ -21,7 +21,8 @@ export const getOrgFromUri = () => {
   } else {
     if (typeof window !== "undefined") {
       const hostname = window.location.hostname;
-      return hostname.replace(".localhost:3000", "");
+      
+      return hostname.replace(".localhost", "");
     }
   }
 };

front/services/courses/activity.ts

@@ -6,18 +6,15 @@ import { getAPIUrl } from "@services/config/config";
  GET requests are called from the frontend using SWR (https://swr.vercel.app/)
 */
 
-export async function createActivity(course_id: string) {
-  let data = {
-    course_id: course_id,
-  };
-  const result: any = await fetch(`${getAPIUrl()}activity/start`, RequestBody("POST", data))
+export async function startCourse(course_id: string, org_slug: string) {
+  const result: any = await fetch(`${getAPIUrl()}trail/${org_slug}/add_course/${course_id}`, RequestBody("POST", null))
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
   return result;
 }
 
-export async function closeActivity(org_id: string, activity_id: string) {
-  const result: any = await fetch(`${getAPIUrl()}activity/${org_id}/close_activity/${activity_id}"`, RequestBody("PATCH", null))
+export async function removeCourse(course_id: string, org_slug: string) {
+  const result: any = await fetch(`${getAPIUrl()}trail/${org_slug}/remove_course/${course_id}`, RequestBody("POST", null))
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
   return result;
@@ -29,4 +26,3 @@ export async function maskActivityAsComplete(org_id: string, course_id: string,
     .catch((error) => console.log("error", error));
   return result;
 }
-