Skip to content

Commit

Permalink
feat: apply suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
@akmal-deriv
akmal-deriv committed Aug 6, 2024
1 parent e5dfddf commit 23b81d1
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 57 deletions.
14 changes: 3 additions & 11 deletions packages/trader/src/AppV2/Components/TradeTypeList/__tests__/trade-type-list-item.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import TradeTypeListItem from '../trade-type-list-item';

describe('TradeTypeListItem', () => {
it('renders with default right icon', () => {
render(<TradeTypeListItem title='Test Title' selected={false} />);
render(<TradeTypeListItem title='Test Title' />);

expect(screen.getByText('Test Title')).toBeInTheDocument();
expect(screen.getByRole('img')).toBeInTheDocument();
Expand All @@ -15,14 +15,7 @@ describe('TradeTypeListItem', () => {
const custom_left_icon = <span>Custom Left Icon</span>;
const custom_right_icon = <span>Custom Right Icon</span>;

render(
<TradeTypeListItem
title='Test Title'
leftIcon={custom_left_icon}
rightIcon={custom_right_icon}
selected={false}
/>
);
render(<TradeTypeListItem title='Test Title' leftIcon={custom_left_icon} rightIcon={custom_right_icon} />);

expect(screen.getByText('Custom Left Icon')).toBeInTheDocument();
expect(screen.getByText('Custom Right Icon')).toBeInTheDocument();
Expand All @@ -36,7 +29,6 @@ describe('TradeTypeListItem', () => {
title='Test Title'
leftIcon={<span>Left Icon</span>}
onLeftIconClick={handle_left_icon_click}
selected={false}
/>
);

Expand All @@ -49,7 +41,7 @@ describe('TradeTypeListItem', () => {
it('calls onRightIconClick when right icon is clicked', async () => {
const handle_right_icon_click = jest.fn();

render(<TradeTypeListItem title='Test Title' onRightIconClick={handle_right_icon_click} selected={false} />);
render(<TradeTypeListItem title='Test Title' onRightIconClick={handle_right_icon_click} />);

const right_icon = screen.getByRole('img');
await userEvent.click(right_icon);
Expand Down
2 changes: 1 addition & 1 deletion packages/trader/src/AppV2/Components/TradeTypeList/trade-type-list-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import clsx from 'clsx';

type TTradeTypeListItemProps = {
title: string;
selected: boolean;
selected?: boolean;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
onLeftIconClick?: () => void;
Expand Down
6 changes: 3 additions & 3 deletions packages/trader/src/AppV2/Components/TradeTypeList/trade-type-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type TTradeTypeCategory = {

type TTradeTypeListProps = {
categories?: TTradeTypeCategory[];
selected?: string;
selected_item?: string;
selectable?: boolean;
onRightIconClick?: (item: TTradeTypeItem) => void;
onTradeTypeClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
Expand All @@ -29,7 +29,7 @@ type TTradeTypeListProps = {

const TradeTypeList: React.FC<TTradeTypeListProps> = ({
categories,
selected,
selected_item,
selectable,
onRightIconClick,
onTradeTypeClick,
Expand Down Expand Up @@ -67,7 +67,7 @@ const TradeTypeList: React.FC<TTradeTypeListProps> = ({
<div key={item.id}>
<TradeTypeListItem
title={item.title}
selected={!!selectable && item.id === selected}
selected={!!selectable && item.id === selected_item}
onRightIconClick={onRightIconClick && (() => onRightIconClick(item))}
onTradeTypeClick={onTradeTypeClick}
/>
Expand Down
75 changes: 33 additions & 42 deletions packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,26 @@ type TTradeTypesProps = {
trade_types: ReturnType<typeof getTradeTypesList>;
} & Pick<ReturnType<typeof useTraderStore>, 'contract_type'>;

type TItem = {
id: string;
title: string;
icon?: React.ReactNode;
};

type TResultItem = {
id: string;
title?: string;
button_title?: string;
onButtonClick?: () => void;
items: TItem[];
};

const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTypesProps) => {
const [is_open, setIsOpen] = React.useState<boolean>(false);
const [is_editing, setIsEditing] = React.useState<boolean>(false);

const { onMount, onUnmount } = useTraderStore();

type TItem = {
id: string;
title: string;
icon?: React.ReactNode;
};

type TResultItem = {
id: string;
title?: string;
button_title?: string;
onButtonClick?: () => void;
items: TItem[];
};

const createArrayFromCategories = (data: any): TItem[] => {
const result: TItem[] = [];

Expand All @@ -44,15 +44,11 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTyp
return result;
};

const saved_other_trade_types = localStorage.getItem('other_trade_types');
const saved_pinned_trade_types = localStorage.getItem('pinned_trade_types');
const saved_other_trade_types = JSON.parse(localStorage.getItem('other_trade_types') ?? '[]');
const saved_pinned_trade_types = JSON.parse(localStorage.getItem('pinned_trade_types') ?? '[]');

const [other_trade_types, setOtherTradeTypes] = React.useState<TResultItem[]>(
saved_other_trade_types ? JSON.parse(saved_other_trade_types) : []
);
const [pinned_trade_types, setPinnedTradeTypes] = React.useState<TResultItem[]>(
saved_pinned_trade_types ? JSON.parse(saved_pinned_trade_types) : []
);
const [other_trade_types, setOtherTradeTypes] = React.useState<TResultItem[]>(saved_other_trade_types);
const [pinned_trade_types, setPinnedTradeTypes] = React.useState<TResultItem[]>(saved_pinned_trade_types);

const handleCloseTradeTypes = () => {
setIsOpen(false);
Expand Down Expand Up @@ -134,7 +130,7 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTyp
},
];

if (!saved_pinned_trade_types) {
if (saved_pinned_trade_types.length < 1) {
setPinnedTradeTypes(default_pinned_trade_types);
localStorage.setItem('pinned_trade_types', JSON.stringify(default_pinned_trade_types));
}
Expand All @@ -144,17 +140,14 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTyp
}, [trade_types]);

React.useEffect(() => {
const saved_other_trade_types = localStorage.getItem('other_trade_types');
const saved_pinned_trade_types = localStorage.getItem('pinned_trade_types');

onMount();

if (saved_pinned_trade_types) {
setPinnedTradeTypes(JSON.parse(saved_pinned_trade_types));
if (saved_pinned_trade_types.length > 0) {
setPinnedTradeTypes(saved_pinned_trade_types);
}

if (saved_other_trade_types) {
setOtherTradeTypes(JSON.parse(saved_other_trade_types));
if (saved_other_trade_types.length > 0) {
setOtherTradeTypes(saved_other_trade_types);
}

return () => {
Expand All @@ -179,14 +172,16 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTyp
contract_type === value;
return (
<div className='trade__trade-types'>
{saved_pinned_trade_types &&
JSON.parse(saved_pinned_trade_types)[0].items.map(({ title, id }: TItem) => (
{saved_pinned_trade_types.length > 0 &&
saved_pinned_trade_types[0].items.map(({ title, id }: TItem) => (
<Chip.Selectable key={id} onChipSelect={onTradeTypeSelect} selected={isTradeTypeSelected(id)}>
<Text size='sm'>{title}</Text>
</Chip.Selectable>
))}
<a key={'all'} onClick={() => setIsOpen(true)} className='trade__trade-types-header'>
<Text size='sm' bold underlined>{<Localize i18n_default_text='View all' />}</Text>
<a key='trade-types-all' onClick={() => setIsOpen(true)} className='trade__trade-types-header'>
<Text size='sm' bold underlined>
{<Localize i18n_default_text='View all' />}
</Text>
</a>
<ActionSheet.Root isOpen={is_open} expandable={false} onClose={handleCloseTradeTypes}>
<ActionSheet.Portal>
Expand All @@ -201,23 +196,19 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types }: TTradeTyp
/>
) : (
<TradeTypeList
categories={saved_pinned_trade_types && JSON.parse(saved_pinned_trade_types)}
categories={saved_pinned_trade_types}
onAction={() => setIsEditing(true)}
onTradeTypeClick={onTradeTypeSelect}
selected={contract_type}
selected_item={contract_type}
should_show_title={false}
selectable
/>
)}
<TradeTypeList
categories={
is_editing
? other_trade_types
: saved_other_trade_types && JSON.parse(saved_other_trade_types)
}
categories={is_editing ? other_trade_types : saved_other_trade_types}
onRightIconClick={is_editing ? handleAddPinnedClick : undefined}
onTradeTypeClick={!is_editing ? onTradeTypeSelect : undefined}
selected={contract_type}
selected_item={contract_type}
selectable={!is_editing}
/>
</ActionSheet.Content>
Expand Down

0 comments on commit 23b81d1

Please sign in to comment.