6809822539

Committed 09 Nov 2023 09:26AM UTC coverage: 87.351% (-0.02%) from 87.366%

Build # 6809822539

Build Type

Pull #137

github

Committed by

meenu-deriv

Commit Message

Merge branch 'main' into meenu/techdebt-cleanup-unused-imports-update-variables

Pull Request Pull Request #137: Meenu/chore: script for word case

Run Details

189 of 266 branches covered (0.0%)

Branch coverage included in aggregate %.

699 of 751 new or added lines in 13 files covered. (93.08%)

3 existing lines in 2 files now uncovered.

6461 of 7347 relevant lines covered (87.94%)

3.47 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

68.6

/libs/templates/src/lib/trade/table/trading-spec-table.tsx

import { useEffect, useState } from 'react';
import { mainInfo, tradingCondition, additionalInfo } from '../data/data';
import { TableDataType } from '../types/types';
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
  getPaginationRowModel,
} from '@tanstack/react-table';
import UseColumns from '../hooks/use-columns';
import { Button, qtMerge, Section, Text } from '@deriv/quill-design';
import {
  LabelPairedEllipsisVerticalBoldIcon,
  StandaloneChevronLeftRegularIcon,
  StandaloneChevronRightRegularIcon,
  StandaloneCircleDotFillIcon,
  StandaloneCircleRegularIcon,
  StandaloneXmarkBoldIcon,
} from '@deriv/quill-icons';
import { SearchChip } from '@deriv-com/components';
import { BottomSheet } from '@deriv-com/components';
import clsx from 'clsx';

