way to save memo and don't use useEffect

open-schools · Jul 1, 2024 · 8b76201 · 8b76201
1 parent 4b60ecd
commit 8b76201
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/apps/schools/domains/common/components/bubbleFilter/index.tsx b/apps/schools/domains/common/components/bubbleFilter/index.tsx
@@ -4,12 +4,13 @@ import styles from './styles/styles.module.scss'
 import { BubbleFilterProps, BubbleFilterListItem } from '@domains/common/components/bubbleFilter/interface'
 import { CloseOutlined } from '@ant-design/icons'
 
-export const BubbleFilter: React.FC<BubbleFilterProps> = ({ text, items }) => {
-    const listItems = items.map((item: BubbleFilterListItem) =>
-        item.count && item.count > 0 ? (
+export const BubbleFilter: React.FC<BubbleFilterProps> = React.memo(({ text, items, statuses }) => {
+    const listItems = items.map((item: BubbleFilterListItem) => {
+        const isSelected = statuses?.includes(item.key) ?? false
+        return item.count && item.count > 0 ? (
             <Row
-                className={item.isSelected ? styles.bubbleContainerSelected : styles.bubbleContainer}
-                onClick={item.isSelected ? () => {} : item.onClick}
+                className={isSelected ? styles.bubbleContainerSelected : styles.bubbleContainer}
+                onClick={isSelected ? () => {} : item.onClick}
                 style={{ backgroundColor: item.isSelected ? item.color : '' }}
                 key={item.key}
             >
@@ -21,13 +22,13 @@ export const BubbleFilter: React.FC<BubbleFilterProps> = ({ text, items }) => {
                 <div className={styles.bubbleText}>{item.text}</div>
                 {item.isSelected && <CloseOutlined onClick={item.onExit} className={styles.closeIcon} />}
             </Row>
-        ) : null,
-    )
+        ) : null
+    })
 
     return (
         <Row className={styles.container}>
             {text && <Typography.Text className={styles.text}>{text}</Typography.Text>}
             {listItems}
         </Row>
     )
-}
+})
diff --git a/apps/schools/domains/common/components/bubbleFilter/interface.ts b/apps/schools/domains/common/components/bubbleFilter/interface.ts
@@ -11,4 +11,5 @@ export interface BubbleFilterListItem {
 export interface BubbleFilterProps {
     items: BubbleFilterListItem[]
     text?: string
+    statuses?: string[] | null
 }
diff --git a/apps/schools/domains/query/components/queryList/index.tsx b/apps/schools/domains/query/components/queryList/index.tsx
@@ -113,7 +113,11 @@ export function QueryList() {
                 <Typography.Title level={1}>Заявки</Typography.Title>
             </div>
             <SearchInput onSearchChange={handleSearchChange} />
-            <BubbleFilter items={Object.values(bubbleFilterItems)} text={`${countAllQueries} заявок`} />
+            <BubbleFilter
+                text={`${countAllQueries} заявок`}
+                items={Object.values(bubbleFilterItems)}
+                statuses={statuses}
+            />
             <Table<RowType, TableType>
                 loading={isTableLoading}
                 customType={'tableWithoutSearch'}

diff --git a/apps/schools/domains/ticket/components/ticketList/index.tsx b/apps/schools/domains/ticket/components/ticketList/index.tsx
@@ -128,7 +128,7 @@ export function TicketList() {
                 <Typography.Title level={1}>Обращения</Typography.Title>
             </div>
             <SearchInput onSearchChange={handleInputChange} />
-            <BubbleFilter items={Object.values(bubbleFilterItems)} text={`Статусы обращений`} />
+            <BubbleFilter items={Object.values(bubbleFilterItems)} text={`Статусы обращений`} statuses={statuses} />
             <div className={styles.tableTicketList}>
                 <Table<RowType, TableType>
                     loading={isTableLoading}