Move user information to auth0

apps/dashboard/src/app/(dashboard)/event/all-users-table.tsx

@@ -1,4 +1,4 @@
-import type { AttendanceId, AttendeeId, AttendeeUser } from "@dotkomonline/types"
+import type { AttendanceId, Attendee, AttendeeId } from "@dotkomonline/types"
 import { Button, Checkbox } from "@mantine/core"
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table"
 import { useMemo } from "react"
@@ -37,21 +37,17 @@ export const AllAttendeesTable = ({ attendanceId }: AllAttendeesTableProps) => {
 
   const { attendees } = useEventAttendeesGetQuery(attendanceId)
 
-  const columnHelper = createColumnHelper<AttendeeUser>()
+  const columnHelper = createColumnHelper<Attendee>()
   const columns = useMemo(
     () => [
       columnHelper.accessor((attendee) => attendee, {
         id: "userId",
         header: () => "Bruker",
         cell: (info) => {
           const attendee = info.getValue()
-          // return `${attendee.user.givenName} ${attendee.user.familyName}`
-          return `${attendee.user.name}`
+          return `${attendee.firstName} ${attendee.lastName}`
         },
       }),
-      columnHelper.accessor("user.studyYear", {
-        header: () => "Klassetrinn",
-      }),
       columnHelper.accessor((attendee) => attendee, {
         id: "attend",
         header: () => "Møtt",

apps/dashboard/src/app/(dashboard)/user/[id]/edit-card.tsx

@@ -1,22 +1,41 @@
 import { UserWriteSchema } from "@dotkomonline/types"
+import { Title } from "@mantine/core"
 import type { FC } from "react"
 import { useUpdateUserMutation } from "../../../../modules/user/mutations"
-import { useUserEditForm } from "../edit-form"
+import { useUserProfileEditForm } from "./edit-form"
 import { useUserDetailsContext } from "./provider"
 
 export const UserEditCard: FC = () => {
   const { user } = useUserDetailsContext()
   const update = useUpdateUserMutation()
 
-  const FormComponent = useUserEditForm({
-    label: "Oppdater bruker",
+  const EditUserProfileComponent = useUserProfileEditForm({
+    label: "Oppdater profil",
     onSubmit: (data) => {
       const result = UserWriteSchema.parse(data)
+
+      if (result.address === "") {
+        result.address = undefined
+      }
+      if (result.phone === "") {
+        result.phone = undefined
+      }
+      if (result.rfid === "") {
+        result.rfid = undefined
+      }
+
       update.mutate({
-        data: result,
+        input: result,
+        id: user.id,
       })
     },
     defaultValues: { ...user },
   })
-  return <FormComponent />
+
+  return (
+    <>
+      <Title>Profil</Title>
+      <EditUserProfileComponent />
+    </>
+  )
 }

apps/dashboard/src/app/(dashboard)/user/[id]/edit-form.tsx

@@ -0,0 +1,53 @@
+import { type UserWrite, UserWriteSchema } from "@dotkomonline/types"
+import { createCheckboxInput, createSelectInput, createTextInput, useFormBuilder } from "../../../form"
+
+interface UseUserProfileWriteFormProps {
+  onSubmit(data: UserWrite): void
+  defaultValues?: Partial<UserWrite>
+  label?: string
+}
+
+export const useUserProfileEditForm = ({ defaultValues, onSubmit, label = "Bruker" }: UseUserProfileWriteFormProps) =>
+  useFormBuilder({
+    schema: UserWriteSchema,
+    onSubmit,
+    defaultValues,
+    label,
+    fields: {
+      firstName: createTextInput({
+        label: "Fornavn",
+        placeholder: "Ola",
+      }),
+      lastName: createTextInput({
+        label: "Etternavn",
+        placeholder: "Ola",
+      }),
+      phone: createTextInput({
+        label: "Telefon",
+        placeholder: "12345678",
+      }),
+      gender: createSelectInput({
+        label: "Kjønn",
+        data: [
+          { label: "Mann", value: "male" },
+          { label: "Kvinne", value: "female" },
+          { label: "Annet", value: "other" },
+        ],
+      }),
+      allergies: createTextInput({
+        label: "Allergier",
+        placeholder: "Melk, nøtter, gluten",
+      }),
+      rfid: createTextInput({
+        label: "RFID",
+        placeholder: "123456",
+      }),
+      compiled: createCheckboxInput({
+        label: "Kompilert",
+      }),
+      address: createTextInput({
+        label: "Adresse",
+        placeholder: "Osloveien 1, 0001 Oslo",
+      }),
+    },
+  })

apps/dashboard/src/app/(dashboard)/user/[id]/page.tsx

@@ -22,7 +22,7 @@ export default function UserDetailsPage() {
     <Box p="md">
       <Group>
         <CloseButton onClick={() => router.back()} />
-        <Title>{user.name}</Title>
+        <Title>{user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.email}</Title>
       </Group>
 
       <Tabs defaultValue={SIDEBAR_LINKS[0].slug}>

apps/dashboard/src/components/molecules/UserSearch/UserSearch.tsx

@@ -23,7 +23,7 @@ export const UserSearch: FC<UserSearchProps> = ({ onSubmit }) => {
         onSubmit(user)
       }}
       items={users}
-      dataMapper={(item: User) => `${item.name}`}
+      dataMapper={(item: User) => `${item.email} ${item.firstName} ${item.lastName}`}
       placeholder="Søk etter bruker..."
       resetOnClick
     />

apps/dashboard/src/modules/attendance/modals/attendance-registered-modal.tsx

@@ -15,7 +15,7 @@ export const AttendanceRegisteredModal: FC<ContextModalProps<AttendanceRegistere
   }, 3000)
   return (
     <div className="w-full">
-      <h1>{innerProps.user.name}</h1>
+      <h1>{`${innerProps.user.firstName} ${innerProps.user.lastName}`}</h1>
       <p>{innerProps.user.email}</p>
     </div>
   )

apps/dashboard/src/modules/attendance/modals/error-attendance-registered-modal.tsx

@@ -10,7 +10,7 @@ export const AlreadyAttendedModal: FC<ContextModalProps<AttendanceRegisteredModa
   return (
     <div className="w-full">
       <h1>Bruker allerede påmeldt</h1>
-      <h2 className="text-">{innerProps.user.name}</h2>
+      <h2 className="text-">{`${innerProps.user.firstName} ${innerProps.user.lastName}`}</h2>
       <p>{innerProps.user.email}</p>
     </div>
   )

apps/dashboard/src/modules/user/use-user-table.tsx

@@ -14,18 +14,18 @@ export const useUserTable = ({ data }: Props) => {
   const columnHelper = createColumnHelper<User>()
   const columns = useMemo(
     () => [
-      columnHelper.accessor("email", {
-        header: () => "E-post",
-        cell: (info) => info.getValue(),
-      }),
-      columnHelper.accessor("givenName", {
+      columnHelper.accessor("firstName", {
         header: () => "Fornavn",
         cell: (info) => info.getValue(),
       }),
-      columnHelper.accessor("familyName", {
+      columnHelper.accessor("lastName", {
         header: () => "Etternavn",
         cell: (info) => info.getValue(),
       }),
+      columnHelper.accessor("email", {
+        header: () => "E-post",
+        cell: (info) => info.getValue(),
+      }),
       columnHelper.accessor((evt) => evt, {
         id: "actions",
         header: () => "Detaljer",

apps/web/src/app/events/components/AttendanceBox/AttendanceBox.tsx

@@ -55,7 +55,8 @@ export const AttendanceBox: FC<Props> = ({ sessionUser, attendance, pools, event
     new Date()
   )
   const userIsRegistered = Boolean(attendee)
-  const myGroups = user && pools?.find((a) => a.yearCriteria.includes(user?.studyYear))
+  // TODO: CORRECT THIS
+  const myGroups = user && pools?.find((a) => a.yearCriteria.includes(1))
 
   const visiblePools = pools?.filter((pool) => pool.isVisible)
 

apps/web/src/app/settings/components/ChangeAvatar.tsx

@@ -17,7 +17,7 @@ const AvatarImgChange = (user: User) => (
   <DropdownMenu>
     <DropdownMenuTrigger className="relative border-[1px] rounded-full">
       <Avatar className="w-40 h-auto">
-        <AvatarImage src={user.image} alt="UserAvatar" />
+        <AvatarImage src={user.image ?? undefined} alt="UserAvatar" />
         <AvatarFallback className="w-40 h-40">{user.name}</AvatarFallback>
       </Avatar>
       <div className=" bg-slate-1 absolute top-0 w-full h-full rounded-full opacity-60 flex justify-center items-center hover:cursor-pointer">

apps/web/src/app/settings/page.tsx

@@ -1,15 +1,21 @@
+"use client"
+
 import { SettingsLanding } from "@/components/views/SettingsView/components"
-import { getServerSession } from "next-auth"
+import { trpc } from "@/utils/trpc/client"
 import { redirect } from "next/navigation"
 
-const SettingsPage = async () => {
-  const session = await getServerSession()
+const SettingsPage = () => {
+  const { data: user } = trpc.user.getMe.useQuery()
 
-  if (session === null) {
+  if (user === null) {
     redirect("/")
   }
 
-  return <SettingsLanding user={session.user} />
+  if (user === undefined) {
+    return <div>Loading...</div>
+  }
+
+  return <SettingsLanding user={user} />
 }
 
 export default SettingsPage

apps/web/src/components/molecules/ProfileMolecules/PersonalInfo.tsx

@@ -16,7 +16,7 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ user, className }) => {
   return (
     <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
       <Avatar className="w-40 h-auto opacity-60">
-        <AvatarImage src={user.image} alt="UserAvatar" />
+        <AvatarImage src={user.image ?? undefined} alt="UserAvatar" />
         <AvatarFallback className="w-40 h-40">{user.name}</AvatarFallback>
       </Avatar>
       <p className="text-lg">{user.name}</p>