Add user to the staff list on the frontend instead of the backend

package.json

@@ -32,7 +32,6 @@
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.17",
     "@mui/x-date-pickers": "^6.18.1",
-    "@next/font": "13.1.6",
     "@tanstack/react-query": "^4.24.10",
     "@trpc/client": "^10.16.0",
     "@trpc/react-query": "^10.16.0",
@@ -44,7 +43,7 @@
     "gcp-metadata": "^6.0.0",
     "kysely": "^0.26.3",
     "ms": "^2.1.3",
-    "next": "13.5.2",
+    "next": "13.5.6",
     "next-auth": "^4.20.1",
     "nodemailer": "^6.9.2",
     "pg": "^8.9.0",
@@ -74,7 +73,6 @@
     "@storybook/testing-library": "^0.2.2",
     "@tomfreudenberg/next-auth-mock": "^0.5.6",
     "@trpc/client": "^10.16.0",
-    "@types/mockery": "^1.4.30",
     "@types/ms": "^0.7.31",
     "@types/node": "^18.11.18",
     "@types/nodemailer": "^6.4.8",
@@ -91,14 +89,14 @@
     "foreman": "^3.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "mockery": "^2.1.0",
     "nextjs-server-modules": "^4.7.0",
     "nodemailer-mock": "^2.0.1",
     "prettier": "^2.8.8",
+    "rewiremock": "^3.14.5",
     "storybook": "^7.5.3",
     "testcontainers": "^9.8.0",
     "type-fest": "^3.5.4",
-    "typed-css-modules": "^0.7.2",
+    "typed-css-modules": "^0.8.1",
     "typescript": "^4.9.5"
   },
   "engines": {

src/backend/routers/case_manager.test.ts

@@ -186,7 +186,7 @@ test("getMyParas", async (t) => {
   });
 
   let myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 1);
+  t.is(myParas.length, 0);
 
   await db
     .insertInto("paras_assigned_to_case_manager")
@@ -197,7 +197,7 @@ test("getMyParas", async (t) => {
     .execute();
 
   myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 2);
+  t.is(myParas.length, 1);
 });
 
 test("addPara", async (t) => {
@@ -206,14 +206,14 @@ test("addPara", async (t) => {
   });
 
   let myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 1);
+  t.is(myParas.length, 0);
 
   await trpc.case_manager.addPara.mutate({
     para_id: seed.para.user_id,
   });
 
   myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 2);
