refactor(condo): DOMA-5597 refactored components with Select and Radi…

…o from @open-condo/ui
open-condo-software · May 5, 2023 · e8c6ec8 · e8c6ec8
1 parent 5eccde4
commit e8c6ec8
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 50 deletions.
diff --git a/apps/condo/domains/banking/components/BankAccountReport.tsx b/apps/condo/domains/banking/components/BankAccountReport.tsx
@@ -10,7 +10,7 @@ import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react'
 
 import { useAuth } from '@open-condo/next/auth'
 import { useIntl } from '@open-condo/next/intl'
-import { Tabs, Card, Typography, Select, Option, Space } from '@open-condo/ui'
+import { Tabs, Card, Typography, Select, SelectProps, Space } from '@open-condo/ui'
 import type { TypographyTitleProps } from '@open-condo/ui'
 import type { CardProps } from '@open-condo/ui'
 
@@ -244,15 +244,12 @@ const BankAccountReportContent: IBankReportContent = ({ bankAccountReports = [],
     const tabsItems = useMemo(() => categoryGroups
         .map(reportData => ({ label: intl.formatMessage({ id: `banking.category.${reportData.name}.name` }), key: reportData.id }))
     , [categoryGroups, intl])
-    const reportOptionItems = useMemo(() => bankAccountReports
-        .map((bankAccountReport) => (
-            <Option
-                key={bankAccountReport.id}
-                value={bankAccountReport.period}
-            >
-                {dayjs(bankAccountReport.period).format('MMMM YYYY')}
-            </Option>
-        )), [bankAccountReports])
+    const reportOptionItems: SelectProps['options'] = useMemo(() => bankAccountReports
+        .map((bankAccountReport) => ({
+            label: dayjs(bankAccountReport.period).format('MMMM YYYY'),
+            key: bankAccountReport.id,
+            value: bankAccountReport.period,
+        })), [bankAccountReports])
     const chartLegendItems = useMemo(() => {
         return chartData.map((item, index) => {
             const itemName = intl.formatMessage({ id: `banking.costItem.${item.name}.name` })
@@ -310,9 +307,12 @@ const BankAccountReportContent: IBankReportContent = ({ bankAccountReports = [],
     return (
         <Row gutter={BANK_ACCOUNT_REPORT_ROW_GUTTER}>
             <Col span={24}>
-                <Select placeholder={ChooseReportTitle} value={selectedPeriod} onChange={onReportPeriodSelectChange}>
-                    {reportOptionItems}
-                </Select>
+                <Select
+                    placeholder={ChooseReportTitle}
+                    value={selectedPeriod}
+                    onChange={onReportPeriodSelectChange}
+                    options={reportOptionItems}
+                />
             </Col>
             <Col span={24}>
                 <Row gutter={BANK_ACCOUNT_REPORT_ROW_GUTTER}>

diff --git a/apps/condo/domains/banking/components/BankAccountVisibilitySelect.tsx b/apps/condo/domains/banking/components/BankAccountVisibilitySelect.tsx
@@ -7,7 +7,7 @@ import { useRouter } from 'next/router'
 import React, { useCallback, useState, useEffect } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
-import { Select, Option, Typography } from '@open-condo/ui'
+import { Select, Typography } from '@open-condo/ui'
 
 import { BankAccountReport } from '@condo/domains/banking/utils/clientSchema'
 import { runMutation } from '@condo/domains/common/utils/mutations.utils'
@@ -84,18 +84,21 @@ const BankAccountVisibilitySelect: IBankAccountVisibilitySelect = ({ bankAccount
             onChange={handleChange}
             disabled={isUpdating}
             type={isReportVisible ? 'success' : 'danger'}
-        >
-            <Option value={BankAccountVisibility.visible} hidden={isReportVisible}>
-                <Typography.Text type='success'>
-                    {ReportVisibleTitle}
-                </Typography.Text>
-            </Option>
-            <Option value={BankAccountVisibility.hidden} hidden={!isReportVisible}>
-                <Typography.Text type='danger'>
-                    {ReportHiddenTitle}
-                </Typography.Text>
-            </Option>
-        </Select>
+            options={[
+                {
+                    value: BankAccountVisibility.visible,
+                    label: ReportVisibleTitle,
+                    textType: 'success',
+                    hidden: !!isReportVisible,
+                },
+                {
+                    value: BankAccountVisibility.hidden,
+                    label: ReportHiddenTitle,
+                    textType: 'danger',
+                    hidden: !isReportVisible,
+                },
+            ]}
+        />
     )
 }
 

diff --git a/apps/condo/domains/banking/components/BankCostItemContext.tsx b/apps/condo/domains/banking/components/BankCostItemContext.tsx
@@ -3,7 +3,7 @@ import groupBy from 'lodash/groupBy'
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
 
 import { useIntl } from '@open-condo/next/intl'
-import type { RadioGroupProps } from '@open-condo/ui'
+import type { ItemGroupProps } from '@open-condo/ui'
 
 import { BankCostItem } from '@condo/domains/banking/utils/clientSchema'
 
@@ -15,7 +15,7 @@ import type {
 
 interface IBankCostItemContext {
     bankCostItems: Array<BankCostItemType>
-    bankCostItemGroups: RadioGroupProps['groups']
+    bankCostItemGroups: ItemGroupProps[]
     incomeCostItems: Array<BankCostItemType>
     loading: boolean
     selectedItem: BankTransactionType | BankContractorAccountType | null
@@ -38,7 +38,7 @@ export const BankCostItemProvider: React.FC = ({ children }) => {
     const intl = useIntl()
     const { objs: bankCostItems, loading } = BankCostItem.useObjects({}, { fetchPolicy: 'cache-first' })
 
-    const bankCostItemGroups = useRef<RadioGroupProps['groups']>([])
+    const bankCostItemGroups = useRef<ItemGroupProps[]>([])
     const incomeCostItems = useRef<Array<BankCostItemType>>([])
     const [selectedItem, setSelectedItem] = useState<BankTransactionType | BankContractorAccountType | null>(null)
 

diff --git a/apps/condo/domains/banking/components/SbbolImportModal.tsx b/apps/condo/domains/banking/components/SbbolImportModal.tsx
@@ -11,7 +11,8 @@ import { PlusCircle, XCircle } from '@open-condo/icons'
 import { useMutation } from '@open-condo/next/apollo'
 import { useIntl } from '@open-condo/next/intl'
 import { useOrganization } from '@open-condo/next/organization'
-import { Modal, Select, Option, Alert, Button, Typography, Space } from '@open-condo/ui'
+import { Modal, Select, Alert, Button, Typography, Space } from '@open-condo/ui'
+import type { SelectProps } from '@open-condo/ui'
 
 import { BankAccount as BankAccountGQL } from '@condo/domains/banking/gql'
 import { BankAccount } from '@condo/domains/banking/utils/clientSchema'
@@ -154,19 +155,19 @@ export const SbbolImportModal: ISbbolImportModal = ({ propertyId, onComplete })
             </Button>
         )
     }, [hasBankAccounts, isValid, updateActionLoading, SaveTitle, handleSubmit])
-    const bankAccountSelectOptions = useMemo(() => {
-        return bankAccounts.map(bankAccount => (
-            <Option key={bankAccount.id} value={bankAccount.id}>
-                {bankAccount.number}
-            </Option>
-        ))
+    const bankAccountSelectOptions: SelectProps['options'] = useMemo(() => {
+        return bankAccounts.map(bankAccount => ({
+            key: bankAccount.id,
+            value: bankAccount.id,
+            label: get(bankAccount, 'number', ''),
+        }))
     }, [bankAccounts])
-    const propertySelectOptions = useMemo(() => {
-        return properties.map(property => (
-            <Option key={property.id} value={property.id}>
-                {property.address}
-            </Option>
-        ))
+    const propertySelectOptions: SelectProps['options'] = useMemo(() => {
+        return properties.map(property => ({
+            key: property.id,
+            value: property.id,
+            label: get(property, 'address', ''),
+        }))
     }, [properties])
 
     const isLoading = bankAccountsLoading || propertiesLoading
@@ -215,9 +216,8 @@ export const SbbolImportModal: ISbbolImportModal = ({ propertyId, onComplete })
                                                                 <Select
                                                                     placeholder={PropertyPlaceholder}
                                                                     disabled={bankAccounts.length === 1 || index === 0}
-                                                                >
-                                                                    {propertySelectOptions}
-                                                                </Select>
+                                                                    options={propertySelectOptions}
+                                                                />
                                                             </Form.Item>
                                                         </Col>
                                                         <Col span={10}>
@@ -231,9 +231,8 @@ export const SbbolImportModal: ISbbolImportModal = ({ propertyId, onComplete })
                                                                 <Select
                                                                     placeholder={BankAccountPlaceholder}
                                                                     disabled={bankAccounts.length === 1}
-                                                                >
-                                                                    {bankAccountSelectOptions}
-                                                                </Select>
+                                                                    options={bankAccountSelectOptions}
+                                                                />
                                                             </Form.Item>
                                                         </Col>
                                                     </>

diff --git a/apps/condo/domains/banking/hooks/useCategoryModal.tsx b/apps/condo/domains/banking/hooks/useCategoryModal.tsx
@@ -186,8 +186,14 @@ export const useCategoryModal: IUseCategoryModal = ({
                             ) : (
                                 <RadioGroup
                                     onChange={onGroupChange}
-                                    groups={bankCostItemGroups}
-                                />
+                                >
+                                    {bankCostItemGroups.map((group, index) => (
+                                        <RadioGroup.ItemGroup
+                                            key={`${group.name}-${index}`}
+                                            {...group}
+                                        />
+                                    ))}
+                                </RadioGroup>
                             )}
                         </Space>
                     </Col>