From 36b025f92d7ec68320b2b24ac06c4d351207eb80 Mon Sep 17 00:00:00 2001 From: danashimessele Date: Fri, 21 Apr 2023 18:03:31 -0700 Subject: [PATCH 1/2] finished house form for both creating and updating --- src/features/house/houseApiSlice.ts | 6 +- src/pages/testing/index.tsx | 10 +- src/sprintFiles/HouseForm.tsx | 150 ++++++++++++++++++++++++++++ src/sprintFiles/NewHouseBtn.tsx | 21 ++++ src/sprintFiles/NewHouseCard.tsx | 44 ++++++++ 5 files changed, 226 insertions(+), 5 deletions(-) create mode 100644 src/sprintFiles/HouseForm.tsx create mode 100644 src/sprintFiles/NewHouseBtn.tsx create mode 100644 src/sprintFiles/NewHouseCard.tsx diff --git a/src/features/house/houseApiSlice.ts b/src/features/house/houseApiSlice.ts index d3d78eb..3d1b800 100644 --- a/src/features/house/houseApiSlice.ts +++ b/src/features/house/houseApiSlice.ts @@ -25,7 +25,7 @@ export const housesApiSlice = apiSlice.injectEndpoints({ transformResponse: (responseData: House[]) => { // console.log('[transformResponse] responseData: ', responseData) const loadedHouses = responseData.map((entity) => { - console.log('[loaddedShifts] entity: ', entity) + console.log('[loadedHouses] entity: ', entity) entity.id = entity.id return entity }) @@ -53,7 +53,7 @@ export const housesApiSlice = apiSlice.injectEndpoints({ }), invalidatesTags: [{ type: 'House', id: 'LIST' }], }), - updateHouses: builder.mutation({ + updateHouse: builder.mutation({ query: (data: { houseId: string, data: Partial @@ -72,7 +72,7 @@ export const housesApiSlice = apiSlice.injectEndpoints({ export const { useGetHouseQuery, useAddNewHouseMutation, - useUpdateHousesMutation, + useUpdateHouseMutation, // useDeleteShiftMutation, } = housesApiSlice diff --git a/src/pages/testing/index.tsx b/src/pages/testing/index.tsx index 1dc3c1e..3bb056f 100644 --- a/src/pages/testing/index.tsx +++ b/src/pages/testing/index.tsx @@ -1,6 +1,12 @@ // use this to test your stuff +import NewHouseBtn from "@/sprintFiles/NewHouseBtn" + const index = () => { - return
inex
-} + return ( + <> + + + ) + } export default index diff --git a/src/sprintFiles/HouseForm.tsx b/src/sprintFiles/HouseForm.tsx new file mode 100644 index 0000000..46953a4 --- /dev/null +++ b/src/sprintFiles/HouseForm.tsx @@ -0,0 +1,150 @@ +import { Formik, Form, FormikHelpers } from 'formik' +import { Stack, Button } from '@mui/material' +import * as Yup from 'yup' +import { + TextInput, +} from '../components/shared/forms/CustomFormikFields' +import { + selectHouseById, + useAddNewHouseMutation, + useGetHouseQuery, + useUpdateHouseMutation +} from '../features/house/houseApiSlice' +import { useSelector } from 'react-redux' +import React from 'react' +import { RootState } from '../store/store' +import { EntityId } from '@reduxjs/toolkit' +import { House } from '../types/schema' + +//** Yup allows us to define a schema, transform a value to match, and/or assert the shape of an existing value. */ +//** Here, we are defining what kind of inputs we are expecting and attaching error msgs for when the input is not what we want. */ +const HouseSchema = Yup.object({ + name: Yup.string() + .required('Name is required') + .min(1, 'Name must have at least 1 characters'), + houseID: Yup.string() + .required("houseID is required") + .min(3, "houseID must be 3 characters"), + address: Yup.string().required('Address of house is required'), +}) + +const emptyHouse: Partial = { + id: '', + name: '', + houseID: '', + categories: {}, + address: '', + schedule: {}, + userPINs: {}, +} + +const HouseForm = ({ + setOpen, + houseId, +}: { + setOpen: (value: React.SetStateAction) => void + houseId: string, +}) => { + //** to use the selector func below */ + // const { data } = useGetHouseQuery("") + + //** for editing houses */ + const house: House = useSelector( + (state: RootState) => + selectHouseById(houseId)(state, houseId as EntityId) as House + ) + + //* Get API helpers to create or update a shift + const [ + addNewHouse, + ] = useAddNewHouseMutation() + const [ + updateHouse, + ] = useUpdateHouseMutation() + + const onSubmit = async ( + values: { + id?: string + name: string | undefined, + houseID: string | undefined, + address: string | undefined, + }, + formikBag: FormikHelpers + ) => { + const { + id, + name, + houseID, + address, + } = values + + let result + + const data = { data: {}} + data.data = { + id, + name, + houseID, + address, + } + + if (!houseId) { + result = await addNewHouse(data) + } else { + result = await updateHouse({data: data.data, houseId: houseId}) + } + if (result) { + console.log('success with house: ', result) + } + + formikBag.resetForm() + setOpen(false) + } + + return ( + <> + + {({ isSubmitting, }) => ( +
+ + + + + + + + + + + + )} +
+ + ) +} + +export default HouseForm diff --git a/src/sprintFiles/NewHouseBtn.tsx b/src/sprintFiles/NewHouseBtn.tsx new file mode 100644 index 0000000..910cdf4 --- /dev/null +++ b/src/sprintFiles/NewHouseBtn.tsx @@ -0,0 +1,21 @@ +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import React, { useState } from 'react' +import NewHouseCard from './NewHouseCard' + +const NewHouseBtn = () => { + const [open, setOpen] = useState(false) + const handleOpen = () => { + setOpen(true) + } + return ( + + + + + ) +} + +export default NewHouseBtn \ No newline at end of file diff --git a/src/sprintFiles/NewHouseCard.tsx b/src/sprintFiles/NewHouseCard.tsx new file mode 100644 index 0000000..3e330dc --- /dev/null +++ b/src/sprintFiles/NewHouseCard.tsx @@ -0,0 +1,44 @@ +import HouseForm from './HouseForm' +import { + Dialog, + DialogContent, + DialogTitle, +} from '@mui/material' + +function NewHouseCard({ + setOpen, + open, +}: { + setOpen: (value: React.SetStateAction) => void + open: boolean +}) { + const handleClose = () => { + setOpen(false) + } + + const handleOpen = () => { + setOpen(true) + } + return ( + <> + + + Create House + + + + + + + ) +} +export default NewHouseCard From 8bf9e05f3c065be5ea1faad5fb7d795ce66584fe Mon Sep 17 00:00:00 2001 From: danashimessele Date: Fri, 21 Apr 2023 19:13:14 -0700 Subject: [PATCH 2/2] fixed linting errors --- .../buttons/PreferencesButtons.tsx | 8 ++++---- .../tables/PreferencesTable.tsx | 6 +++--- src/pages/testing/index.tsx | 12 ++++++++++++ src/sprintFiles/HouseForm.tsx | 19 +++++++++---------- 4 files changed, 28 insertions(+), 17 deletions(-) create mode 100644 src/pages/testing/index.tsx diff --git a/src/features/userShiftPreferences/buttons/PreferencesButtons.tsx b/src/features/userShiftPreferences/buttons/PreferencesButtons.tsx index b9bd662..1f16f4f 100644 --- a/src/features/userShiftPreferences/buttons/PreferencesButtons.tsx +++ b/src/features/userShiftPreferences/buttons/PreferencesButtons.tsx @@ -21,7 +21,7 @@ import { import { House, Shift } from '@/types/schema' import { validatePreferences } from '@/utils/utils' import { Snackbar, Alert } from '@mui/material' -import { useUpdateHousesMutation } from '@/features/house/houseApiSlice' +import { useUpdateHouseMutation } from '@/features/house/houseApiSlice' import { useEstablishContextMutation } from '@/features/auth/authApiSlice' interface EditButtonsProps { @@ -93,8 +93,8 @@ export default function PreferencesButtons() { const [openErrorMsg, setOpenErrorMsg] = useState(false) //** Update house mutation api to update house */ - const [updateHouses, { isLoading, isSuccess, isError }] = - useUpdateHousesMutation() + const [updateHouse, { isLoading, isSuccess, isError }] = + useUpdateHouseMutation() //** User context function to update current user house and user information */ const [establishContext, {}] = useEstablishContextMutation() @@ -147,7 +147,7 @@ export default function PreferencesButtons() { data: { preferences: shiftPreferences }, houseId: authHouse.id, } - await updateHouses(data).unwrap() + await updateHouse(data).unwrap() await establishContext(authUser.id).unwrap() setOpenSuccessMsg(true) } catch (error) { diff --git a/src/features/userShiftPreferences/tables/PreferencesTable.tsx b/src/features/userShiftPreferences/tables/PreferencesTable.tsx index 0cfc218..0df9c7f 100644 --- a/src/features/userShiftPreferences/tables/PreferencesTable.tsx +++ b/src/features/userShiftPreferences/tables/PreferencesTable.tsx @@ -24,7 +24,7 @@ import { import { validatePreferences } from '@/utils/utils' import PreferencesButtons from '../buttons/PreferencesButtons' import Loading from '@/components/shared/Loading' -import { useUpdateHousesMutation } from '@/features/house/houseApiSlice' +import { useUpdateHouseMutation } from '@/features/house/houseApiSlice' import { useEstablishContextMutation } from '@/features/auth/authApiSlice' import { Dialog, DialogContent, DialogTitle } from '@mui/material' @@ -42,7 +42,7 @@ export default function PreferencesTable() { isSuccess, } = useGetShiftsQuery(authHouse.id) //** Mutate current house */ - const [updateHouses, {}] = useUpdateHousesMutation() + const [updateHouse, {}] = useUpdateHouseMutation() const [establishContext, {}] = useEstablishContextMutation() //** Boolean that is set to true when authHouse needs to be updated in the backEnd */ @@ -99,7 +99,7 @@ export default function PreferencesTable() { } const data = { data: { preferences }, houseId: authHouse.id } try { - await updateHouses(data).unwrap() + await updateHouse(data).unwrap() await establishContext(authUser.id) } catch (error) { console.log('[updateHousePreference]: error: ' + error) diff --git a/src/pages/testing/index.tsx b/src/pages/testing/index.tsx new file mode 100644 index 0000000..e072b1a --- /dev/null +++ b/src/pages/testing/index.tsx @@ -0,0 +1,12 @@ +// use this to test your stuff + +import NewHouseBtn from "@/sprintFiles/NewHouseBtn" + +const index = () => { + return ( + <> + + + ) + } +export default index \ No newline at end of file diff --git a/src/sprintFiles/HouseForm.tsx b/src/sprintFiles/HouseForm.tsx index c4d178a..4ff6dff 100644 --- a/src/sprintFiles/HouseForm.tsx +++ b/src/sprintFiles/HouseForm.tsx @@ -7,6 +7,7 @@ import { import { selectHouseById, useAddNewHouseMutation, + useGetHouseQuery, useUpdateHouseMutation } from '../features/house/houseApiSlice' import { useSelector } from 'react-redux' @@ -27,8 +28,7 @@ const HouseSchema = Yup.object({ address: Yup.string().required('Address of house is required'), }) -const emptyHouse: Partial = { - id: '', +const emptyHouse = { name: '', houseID: '', categories: {}, @@ -44,12 +44,15 @@ const HouseForm = ({ setOpen: (value: React.SetStateAction) => void houseId: string, }) => { + + const {data} = useGetHouseQuery(houseId) + //** selecting house passed into houseId */ const house: House = useSelector( (state: RootState) => selectHouseById(houseId)(state, houseId as EntityId) as House ) - + //* Get API helpers to create or update a shift const [ addNewHouse, @@ -60,15 +63,13 @@ const HouseForm = ({ const onSubmit = async ( values: { - id?: string - name: string | undefined, - houseID: string | undefined, - address: string | undefined, + name: string, + houseID: string, + address: string, }, formikBag: FormikHelpers ) => { const { - id, name, houseID, address, @@ -78,7 +79,6 @@ const HouseForm = ({ const data = { data: {}} data.data = { - id, name, houseID, address, @@ -102,7 +102,6 @@ const HouseForm = ({