const TradingSpecTable = () => {
  const [data, setData] = useState<TableDataType[]>([]);
  const [selectedFilter, setSelectedFilter] = useState<TableDataType[]>(
    mainInfo.data,
  );
  const [selectedInfo, setSelectedInfo] = useState('mainInfo');
  const [searchValue, setSearchValue] = useState('');
  const [showBottomSheet, setShowBottomSheet] = useState(false);

  const handleSubmit = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
  };

  useEffect(() => {
    let updatedRowData = [];
    if (searchValue.length >= 1) {
      updatedRowData = [
        ...selectedFilter.filter(
          (item) =>
            item.instrument?.instrument?.match(new RegExp(searchValue, 'i')),
        ),
      ];

      setData(updatedRowData);
    } else {
      setData(selectedFilter);
    }
  }, [searchValue, selectedFilter]);

  const columns = UseColumns(selectedInfo);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });
  useEffect(() => {
    table.setPageSize(15);
  }, [table]);
  useEffect(() => {
    document.body.style.overflow = showBottomSheet ? 'hidden' : 'scroll';
  }, [showBottomSheet]);
  return (
    <Section className="py-general-4xl md:px-general-md lg:mx-auto lg:max-w-[1232px]">
      <div className="flex flex-row gap-gap-lg px-general-md pb-general-md lg:justify-between lg:px-general-none lg:pb-general-lg">
        <form
          className="w-[323px] md:w-[340px] lg:w-[360px]"
          onSubmit={() => handleSubmit}
        >
          <SearchChip
            onChange={(i) => setSearchValue(i)}
            value={searchValue}
            placeholder="Search"
            size="sm"
          />
        </form>

        <div className="flex gap-gap-md ">
          <LabelPairedEllipsisVerticalBoldIcon
            fill="black"
            iconSize="md"
            className="block md:hidden lg:hidden"
            onClick={() => {
              setShowBottomSheet(true);
            }}
          />

          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'mainInfo'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(mainInfo.data);
              setSelectedInfo('mainInfo');
            }}
          >
            Main info
          </Button>
          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'tradingCondition'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(tradingCondition.data);
              setSelectedInfo('tradingCondition');
            }}
          >
            Trading conditions
          </Button>
          <Button
            className={qtMerge(
              'hidden md:block lg:block',
              selectedInfo === 'additionalInfo'
                ? 'bg-solid-slate-1400'
                : 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',
            )}
            onClick={() => {
              setSelectedFilter(additionalInfo.data);
              setSelectedInfo('additionalInfo');
            }}
          >
            Additional info
          </Button>
        </div>
      </div>
      <table
        className={clsx(
          data.length < 1 && 'pb-general-lg',
          'block w-[100%] overflow-auto',
        )}
      >
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} className={qtMerge('p-50')}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="p-general-none">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      {data.length < 1 && (
        <div>
          <Text
            size="lg"
            className="break-words px-general-md py-general-2xl text-center text-typography-default"
          >
            Sorry, we couldn’t find any results with "{searchValue}" in it
          </Text>
        </div>
      )}
      {data.length > 1 && (
        <div className="flex flex-col gap-gap-xl pt-general-lg lg:gap-gap-2xl">
          <div className="flex justify-center gap-gap-md">
            <Button
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
              className="bg-opacity-white-100"
            >
              <StandaloneChevronLeftRegularIcon fill="black" iconSize="sm" />
            </Button>
            {table.getPageOptions().map((page) => {
              const selected = page === table.getState().pagination.pageIndex;
              return (
                <Button
                  key={page}
                  onClick={() => table.setPageIndex(page)}
                  color="black"
                  className={qtMerge(
                    selected
                      ? 'bg-solid-slate-1400'
                      : ' bg-background-primary-container text-opacity-black-600',
                    'p-general-md',
                  )}
                >
                  {page + 1}
                </Button>
              );
            })}
            <Button
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
              className="bg-opacity-white-100"
            >
              <StandaloneChevronRightRegularIcon fill="black" iconSize="sm" />
            </Button>
          </div>
        </div>
      )}
      <div className="flex justify-center pt-general-xl md:pt-general-2xl lg:pt-general-2xl">
        <Button
          colorStyle="black"
          size="lg"
          className={qtMerge('px-general-md py-600 font-sans')}
        >
          Trade now
        </Button>
      </div>

      {showBottomSheet && (
        <BottomSheet
          heading="Table view"
          placeholderIcon={
            <StandaloneXmarkBoldIcon fill="white" iconSize="md" />
          }
          icon={
            <StandaloneXmarkBoldIcon
              fill="black"
              iconSize="md"
              onClick={() => {
                setShowBottomSheet(false);
              }}
            />
          }
        >
          <div className=" flex flex-col p-general-md">
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(mainInfo.data);
                setSelectedInfo('mainInfo');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'mainInfo' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}

              <Text size="md" className="text-typography-default">
                Main info
              </Text>
            </div>
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(tradingCondition.data);
                setSelectedInfo('tradingCondition');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'tradingCondition' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}
              <Text size="md" className="text-typography-default">
                Trading conditions
              </Text>
            </div>
            <div
              className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"
              onClick={() => {
                setSelectedFilter(additionalInfo.data);
                setSelectedInfo('additionalInfo');
                setShowBottomSheet(false);
              }}
            >
              {selectedInfo === 'additionalInfo' ? (
                <StandaloneCircleDotFillIcon fill="black" iconSize="md" />
              ) : (
                <StandaloneCircleRegularIcon fill="black" iconSize="md" />
              )}

              <Text size="md" className="text-typography-default">
                Additional info
              </Text>
            </div>
          </div>
        </BottomSheet>
      )}
    </Section>
  );
};

export default TradingSpecTable;

