jsx layout closing tag

Author: Laoujin

frontend/.eslintrc.json

@@ -35,7 +35,18 @@
     "@typescript-eslint/no-shadow": "error",
     "jsx-quotes": ["error", "prefer-double"],
     "max-len": ["error", 160],
-    "react/jsx-closing-tag-location": [1, {"location": "tag-aligned"}]
+    "react/jsx-closing-tag-location": ["error", {"location": "tag-aligned"}],
+    "react/jsx-tag-spacing": ["error", {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never",
+      "beforeClosing": "never"
+    }],
+    "react/button-has-type": "error",
+    "react/void-dom-elements-no-children": "error",
+    // "react/destructuring-assignment": ["error", "always"]
+    "react/jsx-boolean-value": ["error", "never"],
+    "react/jsx-closing-bracket-location": ["error"]
   },
   "overrides": [
     {

frontend/src/components/client/contract/SingleContractIcon.tsx

@@ -39,6 +39,7 @@ export const SingleContractIcon = ({ contract, contracts, style, tooltip, ...pro
       fa={fa}
       style={{marginRight: 8, ...ownStyle, ...style}}
       title={tooltip || t(globalTooltip)}
-      {...props} />
+      {...props}
+    />
   );
 };

frontend/src/components/consultant/controls/ConsultantLinkWithModal.tsx

@@ -44,7 +44,8 @@ export const ConsultantLinkWithModal = ({ consultant, showType }: ConsultantLink
         size={1}
         style={{marginLeft: 8, color: 'grey', visibility: hover ? 'unset' : 'hidden'}}
         onClick={() => setModal(true)}
-        fa="fa fa-external-link-alt" />
+        fa="fa fa-external-link-alt"
+      />
 
       {modal && (
         <ConsultantModal
@@ -54,7 +55,8 @@ export const ConsultantLinkWithModal = ({ consultant, showType }: ConsultantLink
             setModal(false);
             setHover(false);
           }}
-          onConfirm={(c: ConsultantModel) => dispatch(saveConsultant(c) as any)} />
+          onConfirm={(c: ConsultantModel) => dispatch(saveConsultant(c) as any)}
+        />
       )}
     </div>
   );

frontend/src/components/home/measurements/client/ClientsAndProjectsEvolutionChart.tsx

@@ -12,7 +12,8 @@ export const ClientsAndProjectsEvolutionChart = ({ data }: ClientsAndProjectsEvo
       width={500}
       height={300}
       margin={{top: 10, right: 30, left: 0, bottom: 0,}}
-      data={data}>
+      data={data}
+    >
       <XAxis dataKey="month" />
       <YAxis allowDecimals={false} />
       <Tooltip />

frontend/src/components/pages/user/LogoutButton.tsx

@@ -23,7 +23,8 @@ export const LogoutButton = () => {
   return (
     <Button
       variant="danger"
-      onClick={logout}>
+      onClick={logout}
+    >
       <Icon className="tst-logout" fa="fab fa-google" size={1} style={{paddingRight: 8}} />
       {t('user.logout')}
     </Button>

frontend/src/components/pages/user/UserSettings.tsx

@@ -17,7 +17,8 @@ export const UserSettings = () => {
         <NumericInput
           label={'Aantal records per pagina tonen'}
           value={listSize}
-          onChange={value => dispatch({ type: ACTION_TYPES.APP_SETTINGS_UPDATED, payload: { listSize: value } })} />
+          onChange={value => dispatch({ type: ACTION_TYPES.APP_SETTINGS_UPDATED, payload: { listSize: value } })}
+        />
       </div>
     </div>
   );

frontend/src/components/project/project-month-list/closed-list/badges/InboundBadge.tsx

@@ -26,15 +26,13 @@ export const InboundBadge = ({pending, totals}: TimesheetBadgeProps) => {
         </i>
       </Tooltip>
 
-      <Tooltip
-        title={totals.inboundValidated && `<b>${t('projectMonth.inboundValidated')}</b><br>${totals.inboundValidated}`}>
+      <Tooltip title={totals.inboundValidated && `<b>${t('projectMonth.inboundValidated')}</b><br>${totals.inboundValidated}`}>
         <i className="fa fa-check fa-1x">
           <span>{totals.inboundValidatedCount}</span>
         </i>
       </Tooltip>
 
-      <Tooltip
-        title={totals.inboundPaid && `<b>${t('projectMonth.inboundPaid')}</b><br>${totals.inboundPaid}`}>
+      <Tooltip title={totals.inboundPaid && `<b>${t('projectMonth.inboundPaid')}</b><br>${totals.inboundPaid}`}>
         <i className="fa fa-coins fa-1x">
           <span>{totals.inboundPaidCount}</span>
         </i>

frontend/src/components/users/ClaimsSelect.tsx

@@ -11,6 +11,7 @@ export const ClaimsSelect = ({ value, onChange, ...props }: ClaimsSelectProps) =
       value={value}
       onChange={onChange}
       options={Object.values(Claim)}
-      {...props} />
+      {...props}
+    />
   );
 };