Fix sonarcloud problems

apps/dashboard/src/app/(dashboard)/article/[id]/layout.tsx

@@ -1,19 +1,25 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { trpc } from "../../../../utils/trpc"
 import { ArticleDetailsContext } from "./provider"
 
 export default function ArticleDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
   const { data, isLoading } = trpc.article.get.useQuery(params.id)
-  return (
-    <>
-      {isLoading || !data ? (
-        <Loader />
-      ) : (
-        <ArticleDetailsContext.Provider value={{ article: data }}>{children}</ArticleDetailsContext.Provider>
-      )}
-    </>
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
+            article: data,
+          },
+    [data, isLoading]
   )
+
+  if (value === null) {
+    return <Loader />
+  }
+
+  return <ArticleDetailsContext.Provider value={value}>{children}</ArticleDetailsContext.Provider>
 }

apps/dashboard/src/app/(dashboard)/event/[id]/attendance-page.tsx

@@ -1,6 +1,5 @@
 import type { Attendance } from "@dotkomonline/types"
-import { Divider } from "@mantine/core"
-import { Box, Title } from "@mantine/core"
+import { Box, Divider, Title } from "@mantine/core"
 import type { FC } from "react"
 import { useAttendanceForm } from "../../../../modules/attendance/components/attendance-page/AttendanceForm"
 import { InfoBox } from "../../../../modules/attendance/components/attendance-page/InfoBox"
@@ -21,7 +20,7 @@ export const AttendancePage: FC = () => {
     return <NoAttendanceFallback eventId={event.id} />
   }
 
