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
(limited to 'client')
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