feat: add courses index page + backend update

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;