-  return <_AttendancePage attendance={attendance} />
+  return <AttendancePageDetail attendance={attendance} />
 }
 
 const NoAttendanceFallback: FC<{ eventId: string }> = ({ eventId }) => {
@@ -50,7 +49,7 @@ const NoAttendanceFallback: FC<{ eventId: string }> = ({ eventId }) => {
 interface EventAttendanceProps {
   attendance: Attendance
 }
-const _AttendancePage: FC<EventAttendanceProps> = ({ attendance }) => {
+const AttendancePageDetail: FC<EventAttendanceProps> = ({ attendance }) => {
   const { pools } = usePoolsGetQuery(attendance.id)
 
   const updateAttendanceMut = useUpdateAttendanceMutation()

apps/dashboard/src/app/(dashboard)/event/[id]/extras-page.tsx

@@ -19,7 +19,7 @@ export const ExtrasPage: FC = () => {
     return <NoAttendanceFallback eventId={event.id} />
   }
 
-  return <_ExtrasPage attendance={attendance} />
+  return <ExtrasPageDetail attendance={attendance} />
 }
 
 const NoAttendanceFallback: FC<{ eventId: string }> = ({ eventId }) => {
@@ -47,7 +47,7 @@ const NoAttendanceFallback: FC<{ eventId: string }> = ({ eventId }) => {
 interface Props {
   attendance: Attendance
 }
-export const _ExtrasPage: FC<Props> = ({ attendance }) => {
+export const ExtrasPageDetail: FC<Props> = ({ attendance }) => {
   const openCreate = useCreateAttendanceExtrasModal({
     attendance,
   })

apps/dashboard/src/app/(dashboard)/event/[id]/layout.tsx

@@ -1,30 +1,27 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { useEventDetailsGetQuery } from "../../../../modules/event/queries/use-event-get-query"
 import { EventDetailsContext } from "./provider"
 
 export default function EventDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
-  const { data, isLoading: eventLoading } = useEventDetailsGetQuery(params.id)
-
-  console.log(eventLoading, data)
-
-  return (
-    <>
-      {eventLoading || data === undefined ? (
-        <Loader />
-      ) : (
-        <EventDetailsContext.Provider
-          value={{
+  const { data, isLoading } = useEventDetailsGetQuery(params.id)
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
             event: data.event,
             eventCommittees: data.eventCommittees,
             attendance: data.attendance,
-          }}
-        >
-          {children}
-        </EventDetailsContext.Provider>
-      )}
-    </>
+          },
+    [data, isLoading]
   )
+
+  if (value === null) {
+    return <Loader />
+  }
+
+  return <EventDetailsContext.Provider value={value}>{children}</EventDetailsContext.Provider>
 }

apps/dashboard/src/app/(dashboard)/event/[id]/provider.tsx

@@ -1,7 +1,6 @@
 "use client"
 
-import type { Attendance, Committee } from "@dotkomonline/types"
-import type { Event } from "@dotkomonline/types"
+import type { Attendance, Committee, Event } from "@dotkomonline/types"
 import { createContext, useContext } from "react"
 
 /** Context consisting of everything required to use and render the form */

apps/dashboard/src/app/(dashboard)/interest-group/[id]/layout.tsx

@@ -1,21 +1,28 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { trpc } from "../../../../utils/trpc"
 import { InterestGroupDetailsContext } from "./provider"
 
-export default function OfflineDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
+export default function InterestGroupDetailsLayout({
+  children,
+  params,
+}: PropsWithChildren<{ params: { id: string } }>) {
   const { data, isLoading } = trpc.interestGroup.get.useQuery(params.id)
-  return (
-    <>
-      {isLoading || !data ? (
-        <Loader />
-      ) : (
-        <InterestGroupDetailsContext.Provider value={{ interestGroup: data }}>
-          {children}
-        </InterestGroupDetailsContext.Provider>
-      )}
-    </>
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
+            interestGroup: data,
+          },
+    [data, isLoading]
   )
+
+  if (value === null) {
+    return <Loader />
+  }
+
+  return <InterestGroupDetailsContext.Provider value={value}>{children}</InterestGroupDetailsContext.Provider>
 }

apps/dashboard/src/app/(dashboard)/job-listing/[id]/layout.tsx

@@ -1,19 +1,25 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { trpc } from "../../../../utils/trpc"
 import { JobListingDetailsContext } from "./provider"
 
 export default function JobListingDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
   const { data, isLoading } = trpc.jobListing.get.useQuery(params.id)
-  return (
-    <>
-      {isLoading || !data ? (
-        <Loader />
-      ) : (
-        <JobListingDetailsContext.Provider value={{ jobListing: data }}>{children}</JobListingDetailsContext.Provider>
-      )}
-    </>
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
+            jobListing: data,
+          },
+    [data, isLoading]
   )
+
+  if (value === null) {
+    return <Loader />
+  }
+
+  return <JobListingDetailsContext.Provider value={value}>{children}</JobListingDetailsContext.Provider>
 }

apps/dashboard/src/app/(dashboard)/offline/[id]/layout.tsx

@@ -1,19 +1,25 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { trpc } from "../../../../utils/trpc"
 import { OfflineDetailsContext } from "./provider"
 
 export default function OfflineDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
   const { data, isLoading } = trpc.offline.get.useQuery(params.id)
-  return (
-    <>
-      {isLoading || !data ? (
-        <Loader />
-      ) : (
-        <OfflineDetailsContext.Provider value={{ offline: data }}>{children}</OfflineDetailsContext.Provider>
-      )}
-    </>
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
+            offline: data,
+          },
+    [data, isLoading]
   )
+
+  if (value === null) {
+    return <Loader />
+  }
+
+  return <OfflineDetailsContext.Provider value={value}>{children}</OfflineDetailsContext.Provider>
 }

apps/dashboard/src/app/(dashboard)/punishment/page.tsx

@@ -10,7 +10,7 @@ import { useMarkCountUsersQuery } from "../../../modules/punishment/queries/use-
 import { usePunishmentAllQuery } from "../../../modules/punishment/queries/use-punishment-all-query"
 import { formatDate } from "../../../utils/format"
 
-function MarkUserCount({ markId }: { markId: MarkId }) {
+function MarkUserCount({ markId }: Readonly<{ markId: MarkId }>) {
   const { data } = useMarkCountUsersQuery(markId)
   return <>{data ?? 0}</>
 }

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

@@ -1,26 +1,31 @@
 "use client"
 
 import { Loader } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { type PropsWithChildren, useMemo } from "react"
 import { trpc } from "../../../../utils/trpc"
 import { UserDetailsContext } from "./provider"
 
 export default function UserDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
   const id = decodeURIComponent(params.id)
-  const { data, isLoading, error } = trpc.user.get.useQuery(id)
+  const { data, isLoading } = trpc.user.get.useQuery(id)
+  const value = useMemo(
+    () =>
+      data === undefined || isLoading
+        ? null
+        : {
+            user: data,
+          },
+    [data, isLoading]
+  )
 
-  if (error) {
-    console.log(error)
-    return <div>{error.message}</div>
+  if (value === null) {
+    return <Loader />
   }
 
-  return (
-    <>
-      {isLoading || !data ? (
-        <Loader />
-      ) : (
-        <UserDetailsContext.Provider value={{ user: data }}>{children}</UserDetailsContext.Provider>
-      )}
-    </>
-  )
+  const u = value.user
+  if (u === null) {
+    return <div>User {id} not found</div>
+  }
+
+  return <UserDetailsContext.Provider value={{ user: u }}>{children}</UserDetailsContext.Provider>
 }

apps/dashboard/src/app/form.tsx

@@ -354,8 +354,6 @@ export function useFormBuilder<T extends z.ZodRawShape>({
     )
   })
 
