Fix linting errors on federation-layer (#776)

* Fix lint errors * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues * Fix more linting issues, only 1 left * Last fix
RoboSats · Aug 13, 2023 · 68bb2de · 68bb2de
1 parent 65b1e2c
commit 68bb2de
Show file tree

Hide file tree

Showing 129 changed files with 1,537 additions and 1,234 deletions.
diff --git a/.github/workflows/js-linter.yml b/.github/workflows/js-linter.yml
@@ -11,6 +11,7 @@ on:
   pull_request:
     branches:
       - main
+      - the-federation-layer-v0.5.0
     paths:
       - frontend
 
@@ -41,7 +42,5 @@ jobs:
         with:
           prettier: true
           prettier_dir: frontend
-
-          ## Disabled due to error
-          # eslint: true
-          # eslint_dir: frontend
+          eslint: true
+          eslint_dir: frontend
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -19,12 +19,21 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
+  "ignorePatterns": ["index.js", "**/PaymentMethods/Icons/code/code.js"],
   "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variableLike",
+        "format": ["camelCase", "snake_case", "PascalCase", "UPPER_CASE"],
+        "leadingUnderscore": "allow"
+      }
+    ]
   },
   "settings": {
     "import/resolver": {

diff --git a/frontend/package.json b/frontend/package.json
@@ -7,8 +7,8 @@
     "dev": "webpack --watch --progress --mode development",
     "test": "jest",
     "build": "webpack --mode production",
-    "lint": "eslint src/**/*.{js,ts,tsx}",
-    "lint:fix": "eslint --fix 'src/**/*.{js,ts,tsx}'",
+    "lint": "eslint src/**/*.{js,ts,tsx} --quiet",
+    "lint:fix": "eslint --fix 'src/**/*.{js,ts,tsx}' --quiet",
     "format": "prettier --write '**/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "keywords": [],

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -33,7 +33,7 @@ const App = (): JSX.Element => {
   );
 };
 
-const loadApp = () => {
+const loadApp = (): void => {
   // waits until the environment is ready for the Android WebView app
   if (systemClient.loading) {
     setTimeout(loadApp, 200);

diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
@@ -30,7 +30,7 @@ const BookPage = (): JSX.Element => {
     fetchFederationBook();
   }, []);
 
-  const onOrderClicked = function (id: number, shortAlias: string) {
+  const onOrderClicked = function (id: number, shortAlias: string): void {
     if (robot.avatarLoaded) {
       clearOrder();
       setDelay(10000);
@@ -40,7 +40,7 @@ const BookPage = (): JSX.Element => {
     }
   };
 
-  const NavButtons = function () {
+  const NavButtons = function (): JSX.Element {
     return (
       <ButtonGroup variant='contained' color='inherit'>
         <Button
@@ -59,7 +59,7 @@ const BookPage = (): JSX.Element => {
               setView(view === 'depth' ? 'list' : 'depth');
             }}
           >
-            {view == 'depth' ? (
+            {view === 'depth' ? (
               <>
                 <FormatListBulleted /> {t('List')}
               </>
@@ -95,7 +95,7 @@ const BookPage = (): JSX.Element => {
           <Box sx={{ maxWidth: '18em', padding: '0.5em' }}>
             <MakerForm
               onOrderCreated={(id) => {
-                navigate('/order/' + id);
+                navigate(`/order/${id}`);
               }}
               onClickGenerateRobot={() => {
                 navigate('/robot');

diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx
@@ -79,7 +79,7 @@ const Main: React.FC = () => {
                   <Slide
                     direction={page === 'robot' ? slideDirection.in : slideDirection.out}
                     in={page === 'robot'}
-                    appear={slideDirection.in != undefined}
+                    appear={slideDirection.in !== undefined}
                   >
                     <div>
                       <RobotPage />
@@ -97,7 +97,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'offers' ? slideDirection.in : slideDirection.out}
                 in={page === 'offers'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <BookPage />
@@ -112,7 +112,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'create' ? slideDirection.in : slideDirection.out}
                 in={page === 'create'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <MakerPage />
@@ -127,7 +127,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'order' ? slideDirection.in : slideDirection.out}
                 in={page === 'order'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <OrderPage />
@@ -142,7 +142,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'settings' ? slideDirection.in : slideDirection.out}
                 in={page === 'settings'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <SettingsPage />

diff --git a/frontend/src/basic/MainDialogs/index.tsx b/frontend/src/basic/MainDialogs/index.tsx
@@ -31,7 +31,6 @@ const MainDialogs = (): JSX.Element => {
     limits,
     robot,
     setRobot,
-    setCurrentOrder,
     settings,
     federation,
     clientVersion,
@@ -42,7 +41,7 @@ const MainDialogs = (): JSX.Element => {
   const [maxAmount, setMaxAmount] = useState<string>('...loading...');
 
   useEffect(() => {
-    if (limits.list[1000]) {
+    if (limits.list[1000] !== undefined) {
       setMaxAmount(pn(limits.list[1000].max_amount * 100000000));
     }
   }, [limits.list]);

diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx
@@ -47,14 +47,14 @@ const MakerPage = (): JSX.Element => {
     maker.paymentMethods,
   ]);
 
-  const onViewOrder = function () {
+  const onViewOrder = function (): void {
     setOrder(undefined);
     setDelay(10000);
   };
 
-  const onOrderClicked = function (id: number) {
+  const onOrderClicked = function (id: number): void {
     if (robot.avatarLoaded) {
-      navigate('/order/' + id);
+      navigate(`/order/${id}`);
       onViewOrder();
     } else {
       setOpenNoRobot(true);
@@ -105,7 +105,7 @@ const MakerPage = (): JSX.Element => {
         >
           <MakerForm
             onOrderCreated={(id) => {
-              navigate('/order/' + id);
+              navigate(`/order/${id}`);
             }}
             disableRequest={matches.length > 0 && !showMatches}
             collapseAll={showMatches}

diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Tabs, Tab, Paper, useTheme } from '@mui/material';
 import MoreTooltip from './MoreTooltip';
 
-import { type Page } from '.';
+import { type Page, isPage } from '.';
 
 import {
   SettingsApplications,
@@ -52,32 +52,32 @@ const NavBar = (): JSX.Element => {
 
   useEffect(() => {
     // change tab (page) into the current route
-    const pathPage: Page = location.pathname.split('/')[1];
-    if (pathPage == 'index.html') {
+    const pathPage: Page | string = location.pathname.split('/')[1];
+    if (pathPage === 'index.html') {
       navigate('/robot');
       setPage('robot');
     }
-    if (pathPage) {
+    if (isPage(pathPage)) {
       setPage(pathPage);
     }
-  }, [location]);
+  }, [location, navigate, setPage]);
 
-  const handleSlideDirection = function (oldPage: Page, newPage: Page) {
+  const handleSlideDirection = function (oldPage: Page, newPage: Page): void {
     const oldPos: number = pagesPosition[oldPage];
     const newPos: number = pagesPosition[newPage];
     setSlideDirection(
       newPos > oldPos ? { in: 'left', out: 'right' } : { in: 'right', out: 'left' },
     );
   };
 
-  const changePage = function (mouseEvent: any, newPage: Page) {
+  const changePage = function (mouseEvent: any, newPage: Page): void {
     if (newPage === 'none') {
       return null;
     } else {
       handleSlideDirection(page, newPage);
       setPage(newPage);
       const param =
-        newPage === 'order' ? `${currentOrder.shortAlias}/${currentOrder.id}` ?? '' : '';
+        newPage === 'order' ? `${String(currentOrder.shortAlias)}/${String(currentOrder.id)}` : '';
       setTimeout(() => {
         navigate(`/${newPage}/${param}`);
       }, theme.transitions.duration.leavingScreen * 3);
@@ -86,7 +86,7 @@ const NavBar = (): JSX.Element => {
 
   useEffect(() => {
     setOpen(closeAll);
-  }, [page]);
+  }, [page, setOpen]);
 
   return (
     <Paper
@@ -115,7 +115,7 @@ const NavBar = (): JSX.Element => {
             setOpen({ ...closeAll, profile: !open.profile });
           }}
           icon={
-            robot.nickname && robot.avatarLoaded ? (
+            robot.nickname !== undefined && robot.avatarLoaded ? (
               <RobotAvatar
                 style={{ width: '2.3em', height: '2.3em', position: 'relative', top: '0.2em' }}
                 avatarClass={theme.palette.mode === 'dark' ? 'navBarAvatarDark' : 'navBarAvatar'}
@@ -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/NavBar/index.tsx b/frontend/src/basic/NavBar/index.tsx
@@ -2,3 +2,7 @@ import NavBar from './NavBar';
 
 export type Page = 'robot' | 'order' | 'create' | 'offers' | 'settings' | 'none';
 export default NavBar;
+
+export function isPage(page: string): page is Page {
+  return ['robot', 'order', 'create', 'offers', 'settings', 'none'].includes(page);
+}
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}