Fix lint errors in client

ifmeorg · Feb 20, 2024 · 4c4cd7a · 4c4cd7a
1 parent 98d8d92
commit 4c4cd7a
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 67 deletions.
diff --git a/client/app/components/Input/Input.scss b/client/app/components/Input/Input.scss
@@ -8,28 +8,6 @@
   }
 }
 
-.select select {
-  @include setFontSize($size-18);
-  @include setPadding($size-24, $size-0, $size-24, $size-24);
-  @include paddingForSelectIcon($size-24);
-
-  color: $white;
-  font-weight: $font-weight-400;
-  width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  box-sizing: border-box;
-  background-color: $white-10;
-  border-radius: $size-4;
-  box-shadow: $size-0 $size-2 $size-10 $black-10;
-  border: none;
-
-  &:focus {
-    background-color: $white-20;
-  }
-}
-
 .select {
   position: relative;
 

diff --git a/client/app/components/Input/InputMultiSelect.jsx b/client/app/components/Input/InputMultiSelect.jsx
@@ -1,28 +1,19 @@
 // @flow
 import React, { useState, useEffect, useRef } from 'react';
-import renderHTML from 'react-render-html';
+import type { Node } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretUp, faCaretDown} from '@fortawesome/free-solid-svg-icons';
+import { faCaretUp, faCaretDown } from '@fortawesome/free-solid-svg-icons';
+import { InputCheckbox } from 'components/Input/InputCheckbox';
 import css from './InputMultiSelect.scss';
-import Input from 'components/Input';
-import type { Option } from './utils';
 import type { Checkbox } from './utils';
-import { InputCheckbox } from 'components/Input/InputCheckbox';
-import inputCss from './Input.scss';
 
 export type Props = {
   id: string,
-  ariaLabel?: string,
   label?: string,
-  value?: any,
   checkboxes: Checkbox[],
 };
 
-export function InputMultiSelect({
-  id,
-  checkboxes,
-  label
-}: Props) {
+export function InputMultiSelect({ id, checkboxes, label }: Props): Node {
   const [opened, setOpened] = useState<boolean>(false);
   const ref = useRef(null);
 
@@ -31,15 +22,15 @@ export function InputMultiSelect({
   };
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: any) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setOpened(false);
       }
-    }
+    };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref]);
 
@@ -51,19 +42,17 @@ export function InputMultiSelect({
         onClick={handleOnClick}
         id={id}
       >
+        <div>{label}</div>
         <div>
-          {label}
-        </div>
-        <div>
-          <FontAwesomeIcon icon={opened ? faCaretUp : faCaretDown }/>
+          <FontAwesomeIcon icon={opened ? faCaretUp : faCaretDown} />
         </div>
       </button>
       <div
         data-testid="multiSelectCheckboxes"
         aria-labelledby={id}
         className={css.multiSelectCheckboxesWrapper}
         role="listbox"
-        style={{ display: opened ? 'block' : 'none '}}
+        style={{ display: opened ? 'block' : 'none ' }}
       >
         <div className={css.multiSelectCheckboxes}>
           {checkboxes.map((checkbox) => (

diff --git a/client/app/components/Input/InputMultiSelect.scss b/client/app/components/Input/InputMultiSelect.scss
@@ -7,9 +7,10 @@
     justify-content: space-between;
   }
 
-  &Checkboxes{
+  &Checkboxes {
     @include setPadding($size-6, $size-6, $size-6, $size-6);
     @include fadeIn(0.8s);
+
     width: 100%;
     box-sizing: border-box;
     position: absolute;
@@ -30,4 +31,4 @@
       position: relative;
     }
   }
-}
+}
diff --git a/client/app/components/Input/index.jsx b/client/app/components/Input/index.jsx
@@ -189,13 +189,7 @@ export const Input = ({
 
   const displayMultiSelect = () => {
     if (type === 'multiSelect' && checkboxes) {
-      return (
-        <InputMultiSelect
-          id={id}
-          label={label}
-          checkboxes={checkboxes}
-        />
-      );
+      return <InputMultiSelect id={id} label={label} checkboxes={checkboxes} />;
     }
     return null;
   };

diff --git a/client/app/components/Toast/__tests__/Toast.spec.jsx b/client/app/components/Toast/__tests__/Toast.spec.jsx
@@ -61,7 +61,9 @@ describe('Toast', () => {
     });
 
     it('closes correctly on button click', () => {
-      const { getByRole, container } = render(<Toast notice="Login successful." />);
+      const { getByRole, container } = render(
+        <Toast notice="Login successful." />,
+      );
 
       const toastContent = getByRole('region');
       const toastBtn = container.querySelector('#btn-close-toast-notice');

diff --git a/client/app/components/Toast/index.jsx b/client/app/components/Toast/index.jsx
@@ -56,10 +56,13 @@ export const Toast = ({ alert, notice, appendDashboardClass }: Props): Node => {
       >
         {showNotice && (
           <>
-            <div>
-              {notice}
-            </div>
-            <button id="btn-close-toast-notice" type="button" onClick={hideNotice} aria-label={I18n.t('close')}>
+            <div>{notice}</div>
+            <button
+              id="btn-close-toast-notice"
+              type="button"
+              onClick={hideNotice}
+              aria-label={I18n.t('close')}
+            >
               <span aria-hidden="true">
                 <FontAwesomeIcon icon={faTimes} />
               </span>
@@ -79,10 +82,13 @@ export const Toast = ({ alert, notice, appendDashboardClass }: Props): Node => {
       >
         {showAlert && (
           <>
-            <div>
-              {alert}
-            </div>
-            <button id="btn-close-toast-alert" type="button" onClick={hideAlert} aria-label={I18n.t('close')}>
+            <div>{alert}</div>
+            <button
+              id="btn-close-toast-alert"
+              type="button"
+              onClick={hideAlert}
+              aria-label={I18n.t('close')}
+            >
               <span aria-hidden="true">
                 <FontAwesomeIcon icon={faTimes} />
               </span>

diff --git a/client/app/stories/Input.stories.jsx b/client/app/stories/Input.stories.jsx
@@ -335,9 +335,7 @@ const SelectTemplate = (args) => (
 );
 
 export const MultiSelect = () => (
-  <>
-    {InputMocks.createInput(InputMocks.inputMultiSelectProps)}
-  </>
+  <>{InputMocks.createInput(InputMocks.inputMultiSelectProps)}</>
 );
 
 MultiSelect.storyName = 'MultiSelect';

diff --git a/client/package.json b/client/package.json
@@ -98,6 +98,7 @@
     "glob": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.2.2",
+    "jest-canvas-mock": "^2.4.0",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "prettier-eslint": "^11.0.0",
     "react-test-renderer": "^17.0.2",
@@ -111,8 +112,7 @@
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-manifest-plugin": "^5.0.0",
-    "yml-loader": "^2.1.0",
-    "jest-canvas-mock": "^2.4.0"
+    "yml-loader": "^2.1.0"
   },
   "jest": {
     "moduleNameMapper": {