feat: resolve props drilling

Author: antofo

src/components/layout/containers/AttributeContainer.tsx

@@ -92,40 +92,42 @@ export const AttributeContainer = <
           >
             <Stack>
               <Typography fontWeight={600}>{attribute.name}</Typography>
-              <Stack direction={'row'} spacing={2} alignItems={'center'}>
-                {attribute.dailyCallsPerConsumer && (
-                  <Stack direction={'row'} spacing={1}>
-                    <Typography
-                      sx={{
-                        fontSize: 16,
-                      }}
-                    >
-                      {t('thresholdLabel')}
-                    </Typography>
-                    <Typography
-                      sx={{
-                        fontSize: 16,
-                        fontWeight: 700,
-                      }}
-                    >
-                      {attribute.dailyCallsPerConsumer}
-                    </Typography>
-                  </Stack>
-                )}
-                <Button
-                  sx={{
-                    justifyContent: 'start',
-                    px: 1,
-                    width: 'fit-content',
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onCustomizeThreshold?.()
-                  }}
-                >
-                  {attribute.dailyCallsPerConsumer ? t('changeBtn') : t('customizeBtn')}
-                </Button>
-              </Stack>
+              {onCustomizeThreshold && (
+                <Stack direction={'row'} spacing={2} alignItems={'center'}>
+                  {attribute.dailyCallsPerConsumer && (
+                    <Stack direction={'row'} spacing={1}>
+                      <Typography
+                        sx={{
+                          fontSize: 16,
+                        }}
+                      >
+                        {t('thresholdLabel')}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          fontSize: 16,
+                          fontWeight: 700,
+                        }}
+                      >
+                        {attribute.dailyCallsPerConsumer}
+                      </Typography>
+                    </Stack>
+                  )}
+                  <Button
+                    sx={{
+                      justifyContent: 'start',
+                      px: 1,
+                      width: 'fit-content',
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onCustomizeThreshold()
+                    }}
+                  >
+                    {attribute.dailyCallsPerConsumer ? t('changeBtn') : t('customizeBtn')}
+                  </Button>
+                </Stack>
+              )}
             </Stack>
           </AccordionSummary>
           <AccordionDetails>

src/components/shared/AddAttributesToForm/AddAttributesToForm.tsx

@@ -6,25 +6,18 @@ import { SectionContainer } from '@/components/layout/containers'
 import { Box, Button, Link, Stack } from '@mui/material'
 import { attributesHelpLink } from '@/config/constants'
 import { AttributeGroup } from './AttributeGroup'
-import { type DescriptorAttribute } from '@/api/api.generatedTypes'
 import { type CreateStepThresholdsFormValues } from '@/pages/ProviderEServiceCreatePage/components/EServiceCreateStepThresholds'
 
 export type AddAttributesToFormProps = {
   attributeKey: AttributeKey
   readOnly: boolean
   openCreateAttributeDrawer?: VoidFunction
-  openCustomizeThresholdDrawer?: (
-    attribute: DescriptorAttribute,
-    attributeKey: AttributeKey,
-    attributeGroupIndex: number
-  ) => void
 }
 
 export const AddAttributesToForm: React.FC<AddAttributesToFormProps> = ({
   attributeKey,
   readOnly,
   openCreateAttributeDrawer,
-  openCustomizeThresholdDrawer,
 }) => {
   const { t } = useTranslation('eservice', { keyPrefix: `create.step3` })
   const { t: tAttribute } = useTranslation('attribute')
@@ -77,7 +70,6 @@ export const AddAttributesToForm: React.FC<AddAttributesToFormProps> = ({
               readOnly={readOnly}
               onRemoveAttributesGroup={handleRemoveAttributesGroup}
               onRemoveAttributeFromGroup={handleRemoveAttributeFromGroup}
-              onOpenCustomizeThresholdDrawer={openCustomizeThresholdDrawer}
             />
           ))}
         </Stack>

src/components/shared/AddAttributesToForm/AttributeGroup.tsx

@@ -9,6 +9,7 @@ import { AttributeAutocomplete } from '../AttributeAutocomplete'
 import type { DescriptorAttribute } from '@/api/api.generatedTypes'
 import { useFormContext } from 'react-hook-form'
 import type { CreateStepAttributesFormValues } from '@/pages/ProviderEServiceCreatePage/components/EServiceCreateStepAttributes'
