.eslintrc.js

@@ -6,6 +6,32 @@ module.exports = {
     'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
     'plugin:react-hooks/recommended',
+    'react-app',
+  ],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  overrides: [
+    {
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/eslint-recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+        // This enables a lot of type checking
+        // 'plugin:@typescript-eslint/recommended-requiring-type-checking', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+      ],
+      files: ['**/*.{ts,tsx}'],
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/prefer-optional-chain': 'warn',
+        '@typescript-eslint/prefer-as-const': 'error',
+        '@typescript-eslint/await-thenable': 'error',
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
   ],
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
@@ -16,9 +42,9 @@ module.exports = {
   },
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-    '@typescript-eslint/explicit-function-return-type': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/prop-types': 'warn',
+    'react/self-closing-comp': 'warn',
   },
   settings: {
     react: {

.prettierrc

@@ -3,5 +3,6 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
 }

.vscode/settings.json

@@ -34,10 +34,11 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "peacock.color": "#2aa63d",
   "sonarlint.connectedMode.project": {
-    "connectionId": "sonarqube-forge-grandlyon",
-    "projectKey": "web-et-numerique-llle-project-backoffice-client"
+    "connectionId": "Sonar",
+    "projectKey": "web-et-numerique-factory-llle-project-backoffice-client"
   },
   "cSpell.words": [
+    "backoffice",
     "draftjs",
     "ecogesture",
     "ecolyo",

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI=false && react-scripts build",
     "local-up": "docker-compose -f docker-compose.local.yml up -d && yarn start",
     "local-down": "docker-compose -f docker-compose.local.yml down",
     "docker": "docker run -it --rm -p 3000:3000 front-backoffice",
-    "lint": "eslint .",
+    "lint": "eslint src -c .eslintrc.js --fix",
     "lint:fix": "eslint --fix .",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "test": "react-scripts test",
@@ -27,7 +27,6 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -37,8 +36,6 @@
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -48,9 +45,6 @@
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@types/draft-js": "^0.11.4",
     "@types/draftjs-to-html": "^0.8.1",
     "@types/html-to-draftjs": "^1.4.0",

src/components/Consents/Consents.tsx

@@ -45,7 +45,7 @@ const Consents: React.FC = () => {
   }, [])
 
   const toggleOpenModal = useCallback(() => {
-    setOpenDowloadModal((prev) => !prev)
+    setOpenDowloadModal(prev => !prev)
   }, [])
 
   const defaultColDef = useMemo(
@@ -134,7 +134,7 @@ const Consents: React.FC = () => {
     },
     []
   )
-  const handleChangeRowsPerPage = useCallback((event: any) => {
+  const handleChangeRowsPerPage = useCallback(event => {
     setRowsPerPage(event.target.value)
     setPage(0)
   }, [])
@@ -143,10 +143,10 @@ const Consents: React.FC = () => {
     if (gridApi) {
       const newNodes = gridApi.getRenderedNodes()
       const idsToCheck: string[] = selectedNodes
-        .filter((node: RowNode) => node.isSelected)
-        .map((node: RowNode) => node.data.ID)
+        .filter(node => node.isSelected)
+        .map(node => node.data.ID)
 
-      newNodes.forEach((node: RowNode) => {
+      newNodes.forEach(node => {
         if (idsToCheck.includes(node.data.ID))
           node.setSelected(true, false, true)
       })
@@ -187,14 +187,14 @@ const Consents: React.FC = () => {
     (event: RowSelectedEvent) => {
       if (event.node.isSelected()) {
         const index = selectedNodes.findIndex(
-          (node) => node.data.ID === event.node.data.ID
+          node => node.data.ID === event.node.data.ID
         )
         if (index === -1) {
-          setSelectedNodes((prev) => [...prev, event.node])
+          setSelectedNodes(prev => [...prev, event.node])
         }
       } else {
-        setSelectedNodes((prev) =>
-          prev.filter((node) => {
+        setSelectedNodes(prev =>
+          prev.filter(node => {
             return node.data.ID != event.node.data.ID
           })
         )
@@ -279,7 +279,7 @@ const Consents: React.FC = () => {
               }
               disabled={isShowingSelection}
               autoComplete="off"
-            ></input>
+            />
           </div>
         </div>
         <div
@@ -301,9 +301,9 @@ const Consents: React.FC = () => {
             pagination={false}
             suppressCellFocus={true}
             rowClassRules={{
-              expired: (params) => params.data.endDate < DateTime.now(),
+              expired: params => params.data.endDate < DateTime.now(),
             }}
-          ></AgGridReact>
+          />
           {!isShowingSelection && (
             <TablePagination
               labelRowsPerPage="Consentements par page"

src/components/Navigation/BottomBar.tsx

@@ -14,7 +14,7 @@ const BottomBar: React.FC = () => {
       <div className="menu-list">
         {user &&
           routes.map(
-            (route) =>
+            route =>
               (!route.adminOnly || user?.isAdmin) && (
                 <NavLink
                   key={route.label}

src/components/Navigation/SideBar.tsx

@@ -18,7 +18,7 @@ const SideBar: React.FC = () => {
       <div className="menu-list">
         {user &&
           routes.map(
-            (route) =>
+            route =>
               (!route.adminOnly || user.isAdmin) && (
                 <NavLink
                   key={route.label}

src/components/Newsletter/CustomEditor.tsx

@@ -60,7 +60,7 @@ const CustomEditor: React.FC<CustomEditorProps> = ({
   return (
     <Editor
       editorState={editorState}
-      onEditorStateChange={(state) => handleStateChange(state)}
+      onEditorStateChange={state => handleStateChange(state)}
       handlePastedText={() => false}
       wrapperClassName="wrapper-class"
       editorClassName="editor-class"

src/components/Newsletter/CustomLink.tsx

@@ -77,7 +77,7 @@ const CustomLink: React.FC<EcolyoLinkProps> = ({ onChange, editorState }) => {
                 : 'rdw-dropdown-optionwrapper placeholder-ul'
             }
           >
-            {links.map((item: LinkState) => {
+            {links.map(item => {
               return (
                 <li
                   className="rdw-dropdownoption-default placeholder-li"

src/components/Newsletter/DateSelector/DateSelector.tsx

@@ -17,7 +17,7 @@ const DateSelector: React.FC<DateSelectorProps> = ({
 }) => {
   const [openModal, setOpenModal] = useState<boolean>(false)
   const [isPrev, setIsPrev] = useState<boolean>(false)
-  const toggleOpenModal = () => setOpenModal((prev) => !prev)
+  const toggleOpenModal = () => setOpenModal(prev => !prev)
 
   const handleNextMonth = () => {
     setIsPrev(false)

src/components/Newsletter/ImagePicker/ImagePicker.tsx

@@ -28,7 +28,7 @@ const ImagePicker: React.FC<ImagePickerProps> = ({
   const imagePerPage = 10
 
   const toggleModal = () => {
-    setOpenModal((prev) => !prev)
+    setOpenModal(prev => !prev)
   }
   const handleChangePage = (page: number) => {
     setCurrentPage(page)
@@ -95,7 +95,7 @@ const ImagePicker: React.FC<ImagePickerProps> = ({
               {imageNames &&
                 imageNames.length !== 0 &&
                 imageNames[currentPage - 1].length !== 0 &&
-                imageNames[currentPage - 1].map((imageName) => (
+                imageNames[currentPage - 1].map(imageName => (
                   <SingleImage
                     imageURL={imageName}
                     key={imageName}

src/components/Newsletter/Newsletter.tsx

@@ -298,7 +298,7 @@ const Newsletter: React.FC = () => {
             subject={subject}
             handleChange={handleEditorChange}
             onDelete={handleOpenDeleteModal}
-          ></MailSubject>
+          />
           <hr />
           <MonthlyInfo
             info={info}

src/components/Popups/Popups.tsx

@@ -70,25 +70,25 @@ const Popups: React.FC = () => {
   const handleCheckboxChange = (value: boolean, type: CheckboxType): void => {
     switch (type) {
       case CheckboxType.GRDF:
-        setPartnersInfo((prevPartnersInfo) => ({
+        setPartnersInfo(prevPartnersInfo => ({
           ...prevPartnersInfo,
           grdf_failure: value,
         }))
         break
       case CheckboxType.ENEDIS:
-        setPartnersInfo((prevPartnersInfo) => ({
+        setPartnersInfo(prevPartnersInfo => ({
           ...prevPartnersInfo,
           enedis_failure: value,
         }))
         break
       case CheckboxType.EGL:
-        setPartnersInfo((prevPartnersInfo) => ({
+        setPartnersInfo(prevPartnersInfo => ({
           ...prevPartnersInfo,
           egl_failure: value,
         }))
         break
       case CheckboxType.CUSTOM:
-        setCustomPopup((prev) => ({
+        setCustomPopup(prev => ({
           ...prev,
           popupEnabled: value,
         }))
@@ -99,7 +99,7 @@ const Popups: React.FC = () => {
   }
 
   const handlePopupChange = (field: 'title' | 'description', value: string) => {
-    setCustomPopup((prev) => ({
+    setCustomPopup(prev => ({
       ...prev,
       [field]: value,
     }))
@@ -176,7 +176,7 @@ const Popups: React.FC = () => {
   }
 
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setPopupDuration((prev) => ({
+    setPopupDuration(prev => ({
       ...prev,
       type: event.target.value as durationType,
     }))
@@ -197,7 +197,7 @@ const Popups: React.FC = () => {
         years: 1,
       })
     }
-    setCustomPopup((prev) => ({
+    setCustomPopup(prev => ({
       ...prev,
       endDate: newDate.toISO(),
     }))
@@ -246,14 +246,14 @@ const Popups: React.FC = () => {
                     id="switch_enedis"
                     disabled={customPopup.popupEnabled}
                     checked={partnersInfo.enedis_failure}
-                    onChange={(event) => {
+                    onChange={event => {
                       handleCheckboxChange(
                         event.currentTarget.checked,
                         CheckboxType.ENEDIS
                       )
                     }}
                   />
-                  <label htmlFor="switch_enedis"></label>
+                  <label htmlFor="switch_enedis" />
                 </div>
                 <div className="switch_div">
                   <span>Panne EGL</span>
@@ -262,14 +262,14 @@ const Popups: React.FC = () => {
                     id="switch_egl"
                     disabled={customPopup.popupEnabled}
                     checked={partnersInfo.egl_failure}
-                    onChange={(event) => {
+                    onChange={event => {
                       handleCheckboxChange(
                         event.currentTarget.checked,
                         CheckboxType.EGL
                       )
                     }}
                   />
-                  <label htmlFor="switch_egl"></label>
+                  <label htmlFor="switch_egl" />
                 </div>
                 <div className="switch_div">
                   <span>Panne GRDF</span>
@@ -278,14 +278,14 @@ const Popups: React.FC = () => {
                     id="switch_grdf"
                     disabled={customPopup.popupEnabled}
                     checked={partnersInfo.grdf_failure}
-                    onChange={(event) => {
+                    onChange={event => {
                       handleCheckboxChange(
                         event.currentTarget.checked,
                         CheckboxType.GRDF
                       )
                     }}
                   />
-                  <label htmlFor="switch_grdf"></label>
+                  <label htmlFor="switch_grdf" />
                 </div>
               </div>
             </div>
@@ -301,14 +301,14 @@ const Popups: React.FC = () => {
                       id="switch_popup"
                       disabled={isPartnerNotificationOn()}
                       checked={customPopup.popupEnabled}
-                      onChange={(event) => {
+                      onChange={event => {
                         handleCheckboxChange(
                           event.currentTarget.checked,
                           CheckboxType.CUSTOM
                         )
                       }}
                     />
-                    <label htmlFor="switch_popup"></label>
+                    <label htmlFor="switch_popup" />
                   </div>
 
                   {customPopup.popupEnabled &&
@@ -325,7 +325,7 @@ const Popups: React.FC = () => {
                     min={1}
                     placeholder="Titre"
                     value={customPopup.title}
-                    onChange={(event) =>
+                    onChange={event =>
                       handlePopupChange('title', event.target.value)
                     }
                   />
@@ -336,7 +336,7 @@ const Popups: React.FC = () => {
                     baseState={convertStringToEditorState(
                       customPopup.description
                     )}
-                    handleChange={(value) =>
+                    handleChange={value =>
                       handlePopupChange('description', value)
                     }
                     type="custom_popup"
@@ -348,9 +348,9 @@ const Popups: React.FC = () => {
                   <div className="durationInput">
                     <select
                       value={popupDuration.type}
-                      onChange={(event) => handleSelectChange(event)}
+                      onChange={event => handleSelectChange(event)}
                     >
-                      {OPTIONS.map((option) => (
+                      {OPTIONS.map(option => (
                         <option
                           key={option.value}
                           value={option.value}
@@ -365,8 +365,8 @@ const Popups: React.FC = () => {
                         type="number"
                         min="0"
                         value={popupDuration.duration}
-                        onChange={(e) =>
-                          setPopupDuration((prev) => ({
+                        onChange={e =>
+                          setPopupDuration(prev => ({
                             ...prev,
                             duration: Number(e.target.value),
                           }))

src/components/Prices/PriceRow.tsx

@@ -21,7 +21,7 @@ const PriceRow: React.FC<PriceSectionProps> = ({
   index,
   isNextPrice,
 }) => {
-  const editableLimit: number = 3
+  const editableLimit = 3
 
   return (
     <>
@@ -47,7 +47,7 @@ const PriceRow: React.FC<PriceSectionProps> = ({
           />
         )}
       </li>
-      <hr></hr>
+      <hr />
     </>
   )
 }

src/components/Prices/PriceSection.tsx

@@ -36,13 +36,13 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
     endDate: null,
   })
   const { user }: Partial<UserContextProps> = useContext(UserContext)
-  const maxPerList: number = 8
+  const maxPerList = 8
 
   const handlePriceSelection = useCallback((val: string) => {
     if (val === '') val = '0'
     val = val.replace(/,/g, '.')
     val = val.replace(/([^0-9.]+)/, '')
-    setPriceToSave((prev) => {
+    setPriceToSave(prev => {
       return { ...prev, price: val }
     })
   }, [])
@@ -68,7 +68,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
   }, [priceToSave, user])
 
   const toggleHistory = useCallback(() => {
-    setShowHistory((prev) => !prev)
+    setShowHistory(prev => !prev)
   }, [])
 
   const getDate = useCallback((isoString: string): string => {
@@ -79,7 +79,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
   }, [])
 
   const toggleFullList = useCallback(() => {
-    setShowFullList((prev) => !prev)
+    setShowFullList(prev => !prev)
   }, [])
 
   useEffect(() => {
@@ -120,7 +120,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
     }
   }, [refreshData, frequency, fluid])
 
-  if (isLoading) return <Loader></Loader>
+  if (isLoading) return <Loader />
   if (!prices.length) return <section> Aucun prix trouvé</section>
   return (
     <section>
@@ -136,7 +136,7 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
           className="input-dark price-select"
           type="text"
           value={priceToSave.price.toString()}
-          onChange={(e) => handlePriceSelection(e.target.value)}
+          onChange={e => handlePriceSelection(e.target.value)}
           placeholder={priceToSave.price === '' ? 'Saisir le nouveau prix' : ''}
         />
         <span className="euro">€</span>

src/components/Routes/Router.tsx

@@ -29,7 +29,7 @@ export const links: {
   },
 }
 
-export const routes = Object.keys(links).map((key) => ({
+export const routes = Object.keys(links).map(key => ({
   label: links[key].label,
   path: links[key].path,
   adminOnly: links[key].adminOnly,

src/hooks/useAuth.ts

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom'
 import { links } from '../components/Routes/Router'
 import { UserContext } from './userContext'
 
-export interface Auth {
+interface Auth {
   loginUser: () => Promise<void>
   error: null
   logoutUser: () => void

src/services/consent.service.ts

 import axios, { AxiosRequestConfig } from 'axios'
 import { DateTime } from 'luxon'
 import { toast } from 'react-toastify'
-import { ConsentEntity, IConsent } from '../models/consent.model'
 import {
+  ConsentEntity,
   ConsentPaginationEntity,
+  IConsent,
   IConsentPagination,
-} from './../models/consent.model'
+} from '../models/consent.model'
 
 export class ConsentService {
   /**
@@ -28,7 +29,7 @@ export class ConsentService {
       )
       const consentPagination = data as ConsentPaginationEntity
       return this.parseConsentPagination(consentPagination)
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -72,7 +73,7 @@ export class ConsentService {
   public parseConsentPagination = (
     consentPaginationEntity: ConsentPaginationEntity
   ): IConsentPagination => {
-    const rows = consentPaginationEntity.rows.map((consent) =>
+    const rows = consentPaginationEntity.rows.map(consent =>
       this.parseConsent(consent)
     )
 

src/services/newsletter.service.ts

@@ -27,7 +27,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Objet de la newsletter enregistré !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -56,7 +56,7 @@ export class NewsletterService {
         axiosHeaders
       )
       return data as IMailSubject
-    } catch (e: any) {
+    } catch (e) {
       console.error('error', e)
       return null
     }
@@ -79,7 +79,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Objet de la newsletter supprimé !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -112,7 +112,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Information du mois enregistrée !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -139,7 +139,7 @@ export class NewsletterService {
         axiosHeaders
       )
       return data as IMonthlyInfo
-    } catch (e: any) {
+    } catch (e) {
       console.error('error', e)
       return null
     }
@@ -162,7 +162,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Informations du mois supprimées !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -196,7 +196,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Nouveautés du mois enregistrés !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -246,7 +246,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Nouveautés du mois supprimées !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -280,7 +280,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Sondage enregistré !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {
@@ -326,7 +326,7 @@ export class NewsletterService {
         axiosHeaders
       )
       toast.success('Sondage supprimé !')
-    } catch (e: any) {
+    } catch (e) {
       if (e.response.status === 403) {
         toast.error("Accès refusé : vous n'avez pas les droits nécessaires")
       } else {

src/setupTests.ts

-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'