From 340193f1d52e1b68fe950974d1003b9330e06fe3 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 30 Aug 2024 14:45:50 -0700
Subject: Update material react table to have party guests

---
 client/src/components/AdminLogin.tsx |  2 +-
 client/src/components/Dashboard.tsx  | 42 ++++++++++++++++++++++++++++--------
 client/src/components/RsvpForm.tsx   |  2 +-
 client/src/models.ts                 | 35 ++++++++++++++++++++++++++++++
 client/src/slices/api/adminSlice.ts  | 27 +----------------------
 client/src/slices/api/guestSlice.ts  | 31 +++++---------------------
 client/src/slices/auth/adminSlice.ts |  2 +-
 client/src/slices/auth/guestSlice.ts |  2 +-
 8 files changed, 78 insertions(+), 65 deletions(-)
 create mode 100644 client/src/models.ts

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index d9c1260..92e5335 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -5,7 +5,7 @@ import { Button, Paper, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setAdmin } from '../slices/auth/adminSlice';
 import { useLoginAdminMutation } from '../slices/api/adminSlice';
-import type { AdminLoginRequest } from '../slices/api/adminSlice';
+import type { AdminLoginRequest } from '../models';
 
 function GuestLogin() {
   const dispatch = useDispatch();
diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx
index 20758fc..40c84f6 100644
--- a/client/src/components/Dashboard.tsx
+++ b/client/src/components/Dashboard.tsx
@@ -5,7 +5,7 @@ import {
   useMaterialReactTable,
   type MRT_ColumnDef,
 } from 'material-react-table';
-import type { Guest } from '../slices/api/adminSlice';
+import type { Guest } from '../models';
 
 function Dashboard() {
   const guests: Guest[] = useOutletContext();
@@ -14,12 +14,12 @@ function Dashboard() {
       {
         accessorKey: 'firstName',
         header: 'First Name',
-        size: 150,
+        size: 50,
       },
       {
         accessorKey: 'lastName',
         header: 'Last Name',
-        size: 150,
+        size: 50,
       },
       {
         accessorKey: 'attendance',
@@ -41,20 +41,44 @@ function Dashboard() {
         header: 'Party Size',
         size: 50,
       },
-      // {
-      //   accessorKey: 'partyList',
-      //   header: 'Party List',
-      //   size: 150,
-      // },
     ],
     []
   );
   const table = useMaterialReactTable({
     columns,
     data: guests,
+    renderDetailPanel: ({ row }) =>
+      row.original.partySize > 1
+        ? row.original.partyList.map((guest, index) => {
+            return (
+              <div
+                key={index}
+                style={{
+                  width: '32%',
+                  display: 'flex',
+                  justifyContent: 'space-around',
+                }}
+              >
+                <p>{guest.firstName}</p>
+                <p>{guest.lastName}</p>
+              </div>
+            );
+          })
+        : null,
   });
 
-  return <MaterialReactTable table={table} />;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ marginTop: 128 }}>
+        <MaterialReactTable table={table} />
+      </div>
+    </div>
+  );
 }
 
 export default Dashboard;
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index d72b92d..c7c30f4 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -17,7 +17,7 @@ import {
 import MailIcon from '@mui/icons-material/Mail';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../slices/api/guestSlice';
-import type { Guest } from '../slices/api/guestSlice';
+import type { Guest } from '../models';
 
 interface StatusProps {
   isError: boolean;
diff --git a/client/src/models.ts b/client/src/models.ts
new file mode 100644
index 0000000..97dce1f
--- /dev/null
+++ b/client/src/models.ts
@@ -0,0 +1,35 @@
+export interface Guest {
+  id: number;
+  firstName: string;
+  lastName: string;
+  attendance: string;
+  email: string;
+  message: string;
+  partySize: number;
+  partyList: Array<PartyGuest>;
+}
+
+export interface PartyGuest {
+  firstName: string;
+  lastName: string;
+}
+
+export interface GuestLoginRequest {
+  firstName: string;
+  lastName: string;
+}
+
+export interface GuestLoginResponse {
+  guest: Guest;
+  token: string;
+}
+
+export interface AdminLoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface AdminLoginResponse {
+  guests: Guest[];
+  token: string;
+}
diff --git a/client/src/slices/api/adminSlice.ts b/client/src/slices/api/adminSlice.ts
index cd1638d..bd69502 100644
--- a/client/src/slices/api/adminSlice.ts
+++ b/client/src/slices/api/adminSlice.ts
@@ -1,31 +1,6 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import type { RootState } from '../../store';
-
-export interface Guest {
-  id: number;
-  firstName: string;
-  lastName: string;
-  attendance: string;
-  email: string;
-  message: string;
-  partySize: number;
-  partyList: Array<PartyGuest>;
-}
-
-export interface PartyGuest {
-  firstName: string;
-  lastName: string;
-}
-
-export interface AdminLoginRequest {
-  username: string;
-  password: string;
-}
-
-export interface AdminLoginResponse {
-  guests: Guest[];
-  token: string;
-}
+import type { AdminLoginRequest, AdminLoginResponse } from '../../models';
 
 export const adminSlice = createApi({
   reducerPath: 'adminApi',
diff --git a/client/src/slices/api/guestSlice.ts b/client/src/slices/api/guestSlice.ts
index b009ff0..fab0454 100644
--- a/client/src/slices/api/guestSlice.ts
+++ b/client/src/slices/api/guestSlice.ts
@@ -1,31 +1,10 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import type { RootState } from '../../store';
-
-export interface GuestLoginRequest {
-  firstName: string;
-  lastName: string;
-}
-
-export interface GuestLoginResponse {
-  guest: Guest;
-  token: string;
-}
-
-export interface Guest {
-  id: number;
-  firstName: string;
-  lastName: string;
-  attendance: string;
-  email: string;
-  message: string;
-  partySize: number;
-  partyList: Array<PartyGuest>;
-}
-
-export interface PartyGuest {
-  firstName: string;
-  lastName: string;
-}
+import type {
+  Guest,
+  GuestLoginRequest,
+  GuestLoginResponse,
+} from '../../models';
 
 export const guestSlice = createApi({
   reducerPath: 'guestApi',
diff --git a/client/src/slices/auth/adminSlice.ts b/client/src/slices/auth/adminSlice.ts
index 8753b55..330fdb8 100644
--- a/client/src/slices/auth/adminSlice.ts
+++ b/client/src/slices/auth/adminSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../../store';
-import type { Guest } from '../api/guestSlice';
+import type { Guest } from '../../models';
 
 type AdminAuth = {
   guests?: Guest[];
diff --git a/client/src/slices/auth/guestSlice.ts b/client/src/slices/auth/guestSlice.ts
index 701148e..fb4afaf 100644
--- a/client/src/slices/auth/guestSlice.ts
+++ b/client/src/slices/auth/guestSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../../store';
-import type { Guest } from '../api/guestSlice';
+import type { Guest } from '../../models';
 
 type GuestAuth = {
   guest?: Guest;
-- 
cgit v1.2.3