Migrating from arrow components to function components

primeroIMS · Jun 14, 2024 · 406c2d8 · 406c2d8
1 parent 185982a
commit 406c2d8
Show file tree

Hide file tree

Showing 458 changed files with 1,087 additions and 1,073 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
     "react/display-name": ["error", { ignoreTranspilerName: true }],
     "react/forbid-prop-types": "off",
     "react/jsx-props-no-spreading": "off",
-    "react/jsx-sort-default-props": [
+    "react/sort-default-props": [
       "error",
       {
         ignoreCase: true
@@ -65,7 +65,7 @@ module.exports = {
     "import/no-extraneous-dependencies": "off",
     "default-param-last": "off",
     "arrow-body-style": "off",
-    "react/function-component-definition": "off",
+    "react/function-component-definition": [2, { namedComponents: "function-declaration" }],
     "no-restricted-exports": "off",
     "no-import-assign": "off",
     "react/jsx-no-useless-fragment": "off",

diff --git a/app/javascript/app.jsx b/app/javascript/app.jsx
@@ -19,7 +19,7 @@ import appInit from "./app-init";
 
 const { store } = appInit();
 
-const App = () => {
+function App() {
   window.I18n.fallbacks = true;
 
   useLayoutEffect(() => {
@@ -51,7 +51,7 @@ const App = () => {
       </ThemeProvider>
     </Provider>
   );
-};
+}
 
 App.displayName = "App";
 

diff --git a/app/javascript/components/action-button/components/default-button/component.jsx b/app/javascript/components/action-button/components/default-button/component.jsx
@@ -10,7 +10,7 @@ import ButtonText from "../../../button-text";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   id,
   icon,
   cancel,
@@ -22,7 +22,7 @@ const Component = ({
   tooltip,
   rest,
   ...options
-}) => {
+}) {
   const renderIcon = icon || null;
   const isPending = Boolean(pending);
   const renderLoadingIndicator = isPending && <CircularProgress size={24} className={css.buttonProgress} />;
@@ -62,7 +62,7 @@ const Component = ({
       </span>
     </Parent>
   );
-};
+}
 
 Component.displayName = NAME;
 

diff --git a/app/javascript/components/action-button/components/icon-button/component.jsx b/app/javascript/components/action-button/components/icon-button/component.jsx
@@ -8,7 +8,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ icon, id, rest, ...otherProps }) => {
+function Component({ icon, id, rest, ...otherProps }) {
   const { tooltip } = otherProps;
   const Parent = tooltip ? Tooltip : Fragment;
   const spanClasses = clsx({ [css.isDisabled]: rest.disabled });
@@ -22,7 +22,7 @@ const Component = ({ icon, id, rest, ...otherProps }) => {
       </span>
     </Parent>
   );
-};
+}
 
 Component.displayName = NAME;
 

diff --git a/app/javascript/components/action-button/components/link/component.jsx b/app/javascript/components/action-button/components/link/component.jsx
@@ -5,7 +5,7 @@ import { Link } from "@mui/material";
 
 import { NAME } from "./constants";
 
-const Component = ({ text, id, ...options }) => {
+function Component({ text, id, ...options }) {
   const { rest, ...remainder } = options;
 
   if (rest.disabled) {
@@ -17,7 +17,7 @@ const Component = ({ text, id, ...options }) => {
       {text}
     </Link>
   );
-};
+}
 
 Component.displayName = NAME;
 

diff --git a/app/javascript/components/action-dialog/component.jsx b/app/javascript/components/action-dialog/component.jsx
@@ -17,7 +17,7 @@ import css from "./styles.css";
 import { clearDialog } from "./action-creators";
 import { getAsyncLoading } from "./selectors";
 
-const ActionDialog = ({
+function ActionDialog({
   cancelButtonProps = {},
   cancelHandler,
   children,
@@ -42,7 +42,7 @@ const ActionDialog = ({
   fetchAction,
   fetchArgs = [],
   fetchLoadingPath
-}) => {
+}) {
   const dispatch = useDispatch();
 
   const { disabledApplication } = useApp();
@@ -166,7 +166,7 @@ const ActionDialog = ({
       </Dialog>
     </div>
   );
-};
+}
 
 ActionDialog.displayName = "ActionDialog";
 

diff --git a/app/javascript/components/action-dialog/components/text-with-close/component.jsx b/app/javascript/components/action-dialog/components/text-with-close/component.jsx
@@ -7,7 +7,7 @@ import { DialogTitle, IconButton } from "@mui/material";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, disableClose = false }) => {
+function Component({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, disableClose = false }) {
   const subtitle = dialogSubtitle ? <span className={css.dialogSubtitle}>{dialogSubtitle}</span> : null;
 
   return (
@@ -28,7 +28,7 @@ const Component = ({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, d
       </div>
     </DialogTitle>
   );
-};
+}
 
 Component.propTypes = {
   closeHandler: PropTypes.func.isRequired,

diff --git a/app/javascript/components/activity-log/component.jsx b/app/javascript/components/activity-log/component.jsx
@@ -15,7 +15,7 @@ import { getColumns, getRecordPath } from "./utils";
 import { fetchActivityLog, setActivityLogsFilter } from "./action-creators";
 import css from "./styles.css";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const recordType = RESOURCES.activity_logs;
@@ -67,7 +67,7 @@ const Component = () => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 Component.displayName = "ActivityLog";
 

diff --git a/app/javascript/components/activity-log/components/activity-item/component.jsx b/app/javascript/components/activity-log/components/activity-item/component.jsx
@@ -9,7 +9,7 @@ import getActivityMessage from "../../utils/get-activity-message";
 
 import css from "./styles.css";
 
-const Component = ({ activityData }) => {
+function Component({ activityData }) {
   const i18n = useI18n();
   const classes = clsx(css.activityContainer, {
     [css.disabledItem]: activityData.recordAccessDenied
@@ -36,7 +36,7 @@ const Component = ({ activityData }) => {
       <div className={css.type}>{i18n.t(`${type}.label`)}</div>
     </div>
   );
-};
+}
 
 Component.displayName = "ActivityItem";
 

diff --git a/app/javascript/components/application-routes/app-route.jsx b/app/javascript/components/application-routes/app-route.jsx
@@ -6,7 +6,7 @@ import Layouts from "../layouts";
 
 import SubRoutes from "./sub-routes";
 
-const AppRoute = ({ route }) => {
+function AppRoute({ route }) {
   const { layout, component: Component, extraProps, ...routeProps } = route;
 
   if (layout) {
@@ -18,7 +18,7 @@ const AppRoute = ({ route }) => {
   }
 
   return <Component {...routeProps} {...extraProps} />;
-};
+}
 
 AppRoute.displayName = "AppRoute";
 

diff --git a/app/javascript/components/application-routes/component.jsx b/app/javascript/components/application-routes/component.jsx
@@ -5,7 +5,7 @@ import { Route, Switch } from "react-router-dom";
 
 import AppRoute from "./app-route";
 
-const ApplicationRoutes = ({ routes }) => {
+function ApplicationRoutes({ routes }) {
   const appRoutes = routes.map((route, index) => {
     const { routes: subRoutes, exact, path } = route;
 
@@ -23,7 +23,7 @@ const ApplicationRoutes = ({ routes }) => {
   });
 
   return <Switch>{appRoutes}</Switch>;
-};
+}
 
 ApplicationRoutes.displayName = "ApplicationRoutes";
 

diff --git a/app/javascript/components/application-routes/sub-route.jsx b/app/javascript/components/application-routes/sub-route.jsx
@@ -11,7 +11,7 @@ import Permission from "../permissions";
 import { getCodeOfConductEnabled, getCodesOfConduct } from "../application/selectors";
 import { getCodeOfConductId } from "../user";
 
-const SubRoute = ({ subRoute }) => {
+function SubRoute({ subRoute }) {
   const { path, resources, actions, component: Component, extraProps } = subRoute;
 
   const codeOfConductAccepted = useMemoizedSelector(state => getCodeOfConductId(state));
@@ -38,7 +38,7 @@ const SubRoute = ({ subRoute }) => {
       </Permission>
     </ErrorBoundary>
   );
-};
+}
 
 SubRoute.displayName = "SubRoute";
 

diff --git a/app/javascript/components/application/use-app.jsx b/app/javascript/components/application/use-app.jsx
@@ -11,13 +11,13 @@ import { getAppData } from "./selectors";
 
 const Context = createContext();
 
-const ApplicationProvider = ({ children }) => {
+function ApplicationProvider({ children }) {
   const { online, fieldMode } = useConnectivityStatus();
 
   const appData = useMemoizedSelector(state => getAppData(state), isEqual);
 
   return <Context.Provider value={{ ...appData, online, fieldMode }}>{children}</Context.Provider>;
-};
+}
 
 ApplicationProvider.displayName = "ApplicationProvider";
 

diff --git a/app/javascript/components/approvals/components/detail/component.jsx b/app/javascript/components/approvals/components/detail/component.jsx
@@ -9,7 +9,7 @@ import { useApp } from "../../../application";
 
 import { approvalLabel } from "./utils";
 
-const Component = ({ approvalSubform, isRequest, isResponse }) => {
+function Component({ approvalSubform, isRequest, isResponse }) {
   const { approvalsLabels } = useApp();
 
   const renderApprovalLabel =
@@ -53,7 +53,7 @@ const Component = ({ approvalSubform, isRequest, isResponse }) => {
       </Grid>
     </>
   );
-};
+}
 
 Component.displayName = NAME_DETAIL;
 

diff --git a/app/javascript/components/approvals/components/panel/component.jsx b/app/javascript/components/approvals/components/panel/component.jsx
@@ -9,7 +9,7 @@ import ApprovalSummary from "../summary";
 import ApprovalDetail from "../detail";
 import { NAME_PANEL } from "../../constants";
 
-const Component = ({ approvalSubform, css }) => {
+function Component({ approvalSubform, css }) {
   const [expanded, setExpanded] = useState(false);
 
   const handleExpanded = () => {
@@ -45,7 +45,7 @@ const Component = ({ approvalSubform, css }) => {
       </Accordion>
     </div>
   );
-};
+}
 
 Component.displayName = NAME_PANEL;
 

diff --git a/app/javascript/components/approvals/components/summary/component.jsx b/app/javascript/components/approvals/components/summary/component.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../i18n";
 import { NAME_SUMMARY } from "../../constants";
 import { useApp } from "../../../application";
 
-const Component = ({ approvalSubform, css, isRequest, isResponse }) => {
+function Component({ approvalSubform, css, isRequest, isResponse }) {
   const i18n = useI18n();
   const { approvalsLabels } = useApp();
   const status = approvalSubform.get("approval_status");
@@ -56,7 +56,7 @@ const Component = ({ approvalSubform, css, isRequest, isResponse }) => {
       {renderStatus}
     </Grid>
   );
-};
+}
 
 Component.displayName = NAME_SUMMARY;
 

diff --git a/app/javascript/components/approvals/container.jsx b/app/javascript/components/approvals/container.jsx
@@ -9,7 +9,7 @@ import css from "./styles.css";
 import { NAME } from "./constants";
 import ApprovalPanel from "./components/panel";
 
-const Container = ({ approvals, mobileDisplay, handleToggleNav }) => {
+function Container({ approvals, mobileDisplay, handleToggleNav }) {
   const i18n = useI18n();
 
   const renderApprovals =
@@ -34,7 +34,7 @@ const Container = ({ approvals, mobileDisplay, handleToggleNav }) => {
       </div>
     </div>
   );
-};
+}
 
 Container.displayName = NAME;
 

diff --git a/app/javascript/components/button-text/component.jsx b/app/javascript/components/button-text/component.jsx
@@ -5,15 +5,15 @@ import { useMediaQuery } from "@mui/material";
 
 import { NAME } from "./constants";
 
-const Component = ({ text, keepTextOnMobile = false }) => {
+function Component({ text, keepTextOnMobile = false }) {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
 
   if (mobileDisplay && !keepTextOnMobile) {
     return null;
   }
 
   return <>{text}</>;
-};
+}
 
 Component.displayName = NAME;
 

diff --git a/app/javascript/components/change-logs/components/change-log-item/component.jsx b/app/javascript/components/change-logs/components/change-log-item/component.jsx
@@ -17,7 +17,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ item }) => {
+function Component({ item }) {
   const i18n = useI18n();
   const { onClick } = item;
   const renderMessage = change => (
@@ -62,7 +62,7 @@ const Component = ({ item }) => {
       </TimelineContent>
     </TimelineItem>
   );
-};
+}
 
 Component.displayName = NAME;
 

diff --git a/app/javascript/components/change-logs/components/change-log/component.jsx b/app/javascript/components/change-logs/components/change-log/component.jsx
@@ -10,7 +10,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   recordChangeLogs,
   setOpen,
   setRecordChanges,
@@ -19,7 +19,7 @@ const Component = ({
   allLookups,
   locations,
   allAgencies
-}) => {
+}) {
   const i18n = useI18n();
 
   const handleSeeDetails = subformChanges => {
@@ -39,7 +39,7 @@ const Component = ({
   ).map(item => <ChangeLogItem item={item} key={item.key} />);
 
   return <Timeline classes={{ root: css.root }}>{renderItems}</Timeline>;
-};
+}
 
 Component.displayName = NAME;