1	import { useEffect, useState } from 'react';	1✔
2	import { mainInfo, tradingCondition, additionalInfo } from '../data/data';	1✔
3	import { TableDataType } from '../types/types';	1✔
4	import {	1✔
5	flexRender,	1✔
6	getCoreRowModel,	1✔
7	getSortedRowModel,	1✔
8	useReactTable,	1✔
9	getPaginationRowModel,	1✔
10	} from '@tanstack/react-table';	1✔
11	import UseColumns from '../hooks/use-columns';	1✔
12	import { Button, qtMerge, Section, Text } from '@deriv/quill-design';	1✔
13	import {	1✔
14	LabelPairedEllipsisVerticalBoldIcon,	1✔
15	StandaloneChevronLeftRegularIcon,	1✔
16	StandaloneChevronRightRegularIcon,	1✔
17	StandaloneCircleDotFillIcon,	1✔
18	StandaloneCircleRegularIcon,	1✔
19	StandaloneXmarkBoldIcon,	1✔
20	} from '@deriv/quill-icons';	1✔
21	import { SearchChip } from '@deriv-com/components';	1✔
22	import { BottomSheet } from '@deriv-com/components';	1✔
23	import clsx from 'clsx';	1✔
24		1✔
25	const TradingSpecTable = () => {	1✔
26	const [data, setData] = useState<TableDataType[]>([]);	2✔
27	const [selectedFilter, setSelectedFilter] = useState<TableDataType[]>(	2✔
28	mainInfo.data,	2✔
29	);	2✔
30	const [selectedInfo, setSelectedInfo] = useState('mainInfo');	2✔
31	const [searchValue, setSearchValue] = useState('');	2✔
32	const [showBottomSheet, setShowBottomSheet] = useState(false);	2✔
33		2✔
34	const handleSubmit = (e: React.ChangeEvent<HTMLInputElement>) => {	2✔
35	e.preventDefault();	×
36	};	×
37		2✔
38	useEffect(() => {	2✔
39	let updatedRowData = [];	1✔
40	if (searchValue.length >= 1) {	1!
41	updatedRowData = [	×
NEW 42	...selectedFilter.filter(	×
43	(item) =>	×
44	item.instrument?.instrument?.match(new RegExp(searchValue, 'i')),	×
45	),	×
46	];	×
47		×
48	setData(updatedRowData);	×
49	} else {	1✔
50	setData(selectedFilter);	1✔
51	}	1✔
52	}, [searchValue, selectedFilter]);	2✔
53		2✔
54	const columns = UseColumns(selectedInfo);	2✔
55		2✔
56	const table = useReactTable({	2✔
57	data,	2✔
58	columns,	2✔
59	getCoreRowModel: getCoreRowModel(),	2✔
60	getSortedRowModel: getSortedRowModel(),	2✔
61	getPaginationRowModel: getPaginationRowModel(),	2✔
62	});	2✔
63	useEffect(() => {	2✔
64	table.setPageSize(15);	1✔
65	}, [table]);	2✔
66	useEffect(() => {	2✔
67	document.body.style.overflow = showBottomSheet ? 'hidden' : 'scroll';	1!
68	}, [showBottomSheet]);	2✔
69	return (	2✔
70	<Section className="py-general-4xl md:px-general-md lg:mx-auto lg:max-w-[1232px]">	2✔
71	<div className="flex flex-row gap-gap-lg px-general-md pb-general-md lg:justify-between lg:px-general-none lg:pb-general-lg">	2✔
72	<form	2✔
73	className="w-[323px] md:w-[340px] lg:w-[360px]"	2✔
74	onSubmit={() => handleSubmit}	2✔
75	>	2✔
76	<SearchChip	2✔
77	onChange={(i) => setSearchValue(i)}	2✔
78	value={searchValue}	2✔
79	placeholder="Search"	2✔
80	size="sm"	2✔
81	/>	2✔
82	</form>	2✔
83		2✔
84	<div className="flex gap-gap-md ">	2✔
85	<LabelPairedEllipsisVerticalBoldIcon	2✔
86	fill="black"	2✔
87	iconSize="md"	2✔
88	className="block md:hidden lg:hidden"	2✔
89	onClick={() => {	2✔
90	setShowBottomSheet(true);	×
91	}}	×
92	/>	2✔
93		2✔
94	<Button	2✔
95	className={qtMerge(	2✔
96	'hidden md:block lg:block',	2✔
97	selectedInfo === 'mainInfo'	2✔
98	? 'bg-solid-slate-1400'	2!
99	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	×
100	)}	2✔
101	onClick={() => {	2✔
102	setSelectedFilter(mainInfo.data);	×
103	setSelectedInfo('mainInfo');	×
104	}}	×
105	>	2✔
106	Main info	2✔
107	</Button>	2✔
108	<Button	2✔
109	className={qtMerge(	2✔
110	'hidden md:block lg:block',	2✔
111	selectedInfo === 'tradingCondition'	2!
112	? 'bg-solid-slate-1400'	×
113	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	2✔
114	)}	2✔
115	onClick={() => {	2✔
NEW 116	setSelectedFilter(tradingCondition.data);	×
NEW 117	setSelectedInfo('tradingCondition');	×
UNCOV 118	}}	×
119	>	2✔
120	Trading conditions	2✔
121	</Button>	2✔
122	<Button	2✔
123	className={qtMerge(	2✔
124	'hidden md:block lg:block',	2✔
125	selectedInfo === 'additionalInfo'	2!
126	? 'bg-solid-slate-1400'	×
127	: 'border-75 border-solid-slate-100 bg-background-primary-container text-opacity-black-700',	2✔
128	)}	2✔
129	onClick={() => {	2✔
NEW 130	setSelectedFilter(additionalInfo.data);	×
NEW 131	setSelectedInfo('additionalInfo');	×
UNCOV 132	}}	×
133	>	2✔
134	Additional info	2✔
135	</Button>	2✔
136	</div>	2✔
137	</div>	2✔
138	<table	2✔
139	className={clsx(	2✔
140	data.length < 1 && 'pb-general-lg',	2✔
141	'block w-[100%] overflow-auto',	2✔
142	)}	2✔
143	>	2✔
144	<thead>	2✔
145	{table.getHeaderGroups().map((headerGroup) => (	2✔
146	<tr key={headerGroup.id}>	2✔
147	{headerGroup.headers.map((header) => (	2✔
148	<th key={header.id} className={qtMerge('p-50')}>	10✔
149	{header.isPlaceholder	10!
150	? null	×
151	: flexRender(	10✔
152	header.column.columnDef.header,	10✔
153	header.getContext(),	10✔
154	)}	10✔
155	</th>	10✔
156	))}	2✔
157	</tr>	2✔
158	))}	2✔
159	</thead>	2✔
160	<tbody>	2✔
161	{table.getRowModel().rows.map((row) => (	2✔
162	<tr key={row.id}>	15✔
163	{row.getVisibleCells().map((cell) => (	15✔
164	<td key={cell.id} className="p-general-none">	75✔
165	{flexRender(cell.column.columnDef.cell, cell.getContext())}	75✔
166	</td>	75✔
167	))}	15✔
168	</tr>	15✔
169	))}	2✔
170	</tbody>	2✔
171	</table>	2✔
172	{data.length < 1 && (	2✔
173	<div>	1✔
174	<Text	1✔
175	size="lg"	1✔
176	className="break-words px-general-md py-general-2xl text-center text-typography-default"	1✔
177	>	1✔
178	Sorry, we couldn’t find any results with "{searchValue}" in it	1✔
179	</Text>	1✔
180	</div>	1✔
181	)}	2✔
182	{data.length > 1 && (	2✔
183	<div className="flex flex-col gap-gap-xl pt-general-lg lg:gap-gap-2xl">	1✔
184	<div className="flex justify-center gap-gap-md">	1✔
185	<Button	1✔
186	onClick={() => table.previousPage()}	1✔
187	disabled={!table.getCanPreviousPage()}	1✔
188	className="bg-opacity-white-100"	1✔
189	>	1✔
190	<StandaloneChevronLeftRegularIcon fill="black" iconSize="sm" />	1✔
191	</Button>	1✔
192	{table.getPageOptions().map((page) => {	1✔
193	const selected = page === table.getState().pagination.pageIndex;	4✔
194	return (	4✔
195	<Button	4✔
196	key={page}	4✔
197	onClick={() => table.setPageIndex(page)}	4✔
198	color="black"	4✔
199	className={qtMerge(	4✔
200	selected	4✔
201	? 'bg-solid-slate-1400'	1✔
202	: ' bg-background-primary-container text-opacity-black-600',	3✔
203	'p-general-md',	4✔
204	)}	4✔
205	>	4✔
206	{page + 1}	4✔
207	</Button>	4✔
208	);	4✔
209	})}	1✔
210	<Button	1✔
211	onClick={() => table.nextPage()}	1✔
212	disabled={!table.getCanNextPage()}	1✔
213	className="bg-opacity-white-100"	1✔
214	>	1✔
215	<StandaloneChevronRightRegularIcon fill="black" iconSize="sm" />	1✔
216	</Button>	1✔
217	</div>	1✔
218	</div>	1✔
219	)}	2✔
220	<div className="flex justify-center pt-general-xl md:pt-general-2xl lg:pt-general-2xl">	2✔
221	<Button	2✔
222	colorStyle="black"	2✔
223	size="lg"	2✔
224	className={qtMerge('px-general-md py-600 font-sans')}	2✔
225	>	2✔
226	Trade now	2✔
227	</Button>	2✔
228	</div>	2✔
229		2✔
230	{showBottomSheet && (	2!
231	<BottomSheet	×
232	heading="Table view"	×
NEW 233	placeholderIcon={	×
234	<StandaloneXmarkBoldIcon fill="white" iconSize="md" />	×
235	}	×
236	icon={	×
237	<StandaloneXmarkBoldIcon	×
238	fill="black"	×
239	iconSize="md"	×
240	onClick={() => {	×
241	setShowBottomSheet(false);	×
242	}}	×
243	/>	×
244	}	×
245	>	×
246	<div className=" flex flex-col p-general-md">	×
247	<div	×
248	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
249	onClick={() => {	×
250	setSelectedFilter(mainInfo.data);	×
251	setSelectedInfo('mainInfo');	×
252	setShowBottomSheet(false);	×
253	}}	×
254	>	×
255	{selectedInfo === 'mainInfo' ? (	×
256	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
257	) : (	×
258	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
259	)}	×
260		×
261	<Text size="md" className="text-typography-default">	×
262	Main info	×
263	</Text>	×
264	</div>	×
265	<div	×
266	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
267	onClick={() => {	×
NEW 268	setSelectedFilter(tradingCondition.data);	×
NEW 269	setSelectedInfo('tradingCondition');	×
270	setShowBottomSheet(false);	×
271	}}	×
272	>	×
NEW 273	{selectedInfo === 'tradingCondition' ? (	×
274	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
275	) : (	×
276	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
277	)}	×
278	<Text size="md" className="text-typography-default">	×
279	Trading conditions	×
280	</Text>	×
281	</div>	×
282	<div	×
283	className="flex flex-row items-center gap-gap-md px-general-md py-gap-md"	×
284	onClick={() => {	×
NEW 285	setSelectedFilter(additionalInfo.data);	×
NEW 286	setSelectedInfo('additionalInfo');	×
287	setShowBottomSheet(false);	×
288	}}	×
289	>	×
NEW 290	{selectedInfo === 'additionalInfo' ? (	×
291	<StandaloneCircleDotFillIcon fill="black" iconSize="md" />	×
292	) : (	×
293	<StandaloneCircleRegularIcon fill="black" iconSize="md" />	×
294	)}	×
295		×
296	<Text size="md" className="text-typography-default">	×
297	Additional info	×
298	</Text>	×
299	</div>	×
300	</div>	×
301	</BottomSheet>	×
302	)}	2✔
303	</Section>	2✔
304	);	2✔
305	};	2✔
306		1✔
307	export default TradingSpecTable;	1✔

deriv-com / deriv-com-v2 / 6809822539

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous