chore: extract common props

deriv-com · Nov 13, 2024 · edfb092 · edfb092
1 parent 6beea71
commit edfb092
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 52 deletions.
diff --git a/packages/trader/src/AppV2/Components/Guide/guide-description-modal.tsx b/packages/trader/src/AppV2/Components/Guide/guide-description-modal.tsx
@@ -38,6 +38,17 @@ const GuideDescriptionModal = ({
         clickAndKeyEventHandler(() => setIsVideoPlayerOpened(!is_video_player_opened), e);
     };
 
+    const guide_content_props = {
+        contract_list,
+        onChipSelect,
+        onTermClick,
+        selected_contract_type,
+        show_guide_for_selected_contract,
+        show_description_in_a_modal,
+        toggleVideoPlayer,
+        video_src,
+    };
+
     React.useEffect(() => {
         if (modal_ref.current) is_video_player_opened ? modal_ref.current.showModal() : modal_ref.current.close();
     }, [is_video_player_opened]);
@@ -55,16 +66,7 @@ const GuideDescriptionModal = ({
                                     <Localize i18n_default_text='Trade types' />
                                 )}
                             </Heading.H4>
-                            <GuideContent
-                                contract_list={contract_list}
-                                onChipSelect={onChipSelect}
-                                onTermClick={onTermClick}
-                                selected_contract_type={selected_contract_type}
-                                show_guide_for_selected_contract={show_guide_for_selected_contract}
-                                show_description_in_a_modal={show_description_in_a_modal}
-                                toggleVideoPlayer={toggleVideoPlayer}
-                                video_src={video_src}
-                            />
+                            <GuideContent {...guide_content_props} />
                         </ActionSheet.Content>
                         <ActionSheet.Footer
                             alignment='vertical'
@@ -78,16 +80,7 @@ const GuideDescriptionModal = ({
                 </ActionSheet.Root>
             ) : (
                 <div className='guide__wrapper__content--separate'>
-                    <GuideContent
-                        contract_list={contract_list}
-                        onChipSelect={onChipSelect}
-                        onTermClick={onTermClick}
-                        selected_contract_type={selected_contract_type}
-                        show_guide_for_selected_contract={show_guide_for_selected_contract}
-                        show_description_in_a_modal={show_description_in_a_modal}
-                        toggleVideoPlayer={toggleVideoPlayer}
-                        video_src={video_src}
-                    />
+                    <GuideContent {...guide_content_props} />
                 </div>
             )}
             {is_video_player_opened && (

diff --git a/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx b/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
@@ -226,27 +226,26 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types, is_dark_mod
     const should_show_view_all = trade_type_chips.length >= 2 || getItems(other_trade_types).length > 0;
     const show_trade_type_list_divider = !!other_trade_types[0]?.items?.length;
     const show_editing_divider = trade_types_array.length !== pinned_trade_types[0]?.items?.length;
+    const trade_type_content_props = {
+        handleCustomizeTradeTypes,
+        handleRemovePinnedClick,
+        handleOnDrag,
+        handleOnTradeTypeSelect,
+        handleAddPinnedClick,
+        is_editing,
+        is_dark_mode_on,
+        isTradeTypeSelected,
+        savePinnedToLocalStorage,
+        show_trade_type_list_divider,
+        show_editing_divider,
+        other_trade_types,
+        pinned_trade_types,
+    };
 
     const action_sheet_content = [
         {
             id: 1,
-            component: (
-                <TradeTypesContent
-                    handleCustomizeTradeTypes={handleCustomizeTradeTypes}
-                    handleRemovePinnedClick={handleRemovePinnedClick}
-                    handleOnDrag={handleOnDrag}
-                    handleOnTradeTypeSelect={handleOnTradeTypeSelect}
-                    handleAddPinnedClick={handleAddPinnedClick}
-                    is_editing={is_editing}
-                    is_dark_mode_on={is_dark_mode_on}
-                    isTradeTypeSelected={isTradeTypeSelected}
-                    savePinnedToLocalStorage={savePinnedToLocalStorage}
-                    show_trade_type_list_divider={show_trade_type_list_divider}
-                    show_editing_divider={show_editing_divider}
-                    other_trade_types={other_trade_types}
-                    pinned_trade_types={pinned_trade_types}
-                />
-            ),
+            component: <TradeTypesContent {...trade_type_content_props} />,
         },
         {
             id: 2,
@@ -294,21 +293,7 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types, is_dark_mod
                                     </div>
                                 }
                             />
-                            <TradeTypesContent
-                                handleCustomizeTradeTypes={handleCustomizeTradeTypes}
-                                handleRemovePinnedClick={handleRemovePinnedClick}
-                                handleOnDrag={handleOnDrag}
-                                handleOnTradeTypeSelect={handleOnTradeTypeSelect}
-                                handleAddPinnedClick={handleAddPinnedClick}
-                                is_editing={is_editing}
-                                is_dark_mode_on={is_dark_mode_on}
-                                isTradeTypeSelected={isTradeTypeSelected}
-                                savePinnedToLocalStorage={savePinnedToLocalStorage}
-                                show_trade_type_list_divider={show_trade_type_list_divider}
-                                show_editing_divider={show_editing_divider}
-                                other_trade_types={other_trade_types}
-                                pinned_trade_types={pinned_trade_types}
-                            />
+                            <TradeTypesContent {...trade_type_content_props} />
                         </React.Fragment>
                     ) : (
                         <Carousel