From 4b623ae1b8700cd20b5971eb395fbb0fdcaf45dd Mon Sep 17 00:00:00 2001 From: swve Date: Sat, 1 Oct 2022 10:16:35 +0200 Subject: [PATCH] feat: add courses index page + backend update --- front/components/ui/elements/menu.tsx | 28 +++++--- front/pages/index.tsx | 2 +- front/pages/org/[orgslug].tsx | 22 ------ front/pages/org/[orgslug]/courses/index.tsx | 69 +++++++++++++++++++ .../pages/org/[orgslug]/courses/new/index.tsx | 25 +++++++ front/pages/org/[orgslug]/index.tsx | 27 ++++++++ front/services/courses.ts | 16 +++++ front/services/orgs.ts | 16 +++++ src/routers/courses.py | 14 ++-- src/routers/orgs.py | 9 ++- src/services/courses.py | 14 ++-- src/services/orgs.py | 22 +++++- src/services/roles.py | 2 +- src/services/security.py | 2 +- 14 files changed, 218 insertions(+), 50 deletions(-) delete mode 100644 front/pages/org/[orgslug].tsx create mode 100644 front/pages/org/[orgslug]/courses/index.tsx create mode 100644 front/pages/org/[orgslug]/courses/new/index.tsx create mode 100644 front/pages/org/[orgslug]/index.tsx create mode 100644 front/services/courses.ts diff --git a/front/components/ui/elements/menu.tsx b/front/components/ui/elements/menu.tsx index 2eed4539..08873fc9 100644 --- a/front/components/ui/elements/menu.tsx +++ b/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 ( - - + @@ -28,7 +31,11 @@ export const Menu = () => {
    -
  • Courses
  • +
  • + + Courses + +
  • Collections
  • Activity
  • More
  • @@ -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` diff --git a/front/pages/index.tsx b/front/pages/index.tsx index 47b014db..ce78bb47 100644 --- a/front/pages/index.tsx +++ b/front/pages/index.tsx @@ -21,7 +21,7 @@ const Home: NextPage = () => { }} exit={{ opacity: 1 }} > - Learnhouse Icon + Learnhouse Icon

    diff --git a/front/pages/org/[orgslug].tsx b/front/pages/org/[orgslug].tsx deleted file mode 100644 index 57d14fb7..00000000 --- a/front/pages/org/[orgslug].tsx +++ /dev/null @@ -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 ( -
    - -
    - Welcome {orgslug} 👋🏻 -
    -
    - ) -} - - -export default OrgHome; \ No newline at end of file diff --git a/front/pages/org/[orgslug]/courses/index.tsx b/front/pages/org/[orgslug]/courses/index.tsx new file mode 100644 index 00000000..b6374e48 --- /dev/null +++ b/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 ( + +
    + + {orgslug} courses :{" "} + <Link href={"/org/" + orgslug + "/courses/new"}> + <a> + <button>+</button> + </a> + </Link>{" "} + + +
    + {isLoading ? ( +
    Loading...
    + ) : ( +
    + {courses.map((course: any) => ( +
    + +

    {course.name}

    + +
    + ))} +
    + )} +
    + ); +}; + +export default CoursesIndexPage; diff --git a/front/pages/org/[orgslug]/courses/new/index.tsx b/front/pages/org/[orgslug]/courses/new/index.tsx new file mode 100644 index 00000000..87df6d8a --- /dev/null +++ b/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 ( + +
    + New Course +
    + Name :
    + Description :
    + Cover Photo :
    + Learnings (separated by ; ) :