Refactor components to supress unnecessary rendering

pkg/app/web/.scaffdog/page.md

@@ -10,10 +10,10 @@ ignore: []
 # `{{ inputs.name }}.tsx`
 
 ```tsx
-import { memo, FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
 
-export const {{ inputs.name | pascal }}Page: FC = memo(() => {
+export const {{ inputs.name | pascal }}Page: FC = () => {
   return <div>hello</div>;
-});
+};
 ```

pkg/app/web/src/components/application-form/index.tsx

@@ -168,6 +168,7 @@ export const ApplicationForm: FC<ApplicationFormProps> = memo(
     handleChange,
     isSubmitting,
     isValid,
+    dirty,
     setFieldValue,
     setValues,
     onClose,
@@ -332,7 +333,7 @@ export const ApplicationForm: FC<ApplicationFormProps> = memo(
           <Button
             color="primary"
             type="submit"
-            disabled={isValid === false || isSubmitting}
+            disabled={isValid === false || isSubmitting || dirty === false}
           >
             {UI_TEXT_SAVE}
             {isSubmitting && (

pkg/app/web/src/components/applications-page/add-application-drawer/index.tsx

@@ -39,7 +39,6 @@ export const AddApplicationDrawer: FC<AddApplicationDrawerProps> = memo(
     const [showConfirm, setShowConfirm] = useState(false);
     const formik = useFormik<ApplicationFormValue>({
       initialValues: emptyFormValues,
-      validateOnMount: true,
       validationSchema,
       enableReinitialize: true,
       async onSubmit(values) {

pkg/app/web/src/components/applications-page/application-filter/application-autocomplete.tsx

@@ -0,0 +1,34 @@
+import { TextField } from "@material-ui/core";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import { FC } from "react";
+import { useAppSelector } from "~/hooks/redux";
+import { selectAll as selectAllApplications } from "~/modules/applications";
+import { uniqueArray } from "~/utils/unique-array";
+
+interface Props {
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export const ApplicationAutocomplete: FC<Props> = ({ value, onChange }) => {
+  const applications = useAppSelector<string[]>(
+    (state) =>
+      uniqueArray(
+        selectAllApplications(state.applications).map((app) => app.name)
+      ),
+    (left, right) => JSON.stringify(left) === JSON.stringify(right)
+  );
+  return (
+    <Autocomplete
+      id="name"
+      options={applications}
+      value={value}
+      onChange={(_, value) => {
+        onChange(value || "");
+      }}
+      renderInput={(params) => (
+        <TextField {...params} label="Name" variant="outlined" />
+      )}
+    />
+  );
+};

pkg/app/web/src/components/applications-page/application-filter/index.tsx

@@ -4,9 +4,7 @@ import {
   makeStyles,
   MenuItem,
   Select,
-  TextField,
 } from "@material-ui/core";
-import Autocomplete from "@material-ui/lab/Autocomplete";
 import { FC, memo } from "react";
 import { FilterView } from "~/components/filter-view";
 import { APPLICATION_KIND_TEXT } from "~/constants/application-kind";
@@ -18,10 +16,9 @@ import {
   ApplicationsFilterOptions,
   ApplicationSyncStatus,
   ApplicationSyncStatusKey,
-  selectAll as selectAllApplications,
 } from "~/modules/applications";
 import { selectAllEnvs } from "~/modules/environments";
-import { uniqueArray } from "~/utils/unique-array";
+import { ApplicationAutocomplete } from "./application-autocomplete";
 
 const useStyles = makeStyles((theme) => ({
   toolbarSpacer: {
@@ -48,11 +45,6 @@ export const ApplicationFilter: FC<ApplicationFilterProps> = memo(
   function ApplicationFilter({ options, onChange, onClear }) {
     const classes = useStyles();
     const envs = useAppSelector(selectAllEnvs);
-    const applications = useAppSelector<string[]>((state) =>
-      uniqueArray(
-        selectAllApplications(state.applications).map((app) => app.name)
-      )
-    );
 
     const handleUpdateFilterValue = (
       optionPart: Partial<ApplicationsFilterOptions>
@@ -67,18 +59,9 @@ export const ApplicationFilter: FC<ApplicationFilterProps> = memo(
         }}
       >
         <div className={classes.formItem}>
-          <Autocomplete
-            id="name"
-            options={applications}
+          <ApplicationAutocomplete
             value={options.name ?? null}
-            onChange={(_, value) => {
-              handleUpdateFilterValue({
-                name: value || "",
-              });
-            }}
-            renderInput={(params) => (
-              <TextField {...params} label="Name" variant="outlined" />
-            )}
+            onChange={(value) => handleUpdateFilterValue({ name: value })}
           />
         </div>
 

pkg/app/web/src/components/applications-page/application-list/sealed-secret-dialog/index.tsx

@@ -74,7 +74,6 @@ export const SealedSecretDialog: FC<SealedSecretDialogProps> = memo(
         base64: false,
       },
       validationSchema,
-      validateOnMount: true,
       async onSubmit(values) {
         if (!application) {
           return;
@@ -164,7 +163,11 @@ export const SealedSecretDialog: FC<SealedSecretDialogProps> = memo(
               <Button
                 color="primary"
                 type="submit"
-                disabled={formik.isSubmitting || formik.isValid === false}
+                disabled={
+                  formik.isSubmitting ||
+                  formik.isValid === false ||
+                  formik.dirty === false
+                }
               >
                 Encrypt
               </Button>

pkg/app/web/src/components/applications-page/edit-application-drawer/index.tsx

@@ -44,7 +44,6 @@ export const EditApplicationDrawer: FC<EditApplicationDrawerProps> = memo(
             cloudProvider: app.cloudProvider,
           }
         : emptyFormValues,
-      validateOnMount: true,
       validationSchema,
       enableReinitialize: true,
       async onSubmit(values) {

pkg/app/web/src/components/applications-page/index.tsx

@@ -11,10 +11,15 @@ import { Add } from "@material-ui/icons";
 import CloseIcon from "@material-ui/icons/Close";
 import FilterIcon from "@material-ui/icons/FilterList";
 import RefreshIcon from "@material-ui/icons/Refresh";
-import { FC, memo, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { PAGE_PATH_APPLICATIONS } from "~/constants/path";
-import { UI_TEXT_FILTER, UI_TEXT_HIDE_FILTER } from "~/constants/ui-text";
+import {
+  UI_TEXT_ADD,
+  UI_TEXT_FILTER,
+  UI_TEXT_HIDE_FILTER,
+  UI_TEXT_REFRESH,
+} from "~/constants/ui-text";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { fetchApplicationCount } from "~/modules/application-counts";
 import { ApplicationKind, fetchApplications } from "~/modules/applications";
@@ -47,20 +52,23 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
+export const ApplicationIndexPage: FC = () => {
   const classes = useStyles();
   const dispatch = useAppDispatch();
   const history = useHistory();
   const filterOptions = useSearchParams();
   const [openAddForm, setOpenAddForm] = useState(false);
   const [openFilter, setOpenFilter] = useState(true);
-  const [isLoading, isAdding] = useAppSelector<[boolean, boolean]>((state) => [
-    state.applications.loading,
-    state.applications.adding,
-  ]);
+  const isAdding = useAppSelector<boolean>(
+    (state) => state.applications.adding
+  );
+  const isLoading = useAppSelector<boolean>(
+    (state) => state.applications.loading
+  );
   const addedApplicationId = useAppSelector<string | null>(
     (state) => state.deploymentConfigs.targetApplicationId
   );
+
   const currentPage =
     typeof filterOptions.page === "string"
       ? parseInt(filterOptions.page, 10)
@@ -122,7 +130,7 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
           startIcon={<Add />}
           onClick={() => setOpenAddForm(true)}
         >
-          ADD
+          {UI_TEXT_ADD}
         </Button>
         <div className={classes.toolbarSpacer} />
         <Button
@@ -131,7 +139,7 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
           onClick={fetchApplicationsWithOptions}
           disabled={isLoading}
         >
-          {"REFRESH"}
+          {UI_TEXT_REFRESH}
           {isLoading && (
             <CircularProgress size={24} className={classes.buttonProgress} />
           )}
@@ -184,4 +192,4 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
       </Drawer>
     </>
   );
-});
+};

pkg/app/web/src/components/deployments-detail-page/deployment-detail/index.tsx

@@ -18,7 +18,6 @@ import { DEPLOYMENT_STATE_TEXT } from "~/constants/deployment-status-text";
 import { PAGE_PATH_APPLICATIONS } from "~/constants/path";
 import { useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { useInterval } from "~/hooks/use-interval";
-import { ActiveStage } from "~/modules/active-stage";
 import {
   cancelDeployment,
   Deployment,
@@ -82,13 +81,10 @@ export const DeploymentDetail: FC<DeploymentDetailProps> = memo(
     const classes = useStyles();
     const dispatch = useAppDispatch();
 
-    const [deployment, activeStage] = useAppSelector<
-      [Deployment.AsObject | undefined, ActiveStage | null]
-    >((state) => [
-      selectDeploymentById(state.deployments, deploymentId),
-      state.activeStage,
-    ]);
-
+    const deployment = useAppSelector<Deployment.AsObject | undefined>(
+      (state) => selectDeploymentById(state.deployments, deploymentId)
+    );
+    const activeStage = useAppSelector((state) => state.activeStage);
     const env = useAppSelector(selectEnvById(deployment?.envId));
     const piped = useAppSelector(selectPipedById(deployment?.pipedId));
     const isCanceling = useAppSelector(

pkg/app/web/src/components/deployments-detail-page/log-viewer/index.tsx

@@ -10,7 +10,7 @@ import clsx from "clsx";
 import { FC, memo, useCallback, useState } from "react";
 import Draggable from "react-draggable";
 import { APP_HEADER_HEIGHT } from "~/components/header";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+import { useAppDispatch, useShallowEqualSelector } from "~/hooks/redux";
 import { clearActiveStage } from "~/modules/active-stage";
 import { isStageRunning, selectById, Stage } from "~/modules/deployments";
 import { selectStageLogById, StageLog } from "~/modules/stage-logs";
@@ -20,7 +20,7 @@ const INITIAL_HEIGHT = 400;
 const TOOLBAR_HEIGHT = 48;
 
 function useActiveStageLog(): [Stage | null, StageLog | null] {
-  return useAppSelector<[Stage | null, StageLog | null]>((state) => {
+  return useShallowEqualSelector<[Stage | null, StageLog | null]>((state) => {
     if (!state.activeStage) {
       return [null, null];
     }

pkg/app/web/src/components/deployments-page/index.tsx

@@ -12,7 +12,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import FilterIcon from "@material-ui/icons/FilterList";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import dayjs from "dayjs";
-import { FC, memo, useCallback, useEffect, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import { useHistory } from "react-router-dom";
 import { PAGE_PATH_DEPLOYMENTS } from "~/constants/path";
@@ -21,7 +21,11 @@ import {
   UI_TEXT_HIDE_FILTER,
   UI_TEXT_REFRESH,
 } from "~/constants/ui-text";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+import {
+  useAppDispatch,
+  useAppSelector,
+  useShallowEqualSelector,
+} from "~/hooks/redux";
 import { fetchApplications } from "~/modules/applications";
 import {
   Deployment,
@@ -32,7 +36,6 @@ import {
   selectIds as selectDeploymentIds,
 } from "~/modules/deployments";
 import { useStyles as useButtonStyles } from "~/styles/button";
-import { LoadingStatus } from "~/types/module";
 import { stringifySearchParams, useSearchParams } from "~/utils/search-params";
 import { DeploymentFilter } from "./deployment-filter";
 import { DeploymentItem } from "./deployment-item";
@@ -60,20 +63,12 @@ function filterUndefined<TValue>(value: TValue | undefined): value is TValue {
   return value !== undefined;
 }
 
-const useGroupedDeployments = (): [
-  LoadingStatus,
-  boolean,
-  Record<string, Deployment.AsObject[]>
-] => {
-  const [status, hasMore, deployments] = useAppSelector<
-    [LoadingStatus, boolean, Deployment.AsObject[]]
-  >((state) => [
-    state.deployments.status,
-    state.deployments.hasMore,
+const useGroupedDeployments = (): Record<string, Deployment.AsObject[]> => {
+  const deployments = useShallowEqualSelector<Deployment.AsObject[]>((state) =>
     selectDeploymentIds(state.deployments)
       .map((id) => selectDeploymentById(state.deployments, id))
-      .filter(filterUndefined),
-  ]);
+      .filter(filterUndefined)
+  );
 
   const result: Record<string, Deployment.AsObject[]> = {};
 
@@ -85,16 +80,18 @@ const useGroupedDeployments = (): [
     result[dateStr].push(deployment);
   });
 
-  return [status, hasMore, result];
+  return result;
 };
 
-export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() {
+export const DeploymentIndexPage: FC = () => {
   const classes = useStyles();
   const buttonClasses = useButtonStyles();
   const history = useHistory();
   const dispatch = useAppDispatch();
   const listRef = useRef(null);
-  const [status, hasMore, groupedDeployments] = useGroupedDeployments();
+  const status = useAppSelector((state) => state.deployments.status);
+  const hasMore = useAppSelector((state) => state.deployments.hasMore);
+  const groupedDeployments = useGroupedDeployments();
   const filterOptions = useSearchParams();
   const [openFilter, setOpenFilter] = useState(true);
   const [ref, inView] = useInView({
@@ -203,4 +200,4 @@ export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() {
       </Box>
     </Box>
   );
-});
+};

pkg/app/web/src/components/header/index.tsx

@@ -21,9 +21,9 @@ import {
 } from "~/constants/path";
 import { APP_NAME } from "~/constants/common";
 import { NavLink as RouterLink } from "react-router-dom";
-import { useMe } from "~/modules/me";
 import ArrowDownIcon from "@material-ui/icons/ArrowDropDown";
 import logo from "~~/assets/logo.svg";
+import { useAppSelector } from "~/hooks/redux";
 
 export const APP_HEADER_HEIGHT = 56;
 
@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme) => ({
 
 export const Header: FC = memo(function Header() {
   const classes = useStyles();
-  const me = useMe();
+  const me = useAppSelector((state) => state.me);
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   const handleClose = (): void => {

pkg/app/web/src/components/login-page/index.tsx

@@ -12,7 +12,7 @@ import { FC, memo, useState } from "react";
 import { useCookies } from "react-cookie";
 import { Link, Redirect, useHistory, useParams } from "react-router-dom";
 import { PAGE_PATH_APPLICATIONS, PAGE_PATH_LOGIN } from "~/constants/path";
-import { useMe } from "~/modules/me";
+import { useAppSelector } from "~/hooks/redux";
 import { LoginForm } from "./login-form";
 
 const CONTENT_WIDTH = 500;
@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
 
 export const LoginPage: FC = memo(function LoginPage() {
   const classes = useStyles();
-  const me = useMe();
+  const me = useAppSelector((state) => state.me);
   const [name, setName] = useState<string>("");
   const [cookies, , removeCookie] = useCookies(["error"]);
   const { projectName } = useParams<{ projectName?: string }>();