feat: add courses index page + backend update

front/components/ui/elements/menu.tsx

@@ -1,21 +1,24 @@
 import React from "react";
 import styled from "styled-components";
 import { HeaderProfileBox } from "../../auth/HeaderProfileBox";
-import learnhouseIcon from 'public/learnhouse_icon.png'
-import learnhouseLogo from 'public/learnhouse_logo.png'
+import learnhouseIcon from "public/learnhouse_icon.png";
+import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/router";
 
 export const Menu = () => {
+  const router = useRouter();
+  const { orgslug } = router.query;
+
   return (
     <GlobalHeader>
-       
       <LogoArea>
         <Logo>
           <Image width={25} height={25} src={learnhouseIcon} alt="" />
           <Link href={"/"}>
             <a>
-            <Image  width={108} height={28} src={learnhouseLogo} alt="" />
+              <Image width={108} height={28} src={learnhouseLogo} alt="" />
             </a>
           </Link>
         </Logo>
@@ -28,7 +31,11 @@ export const Menu = () => {
       </SearchArea>
       <MenuArea>
         <ul>
-          <li>Courses </li>
+          <li>
+            <Link href={"/org/" + orgslug + "/courses"}>
+              <a>Courses</a>
+            </Link>
+          </li>
           <li>Collections</li>
           <li>Activity</li>
           <li>More</li>
@@ -55,12 +62,11 @@ const Logo = styled.div`
   display: flex;
   place-items: center;
   padding-left: 20px;
- a{
-  margin: 0;
-  padding-left: 10px;
-  padding-top: 2px;
- }
-  
+  a {
+    margin: 0;
+    padding-left: 10px;
+    padding-top: 2px;
+  }
 `;
 
 const SearchArea = styled.div`

front/pages/index.tsx

@@ -21,7 +21,7 @@ const Home: NextPage = () => {
         }}
         exit={{ opacity: 1 }}
       >
-        <Image alt="Learnhouse Icon" height={295} width={295} quality={100} src={learnhouseBigIcon}></Image>
+        <Image alt="Learnhouse Icon" height={260} width={260} quality={100} src={learnhouseBigIcon}></Image>
       </motion.div>
       <br />
       <br />

front/pages/org/[orgslug].tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import Layout from '../../components/ui/layout'
-import { Title } from '../../components/ui/styles/title'
-import { Header } from '../../components/ui/header'
-
-const OrgHome = () => {
-  const router = useRouter()
-  const { orgslug } = router.query
-
-  return (
-    <div>
-      <Layout title="Index">
-      <Header></Header>
-        <Title>Welcome {orgslug} 👋🏻</Title>
-      </Layout>
-    </div>
-  )
-}
-
-
-export default OrgHome;

front/pages/org/[orgslug]/courses/index.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+import { Header } from "../../../../components/ui/header";
+import Layout from "../../../../components/ui/layout";
+import { Title } from "../../../../components/ui/styles/title";
+import { getOrgCourses } from "../../../../services/courses";
+import { getOrganizationContextInfo } from "../../../../services/orgs";
+
+const CoursesIndexPage = () => {
+  const router = useRouter();
+  const { orgslug } = router.query;
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [orgInfo, setOrgInfo] = React.useState(null);
+  const [courses, setCourses] = React.useState([]);
+
+  async function fetchCourses() {
+    const org = await getOrganizationContextInfo(orgslug);
+    const response = await getOrgCourses(org.org_id);
+    setCourses(response);
+    setIsLoading(false);
+  }
+
+  // function to remove "course_" from the course_id
+  function removeCoursePrefix(course_id: string) {
+    return course_id.replace("course_", "");
+  }
+
+  React.useEffect(() => {
+    if (router.isReady) {
+      fetchCourses();
+      if (courses.length > 0) {
+        setIsLoading(false);
+      }
+    }
+  }, [isLoading, router.isReady]);
+
+  return (
+    <Layout title="Courses">
+      <Header></Header>
+      <Title>
+        {orgslug} courses :{" "}
+        <Link href={"/org/" + orgslug + "/courses/new"}>
+          <a>
+            <button>+</button>
+          </a>
+        </Link>{" "}
+      </Title>
+
+      <hr />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          {courses.map((course: any) => (
+            <div key={course.course_id}>
+              <Link href={"/org/" + orgslug + "/courses/" + removeCoursePrefix(course.course_id)}>
+                <a><h2>{course.name}</h2></a>
+              </Link>
+            </div>
+          ))}
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default CoursesIndexPage;

front/pages/org/[orgslug]/courses/new/index.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from "next/router";
+import React from "react";
+import { Header } from "../../../../../components/ui/header";
+import Layout from "../../../../../components/ui/layout";
+import { Title } from "../../../../../components/ui/styles/title";
+
+const NewCoursePage = () => {
+  const router = useRouter();
+  const { orgslug } = router.query;
+
+  return (
+    <Layout title="New course">
+      <Header></Header>
+      <Title>New Course </Title>
+      <hr />
+      Name : <input type="text" /> <br />
+      Description : <input type="text" /> <br />
+      Cover Photo : <input type="file" /> <br />
+      Learnings (separated by ; ) : <textarea id="story" name="story" rows={5} cols={33} /> <br />
+      <button>Create</button>
+    </Layout>
+  );
+};
+
+export default NewCoursePage;

front/pages/org/[orgslug]/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Layout from "../../../components/ui/layout";
+import { Title } from "../../../components/ui/styles/title";
+import { Header } from "../../../components/ui/header";
+import Link from "next/link";
+
+const OrgHomePage = () => {
+  const router = useRouter();
+  const { orgslug } = router.query;
+
+  return (
+    <div>
+      <Layout title={"Org "+orgslug}>
+        <Header></Header>
+        <Title>Welcome {orgslug} 👋🏻</Title>
+        <Link href={orgslug + "/courses"}>
+          <a>
+            <button>See Courses </button>
+          </a>
+        </Link>
+      </Layout>
+    </div>
+  );
+};
+
+export default OrgHomePage;

front/services/courses.ts

@@ -0,0 +1,16 @@
+import { getAPIUrl } from "./config";
+
+export async function getOrgCourses(org_id: number) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "GET",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+  };
+
+  return fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}

front/services/orgs.ts

@@ -49,3 +49,19 @@ export async function deleteOrganizationFromBackend(org_id: any) {
 }
 
 // export async function updateOrganization(org_id) {}
+
+export async function getOrganizationContextInfo(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()}orgs/slug/${org_slug}`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+
+}