feat: improve app performance

Chia-Network · Jul 15, 2022 · 1a09dcc · 1a09dcc
1 parent a128375
commit 1a09dcc
Show file tree

Hide file tree

Showing 15 changed files with 189 additions and 153 deletions.
diff --git a/src/components/forms/ProjectCreateModal.js b/src/components/forms/ProjectCreateModal.js
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Stepper, Step, StepLabel } from '@mui/material';
 import { useIntl } from 'react-intl';
@@ -103,36 +103,42 @@ const ProjectCreateModal = ({ onClose, modalSizeAndPosition }) => {
   const { notification, showProgressOverlay: apiResponseIsPending } =
     useSelector(state => state.app);
 
-  const stepperStepsTranslationIds = [
-    'project',
-    'issuances',
-    'project-locations',
-    'estimations',
-    'labels',
-    'ratings',
-    'co-benefits',
-    'related-projects',
-  ];
+  const stepperStepsTranslationIds = useMemo(
+    () => [
+      'project',
+      'issuances',
+      'project-locations',
+      'estimations',
+      'labels',
+      'ratings',
+      'co-benefits',
+      'related-projects',
+    ],
+    [],
+  );
 
-  const onChangeStepTo = async ({ formik, desiredStep = null }) => {
-    const errors = await formik.validateForm();
+  const onChangeStepTo = useCallback(
+    async ({ formik, desiredStep = null }) => {
+      const errors = await formik.validateForm();
 
-    // manually setting touched for error fields so errors are displayed
-    formik.setTouched(setNestedObjectValues(errors, true));
+      // manually setting touched for error fields so errors are displayed
+      formik.setTouched(setNestedObjectValues(errors, true));
 
-    const isProjectValid = _.isEmpty(errors);
+      const isProjectValid = _.isEmpty(errors);
 
-    if (isProjectValid) {
-      if (
-        desiredStep >= stepperStepsTranslationIds.length &&
-        !apiResponseIsPending
-      ) {
-        formik.submitForm();
-      } else {
-        setTabValue(desiredStep);
+      if (isProjectValid) {
+        if (
+          desiredStep >= stepperStepsTranslationIds.length &&
+          !apiResponseIsPending
+        ) {
+          formik.submitForm();
+        } else {
+          setTabValue(desiredStep);
+        }
       }
-    }
-  };
+    },
+    [setTabValue, apiResponseIsPending],
+  );
 
   // if project was successfully created, close modal
   const projectWasSuccessfullyCreated =

diff --git a/src/components/forms/ProjectEditModal.js b/src/components/forms/ProjectEditModal.js
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Stepper, Step, StepLabel } from '@mui/material';
 import { useIntl } from 'react-intl';
@@ -57,36 +57,42 @@ const ProjectEditModal = ({
     setProject(formattedProjectData);
   }, [projectToBeEdited]);
 
-  const stepperStepsTranslationIds = [
-    'project',
-    'issuances',
-    'project-locations',
-    'estimations',
-    'labels',
-    'ratings',
-    'co-benefits',
-    'related-projects',
-  ];
+  const stepperStepsTranslationIds = useMemo(
+    () => [
+      'project',
+      'issuances',
+      'project-locations',
+      'estimations',
+      'labels',
+      'ratings',
+      'co-benefits',
+      'related-projects',
+    ],
+    [],
+  );
 
-  const onChangeStepTo = async ({ formik, desiredStep = null }) => {
-    const errors = await formik.validateForm();
+  const onChangeStepTo = useCallback(
+    async ({ formik, desiredStep = null }) => {
+      const errors = await formik.validateForm();
 
-    // manually setting touched for error fields so errors are displayed
-    formik.setTouched(setNestedObjectValues(errors, true));
+      // manually setting touched for error fields so errors are displayed
+      formik.setTouched(setNestedObjectValues(errors, true));
 
-    const isProjectValid = _.isEmpty(errors);
+      const isProjectValid = _.isEmpty(errors);
 
-    if (isProjectValid) {
-      if (
-        desiredStep >= stepperStepsTranslationIds.length &&
-        !apiResponseIsPending
-      ) {
-        formik.submitForm();
-      } else {
-        setTabValue(desiredStep);
+      if (isProjectValid) {
+        if (
+          desiredStep >= stepperStepsTranslationIds.length &&
+          !apiResponseIsPending
+        ) {
+          formik.submitForm();
+        } else {
+          setTabValue(desiredStep);
+        }
       }
-    }
-  };
+    },
+    [setTabValue, apiResponseIsPending],
+  );
 
   // if project was successfully edited, close modal
   const projectWasSuccessfullyEdited =

diff --git a/src/components/forms/ProjectEstimationForm.js b/src/components/forms/ProjectEstimationForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 
 import {
@@ -32,7 +32,10 @@ const ProjectEstimationForm = ({
   handleBlur,
 }) => {
   const intl = useIntl();
-  const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+  const getFieldName = useCallback(
+    fieldName => `${name}[${index}].${fieldName}`,
+    [name, index],
+  );
 
   return (
     <ModalFormContainerStyle>

diff --git a/src/components/forms/ProjectIssuanceForm.js b/src/components/forms/ProjectIssuanceForm.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 
 import {
@@ -26,7 +26,10 @@ import {
 const ProjectIssuanceForm = memo(
   ({ index, name, errors, touched, value, setFieldValue, handleBlur }) => {
     const intl = useIntl();
-    const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+    const getFieldName = useCallback(
+      fieldName => `${name}[${index}].${fieldName}`,
+      [name, index],
+    );
     const areFieldsDisabled = Boolean(value.id);
 
     return (

diff --git a/src/components/forms/ProjectLabelForm.js b/src/components/forms/ProjectLabelForm.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { useIntl, FormattedMessage } from 'react-intl';
 
@@ -35,7 +35,10 @@ const ProjectLabelForm = memo(
   ({ index, name, errors, touched, value, setFieldValue, handleBlur }) => {
     const intl = useIntl();
     const { pickLists } = useSelector(store => store.climateWarehouse);
-    const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+    const getFieldName = useCallback(
+      fieldName => `${name}[${index}].${fieldName}`,
+      [name, index],
+    );
     const areFieldsDisabled = Boolean(value.id);
 
     return (

diff --git a/src/components/forms/ProjectLocationForm.js b/src/components/forms/ProjectLocationForm.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -30,7 +30,10 @@ import {
 const ProjectLocationForm = memo(
   ({ index, name, errors, touched, value, setFieldValue, handleBlur }) => {
     const intl = useIntl();
-    const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+    const getFieldName = useCallback(
+      fieldName => `${name}[${index}].${fieldName}`,
+      [index, name],
+    );
     const { pickLists } = useSelector(store => store.climateWarehouse);
 
     return (

diff --git a/src/components/forms/ProjectRatingForm.js b/src/components/forms/ProjectRatingForm.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { FormikError } from '../form/FormikError';
@@ -32,7 +32,10 @@ const ProjectRatingForm = memo(
   ({ index, name, errors, touched, value, setFieldValue, handleBlur }) => {
     const intl = useIntl();
     const { pickLists } = useSelector(store => store.climateWarehouse);
-    const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+    const getFieldName = useCallback(
+      fieldName => `${name}[${index}].${fieldName}`,
+      [index, name],
+    );
 
     return (
       <ModalFormContainerStyle>

diff --git a/src/components/forms/ProjectRelatedProjectForm.js b/src/components/forms/ProjectRelatedProjectForm.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { FormikError } from '../form/FormikError';
 
@@ -23,7 +23,10 @@ import {
 const ProjectRelatedProjectForm = memo(
   ({ index, name, errors, touched, value, setFieldValue, handleBlur }) => {
     const intl = useIntl();
-    const getFieldName = fieldName => `${name}[${index}].${fieldName}`;
+    const getFieldName = useCallback(
+      fieldName => `${name}[${index}].${fieldName}`,
+      [name, index],
+    );
 
     return (
       <ModalFormContainerStyle>

diff --git a/src/components/forms/SubscriptionModal.js b/src/components/forms/SubscriptionModal.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -81,7 +81,7 @@ const SubscriptionModal = ({ onClose }) => {
     return false;
   }, [orgUid]);
 
-  const submitCustomOrganization = () => {
+  const submitCustomOrganization = useCallback(() => {
     if (!isValidationOn) {
       setIsValidation(true);
     }
@@ -100,7 +100,20 @@ const SubscriptionModal = ({ onClose }) => {
     } else {
       setTimeout(() => setIsValidation(false), 3000);
     }
-  };
+  }, [
+    isValidationOn,
+    setIsValidation,
+    isOrgUidValid,
+    isIpValid,
+    isPortValid,
+    isUserAlreadySubscribedToOrgUid,
+    orgUid,
+    setOrgUid,
+    ip,
+    setIp,
+    port,
+    setPort,
+  ]);
 
   return (
     <>

diff --git a/src/components/forms/UnitCreateModal.js b/src/components/forms/UnitCreateModal.js
@@ -83,32 +83,35 @@ const UnitCreateModal = ({ onClose, modalSizeAndPosition }) => {
     }
   }, []);
 
-  const onChangeStepTo = useCallback(async ({ formik, desiredStep = null }) => {
-    const errors = await formik.validateForm();
+  const onChangeStepTo = useCallback(
+    async ({ formik, desiredStep = null }) => {
+      const errors = await formik.validateForm();
 
-    // manually setting touched for error fields so errors are displayed
-    formik.setTouched(setNestedObjectValues(errors, true));
+      // manually setting touched for error fields so errors are displayed
+      formik.setTouched(setNestedObjectValues(errors, true));
 
-    const isUnitValid = _.isEmpty(errors);
+      const isUnitValid = _.isEmpty(errors);
 
-    const isIssuanceSelected =
-      desiredStep > 1 ? !_.isEmpty(formik.values?.issuance) : true;
+      const isIssuanceSelected =
+        desiredStep > 1 ? !_.isEmpty(formik.values?.issuance) : true;
 
-    const isProjectSelected = Boolean(
-      localStorage.getItem('unitSelectedWarehouseProjectId'),
-    );
+      const isProjectSelected = Boolean(
+        localStorage.getItem('unitSelectedWarehouseProjectId'),
+      );
 
-    if (isUnitValid && isProjectSelected && isIssuanceSelected) {
-      if (
-        desiredStep >= stepperStepsTranslationIds.length &&
-        !apiResponseIsPending
-      ) {
-        formik.submitForm();
-      } else {
-        setTabValue(desiredStep);
+      if (isUnitValid && isProjectSelected && isIssuanceSelected) {
+        if (
+          desiredStep >= stepperStepsTranslationIds.length &&
+          !apiResponseIsPending
+        ) {
+          formik.submitForm();
+        } else {
+          setTabValue(desiredStep);
+        }
       }
-    }
-  }, []);
+    },
+    [setTabValue, apiResponseIsPending],
+  );
 
   // if unit was successfully created, close modal
   const unitWasSuccessfullyCreated =