Fix: sel plan page crud

src/layouts/selection-plan-id-layout.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Switch, Route, Redirect } from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 import { Breadcrumb } from "react-breadcrumbs";
 import T from "i18n-react";
 import EditSelectionPlanPage from "../pages/selection-plans/edit-selection-plan-page";
@@ -13,80 +13,59 @@ import SelectionPlanExtraQuestionsLayout from "./selection-plan-extra-questions-
 import SelectionPlanRatingTypesLayout from "./selection-plan-rating-types-layout";
 import { MAX_PER_PAGE } from "../utils/constants";
 
-class SelectionPlanIdLayout extends React.Component {
-  componentDidMount() {
-    const selectionPlanId = this.props.match.params.selection_plan_id;
+const SelectionPlanIdLayout = ({
+  match,
+  currentSelectionPlan,
+  currentSummit,
+  getSelectionPlan,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan
+}) => {
+  const selectionPlanId = match.params.selection_plan_id;
+  const breadcrumb = selectionPlanId
+    ? currentSelectionPlan.name
+    : T.translate("general.new");
 
+  useEffect(() => {
     if (!selectionPlanId) {
-      this.props.resetSelectionPlanForm();
+      resetSelectionPlanForm();
     } else {
-      this.props
-        .getSelectionPlan(selectionPlanId)
-        .then(() =>
-          this.props.getMarketingSettingsBySelectionPlan(
-            selectionPlanId,
-            null,
-            1,
-            MAX_PER_PAGE
-          )
-        );
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const oldId = prevProps.match.params.selection_plan_id;
-    const newId = this.props.match.params.selection_plan_id;
-
-    if (oldId !== newId) {
-      if (!newId) {
-        this.props.resetSelectionPlanForm();
-      } else {
-        this.props
-          .getSelectionPlan(newId)
-          .then(() =>
-            this.props.getMarketingSettingsBySelectionPlan(
-              newId,
-              null,
-              1,
-              MAX_PER_PAGE
-            )
-          );
-      }
+      getSelectionPlan(selectionPlanId).then(() =>
+        getMarketingSettingsBySelectionPlan(
+          selectionPlanId,
+          null,
+          1,
+          MAX_PER_PAGE
+        )
+      );
     }
-  }
+  }, [selectionPlanId]);
 
-  render() {
-    const { match, currentSelectionPlan, currentSummit } = this.props;
-    const selectionPlanId = this.props.match.params.selection_plan_id;
-    const breadcrumb = selectionPlanId
-      ? currentSelectionPlan.name
-      : T.translate("general.new");
-    return (
-      <div>
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <Switch>
-          <Route
-            strict
-            exact
-            path={`${match.url}`}
-            component={EditSelectionPlanPage}
-          />
-          <Route
-            path={`${match.url}/extra-questions`}
-            component={SelectionPlanExtraQuestionsLayout}
-          />
-          <Route
-            path={`${match.url}/rating-types`}
-            component={SelectionPlanRatingTypesLayout}
-          />
-          <Redirect
-            to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
-          />
-        </Switch>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <Switch>
+        <Route
+          strict
+          exact
+          path={`${match.url}`}
+          component={EditSelectionPlanPage}
+        />
+        <Route
+          path={`${match.url}/extra-questions`}
+          component={SelectionPlanExtraQuestionsLayout}
+        />
+        <Route
+          path={`${match.url}/rating-types`}
+          component={SelectionPlanRatingTypesLayout}
+        />
+        <Redirect
+          to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
+        />
+      </Switch>
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   currentSelectionPlanState,

src/layouts/selection-plan-layout.js

@@ -16,7 +16,6 @@ import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import EditSelectionPlanPage from "../pages/selection-plans/edit-selection-plan-page";
 import SelectionPlanListPage from "../pages/selection-plans/selection-plan-list-page";
 import SelectionPlanIdLayout from "./selection-plan-id-layout";
 
@@ -39,7 +38,7 @@ const SelectionPlanLayout = ({ match, currentSummit }) => (
         strict
         exact
         path={`${match.url}/new`}
-        component={EditSelectionPlanPage}
+        component={SelectionPlanIdLayout}
       />
       <Route
         path={`${match.url}/:selection_plan_id(\\d+)`}