+  t.is(myParas.length, 1);
 });
 
 test("removePara", async (t) => {
@@ -230,12 +230,12 @@ test("removePara", async (t) => {
     .execute();
 
   let myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 2);
+  t.is(myParas.length, 1);
 
   await trpc.case_manager.removePara.mutate({
     para_id: seed.para.user_id,
   });
 
   myParas = await trpc.case_manager.getMyParas.query();
-  t.is(myParas.length, 1);
+  t.is(myParas.length, 0);
 });

src/backend/routers/case_manager.ts

@@ -141,12 +141,6 @@ export const case_manager = router({
   getMyParas: authenticatedProcedure.query(async (req) => {
     const { userId } = req.ctx.auth;
 
-    const me = await req.ctx.db
-      .selectFrom("user")
-      .where("user_id", "=", userId)
-      .selectAll()
-      .executeTakeFirst();
-
     const result = await req.ctx.db
       .selectFrom("user")
       .innerJoin(
@@ -158,7 +152,7 @@ export const case_manager = router({
       .selectAll()
       .execute();
 
-    return [me, ...result];
+    return result;
   }),
 
   addPara: authenticatedProcedure
@@ -177,6 +171,47 @@ export const case_manager = router({
         .execute();
     }),
 
+  editPara: authenticatedProcedure
+    .input(
+      z.object({
+        para_id: z.string(),
+        first_name: z.string(),
+        last_name: z.string(),
+        email: z.string().email(),
+      })
+    )
+    .mutation(async (req) => {
+      const { para_id, first_name, last_name, email } = req.input;
+      const { userId } = req.ctx.auth;
+
+      if (userId !== para_id) {
+        const existingPara = req.ctx.db
+          .selectFrom("user")
+          .innerJoin(
+            "paras_assigned_to_case_manager",
+            "user.user_id",
+            "paras_assigned_to_case_manager.para_id"
+          )
+          .where("paras_assigned_to_case_manager.case_manager_id", "=", userId)
+          .selectAll();
+
+        if (!existingPara) {
+          throw new Error("Para not found");
+        }
+      }
+
+      return await req.ctx.db
+        .updateTable("user")
+        .set({
+          first_name,
+          last_name,
+          email: email.toLowerCase(),
+        })
+        .where("user_id", "=", para_id)
+        .returningAll()
+        .executeTakeFirstOrThrow();
+    }),
+
   removePara: authenticatedProcedure
     .input(
       z.object({

src/backend/tests/fixtures/mocks.ts

@@ -1,8 +1,8 @@
-import mockery from "mockery";
+import rewiremock from "rewiremock";
 import * as nodemailerMock from "nodemailer-mock";
-mockery.enable({
-  warnOnUnregistered: false,
-});
-mockery.registerMock("nodemailer", nodemailerMock);
+
+rewiremock.overrideEntryPoint(module); // this is important. This command is "transfering" this module parent to rewiremock
+rewiremock("nodemailer").with(nodemailerMock);
+rewiremock.enable();
 
 export { nodemailerMock };

src/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,18 @@
+.container {
+  position: fixed;
+  display: flex;
+  left: 200px;
+  z-index: 1;
+  padding: 1rem 0 1rem 2rem;
+  width: 100%;
+  background-color: var(--grey-100);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--grey-10);
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/breadcrumbs/BreadcrumbsNav.tsx

@@ -0,0 +1,60 @@
+import { trpc } from "@/client/lib/trpc";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { SelectableForTable } from "zapatos/schema";
+import $breadcrumbs from "./Breadcrumbs.module.css";
+
+type Student = SelectableForTable<"student">;
+type Para = SelectableForTable<"user">;
+
+const BreadcrumbsNav = () => {
+  const router = useRouter();
+  const paths = router.asPath.split("/");
+
+  // student and para queries will only runs if enabled options are both true
+  // Only 1 of these will run at a time based on the conditions
+  const { data: student } = trpc.student.getStudentById.useQuery(
+    { student_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "students") }
+  );
+  const { data: para } = trpc.para.getParaById.useQuery(
+    { user_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "staff") }
+  );
+
+  const personData: Student | Para | undefined = student || para;
+
+  // An array of breadcrumbs fixed to students/staff as the first index. This will be modified depending on how the address bar will be displayed.
+  const breadcrumbs = paths.map((path, index) => {
+    // 0th index seems to only be empty string
+    if (index === 0) return "";
+    // 1st index currently is either students or staff
+    if (index % 2 === 1) {
+      return (
+        <Link key={index} href={`/${path}`} className={$breadcrumbs.link}>
+          {path.toUpperCase()}
+        </Link>
+      );
+    }
+    // 2nd index is the ID referencing 1st index
+    if (index === 2) {
+      return (
+        <div key={index} style={{ color: "var(--grey-10)" }}>
+          {personData?.first_name} {personData?.last_name}
+        </div>
+      );
+    }
+    return <div key={index}>{path}</div>;
+  });
+
+  return (
+    <div className={$breadcrumbs.container}>
+      <Breadcrumbs separator="/" aria-label="breadcrumb">
+        {breadcrumbs}
+      </Breadcrumbs>
+    </div>
+  );
+};
+
+export default BreadcrumbsNav;

src/components/design_system/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/styles/Button.module.css → src/components/design_system/button/Button.module.css

@@ -4,28 +4,26 @@
   font-family: var(--quicksand);
   border: none;
   color: var(--on-primary);
-  padding: 10px;
-  border-radius: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
-}
-.about {
-  border: none;
-  background-color: transparent;
-}
-.about {
-  cursor: pointer;
+  text-transform: none;
+  line-height: normal;
+  letter-spacing: 0;
+  min-width: 0;
 }
 
 .default:hover {
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
     0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--primary-50);
 }
 
 .default:active {
-  background-color: var(--primary-40);
+  background-color: var(--primary-60);
 }
 
 .default:disabled {
@@ -41,14 +39,32 @@
 .secondary {
   display: block;
   border: 1px solid var(--primary-50);
-  color: var(--primary);
-  padding: 10px;
-  border-radius: 4px;
+  color: var(--primary-50);
+  padding: 10px 12px;
+  border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
   background-color: inherit;
+  font-family: var(--quicksand);
+  text-transform: none;
+  line-height: normal;
+  letter-spacing: 0;
+  min-width: 0;
+}
+
+.secondary:hover {
+  background-color: var(--primary-container);
+}
+
+.about {
+  border: none;
+  background-color: transparent;
+}
+
+.about {
+  cursor: pointer;
 }
 
 .pilled {

src/components/design_system/button/Button.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/checkbox/Checkbox.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/checkbox/Checkbox.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/dropdown/Dropdown.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/dropdown/Dropdown.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/input/Input.module.css

@@ -0,0 +1,4 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/input/Input.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/modal/Modal.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */