Portal frontend 23 (#24)

* export results and args * new js package * add icon * table components * quick save * extract id from body * school name field * ready for review * only teachers * fix rendering issue and create placeholder tabs * merge from dev * working order * create sub view for leaving school * merge from dev * fix imports
ocadotechnology · Aug 8, 2024 · eddebcb · eddebcb
1 parent 10b08fe
commit eddebcb
Show file tree

Hide file tree

Showing 14 changed files with 572 additions and 88 deletions.
diff --git a/src/api/klass.ts b/src/api/klass.ts
@@ -1,11 +1,3 @@
-import { type Class, urls } from "codeforlife/api"
-import getReadClassEndpoints, {
-  CLASS_TAG,
-  type ListClassesArg,
-  type ListClassesResult,
-  type RetrieveClassArg,
-  type RetrieveClassResult,
-} from "codeforlife/api/endpoints/klass"
 import {
   type BulkUpdateArg,
   type BulkUpdateResult,
@@ -18,6 +10,14 @@ import {
   buildUrl,
   tagData,
 } from "codeforlife/utils/api"
+import { type Class, urls } from "codeforlife/api"
+import getReadClassEndpoints, {
+  CLASS_TAG,
+  type ListClassesArg,
+  type ListClassesResult,
+  type RetrieveClassArg,
+  type RetrieveClassResult,
+} from "codeforlife/api/endpoints/klass"
 
 import api from "."
 

diff --git a/src/api/school.ts b/src/api/school.ts
@@ -1,9 +1,3 @@
-import { type School, urls } from "codeforlife/api"
-import getReadSchoolEndpoints, {
-  type RetrieveSchoolArg,
-  type RetrieveSchoolResult,
-  SCHOOL_TAG,
-} from "codeforlife/api/endpoints/school"
 import {
   type CreateArg,
   type CreateResult,
@@ -12,6 +6,12 @@ import {
   buildUrl,
   tagData,
 } from "codeforlife/utils/api"
+import { type School, urls } from "codeforlife/api"
+import getReadSchoolEndpoints, {
+  type RetrieveSchoolArg,
+  type RetrieveSchoolResult,
+  SCHOOL_TAG,
+} from "codeforlife/api/endpoints/school"
 
 import api from "."
 

diff --git a/src/api/schoolTeacherInvitation.ts b/src/api/schoolTeacherInvitation.ts
@@ -1,4 +1,3 @@
-import { type User } from "codeforlife/api"
 import {
   type Arg,
   type CreateArg,
@@ -15,6 +14,7 @@ import {
   buildUrl,
   tagData,
 } from "codeforlife/utils/api"
+import { type User } from "codeforlife/api"
 
 import api from "."
 

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -1,11 +1,3 @@
-import { type User, urls } from "codeforlife/api"
-import getReadUserEndpoints, {
-  type ListUsersArg,
-  type ListUsersResult,
-  type RetrieveUserArg,
-  type RetrieveUserResult,
-  USER_TAG,
-} from "codeforlife/api/endpoints/user"
 import {
   type Arg,
   type CreateArg,
@@ -17,6 +9,14 @@ import {
   buildUrl,
   tagData,
 } from "codeforlife/utils/api"
+import { type User, urls } from "codeforlife/api"
+import getReadUserEndpoints, {
+  type ListUsersArg,
+  type ListUsersResult,
+  type RetrieveUserArg,
+  type RetrieveUserResult,
+  USER_TAG,
+} from "codeforlife/api/endpoints/user"
 
 import api from "."
 

diff --git a/src/pages/teacherDashboard/TeacherDashboard.tsx b/src/pages/teacherDashboard/TeacherDashboard.tsx
@@ -5,18 +5,30 @@ import { CircularProgress } from "@mui/material"
 import { type SchoolTeacherUser } from "codeforlife/api"
 import { getParam } from "codeforlife/utils/router"
 
+import Account, { type AccountProps } from "./account/Account"
+import Classes, { type ClassesProps } from "./classes/Classes"
 import {
   type RetrieveUserResult,
   useLazyRetrieveUserQuery,
 } from "../../api/user"
-import Account from "./account/Account"
-import Classes from "./classes/Classes"
-import School from "./school/School"
+import School, { type SchoolProps } from "./school/School"
 import { paths } from "../../router"
 
-export interface TeacherDashboardProps {}
+export type TeacherDashboardProps =
+  | {
+      tab: "school"
+      view?: SchoolProps["view"]
+    }
+  | {
+      tab: "classes"
+      view?: ClassesProps["view"]
+    }
+  | {
+      tab: "account"
+      view?: AccountProps["view"]
+    }
 
-const TeacherDashboard: FC<TeacherDashboardProps> = () => {
+const TeacherDashboard: FC<TeacherDashboardProps> = ({ tab, view }) => {
   let [retrieveUser, { data: authUser, isError }] = useLazyRetrieveUserQuery()
   const navigate = useNavigate()
 
@@ -41,27 +53,45 @@ const TeacherDashboard: FC<TeacherDashboardProps> = () => {
     const authSchoolTeacherUser =
       authUser as SchoolTeacherUser<RetrieveUserResult>
 
+    const tabs: page.TabBarProps["tabs"] = [
+      {
+        label: "Your school",
+        children: (
+          <School
+            authUser={authSchoolTeacherUser}
+            view={view as SchoolProps["view"]}
+          />
+        ),
+        path: getParam(paths.teacher.dashboard.tab.school, "tab"),
+      },
+      {
+        label: "Your classes",
+        children: (
+          <Classes
+            authUser={authSchoolTeacherUser}
+            view={view as ClassesProps["view"]}
+          />
+        ),
+        path: getParam(paths.teacher.dashboard.tab.classes, "tab"),
+      },
+      {
+        label: "Your account",
+        children: (
+          <Account
+            authUser={authSchoolTeacherUser}
+            view={view as AccountProps["view"]}
+          />
+        ),
+        path: getParam(paths.teacher.dashboard.tab.account, "tab"),
+      },
+    ]
+
     return (
       <page.TabBar
         header={`Welcome back, ${authUser.first_name} ${authUser.last_name}`}
         originalPath={paths.teacher.dashboard.tab._}
-        tabs={[
-          {
-            label: "Your school",
-            children: <School authUser={authSchoolTeacherUser} />,
-            path: getParam(paths.teacher.dashboard.tab.school, "tab"),
-          },
-          {
-            label: "Your classes",
-            children: <Classes authUser={authSchoolTeacherUser} />,
-            path: getParam(paths.teacher.dashboard.tab.classes, "tab"),
-          },
-          {
-            label: "Your account",
-            children: <Account authUser={authSchoolTeacherUser} />,
-            path: getParam(paths.teacher.dashboard.tab.account, "tab"),
-          },
-        ]}
+        value={tabs.findIndex(t => t.path === tab)}
+        tabs={tabs}
       />
     )
   }

diff --git a/src/pages/teacherDashboard/account/Account.tsx b/src/pages/teacherDashboard/account/Account.tsx
@@ -5,6 +5,7 @@ import { type RetrieveUserResult } from "../../../api/user"
 
 export interface AccountProps {
   authUser: SchoolTeacherUser<RetrieveUserResult>
+  view?: "otp"
 }
 
 const Account: FC<AccountProps> = ({ authUser }) => {

diff --git a/src/pages/teacherDashboard/classes/Class.tsx b/src/pages/teacherDashboard/classes/Class.tsx
@@ -0,0 +1,9 @@
+import { type FC } from "react"
+
+export interface ClassProps {}
+
+const Class: FC<ClassProps> = () => {
+  return <>Class</>
+}
+
+export default Class
diff --git a/src/pages/teacherDashboard/classes/Classes.tsx b/src/pages/teacherDashboard/classes/Classes.tsx
@@ -1,14 +1,24 @@
 import { type FC } from "react"
 import { type SchoolTeacherUser } from "codeforlife/api"
 
+import Class from "./Class"
+import JoinClassRequest from "./JoinClassRequest"
 import { type RetrieveUserResult } from "../../../api/user"
 
 export interface ClassesProps {
   authUser: SchoolTeacherUser<RetrieveUserResult>
+  view?: "class" | "join-class-request"
 }
 
-const Classes: FC<ClassesProps> = ({ authUser }) => {
-  return <>TODO</>
+const Classes: FC<ClassesProps> = ({ authUser, view }) => {
+  if (view) {
+    return {
+      class: <Class />,
+      "join-class-request": <JoinClassRequest />,
+    }[view]
+  }
+
+  return <>Classes</>
 }
 
 export default Classes