Make group optional in groups form

app/api/guests.tsx

@@ -12,8 +12,8 @@ export function loadGuests(onLoad?: (guests: Guest[]) => void) {
           id: record.id,
           name: record.name,
           status: record.status,
-          group_name: record.group.name,
-          groupId: record.group.id,
+          group_name: record.group?.name || 'Not grouped',
+          groupId: record.group?.id,
         });
       }));
     }, (error) => {

app/ui/components/guest-form-dialog.tsx

@@ -21,17 +21,17 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
 }) {
 
   const [name, setName] = useState(guest?.name || '');
-  const [group, setGroup] = useState(guest?.groupId || null);
-  const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
+  const [group, setGroup] = useState(guest?.groupId || undefined);
+  const [status, setStatus] = useState<GuestStatus | undefined>(guest?.status || undefined);
 
   function resetForm() {
     setName('');
-    setGroup(null);
-    setStatus(null);
+    setGroup(undefined);
+    setStatus(undefined);
   }
 
   function submitGuest() {
-    if (!(name && group && status)) {
+    if (!(name && status)) {
       return
     }
 
@@ -76,7 +76,7 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
             } />
             <label htmlFor="status">Status</label>
           </FloatLabel>
-          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
+          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && status)}>
             {guest?.id !== undefined ? 'Update' : 'Create'}
           </button>
         </div>