fix: role init + sharing types backend/frontend

src/backend/routers/user.ts

@@ -2,8 +2,8 @@ import { hasAuthenticated, hasAdmin, router } from "../trpc";
 import { z } from "zod";
 import { UserType, ROLE_OPTIONS } from "@/types/auth";
 
-const sortOrderSchema = z.enum(["asc", "desc"]).default("asc");
-const sortBySchema = z
+export const sortOrderSchema = z.enum(["asc", "desc"]).default("asc");
+export const sortBySchema = z
   .enum(["first_name", "last_name", "email", "role"])
   .default("first_name");
 

src/pages/admin/index.tsx

@@ -13,18 +13,23 @@ import {
 } from "@mui/material";
 import { SelectChangeEvent } from "@mui/material/Select";
 import { getRoleLabel } from "@/types/auth";
+import { sortBySchema, sortOrderSchema } from "@/backend/routers/user";
+import { z } from "zod";
 
 interface User extends BaseEntity {
   user_id: string;
   role: string;
 }
 
+type SortBy = z.infer<typeof sortBySchema>;
+type SortOrder = z.infer<typeof sortOrderSchema>;
+
 const AdminHome: React.FC = () => {
   const utils = trpc.useContext();
   const router = useRouter();
   const [page, setPage] = useState(1);
-  const [sortBy, setSortBy] = useState<keyof User>("first_name");
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortBy, setSortBy] = useState<SortBy>("first_name");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
   const [searchTerm, setSearchTerm] = useState("");
   const pageSize = 2;
 
@@ -46,14 +51,14 @@ const AdminHome: React.FC = () => {
     try {
       await createUserMutation.mutateAsync({
         ...userData,
-        role: userData.role || "PARA", // Set default role if needed
+        role: userData.role || "PARA",
       });
     } catch (error) {
       console.error(error);
     }
   };
 
-  const handleSort = (newSortBy: keyof User, newSortOrder: "asc" | "desc") => {
+  const handleSort = (newSortBy: SortBy, newSortOrder: SortOrder) => {
     setSortBy(newSortBy);
     setSortOrder(newSortOrder);
   };

src/pages/users/[user_id].tsx

@@ -2,7 +2,7 @@ import { trpc } from "@/client/lib/trpc";
 import { Box, Button, Container, Modal, Stack, TextField } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { UserType, ROLE_OPTIONS } from "@/types/auth";
 import $CompassModal from "@/components/design_system/modal/CompassModal.module.css";
 import $button from "@/components/design_system/button/Button.module.css";
@@ -44,9 +44,13 @@ const ViewUserPage = () => {
     onSuccess: () => utils.user.getUserById.invalidate(),
   });
 
-  const [selectedRole, setSelectedRole] = useState(
-    user?.role.toUpperCase() || ""
-  );
+  const [selectedRole, setSelectedRole] = useState("");
+
+  useEffect(() => {
+    if (user?.role) {
+      setSelectedRole(user.role.toUpperCase());
+    }
+  }, [user?.role]);
 
   const handleEditUser = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();