completed the house form for creating and updating houses

src/features/house/houseApiSlice.ts

@@ -51,8 +51,11 @@ export const housesApiSlice = apiSlice.injectEndpoints({
       }),
       invalidatesTags: [{ type: 'House', id: 'LIST' }],
     }),
-    updateHouses: builder.mutation({
-      query: (data: { houseId: string; data: Partial<House> }) => ({
+    updateHouse: builder.mutation({
+      query: (data: {
+        houseId: string, 
+        data: Partial<House>
+      }) => ({
         url: `houses/${data.houseId}`,
         method: 'PATCH',
         body: {
@@ -69,7 +72,7 @@ export const housesApiSlice = apiSlice.injectEndpoints({
 export const {
   useGetHouseQuery,
   useAddNewHouseMutation,
-  useUpdateHousesMutation,
+  useUpdateHouseMutation,
   //   useDeleteShiftMutation,
 } = housesApiSlice
 

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) {

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)

src/pages/testing/index.tsx

@@ -0,0 +1,12 @@
+// use this to test your stuff
+
+import NewHouseBtn from "@/sprintFiles/NewHouseBtn"
+
+const index = () => {
+  return (
+      <>
+        <NewHouseBtn></NewHouseBtn>
+      </>
+    )
+  }
+export default index

src/sprintFiles/HouseForm.tsx

@@ -0,0 +1,145 @@
+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 = {
+  name: '',
+  houseID: '',
+  categories: {},
+  address: '',
+  schedule: {},
+  userPINs: {},
+}
+
+const HouseForm = ({
+  setOpen,
+  houseId,
+}: {
+  setOpen: (value: React.SetStateAction<boolean>) => 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,
+  ] = useAddNewHouseMutation()
+  const [
+    updateHouse,
+  ] = useUpdateHouseMutation()
+
+  const onSubmit = async (
+    values: {
+      name: string,
+      houseID: string,
+      address: string,
+    },
+    formikBag: FormikHelpers<any>
+  ) => {
+    const {
+      name,
+      houseID,
+      address,
+    } = values
+
+    let result
+
+    const data = { data: {}}
+    data.data = {
+      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 (
+    <>
+      <Formik
+        validationSchema={HouseSchema}
+        initialValues={{
+          name: house ? house.name : emptyHouse.name,
+          houseID: house ? house.houseID : emptyHouse.houseID,
+          address: house ? house.address : emptyHouse.address,
+        }}
+        onSubmit={onSubmit}
+      >
+        {({ isSubmitting, }) => (
+          <Form>
+            <TextInput name="name" label="Full house name" />
+
+            <TextInput name="address" label="Address of the house" />
+
+            <TextInput name="houseID" label="ID of the house (3 letter code)" />
+
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                color="primary"
+                disabled={isSubmitting}
+              >
+                {!houseId ? 'Submit' : 'Update'}
+              </Button>
+              <Button
+                fullWidth
+                variant="outlined"
+                color="primary"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+            </Stack>
+          </Form>
+        )}
+      </Formik>
+    </>
+  )
+}
+
+export default HouseForm

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 (
+    <React.Fragment>
+      <Button fullWidth variant="contained" onClick={handleOpen}>
+        <Typography>Add House</Typography>
+      </Button>
+      <NewHouseCard setOpen={setOpen} open={open} />
+    </React.Fragment>
+  )
+}
+
+export default NewHouseBtn

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<boolean>) => void
+  open: boolean
+}) {
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleOpen = () => {
+    setOpen(true)
+  }
+  return (
+    <>
+      <Dialog
+        fullWidth
+        maxWidth="md"
+        open={open}
+        onClose={handleClose}
+        className="dialog"
+      >
+        <DialogTitle variant="h4" component="h2">
+          Create House
+        </DialogTitle>
+        <DialogContent>
+          <HouseForm
+            setOpen={setOpen}
+            houseId='EUC'
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+export default NewHouseCard