Fix more linting issues

RoboSats · Aug 10, 2023 · 3aa03f0 · 3aa03f0
1 parent 8cf02dc
commit 3aa03f0
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 152 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -19,6 +19,7 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
+  "ignorePatterns": ["**/PaymentMethods/Icons/code/code.js"],
   "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",

diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
@@ -170,8 +170,10 @@ const NavBar = (): JSX.Element => {
           sx={tabSx}
           label={smallBar ? undefined : t('More')}
           value='none'
-          onClick={(e) => {
-            open.more ? null : setOpen({ ...open, more: true });
+          onClick={() => {
+            setOpen((open) => {
+              return { ...open, more: !open.more };
+            });
           }}
           icon={
             <MoreTooltip>

diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx
@@ -35,14 +35,14 @@ const OrderPage = (): JSX.Element => {
 
   useEffect(() => {
     const newOrder = { shortAlias: params.shortAlias, id: Number(params.orderId) };
-    if (currentOrder != newOrder) {
+    if (currentOrder !== newOrder) {
       clearOrder();
       setCurrentOrder(newOrder);
     }
   }, [params.orderId]);
 
-  const renewOrder = function () {
-    if (order != undefined) {
+  const renewOrder = function (): void {
+    if (order !== undefined) {
       const body = {
         type: order.type,
         currency: order.currency,
@@ -61,28 +61,31 @@ const OrderPage = (): JSX.Element => {
       apiClient
         .post(hostUrl, '/api/make/', body, { tokenSHA256: robot.tokenSHA256 })
         .then((data: any) => {
-          if (data.bad_request) {
+          if (data.bad_request !== undefined) {
             setBadOrder(data.bad_request);
-          } else if (data.id) {
-            navigate('/order/' + data.id);
+          } else if (data.id !== undefined) {
+            navigate(`/order/${String(data.id)}`);
           }
+        })
+        .catch(() => {
+          setBadOrder('Request error');
         });
     }
   };
 
-  const startAgain = () => {
+  const startAgain = (): void => {
     navigate('/robot');
   };
 
   return (
     <Box>
-      {order == undefined && badOrder == undefined ? <CircularProgress /> : null}
-      {badOrder != undefined ? (
+      {order === undefined && badOrder === undefined && <CircularProgress />}
+      {badOrder !== undefined ? (
         <Typography align='center' variant='subtitle2' color='secondary'>
           {t(badOrder)}
         </Typography>
       ) : null}
-      {order != undefined && badOrder == undefined ? (
+      {order !== undefined && badOrder === undefined ? (
         order.is_participant ? (
           windowSize.width > doublePageWidth ? (
             // DOUBLE PAPER VIEW
@@ -160,7 +163,7 @@ const OrderPage = (): JSX.Element => {
                   overflow: 'auto',
                 }}
               >
-                <div style={{ display: tab == 'order' ? '' : 'none' }}>
+                <div style={{ display: tab === 'order' ? '' : 'none' }}>
                   <OrderDetails
                     order={order}
                     setOrder={setOrder}
@@ -172,7 +175,7 @@ const OrderPage = (): JSX.Element => {
                     }}
                   />
                 </div>
-                <div style={{ display: tab == 'contract' ? '' : 'none' }}>
+                <div style={{ display: tab === 'contract' ? '' : 'none' }}>
                   <TradeBox
                     order={order}
                     robot={robot}

diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx
@@ -138,15 +138,15 @@ const DepthChart: React.FC<DepthChartProps> = ({
   };
 
   const generateSerie = (orders: PublicOrder[]): Datum[] => {
-    if (center == undefined) {
+    if (center === undefined) {
       return [];
     }
 
     let sumOrders: number = 0;
     let serie: Datum[] = [];
     orders.forEach((order) => {
       const lastSumOrders = sumOrders;
-      sumOrders += (order.satoshis_now || 0) / 100000000;
+      sumOrders += (order.satoshis_now ?? 0) / 100000000;
       const datum: Datum[] = [
         {
           // Vertical Line
@@ -171,7 +171,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   };
 
   const closeSerie = (serie: Datum[], limitBottom: number, limitTop: number): Datum[] => {
-    if (serie.length == 0) {
+    if (serie.length === 0) {
       return [];
     }
 
@@ -199,11 +199,11 @@ const DepthChart: React.FC<DepthChartProps> = ({
       d={props.lineGenerator([
         {
           y: 0,
-          x: props.xScale(center || 0),
+          x: props.xScale(center ?? 0),
         },
         {
           y: props.innerHeight,
-          x: props.xScale(center || 0),
+          x: props.xScale(center ?? 0),
         },
       ])}
       fill='none'
@@ -215,8 +215,8 @@ const DepthChart: React.FC<DepthChartProps> = ({
   const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
     pointTooltip: PointTooltipProps,
   ) => {
-    const order: PublicOrder = pointTooltip.point.data.order;
-    return order ? (
+    const order: PublicOrder | undefined = pointTooltip.point.data.order;
+    return order !== undefined ? (
       <Paper elevation={12} style={{ padding: 10, width: 250 }}>
         <Grid container justifyContent='space-between'>
           <Grid item xs={3}>
@@ -291,7 +291,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
       }
     >
       <Paper variant='outlined' style={{ width: '100%', height: '100%' }}>
-        {center == undefined || enrichedOrders.length < 1 ? (
+        {center === undefined || enrichedOrders.length < 1 ? (
           <div
             style={{
               display: 'flex',
@@ -351,7 +351,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 <Grid item>
                   <Box justifyContent='center'>
                     {xType === 'base_amount'
-                      ? `${center} ${currencyDict[currencyCode]}`
+                      ? `${center} ${String(currencyDict[currencyCode])}`
                       : `${center}%`}
                   </Box>
                 </Grid>

diff --git a/frontend/src/components/MakerForm/AutocompletePayments.tsx b/frontend/src/components/MakerForm/AutocompletePayments.tsx
@@ -30,12 +30,12 @@ const Label = styled('label')(
   ({ theme, error, sx }) => `
   color: ${
     theme.palette.mode === 'dark'
-      ? (error === true
+      ? error === true
         ? '#f44336'
-        : '#cfcfcf')
-      : (error === true
+        : '#cfcfcf'
+      : error === true
       ? '#dd0000'
-      : '#717171')
+      : '#717171'
   };
   pointer-events: none;
   position: relative;
@@ -53,7 +53,13 @@ const InputWrapper = styled('div')(
   min-height: ${String(sx.minHeight)};
   max-height: ${String(sx.maxHeight)};
   border: 1px solid ${
-    theme.palette.mode === 'dark' ? (error === '' ? '#f44336' : '#434343') : error === '' ? '#dd0000' : '#c4c4c4'
+    theme.palette.mode === 'dark'
+      ? error === ''
+        ? '#f44336'
+        : '#434343'
+      : error === ''
+      ? '#dd0000'
+      : '#c4c4c4'
   };
   background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   border-radius: 4px;
@@ -127,7 +133,7 @@ const Tag: React.FC<TagProps> = ({ label, icon, onDelete, ...other }) => {
 };
 
 const StyledTag = styled(Tag)(
-  ({ theme, sx}) => `
+  ({ theme, sx }) => `
   display: flex;
   align-items: center;
   height: ${String(sx?.height ?? '2.1em')};
@@ -261,7 +267,9 @@ const AutocompletePayments: React.FC<AutocompletePaymentsProps> = (props) => {
     onInputChange: (e) => {
       setVal(e.target.value ?? '');
     },
-    onChange: (event, value) => { props.onAutocompleteChange(value) },
+    onChange: (event, value) => {
+      props.onAutocompleteChange(value);
+    },
     onClose: () => {
       setVal(() => '');
     },
@@ -369,7 +377,13 @@ const AutocompletePayments: React.FC<AutocompletePaymentsProps> = (props) => {
           ))}
           {val != null || !props.isFilter ? (
             val.length > 2 ? (
-              <Button size='small' fullWidth={true} onClick={() => {handleAddNew(getInputProps())} }>
+              <Button
+                size='small'
+                fullWidth={true}
+                onClick={() => {
+                  handleAddNew(getInputProps());
+                }}
+              >
                 <DashboardCustomizeIcon sx={{ width: '1em', height: '1em' }} />
                 {props.addNewButtonText}
               </Button>
@@ -381,7 +395,12 @@ const AutocompletePayments: React.FC<AutocompletePaymentsProps> = (props) => {
       {/* Here goes what happens if there is no fewerOptions */}
       <Grow in={getInputProps().value.length > 0 && !props.isFilter && fewerOptions.length === 0}>
         <Listbox {...getListboxProps()}>
-          <Button fullWidth={true} onClick={() => {handleAddNew(getInputProps())} }>
+          <Button
+            fullWidth={true}
+            onClick={() => {
+              handleAddNew(getInputProps());
+            }}
+          >
             <DashboardCustomizeIcon sx={{ width: '1.28em', height: '1.28em' }} />
             {props.addNewButtonText}
           </Button>

diff --git a/frontend/src/components/MakerForm/MakerForm.tsx b/frontend/src/components/MakerForm/MakerForm.tsx
@@ -100,7 +100,11 @@ const MakerForm = ({
     }
   }, []);
 
-  const updateAmountLimits = function (limitList: LimitList, currency: number, premium: number): void {
+  const updateAmountLimits = function (
+    limitList: LimitList,
+    currency: number,
+    premium: number,
+  ): void {
     const index = currency === 0 ? 1 : currency;
     let minAmountLimit: number = limitList[index].min_amount * (1 + premium / 100);
     let maxAmountLimit: number = limitList[index].max_amount * (1 + premium / 100);
@@ -117,7 +121,11 @@ const MakerForm = ({
     setSatoshisLimits([minAmount, maxAmount]);
   };
 
-  const updateCurrentPrice = function (limitsList: LimitList, currency: number, premium: number): void {
+  const updateCurrentPrice = function (
+    limitsList: LimitList,
+    currency: number,
+    premium: number,
+  ): void {
     const index = currency === 0 ? 1 : currency;
     let price = '...';
     if (maker.isExplicit && maker.amount > 0 && maker.satoshis > 0) {
@@ -161,7 +169,9 @@ const MakerForm = ({
     return maker.advancedOptions && amountRangeEnabled;
   }, [maker.advancedOptions, amountRangeEnabled]);
 
-  const handlePaymentMethodChange = function (paymentArray: Array<{name: string, icon: string}>): void {
+  const handlePaymentMethodChange = function (
+    paymentArray: Array<{ name: string; icon: string }>,
+  ): void {
     let str = '';
     const arrayLength = paymentArray.length;
     for (let i = 0; i < arrayLength; i++) {
@@ -277,7 +287,9 @@ const MakerForm = ({
           }
           setSubmittingRequest(false);
         })
-        .catch(()=>{ setBadRequest("Request error")} );
+        .catch(() => {
+          setBadRequest('Request error');
+        });
     }
     setOpenDialogs(false);
   };
@@ -339,12 +351,14 @@ const MakerForm = ({
 
   const resetRange = function (advancedOptions: boolean): void {
     const index = fav.currency === 0 ? 1 : fav.currency;
-    const minAmount = maker.amount !== ''
-      ? parseFloat((maker.amount / 2).toPrecision(2))
-      : parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2));
-    const maxAmount = maker.amount !== ''
-      ? parseFloat(maker.amount)
-      : parseFloat(Number(limits.list[index].max_amount * 0.75).toPrecision(2));
+    const minAmount =
+      maker.amount !== ''
+        ? parseFloat((maker.amount / 2).toPrecision(2))
+        : parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2));
+    const maxAmount =
+      maker.amount !== ''
+        ? parseFloat(maker.amount)
+        : parseFloat(Number(limits.list[index].max_amount * 0.75).toPrecision(2));
 
     setMaker({
       ...maker,
@@ -442,7 +456,7 @@ const MakerForm = ({
     );
   }, [maker, amountLimits, limits, fav.type, makerHasAmountRange]);
 
-  const clearMaker = function ():void {
+  const clearMaker = function (): void {
     setFav({ ...fav, type: null });
     setMaker(defaultMaker);
   };