chore: rename uuid to id and use LoadingAndErrorComponent

lib/components/examples/TableExample.tsx

@@ -92,14 +92,14 @@ const TableExample = ({ data: initialData }: Pick<TableProps<DataType>, 'data'>)
         ]}
         header={[
           <SortButton
-            key="headerID"
+            key="headerId"
             ascending={sortingKey === 'id' ? ascending : undefined}
             onClick={newTableSorting => {
               setSorting(['id', newTableSorting])
               setData(data.sort(sortingFunctions.id[newTableSorting]))
             }}
           >
-            <Span type="tableHeader">ID</Span>
+            <Span type="tableHeader">Id</Span>
           </SortButton>,
           <SortButton
             key="name"

tasks/components/AddPatientModal.tsx

@@ -4,7 +4,7 @@ import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import type { ConfirmDialogProps } from '@helpwave/common/components/modals/ConfirmDialog'
 import { ConfirmDialog } from '@helpwave/common/components/modals/ConfirmDialog'
-import type { RoomBedDropDownIDs } from './RoomBedDropDown'
+import type { RoomBedDropDownIds } from './RoomBedDropDown'
 import { RoomBedDropDown } from './RoomBedDropDown'
 import React, { useState } from 'react'
 import { Span } from '@helpwave/common/components/Span'
@@ -35,34 +35,34 @@ const defaultAddPatientModalTranslation: Record<Languages, AddPatientModalTransl
 }
 
 export type AddPatientModalProps = ConfirmDialogProps & {
-  wardID: string
+  wardId: string
 }
 
 /**
  * A Modal for adding a Patient
  */
 export const AddPatientModal = ({
   language,
-  wardID,
+  wardId,
   title,
   onConfirm = noop,
   ...modalProps
 }: PropsWithLanguage<AddPatientModalTranslation, AddPatientModalProps>) => {
   const translation = useTranslation(language, defaultAddPatientModalTranslation)
-  const [dropdownID, setDropdownID] = useState<RoomBedDropDownIDs>({})
+  const [dropdownId, setDropdownId] = useState<RoomBedDropDownIds>({})
   const [patientName, setPatientName] = useState<string>('')
   const [touched, setTouched] = useState<boolean>(false)
   const assignBedMutation = useAssignBedMutation()
   const createPatientMutation = usePatientCreateMutation(patient => {
-    if (dropdownID.bedID) {
-      assignBedMutation.mutate({ id: dropdownID.bedID, patientID: patient.id })
+    if (dropdownId.bedId) {
+      assignBedMutation.mutate({ id: dropdownId.bedId, patientId: patient.id })
     }
   })
 
   const minimumNameLength = 4
   const trimmedPatientName = patientName.trim()
   const validPatientName = trimmedPatientName.length >= minimumNameLength
-  const validRoomAndBed = dropdownID.roomID && dropdownID.bedID
+  const validRoomAndBed = dropdownId.roomId && dropdownId.bedId
   const isShowingError = touched && !validPatientName
 
   return (
@@ -88,9 +88,9 @@ export const AddPatientModal = ({
           {isShowingError && <Span type="formError">{translation.minimumLength(minimumNameLength)}</Span>}
         </div>
         <RoomBedDropDown
-          initialRoomAndBed={dropdownID}
-          wardID={wardID}
-          onChange={roomBedDropDownIDs => setDropdownID(roomBedDropDownIDs)}
+          initialRoomAndBed={dropdownId}
+          wardId={wardId}
+          onChange={roomBedDropDownIds => setDropdownId(roomBedDropDownIds)}
           isClearable={true}
         />
         <Span className={tx({ 'text-hw-warn-400': !validRoomAndBed, 'text-transparent': validRoomAndBed })}>{translation.noBedSelected}</Span>

tasks/components/BreadCrumb.tsx

@@ -14,7 +14,7 @@ type BreadCrumbProps = {
 /**
  * A component for showing a hierarchical link structure with an independent link on each element
  *
- * e.g. Organizations/Ward/uuid
+ * e.g. Organizations/Ward/<id>
  */
 export const BreadCrumb = ({ crumbs }: BreadCrumbProps) => {
   return (

tasks/components/KanbanColumn.tsx

@@ -32,7 +32,7 @@ type KanbanColumnProps = {
   tasks: TaskDTO[],
   type: TaskStatus,
   isDraggedOver: boolean,
-  draggedTileID?: string,
+  draggedTileId?: string,
   onEditTask: (task: TaskDTO) => void
 }
 
@@ -44,7 +44,7 @@ export const KanbanColumn = ({
   tasks,
   type,
   isDraggedOver,
-  draggedTileID,
+  draggedTileId,
   onEditTask
 }: PropsWithLanguage<KanbanColumnsTranslation, KanbanColumnProps>) => {
   const translation = useTranslation(language, defaultKanbanColumnsTranslations)
@@ -69,7 +69,7 @@ export const KanbanColumn = ({
             <Sortable key={task.id} id={task.id}>
               <TaskCard
                 task={task}
-                isSelected={draggedTileID === task.id}
+                isSelected={draggedTileId === task.id}
                 onTileClick={() => onEditTask(task)}
               />
             </Sortable>

tasks/components/MangeBedsModal.tsx

@@ -57,8 +57,8 @@ const defaultManageBedsModalTranslation: Record<Languages, ManageBedsModalTransl
 }
 
 export type ManageBedsModalProps = Omit<ModalProps, 'title'|'description'> & {
-  wardID: string, // TODO remove later
-  roomID: string,
+  wardId: string, // TODO remove later
+  roomId: string,
   onClose?: () => void
 }
 
@@ -67,19 +67,19 @@ export type ManageBedsModalProps = Omit<ModalProps, 'title'|'description'> & {
  */
 export const ManageBedsModal = ({
   language,
-  wardID,
-  roomID,
+  wardId,
+  roomId,
   onClose = noop,
   modalClassName,
   ...ModalProps
 }: PropsWithLanguage<ManageBedsModalTranslation, ManageBedsModalProps>) => {
   const translation = useTranslation(language, defaultManageBedsModalTranslation)
-  const { data, isLoading, isError } = useRoomOverviewsQuery(wardID) // Todo use more optimized query later
+  const { data, isLoading, isError } = useRoomOverviewsQuery(wardId) // Todo use more optimized query later
   const [tableState, setTableState] = useState<TableState>({
     pagination: defaultTableStatePagination
   })
   const [beds, setBeds] = useState<BedWithPatientWithTasksNumberDTO[]>([])
-  const room = data?.find(value => value.id === roomID)
+  const room = data?.find(value => value.id === roomId)
 
   useEffect(() => {
     if (data) {
@@ -114,7 +114,7 @@ export const ManageBedsModal = ({
             </div>
             <div className={tw('flex flex-row justify-between items-end mb-2')}>
               <Span type="tableName">{`${translation.beds} (${beds.length})`}</Span>
-              <Button color="positive" onClick={() => addBedMutation.mutate({ id: '', name: `${translation.bed} ${room?.beds.length + 1 ?? 1}`, roomID })}>{translation.addBed}</Button>
+              <Button color="positive" onClick={() => addBedMutation.mutate({ id: '', name: `${translation.bed} ${room?.beds.length + 1 ?? 1}`, roomId })}>{translation.addBed}</Button>
             </div>
             <Table
               data={beds}
@@ -133,7 +133,7 @@ export const ManageBedsModal = ({
                     onChange={text => {
                       setBeds(beds.map(value => value.id === bed.id ? { ...value, name: text } : value))
                     }}
-                    onEditCompleted={text => updateBedMutation.mutate({ id: bed.id, name: text, roomID: room.id })}
+                    onEditCompleted={text => updateBedMutation.mutate({ id: bed.id, name: text, roomId: room.id })}
                   />
                 </div>,
                 <div key="patient" className={tw('w-20')}>

tasks/components/OrganisationInvitationList.tsx

@@ -51,26 +51,26 @@ export type OrganisationInvitation = {
 }
 
 export type OrganisationInvitationListProps = {
-  organizationID: string,
+  organizationId: string,
   invitations?: OrganisationInvitation[],
   onChange: (invites: OrganisationInvitation[]) => void
 }
 
 /**
- * Description
+ * A List showing all members invited to an organisation
  */
 export const OrganisationInvitationList = ({
   language,
-  organizationID,
+  organizationId,
   invitations,
   onChange
 }: PropsWithLanguage<OrganisationInvitationListTranslation, OrganisationInvitationListProps>) => {
   const translation = useTranslation(language, defaultOrganisationInvitationListTranslation)
 
   const context = useContext(OrganizationContext)
-  const usedOrganizationID = organizationID ?? context.state.organizationID
-  const isCreatingOrganization = usedOrganizationID === ''
-  const { data, isLoading, isError } = useInvitationsByOrganisationQuery(context.state.organizationID)
+  const usedOrganizationId = organizationId ?? context.state.organizationId
+  const isCreatingOrganization = usedOrganizationId === ''
+  const { data, isLoading, isError } = useInvitationsByOrganisationQuery(context.state.organizationId)
   const [tableState, setTableState] = useState<TableState>({
     pagination: {
       ...defaultTableStatePagination,
@@ -81,16 +81,16 @@ export const OrganisationInvitationList = ({
   // Maybe move this filter to the endpoint or the query
   const usedInvitations: OrganisationInvitation[] = invitations ?? (data ?? []).filter(value => value.state === InvitationState.INVITATION_STATE_PENDING)
 
-  const inviteMemberMutation = useInviteMemberMutation(usedOrganizationID)
+  const inviteMemberMutation = useInviteMemberMutation(usedOrganizationId)
   const revokeInviteMutation = useInviteRevokeMutation()
   const idMapping = (invite: OrganisationInvitation) => invite.email
   const isValidEmail = !!inviteMemberModalEmail && validateEmail(inviteMemberModalEmail)
   const isShowingInviteMemberModal = inviteMemberModalEmail !== undefined
 
   return (
     <LoadingAndErrorComponent
-      isLoading={isLoading && !!context.state.organizationID}
-      hasError={isError && !!context.state.organizationID}
+      isLoading={isLoading && !!context.state.organizationId}
+      hasError={isError && !!context.state.organizationId}
       errorProps={{ classname: tw('border-2 border-gray-500 rounded-xl') }}
       loadingProps={{ classname: tw('border-2 border-gray-500 rounded-xl') }}
     >

tasks/components/OrganizationMemberList.tsx

@@ -70,7 +70,7 @@ type DeleteDialogState = {isShowing: boolean, member?: OrgMember}
 const defaultDeleteDialogState: DeleteDialogState = { isShowing: false }
 
 export type OrganizationMemberListProps = {
-  organizationID?: string,
+  organizationId?: string,
   members?: OrgMember[]
 }
 
@@ -79,19 +79,19 @@ export type OrganizationMemberListProps = {
  */
 export const OrganizationMemberList = ({
   language,
-  organizationID,
+  organizationId,
   members
 }: PropsWithLanguage<OrganizationMemberListTranslation, OrganizationMemberListProps>) => {
   const translation = useTranslation(language, defaultOrganizationMemberListTranslations)
   const [tableState, setTableState] = useState<TableState>({ pagination: defaultTableStatePagination, selection: defaultTableStateSelection })
 
   const context = useContext(OrganizationContext)
-  organizationID ??= context.state.organizationID
-  // const { data, isLoading, isError } = useMembersByOrganizationQuery(organizationID) TODO use later
+  organizationId ??= context.state.organizationId
+  // const { data, isLoading, isError } = useMembersByOrganizationQuery(organizationId) TODO use later
   const { data, isError, isLoading } = useOrganizationsByUserQuery()
-  const membersByOrganization = data?.find(value => value.id === organizationID)?.members ?? []
+  const membersByOrganization = data?.find(value => value.id === organizationId)?.members ?? []
   const usedMembers: OrgMember[] = members ?? membersByOrganization ?? []
-  const removeMemberMutation = useRemoveMemberMutation(organizationID)
+  const removeMemberMutation = useRemoveMemberMutation(organizationId)
 
   const [deleteDialogState, setDeleteDialogState] = useState<DeleteDialogState>(defaultDeleteDialogState)
 
@@ -100,8 +100,8 @@ export const OrganizationMemberList = ({
 
   // TODO move this filtering to the Table component
   const admins = usedMembers.filter(value => value.role === Role.admin).map(idMapping)
-  if (tableState.selection?.currentSelection.find(value => admins.find(adminID => adminID === value))) {
-    const newSelection = tableState.selection.currentSelection.filter(value => !admins.find(adminID => adminID === value))
+  if (tableState.selection?.currentSelection.find(value => admins.find(adminId => adminId === value))) {
+    const newSelection = tableState.selection.currentSelection.filter(value => !admins.find(adminId => adminId === value))
     setTableState({
       ...tableState,
       selection: {

tasks/components/RoomBedDropDown.tsx

@@ -46,21 +46,21 @@ const defaultRoomBedDropDownTranslation: Record<Languages, RoomBedDropDownTransl
   }
 }
 
-export type RoomBedDropDownIDs = {
+export type RoomBedDropDownIds = {
   /**
    * undefined value here means select a room and bed
    */
-  roomID?: string,
-  bedID?: string
+  roomId?: string,
+  bedId?: string
 }
 
 export type RoomBedDropDownProps = {
-  initialRoomAndBed: RoomBedDropDownIDs,
-  wardID: string,
+  initialRoomAndBed: RoomBedDropDownIds,
+  wardId: string,
   /**
    * Only triggers on valid input
    */
-  onChange?: (roomBedDropDownIDs:RoomBedDropDownIDs) => void,
+  onChange?: (roomBedDropDownIds:RoomBedDropDownIds) => void,
   isSubmitting?: boolean,
   isClearable?: boolean
 }
@@ -71,35 +71,35 @@ export type RoomBedDropDownProps = {
 export const RoomBedDropDown = ({
   language,
   initialRoomAndBed,
-  wardID,
+  wardId,
   isSubmitting = false,
   isClearable = false,
   onChange = noop
 }: PropsWithLanguage<RoomBedDropDownTranslation, RoomBedDropDownProps>) => {
   const translation = useTranslation(language, defaultRoomBedDropDownTranslation)
-  const { data, isError, isLoading } = usePatientAssignmentByWardQuery(wardID)
-  const [currentSelection, setCurrentSelection] = useState<RoomBedDropDownIDs>({ ...initialRoomAndBed })
+  const { data, isError, isLoading } = usePatientAssignmentByWardQuery(wardId)
+  const [currentSelection, setCurrentSelection] = useState<RoomBedDropDownIds>({ ...initialRoomAndBed })
   const ref = useRef<HTMLDivElement>(null)
-  const currentRoom = data?.find(value => value.id === currentSelection.roomID)
+  const currentRoom = data?.find(value => value.id === currentSelection.roomId)
   const [touched, setTouched] = useState(false)
-  const isCreating = !initialRoomAndBed.roomID
+  const isCreating = !initialRoomAndBed.roomId
 
   useEffect(() => {
     setCurrentSelection(initialRoomAndBed)
   }, [initialRoomAndBed])
 
-  const hasChanges = initialRoomAndBed.bedID !== currentSelection.bedID || initialRoomAndBed.roomID !== currentSelection.roomID
+  const hasChanges = initialRoomAndBed.bedId !== currentSelection.bedId || initialRoomAndBed.roomId !== currentSelection.roomId
 
   const roomSelect = (data && (
     <Select
       className={tw('min-w-[120px]')}
-      value={currentSelection.roomID}
+      value={currentSelection.roomId}
       options={data.map(room => ({ value: room.id, label: room.name, disabled: room.beds.length === 0 }))}
       onChange={value => {
         setCurrentSelection({
           ...currentSelection,
-          roomID: value,
-          bedID: undefined
+          roomId: value,
+          bedId: undefined
         })
         setTouched(true)
       }}
@@ -109,13 +109,13 @@ export const RoomBedDropDown = ({
   const bedSelect = (
     <Select
       className={tw('min-w-[150px]')}
-      value={currentSelection.bedID}
-      isDisabled={!currentSelection.roomID}
+      value={currentSelection.bedId}
+      isDisabled={!currentSelection.roomId}
       options={(currentRoom?.beds ?? []).map(value => ({ value: value.id, label: value.name, disabled: !!value.patient }))}
       onChange={value => {
         const newSelection = {
           ...currentSelection,
-          bedID: value
+          bedId: value
         }
         setCurrentSelection(newSelection)
         setTouched(true)
@@ -149,8 +149,8 @@ export const RoomBedDropDown = ({
           <Button
             onClick={() => {
               setCurrentSelection({
-                bedID: undefined,
-                roomID: undefined
+                bedId: undefined,
+                roomId: undefined
               })
               setTouched(false)
               onChange({})
@@ -175,10 +175,10 @@ export const RoomBedDropDown = ({
       )}
       {touched && !isSubmitting && isCreating && (
         <Span className={tx({
-          '!text-hw-positive-400': currentSelection.roomID && currentSelection.bedID,
-          '!text-hw-negative-400': !(currentSelection.roomID && currentSelection.bedID)
+          '!text-hw-positive-400': currentSelection.roomId && currentSelection.bedId,
+          '!text-hw-negative-400': !(currentSelection.roomId && currentSelection.bedId)
         })}>
-          {currentSelection.roomID && currentSelection.bedID ? translation.valid : translation.invalid}
+          {currentSelection.roomId && currentSelection.bedId ? translation.valid : translation.invalid}
         </Span>
       )}
       {isSubmitting && (