[Front]: 🐛 Fix: Supplier select component

CtrI-Alt-Del · Dec 1, 2024 · c03b613 · c03b613
1 parent a349a7e
commit c03b613
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/apps/web/src/ui/components/commons/supplier-select/index.tsx b/apps/web/src/ui/components/commons/supplier-select/index.tsx
@@ -5,14 +5,14 @@ import { Dialog } from '../dialog'
 import { useSupplierSelect } from './use-supplier-select'
 
 type SupplierSelectProps = {
-  defeaultSupplierId?: string
+  defaultSupplierId?: string
   className?: string
   onSelectChange: (supplierId: string) => void
 }
 
 export const SupplierSelect = ({
   className,
-  defeaultSupplierId,
+  defaultSupplierId,
   onSelectChange,
 }: SupplierSelectProps) => {
   const {
@@ -23,7 +23,7 @@ export const SupplierSelect = ({
     selectedSupplierName,
     handleSupplierIdChange,
     handleSupplierPageChange,
-  } = useSupplierSelect(onSelectChange, defeaultSupplierId)
+  } = useSupplierSelect(onSelectChange, defaultSupplierId)
 
   return isFetching ? (
     <Spinner label='Carregando...' className='w-full h-full mx-auto' />
@@ -34,7 +34,7 @@ export const SupplierSelect = ({
         size='2xl'
         trigger={
           <Select className={className}>
-            {selectedSupplierName ? selectedSupplierName : 'Selecione fornecedor'}
+            {selectedSupplierName || 'Selecione fornecedor'}
           </Select>
         }
       >

diff --git a/apps/web/src/ui/components/commons/supplier-select/use-supplier-select.ts b/apps/web/src/ui/components/commons/supplier-select/use-supplier-select.ts
@@ -1,28 +1,25 @@
 import { CACHE } from '@/constants'
 import { useApi, useCache, useToast, useUrlParamNumber } from '@/ui/hooks'
 import { Supplier } from '@stocker/core/entities'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useAuthContext } from '../../contexts/auth-context'
 
 export function useSupplierSelect(
   onSelectChange: (supplierId: string) => void,
-  defeaultSelectedSupplierId?: string,
+  defaultSelectedSupplierId?: string,
 ) {
-  const [supplierId, setSupplierId] = useState(defeaultSelectedSupplierId)
+  const [supplierId, setSupplierId] = useState(defaultSelectedSupplierId)
   const { suppliersService } = useApi()
   const { company } = useAuthContext()
   const { showError } = useToast()
   const [page, setPage] = useUrlParamNumber('supplierPage', 1)
   const [expandedItems, setExpandedItems] = useState<{ [key: string]: boolean }>({})
-
-  function handleSupplierIdChange(supplierId: string) {
-    setSupplierId(supplierId)
-    onSelectChange(supplierId)
-  }
+  const [selectedSupplierName, setSelectedSupplierName] = useState<string | undefined>(undefined)
 
   async function fetchSupplier() {
-    if (!supplierId) return
-
+    if (!supplierId) {
+      return
+    }
     const response = await suppliersService.getSupplier(supplierId)
     if (response.isFailure) {
       showError(response.errorMessage)
@@ -56,6 +53,38 @@ export function useSupplierSelect(
     dependencies: [page],
   })
 
+  useEffect(() => {
+    if (supplierData) {
+      setSelectedSupplierName(supplierData.name)
+    }
+  }, [supplierData])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+    if (defaultSelectedSupplierId) {
+      const fetchInitialSupplier = async () => {
+        const response = await suppliersService.getSupplier(defaultSelectedSupplierId)
+        if (response.isFailure) {
+          showError(response.errorMessage)
+        } else {
+          setSelectedSupplierName(response.body.name)
+        }
+      }
+      fetchInitialSupplier()
+    }
+  }, [defaultSelectedSupplierId])
+
+  function handleSupplierIdChange(supplierId: string) {
+    setSupplierId(supplierId)
+
+    const selectedSupplier = suppliers.find((supplier) => supplier.id === supplierId)
+    if (selectedSupplier) {
+      setSelectedSupplierName(selectedSupplier.name)
+    }
+
+    onSelectChange(supplierId)
+  }
+
   function handlePageChange(page: number) {
     setPage(page)
   }
@@ -69,6 +98,7 @@ export function useSupplierSelect(
 
   console.log(suppliersData)
   console.log(company?.id)
+
   const suppliers = suppliersData ? suppliersData.items.map(Supplier.create) : []
   const itemsCount = suppliersData ? suppliersData.itemsCount : 0
 
@@ -77,7 +107,7 @@ export function useSupplierSelect(
     totalPages: Math.ceil(itemsCount / 10),
     page,
     suppliers,
-    selectedSupplierName: supplierData?.name,
+    selectedSupplierName,
     expandedItems,
     handleSupplierIdChange,
     handleAccordionClick,

diff --git a/apps/web/src/ui/components/pages/products/update-product-form/index.tsx b/apps/web/src/ui/components/pages/products/update-product-form/index.tsx
@@ -94,7 +94,8 @@ export const UpdateProductForm = ({
           control={control}
           render={({ field: { onChange } }) => (
             <div className='w-full '>
-              <SupplierSelect onSelectChange={onChange} className='w-full' />
+              <SupplierSelect
+              defaultSupplierId={product.supplierId ?? undefined} onSelectChange={onChange} className='w-full' />
               {errors.supplierId && (
                 <p className='text-red-600 text-sm'>{errors.supplierId?.message}</p>
               )}