+import { useCustomizeThresholdDrawer } from '../CustomizeThresholdDrawer'
 
 export type AttributeGroupProps = {
   group: Array<DescriptorAttribute>
@@ -17,11 +18,6 @@ export type AttributeGroupProps = {
   readOnly: boolean
   onRemoveAttributesGroup: (groupIndex: number) => void
   onRemoveAttributeFromGroup: (attributeId: string, groupIndex: number) => void
-  onOpenCustomizeThresholdDrawer?: (
-    attribute: DescriptorAttribute,
-    attributeKey: AttributeKey,
-    attributeGroupIndex: number
-  ) => void
 }
 
 export const AttributeGroup: React.FC<AttributeGroupProps> = ({
@@ -31,10 +27,10 @@ export const AttributeGroup: React.FC<AttributeGroupProps> = ({
   readOnly,
   onRemoveAttributesGroup,
   onRemoveAttributeFromGroup,
-  onOpenCustomizeThresholdDrawer,
 }) => {
   const { t } = useTranslation('attribute', { keyPrefix: 'group' })
   const [isAttributeAutocompleteShown, setIsAttributeAutocompleteShown] = React.useState(false)
+  const { open } = useCustomizeThresholdDrawer()
 
   const handleDeleteAttributesGroup = () => {
     onRemoveAttributesGroup(groupIndex)
@@ -69,8 +65,8 @@ export const AttributeGroup: React.FC<AttributeGroupProps> = ({
                 onRemove={
                   !readOnly ? handleDeleteAttributeFromGroup.bind(null, attribute.id) : undefined
                 }
-                onCustomizeThreshold={() =>
-                  onOpenCustomizeThresholdDrawer?.(attribute, attributeKey, groupIndex)
+                onCustomizeThreshold={
+                  attributeKey === 'certified' ? () => open(attribute, groupIndex) : undefined
                 }
               />
             </Box>

src/components/shared/CustomizeThresholdDrawer.tsx

@@ -5,33 +5,39 @@ import { Alert, Stack, Button, Typography } from '@mui/material'
 import { RHFTextField } from './react-hook-form-inputs'
 import { useTranslation } from 'react-i18next'
 import { type DescriptorAttribute } from '@/api/api.generatedTypes'
-import { type AttributeKey } from '@/types/attribute.types'
 import { WarningAmber } from '@mui/icons-material'
+import { create } from 'zustand'
 
 export type CustomizeThresholdDrawerProps = {
-  isOpen: boolean
-  onClose: VoidFunction
-  attribute?: DescriptorAttribute
-  attributeKey?: AttributeKey
-  attributeGroupIndex?: number
   dailyCallsPerConsumer?: number
   dailyCallsTotal?: number
   onSubmit: (threshold: number) => void
 }
 
+type CustomizeThresholdDrawerStore = {
+  isOpen: boolean
+  open: (attribute: DescriptorAttribute, attributeGroupIndex: number) => void
+  close: VoidFunction
+  attribute?: DescriptorAttribute
+  attributeGroupIndex?: number
+}
+
+export const useCustomizeThresholdDrawer = create<CustomizeThresholdDrawerStore>((set) => ({
+  isOpen: false,
+  open: (attribute, attributeGroupIndex) => set({ attribute, attributeGroupIndex, isOpen: true }),
+  close: () => set({ isOpen: false }),
+}))
+
 type CustomizeThresholdFormValues = {
   threshold: number
 }
 
 export const CustomizeThresholdDrawer: React.FC<CustomizeThresholdDrawerProps> = ({
-  isOpen,
-  onClose,
   onSubmit,
-  attribute,
-  attributeKey,
   dailyCallsPerConsumer,
   dailyCallsTotal,
 }) => {
+  const { isOpen, close, attribute } = useCustomizeThresholdDrawer()
   const { t } = useTranslation('eservice', {
     keyPrefix: 'create.step2.attributes.customizeThresholdDrawer',
   })
@@ -57,9 +63,9 @@ export const CustomizeThresholdDrawer: React.FC<CustomizeThresholdDrawerProps> =
       <Drawer
         isOpen={isOpen}
         title={t('title')}
-        subtitle={t('subtitle', { type: attributeKey, name: attribute?.name })}
+        subtitle={t('subtitle', { name: attribute?.name })}
         onTransitionExited={formMethods.reset}
-        onClose={onClose}
+        onClose={close}
       >
         <Stack
           justifyContent={'space-between'}

src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepThresholds/EServiceCreateStepThresholds.tsx

@@ -27,7 +27,7 @@ import { compareObjects } from '@/utils/common.utils'
 import { remapDescriptorAttributesToDescriptorAttributesSeed } from '@/utils/attribute.utils'
 import {
   CustomizeThresholdDrawer,
-  type CustomizeThresholdDrawerProps,
+  useCustomizeThresholdDrawer,
 } from '@/components/shared/CustomizeThresholdDrawer'
 
 export type CreateStepThresholdsFormValues = {
@@ -53,6 +53,12 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
     },
   })
 
+  const {
+    attribute,
+    attributeGroupIndex,
+    close: closeCustomizeThresholdDrawer,
+  } = useCustomizeThresholdDrawer()
+
   const isEServiceCreatedFromTemplate = Boolean(descriptor?.templateRef?.templateVersionId)
 
   const [createAttributeCreateDrawerState, setCreateAttributeCreateDrawerState] = React.useState<{
@@ -63,12 +69,6 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
     isOpen: false,
   })
 
-  const [customizeThresholdDrawerState, setCustomizeThresholdDrawerState] = React.useState<
-    Omit<CustomizeThresholdDrawerProps, 'onClose' | 'onSubmit'>
-  >({
-    isOpen: false,
-  })
-
   const handleCloseAttributeCreateDrawer = () => {
     setCreateAttributeCreateDrawerState((prevState) => ({ ...prevState, isOpen: false }))
   }
@@ -78,34 +78,21 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
       setCreateAttributeCreateDrawerState({ attributeKey, isOpen: true })
     }
 
-  const handleCloseCustomizeThresholdDrawer = () => {
-    setCustomizeThresholdDrawerState({ isOpen: false })
-  }
-
   const handleSubmitCustomizeThresholdDrawer = (threshold: number) => {
-    const { attribute, attributeKey, attributeGroupIndex } = customizeThresholdDrawerState
-    if (!attribute || !attributeKey || attributeGroupIndex === undefined) return
+    if (!attribute || attributeGroupIndex === undefined) return
 
     const attributes = formMethods.getValues('attributes')
-    const groups = attributes[attributeKey as keyof typeof attributes]
+    const groups = attributes['certified']
     const group = groups[attributeGroupIndex]
 
     groups[attributeGroupIndex] = group.map((att) =>
       att.id === attribute.id ? { ...att, dailyCallsPerConsumer: threshold } : att
     )
 
-    formMethods.setValue(`attributes.${attributeKey as keyof typeof attributes}`, groups, {
+    formMethods.setValue(`attributes.certified`, groups, {
       shouldValidate: false,
     })
-    setCustomizeThresholdDrawerState({ isOpen: false })
-  }
-
-  const handleOpenCustomizeThresholdDrawer = (
-    attribute: DescriptorAttribute,
-    attributeKey: AttributeKey,
-    attributeGroupIndex: number
-  ) => {
-    setCustomizeThresholdDrawerState({ isOpen: true, attribute, attributeKey, attributeGroupIndex })
+    closeCustomizeThresholdDrawer()
   }
 
   const dailyCallsPerConsumer = formMethods.watch('dailyCallsPerConsumer')
@@ -205,7 +192,6 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
                 <AddAttributesToForm
                   attributeKey="certified"
                   readOnly={isEServiceCreatedFromTemplate}
-                  openCustomizeThresholdDrawer={handleOpenCustomizeThresholdDrawer}
                 />
               </TabPanel>
               <TabPanel value="verified">
@@ -242,10 +228,8 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
         onClose={handleCloseAttributeCreateDrawer}
       />
       <CustomizeThresholdDrawer
-        {...customizeThresholdDrawerState}
         dailyCallsTotal={dailyCallsTotal}
         dailyCallsPerConsumer={dailyCallsPerConsumer}
-        onClose={handleCloseCustomizeThresholdDrawer}
         onSubmit={handleSubmitCustomizeThresholdDrawer}
       />
     </>

src/static/locales/en/eservice.json

@@ -159,7 +159,7 @@
         },
         "customizeThresholdDrawer": {
           "title": "Customize threshold",
-          "subtitle": "Set a custom threshold for the attribute {{type}} {{name}}.",
+          "subtitle": "Set a custom threshold for the certified attribute {{name}}.",
           "submitBtnLabel": "Customize threshold",
           "field": {
             "placeholder": "API calls/day per consumer",

src/static/locales/it/eservice.json

@@ -159,7 +159,7 @@
         },
         "customizeThresholdDrawer": {
           "title": "Personalizza soglia",
-          "subtitle": "Imposta una soglia personalizzata per l’attributo {{type}} {{name}}.",
+          "subtitle": "Imposta una soglia personalizzata per l’attributo certificato {{name}}.",
           "submitBtnLabel": "Personalizza soglia",
           "field": {
             "placeholder": "Chiamate API/giorno per fruitore",