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 learnhouseIcon from "public/learnhouse_icon.png";
-import learnhouseLogo from 'public/learnhouse_logo.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{
+  a {
-  margin: 0;
+    margin: 0;
-  padding-left: 10px;
+    padding-left: 10px;
-  padding-top: 2px;
+    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));
+
+}

src/routers/courses.py

@@ -9,27 +9,27 @@ router = APIRouter()
 
 
 @router.post("/")
-async def api_create_course(course_object: Course, current_user: User = Depends(get_current_user)):
+async def api_create_course(course_object: Course, org_id :str ,  current_user: User = Depends(get_current_user)):
     """
     Create new Course
     """
-    return await create_course(course_object, current_user)
+    return await create_course(course_object, org_id ,  current_user)
 
 
 @router.get("/{course_id}")
-async def api_get_course(course_id: str, current_user: User = Depends(get_current_user)):
+async def api_get_course(course_id: str, org_id : str,  current_user: User = Depends(get_current_user)):
     """
     Get single Course by course_id
     """
-    return await get_course(course_id, current_user=current_user)
+    return await get_course(course_id, org_id,current_user=current_user)
 
 
-@router.get("/page/{page}/limit/{limit}")
+@router.get("/{org_id}/page/{page}/limit/{limit}")
-async def api_get_course_by(page: int, limit: int):
+async def api_get_course_by(page: int, limit: int, org_id: str):
     """
     Get houses by page and limit
     """
-    return await get_courses(page, limit)
+    return await get_courses(page, limit, org_id)
 
 
 @router.put("/{course_id}")

src/routers/orgs.py

@@ -1,6 +1,6 @@
 from fastapi import APIRouter, Depends
 from src.services.auth import get_current_user
-from src.services.orgs import Organization, create_org, delete_org, get_organization, get_orgs, get_orgs_by_user, update_org
+from src.services.orgs import Organization, create_org, delete_org, get_organization, get_organization_by_slug, get_orgs, get_orgs_by_user, update_org
 from src.services.users import User
 
 
@@ -22,6 +22,13 @@ async def api_get_org(org_id: str, current_user: User = Depends(get_current_user
     """
     return await get_organization(org_id, current_user)
 
+@router.get("/slug/{org_slug}")
+async def api_get_org(org_slug: str, current_user: User = Depends(get_current_user)):
+    """
+    Get single Org by Slug
+    """
+    return await get_organization_by_slug(org_slug)
+
 
 @router.get("/page/{page}/limit/{limit}")
 async def api_get_org_by(page: int, limit: int):

src/services/courses.py

@@ -16,9 +16,11 @@ class Course(BaseModel):
     mini_description: str
     description: str
     photo: str
+    learnings: List[str]
     cover_photo: str
     public: bool
     chapters: List[str]
+    org_id: str
 
 
 class CourseInDB(Course):
@@ -59,11 +61,11 @@ class CourseChapterInDB(CourseChapter):
 
 # Courses
 
-async def get_course(course_id: str, current_user: User):
+async def get_course(course_id: str, org_id :str , current_user: User):
     await check_database()
     courses = learnhouseDB["courses"]
 
-    course = courses.find_one({"course_id": course_id})
+    course = courses.find_one({"course_id": course_id , "org_id" : org_id})
 
     # verify course rights
     await verify_rights(course_id, current_user, "read")
@@ -76,12 +78,14 @@ async def get_course(course_id: str, current_user: User):
     return course
 
 
-async def create_course(course_object: Course, current_user: User):
+async def create_course(course_object: Course, org_id : str , current_user: User):
     await check_database()
     courses = learnhouseDB["courses"]
 
     # generate course_id with uuid4
     course_id = str(f"course_{uuid4()}")
+    
+    course_object.org_id = org_id
 
     hasRoleRights = await verify_user_rights_with_roles("create", current_user.user_id, course_id)
 
@@ -153,12 +157,12 @@ async def delete_course(course_id: str, current_user: User):
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE, detail="Unavailable database")
 
 
-async def get_courses(page: int = 1, limit: int = 10):
+async def get_courses(page: int = 1, limit: int = 10 , org_id : str = None):
     await check_database()
     courses = learnhouseDB["courses"]
     # TODO : Get only courses that user is admin/has roles of
     # get all courses from database
-    all_courses = courses.find().sort("name", 1).skip(10 * (page - 1)).limit(limit)
+    all_courses = courses.find({"org_id": org_id}).sort("name", 1).skip(10 * (page - 1)).limit(limit)
 
     return [json.loads(json.dumps(course, default=str)) for course in all_courses]
 

src/services/orgs.py

@@ -22,6 +22,13 @@ class OrganizationInDB(Organization):
     org_id: str
     owners: List[str]
     admins: List[str]
+    
+class PublicOrganization(Organization):
+    name: str
+    description: str
+    email: str
+    slug: str
+    org_id: str
 
 
 #### Classes ####################################################
@@ -37,7 +44,20 @@ async def get_organization(org_id: str):
         raise HTTPException(
             status_code=status.HTTP_409_CONFLICT, detail="Organization does not exist")
 
-    org = Organization(**org)
+    org = PublicOrganization(**org)
+    return org
+
+async def get_organization_by_slug(org_slug: str):
+    await check_database()
+    orgs = learnhouseDB["organizations"]
+
+    org = orgs.find_one({"slug": org_slug})
+
+    if not org:
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT, detail="Organization does not exist")
+
+    org = PublicOrganization(**org)
     return org
 
 

src/services/roles.py

@@ -20,7 +20,7 @@ class Permission(BaseModel):
 
 
 class Elements(BaseModel):
-    course: List[str]
+    courses: List[str]
     users: List[str]
     houses: List[str]
     collections: List[str]

src/services/security.py

@@ -73,7 +73,7 @@ async def check_element_type(element_id):
     elif element_id.startswith("org_"):
         return "organizations"
     elif element_id.startswith("coursechapter_"):
-        return "courses"
+        return "coursechapters"
     elif element_id.startswith("collection_"):
         return "collections"
     else: