refactor: remove todo and change some prop based on quill updates (#54)

kate-deriv · May 21, 2024 · 2e7c763 · 2e7c763
1 parent 59e9b17
commit 2e7c763
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 54 deletions.
diff --git a/packages/trader/src/AppV2/Components/Filter/filter.scss b/packages/trader/src/AppV2/Components/Filter/filter.scss
@@ -8,37 +8,5 @@
         &__wrapper {
             padding-block: var(--core-spacing-800);
         }
-        // TODO: Temporary css (until quill fix)
-        .quill-checkbox__wrapper {
-            order: 3;
-        }
-    }
-}
-
-// TODO: Temporary css (until quill fix)
-.quill-action-sheet {
-    &--root {
-        width: 100%;
-    }
-
-    &--handle-bar--line {
-        width: var(--core-size-2400);
-    }
-
-    &--header > p,
-    &--title--icon {
-        display: none;
-    }
-
-    &--header {
-        padding-block: var(--core-spacing-400);
-    }
-
-    &--title {
-        height: var(--core-size-2400);
-    }
-
-    &--footer {
-        padding-block: var(--core-spacing-800);
     }
 }
diff --git a/packages/trader/src/AppV2/Components/Filter/filter.tsx b/packages/trader/src/AppV2/Components/Filter/filter.tsx
@@ -5,6 +5,7 @@ import { Localize } from '@deriv/translations';
 
 type TFilter = {
     setContractTypeFilter: React.Dispatch<React.SetStateAction<string[]>>;
+    contractTypeFilter: string[] | [];
 };
 
 // TODO: Replace mockAvailableContractsList with real data when BE will be ready (send list of all available contracts based on account)
@@ -21,12 +22,13 @@ const mockAvailableContractsList = [
     { tradeType: <Localize i18n_default_text='Over/Under' />, id: 'Over/Under' },
 ];
 
-const Filter = ({ setContractTypeFilter }: TFilter) => {
+const Filter = ({ setContractTypeFilter, contractTypeFilter }: TFilter) => {
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-    const [changedOptions, setChangedOptions] = React.useState<string[]>([]);
+    const [changedOptions, setChangedOptions] = React.useState<string[]>(contractTypeFilter);
 
-    const onDropdownClick = () => {
-        setIsDropdownOpen(!isDropdownOpen);
+    const onActionSheetClose = () => {
+        setIsDropdownOpen(false);
+        setChangedOptions(contractTypeFilter);
     };
 
     const onChange = (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => {
@@ -39,14 +41,6 @@ const Filter = ({ setContractTypeFilter }: TFilter) => {
         }
     };
 
-    const onApply = () => {
-        setContractTypeFilter(changedOptions);
-    };
-    const onClearAll = () => {
-        setContractTypeFilter([]);
-        setChangedOptions([]);
-    };
-
     const chipLabelFormatting = () => {
         const arrayLength = changedOptions.length;
         if (!arrayLength) return <Localize i18n_default_text='All trade types' />;
@@ -56,18 +50,17 @@ const Filter = ({ setContractTypeFilter }: TFilter) => {
     };
 
     return (
-        <>
+        <React.Fragment>
             <Chip
                 label={chipLabelFormatting()}
                 dropdown
                 isDropdownOpen={isDropdownOpen}
-                onClick={onDropdownClick}
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                 selected={!!changedOptions.length}
             />
-            <ActionSheet.Root isOpen={isDropdownOpen} onClose={() => setIsDropdownOpen(false)} position='left'>
+            <ActionSheet.Root isOpen={isDropdownOpen} onClose={onActionSheetClose} position='left'>
                 <ActionSheet.Portal>
-                    {/* TODO: Add a PR to Quill with changing type of title (need ReactNode)*/}
-                    <ActionSheet.Header title='Filter by trade types' />
+                    <ActionSheet.Header title={<Localize i18n_default_text='Filter by trade types' />} />
                     <ActionSheet.Content className='filter__item__wrapper'>
                         {mockAvailableContractsList.map(({ tradeType, id }) => (
                             <Checkbox
@@ -78,18 +71,19 @@ const Filter = ({ setContractTypeFilter }: TFilter) => {
                                 id={id}
                                 checked={changedOptions.includes(id)}
                                 size='md'
+                                checkboxPosition='right'
                             />
                         ))}
                     </ActionSheet.Content>
-                    {/* TODO: Add PR to Quill in order to switch off (make optional) ability to close action sheet by clicking on btns */}
                     <ActionSheet.Footer
-                        primaryAction={{ content: 'Apply', onAction: onApply }}
-                        secondaryAction={{ content: 'Clear All', onAction: onClearAll }}
+                        primaryAction={{ content: 'Apply', onAction: () => setContractTypeFilter(changedOptions) }}
+                        secondaryAction={{ content: 'Clear All', onAction: () => setChangedOptions([]) }}
                         alignment='vertical'
+                        shouldCloseOnSecondaryButtonClick={false}
                     />
                 </ActionSheet.Portal>
             </ActionSheet.Root>
-        </>
+        </React.Fragment>
     );
 };
 

diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -9,6 +9,7 @@ type TPositionsContentProps = Omit<TEmptyMessageProps, 'noMatchesFound'> & {
     noMatchesFound?: boolean;
     positions?: TPortfolioPosition[];
     setContractTypeFilter: React.Dispatch<React.SetStateAction<string[]>>;
+    contractTypeFilter: string[] | [];
 };
 
 //TODO: Implement contract card
@@ -34,13 +35,14 @@ const PositionsContent = ({
     onRedirectToTrade,
     positions = [],
     setContractTypeFilter,
+    contractTypeFilter,
 }: TPositionsContentProps) => {
     return (
         <div className={`positions-page__${isClosedTab ? 'closed' : 'open'}`}>
             <div className='positions-page__container'>
                 <div className='positions-page__filter__wrapper'>
                     {(!!positions.length || (!positions.length && noMatchesFound)) && (
-                        <Filter setContractTypeFilter={setContractTypeFilter} />
+                        <Filter setContractTypeFilter={setContractTypeFilter} contractTypeFilter={contractTypeFilter} />
                     )}
                 </div>
             </div>

diff --git a/packages/trader/src/AppV2/Containers/Positions/positions.tsx b/packages/trader/src/AppV2/Containers/Positions/positions.tsx
@@ -82,6 +82,7 @@ const Positions = observer(({ onRedirectToTrade }: TPositionsProps) => {
                     onRedirectToTrade={onRedirectToTrade}
                     positions={filteredPositions}
                     setContractTypeFilter={setContractTypeFilter}
+                    contractTypeFilter={contractTypeFilter}
                 />
             ),
         },
@@ -94,6 +95,7 @@ const Positions = observer(({ onRedirectToTrade }: TPositionsProps) => {
                     noMatchesFound={noMatchesFound}
                     positions={filteredPositions}
                     setContractTypeFilter={setContractTypeFilter}
+                    contractTypeFilter={contractTypeFilter}
                 />
             ),
         },