Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

maryia/DTRA-350/feat: handle displayed positions locally in TogglePositionsMobile #9610

Merged
merged 5 commits into from
Aug 15, 2023
Merged

maryia/DTRA-350/feat: handle displayed positions locally in TogglePositionsMobile #9610

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ad3b6d
feat: handle displayed positions locally in mobile TogglePositions
maryia-deriv Aug 7, 2023
a13feb7
test: added a test
maryia-deriv Aug 7, 2023
ff632ff
chore: refactoring
maryia-deriv Aug 7, 2023
6992d01
Merge branch master of github.com:binary-com/deriv-app into maryia/fi…
maryia-deriv Aug 10, 2023
78fb80f
test: fix tests after conflict resolution
maryia-deriv Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/stores/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,9 +448,7 @@ type TUiStore = {
is_link_expired_modal_visible: boolean;
is_mobile: boolean;
is_positions_drawer_on: boolean;
sub_section_index: number;
togglePositionsDrawer: () => void;
toggleShouldShowRealAccountsList: (value: boolean) => void;
is_services_error_visible: boolean;
openRealAccountSignup: (
value: 'maltainvest' | 'svg' | 'add_crypto' | 'choose' | 'add_fiat' | 'set_currency' | 'manage'
) => void;
Expand All @@ -468,6 +466,7 @@ type TUiStore = {
toggleCashier: () => void;
toggleLanguageSettingsModal: () => void;
toggleLinkExpiredModal: (state_change: boolean) => void;
togglePositionsDrawer: () => void;
toggleReadyToDepositModal: () => void;
toggleSetCurrencyModal: () => void;
toggleShouldShowRealAccountsList: (value: boolean) => void;
Expand Down
27 changes: 9 additions & 18 deletions packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,36 +22,27 @@ const TogglePositionsMobile = observer(
onClickCancel,
toggleUnsupportedContractModal,
}) => {
const { symbol, contract_type: trade_contract_type } = useTraderStore();
const { togglePositionsDrawer, is_positions_drawer_on } = useStore().ui;
const [hidden_positions_ids, setHiddenPositionsIds] = React.useState([]);
const filtered_positions = all_positions
.filter(
p =>
p.contract_info &&
symbol === p.contract_info.underlying &&
filterByContractType(p.contract_info, trade_contract_type) &&
hidden_positions_ids.every(hidden_position_id => hidden_position_id !== p.contract_info.contract_id)
const displayed_positions = filtered_positions
.filter(p =>
hidden_positions_ids.every(hidden_position_id => hidden_position_id !== p.contract_info.contract_id)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After Turbos release, we get filtered_positions from props, that's why here I only need to filter out (exclude) all positions with is_sold: 1 that should be hidden. Also, I renamed my filtered_positions to displayed_positions, and introduced closed_positions_ids variable for better readability. The functionality works the same way after this refactoring.

)
.slice(0, 5);
const closed_positions_ids = displayed_positions
.filter(position => position.contract_info?.is_sold)
.map(p => p.contract_info.contract_id);

const closeModal = () => {
setHiddenPositionsIds([
...new Set([
...hidden_positions_ids,
...filtered_positions
.filter(position => position.contract_info?.is_sold)
.map(p => p.contract_info.contract_id),
]),
]);
setHiddenPositionsIds([...new Set([...hidden_positions_ids, ...closed_positions_ids])]);
togglePositionsDrawer();
};

// Show only 5 most recent open contracts
const body_content = (
<React.Fragment>
<TransitionGroup component='div'>
{filtered_positions.map(portfolio_position => (
{displayed_positions.map(portfolio_position => (
<CSSTransition
appear
key={portfolio_position.id}
Expand Down Expand Up @@ -108,7 +99,7 @@ const TogglePositionsMobile = observer(
</div>
</div>
<div className='positions-modal__body'>
{is_empty || !filtered_positions.length || error ? (
{is_empty || !displayed_positions.length || error ? (
<EmptyPortfolioMessage error={error} />
) : (
body_content
Expand Down
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.