feat(propertyDetailsPage/tabs/perennialForage): add page

src/presentation/pages/propertyDetailsPage/tabs/perennialForage/contexts/perennialForageContext/index.tsx → src/presentation/pages/propertyDetailsPage/tabs/perennialForage/contexts/perennialForageContext.tsx

@@ -6,13 +6,16 @@ import {
   type PropsWithChildren,
 } from 'react'
 
-import type { PerennialForageFilters } from '../../types'
+import { useParams } from 'react-router-dom'
+
+import type { PerennialForageFilters } from '../types'
 import type { PerennialForageModel } from '@/domain/models/perennialForageModel'
 
 type PerennialForageContextValue = {
+  propertyId: string
   filters: PerennialForageFilters
   handleChangeFilters: (newFilters: PerennialForageFilters) => void
-  perennialForageSelected?: PerennialForageModel
+  selectedPerennialForage?: PerennialForageModel
   isOpenNewPerennialForageForm: boolean
   isOpenEditPerennialForageForm: boolean
   isOpenDeletePerennialForageContainer: boolean
@@ -33,8 +36,10 @@ export const PerennialForageContext = createContext(
 export const PerennialForageProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
+  const params = useParams<{ id: string }>()
+
   const [filters, setFilters] = useState<PerennialForageFilters>({
-    description: '',
+    cultivation: '',
   })
 
   const handleChangeFilters = useCallback(
@@ -58,7 +63,7 @@ export const PerennialForageProvider: React.FC<PropsWithChildren> = ({
     setIsOpenDeletePerennialForageContainer,
   ] = useState(false)
 
-  const [perennialForageSelected, setPerennialForageSelected] =
+  const [selectedPerennialForage, setSelectedPerennialForage] =
     useState<PerennialForageModel>()
 
   const openNewPerennialForageForm = useCallback(() => {
@@ -71,35 +76,36 @@ export const PerennialForageProvider: React.FC<PropsWithChildren> = ({
 
   const openEditPerennialForageForm = useCallback(
     (perennialForage: PerennialForageModel) => {
-      setPerennialForageSelected(perennialForage)
+      setSelectedPerennialForage(perennialForage)
       setIsOpenEditPerennialForageForm(true)
     },
     []
   )
 
   const closeEditPerennialForageForm = useCallback(() => {
-    setPerennialForageSelected(undefined)
+    setSelectedPerennialForage(undefined)
     setIsOpenEditPerennialForageForm(false)
   }, [])
 
   const openDeletePerennialForageContainer = useCallback(
     (perennialForage: PerennialForageModel) => {
-      setPerennialForageSelected(perennialForage)
+      setSelectedPerennialForage(perennialForage)
       setIsOpenDeletePerennialForageContainer(true)
     },
     []
   )
 
   const closeDeletePerennialForageContainer = useCallback(() => {
-    setPerennialForageSelected(undefined)
+    setSelectedPerennialForage(undefined)
     setIsOpenDeletePerennialForageContainer(false)
   }, [])
 
   const providerValues = useMemo(
     () => ({
+      propertyId: params.id as string, // Typecast allowed to avoid undefined, as it has validation below
       filters,
       handleChangeFilters,
-      perennialForageSelected,
+      selectedPerennialForage,
       isOpenNewPerennialForageForm,
       isOpenEditPerennialForageForm,
       isOpenDeletePerennialForageContainer,
@@ -111,9 +117,10 @@ export const PerennialForageProvider: React.FC<PropsWithChildren> = ({
       closeDeletePerennialForageContainer,
     }),
     [
+      params.id,
       filters,
       handleChangeFilters,
-      perennialForageSelected,
+      selectedPerennialForage,
       isOpenNewPerennialForageForm,
       isOpenEditPerennialForageForm,
       isOpenDeletePerennialForageContainer,
@@ -126,6 +133,10 @@ export const PerennialForageProvider: React.FC<PropsWithChildren> = ({
     ]
   )
 
+  if (!params.id) {
+    return null
+  }
+
   return (
     <PerennialForageContext.Provider value={providerValues}>
       {children}

src/presentation/pages/propertyDetailsPage/tabs/perennialForage/hooks/usePerennialForage.ts

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+import toast from 'react-hot-toast'
+
+import { PerennialForageDataFactory } from '@/main/factories/useCases/perennialForage'
+
+type Props = {
+  id: string
+  propertyId: string
+}
+
+export const usePerennialForage = ({ id, propertyId }: Props) => {
+  const getPerennialForage = PerennialForageDataFactory.makeRemoteGetOne()
+
+  const {
+    data: perennialForage,
+    isError,
+    isLoading,
+    refetch: refetchPerennialForage,
+  } = useQuery({
+    queryKey: ['perennialForage', id],
+    queryFn: () =>
+      getPerennialForage.execute({
+        propertyId,
+        perennialForageId: id,
+      }),
+  })
+
+  useEffect(() => {
+    if (isError) toast.error('Erro ao buscar forrageira perene')
+  }, [isError])
+
+  return {
+    perennialForage,
+    isLoading,
+    refetchPerennialForage,
+  }
+}

src/presentation/pages/propertyDetailsPage/tabs/perennialForage/hooks/usePerennialForages.ts

@@ -8,12 +8,18 @@ import { PerennialForageDataFactory } from '@/main/factories/useCases/perennialF
 import type { PerennialForageFilters, PerennialForageSort } from '../types'
 
 type Props = {
+  propertyId: string
   filters: PerennialForageFilters
   page: number
   sort?: PerennialForageSort
 }
 
-export const usePerennialForages = ({ filters, page, sort }: Props) => {
+export const usePerennialForages = ({
+  propertyId,
+  filters,
+  page,
+  sort,
+}: Props) => {
   const getPerennialForages = PerennialForageDataFactory.makeRemoteGetAll()
 
   const {
@@ -25,9 +31,12 @@ export const usePerennialForages = ({ filters, page, sort }: Props) => {
     queryKey: ['perennialForages', { page, sort, filters }],
     queryFn: () =>
       getPerennialForages.execute({
-        pagination: { page },
-        sort,
-        filters,
+        propertyId,
+        queryParams: {
+          pagination: { page },
+          sort,
+          filters,
+        },
       }),
   })
 

src/presentation/pages/propertyDetailsPage/tabs/perennialForage/index.tsx

@@ -1,5 +1,7 @@
 import { Button, Input } from '@/presentation/components/ui'
 
+import { PerennialForageDeleteDialog } from './components/perennialForageDeleteDialog'
+import { PerennialForageForm } from './components/perennialForageForm'
 import { PerennialForagesDataTable } from './components/perennialForagesDataTable'
 import {
   PerennialForageContext,
@@ -10,7 +12,15 @@ export const PerennialForageTab: React.FC = () => {
   return (
     <PerennialForageProvider>
       <PerennialForageContext.Consumer>
-        {({ filters, handleChangeFilters, openNewPerennialForageForm }) => (
+        {({
+          selectedPerennialForage,
+          isOpenDeletePerennialForageContainer,
+          isOpenNewPerennialForageForm,
+          isOpenEditPerennialForageForm,
+          filters,
+          handleChangeFilters,
+          openNewPerennialForageForm,
+        }) => (
           <section className="flex flex-col gap-4 w-full">
             <div className="flex flex-col gap-2">
               <Button
@@ -24,15 +34,24 @@ export const PerennialForageTab: React.FC = () => {
 
               <Input
                 className="w-1/4"
-                value={filters.description}
+                value={filters.cultivation}
                 onChange={({ target }) => {
-                  handleChangeFilters({ description: target.value })
+                  handleChangeFilters({ cultivation: target.value })
                 }}
                 placeholder="Procurar forrageira por descrição"
               />
             </div>
 
             <PerennialForagesDataTable />
+            {selectedPerennialForage &&
+              isOpenDeletePerennialForageContainer && (
+                <PerennialForageDeleteDialog />
+              )}
+
+            {(isOpenNewPerennialForageForm ||
+              isOpenEditPerennialForageForm) && (
+              <PerennialForageForm id={selectedPerennialForage?.id} />
+            )}
           </section>
         )}
       </PerennialForageContext.Consumer>

src/validation/schemas/index.ts

@@ -1 +1,2 @@
 export { fileTypeSchema } from './fileTypeSchema'
+export { optionSchema } from './optionSchema'

src/validation/schemas/optionSchema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod'
+
+export const optionSchema = z.object({
+  label: z.string().min(1, { message: 'Campo obrigatório' }),
+  value: z.string().min(1, { message: 'Campo obrigatório' }),
+})