Update employee list to use new API

package.json

@@ -13,35 +13,35 @@
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^4.16.2",
     "@t3-oss/env-nextjs": "^0.3.1",
-    "@tanstack/react-query": "^4.32.6",
-    "@trpc/client": "^10.37.1",
-    "@trpc/next": "^10.37.1",
-    "@trpc/react-query": "^10.37.1",
-    "@trpc/server": "^10.37.1",
-    "next": "^13.4.17",
-    "next-auth": "^4.23.1",
+    "@tanstack/react-query": "^4.36.1",
+    "@trpc/client": "^10.45.2",
+    "@trpc/next": "^10.45.2",
+    "@trpc/react-query": "^10.45.2",
+    "@trpc/server": "^10.45.2",
+    "next": "^13.5.6",
+    "next-auth": "^4.24.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "1.12.2",
-    "zod": "^3.22.1"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.2",
-    "@types/node": "^18.17.5",
+    "@types/eslint": "^8.56.5",
+    "@types/node": "^18.19.24",
     "@types/prettier": "^2.7.3",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.47.0",
-    "eslint-config-next": "^13.4.17",
-    "postcss": "^8.4.28",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^13.5.6",
+    "postcss": "^8.4.35",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",
     "prisma": "^4.16.2",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2"
   },
   "ct3aMetadata": {
     "initVersion": "7.15.0"

src/components/EmployeeDescription.tsx

@@ -1,7 +1,7 @@
 export const EmployeeDescription = (
   props: {
     name: string;
-    position: string;
+    position?: string;
   } = {
     name: "Title",
     position: "Text",
@@ -10,7 +10,7 @@ export const EmployeeDescription = (
   return (
     <div className="m-3 flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur">
       <h3 className="text-2xl font-bold">{props.name}</h3>
-      <div className="text-lg">{props.position}</div>
+      {props.position ? <div className="text-lg">{props.position}</div> : <></>}
     </div>
   );
 };

src/components/EmployeeList.tsx

@@ -1,12 +1,19 @@
 import { useEffect, useState } from "react";
 import { EmployeeDescription } from "~/components/EmployeeDescription";
 
+interface IEmployee {
+  id: number;
+  displayName: string;
+  position: string;
+  tokenContainerId: number;
+}
+
 export const EmployeeList = () => {
-  const [employees, setEmployees] = useState({} as Record<string, string>);
+  const [employees, setEmployees] = useState([] as IEmployee[]);
   const [loaded, setLoaded] = useState(false);
 
   const getEmployees = () => {
-    fetch("https://xnl.hri7566.info/employment/", {
+    fetch("https://xnl.hri7566.info/api/employment", {
       next: {
         revalidate: 60,
       },
@@ -14,10 +21,16 @@ export const EmployeeList = () => {
       .then((res) => {
         res
           .json()
-          .then((j) => {
-            setEmployees(j as Record<string, string>);
+          .then(
+            (j: {
+              type: "employment";
+              count: number;
+              employees: IEmployee[];
+            }) => {
+              setEmployees(j.employees);
               setLoaded(true);
-          })
+            }
+          )
           .catch((err) => console.error(err));
       })
       .catch((err) => console.error(err));
@@ -31,13 +44,13 @@ export const EmployeeList = () => {
     <>
       {/* <EmployeeDescription name="Test" position="test" /> */}
       {loaded ? (
-        Object.keys(employees)
+        employees
           .sort()
-          .map((k) => (
+          .map((e) => (
             <EmployeeDescription
-              name={k}
-              position={employees[k] || "<no position>"}
-              key={Object.keys(employees).indexOf(k)}
+              name={e.displayName}
+              position={e.position || "<no position>"}
+              key={e.id}
             />
           ))
       ) : (