-  console.log(form.formState.errors)
-
   return function Form() {
     return (
       <form

apps/dashboard/src/app/notifications.tsx

@@ -25,7 +25,7 @@ interface NotificationConfig {
 const createNotificationMethod =
   (config: NotificationConfig) =>
   ({ title, message, id, method: _method, autoClose }: NotificationProps) => {
-    const method = _method || "show"
+    const method = _method ?? "show"
 
     return notifications[method]({
       ...config,
@@ -132,19 +132,19 @@ export const useQueryGenericMutationNotification = ({ method }: Props) => {
 }
 
 export const notifyLoading = (props: NotificationProps) =>
-  notifications[props.method || "show"]({
+  notifications[props.method ?? "show"]({
     ...props,
     ...notificationConfigs.loading,
   })
 
 export const notifyComplete = (props: NotificationProps) =>
-  notifications[props.method || "show"]({
+  notifications[props.method ?? "show"]({
     ...props,
     ...notificationConfigs.complete,
   })
 
 export const notifyFail = (props: NotificationProps) =>
-  notifications[props.method || "show"]({
+  notifications[props.method ?? "show"]({
     ...props,
     ...notificationConfigs.fail,
   })

apps/dashboard/src/components/GenericSearch.tsx

@@ -6,7 +6,7 @@ interface GenericSearchProps<T> {
   onSubmit(item: T): void
   items: T[]
   dataMapper(item: T): string
-  placeholder?: string | null | undefined
+  placeholder?: string | null
   resetOnClick?: boolean
 }
 
@@ -33,7 +33,7 @@ const GenericSearch = <T,>({
     }
   }
 
-  const placeholderText = placeholder !== null ? placeholder || "Search..." : undefined
+  const placeholderText = placeholder !== null ? placeholder ?? "Search..." : undefined
 
   const data = items.map(dataMapper)
 
@@ -42,7 +42,7 @@ const GenericSearch = <T,>({
   const duplicateMap = new Map<string, number>()
 
   const dataWithDuplicates = data.map((item) => {
-    const count = duplicateMap.get(item) || 0
+    const count = duplicateMap.get(item) ?? 0
     duplicateMap.set(item, count + 1)
 
     if (count === 0) {

apps/dashboard/src/components/GenericTable.tsx

@@ -2,7 +2,7 @@ import { Card, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text }
 import { type Table as ReactTable, flexRender } from "@tanstack/react-table"
 
 export interface GenericTableProps<T> {
-  table: ReactTable<T>
+  readonly table: ReactTable<T>
 }
 
 export function GenericTable<T>({ table }: GenericTableProps<T>) {

apps/dashboard/src/modules/attendance/components/attendance-page/PoolsBox.tsx

@@ -54,11 +54,6 @@ const AttendancePoolCard: FC<NormalPoolBoxProps> = ({ pool, attendanceId, delete
 
 export const PoolBox: FC<PoolsBoxProps> = ({ pools, attendanceId }) => {
   const deleteGroupMut = useDeletePoolMutation()
-
-  const Pool: FC<{ pool: AttendancePool }> = ({ pool }) => {
-    return <AttendancePoolCard key={pool.id} pool={pool} deleteGroup={deleteGroup} attendanceId={attendanceId} />
-  }
-
   const deleteGroup = (id: string, numAttendees: number) => {
     if (numAttendees > 0) {
       notifyFail({
@@ -76,7 +71,7 @@ export const PoolBox: FC<PoolsBoxProps> = ({ pools, attendanceId }) => {
   return (
     <Box>
       {pools?.map((pool) => (
-        <Pool key={pool.id} pool={pool} />
+        <AttendancePoolCard key={pool.id} pool={pool} deleteGroup={deleteGroup} attendanceId={attendanceId} />
       ))}
       {pools?.length === 0 && <Text fs="italic">Ingen påmeldingsgrupper</Text>}
     </Box>