feat(frontend): update create community flow

frontend/packages/client/src/components/Community/StrategySelectorForm.js

@@ -1,23 +1,29 @@
 import React, { useEffect, useState } from 'react';
-import { useVotingStrategies } from 'hooks';
+import isEqual from 'lodash/isEqual';
 import { AddButton } from 'components';
 import { useModalContext } from 'contexts/NotificationModal';
 import StrategyEditorModal from './StrategyEditorModal';
-import StrategySelectorInput from './StrategySelectorInput';
+import StrategySelectorInput from 'components/Community/StrategySelectorInput';
+import { useVotingStrategies } from 'hooks';
 import { kebabToString } from 'utils';
 
 export default function StrategySelectorForm({
   existingStrategies = [],
   disableAddButton = false,
+  // this fc returns a component(Button) to render
   callToAction = () => {},
+  // callback to return strategies selected
+  onStrategySelection,
 } = {}) {
   // holds array of objects with strategy information
   const [strategies, setStrategies] = useState(existingStrategies);
 
-  // reloads lists if update is done
+  // only notify parent component if callback was passed
   useEffect(() => {
-    setStrategies(existingStrategies);
-  }, [existingStrategies]);
+    if (onStrategySelection && !isEqual(strategies, existingStrategies)) {
+      onStrategySelection(strategies);
+    }
+  }, [strategies, onStrategySelection, existingStrategies]);
 
   const { data: allVotingStrategies, loading: loadingAllStrategies } =
     useVotingStrategies();

frontend/packages/client/src/components/CommunityCreate/StepFour.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import StrategySelectorForm from 'components/Community/StrategySelectorForm';
+import ActionButton from 'components/ActionButton';
+
+export default function StepFour({
+  stepData,
+  setStepValid,
+  onDataChange,
+  onSubmit,
+  isStepValid,
+} = {}) {
+  const { strategies } = stepData || {};
+
+  useEffect(() => {
+    if (strategies?.length > 0) {
+      setStepValid(true);
+    } else {
+      setStepValid(false);
+    }
+  }, [strategies, setStepValid]);
+
+  const onStrategySelection = (strategies) => {
+    onDataChange({ strategies });
+  };
+
+  return (
+    <StrategySelectorForm
+      existingStrategies={strategies}
+      onStrategySelection={onStrategySelection}
+      callToAction={() => {
+        return (
+          <ActionButton
+            label="CREATE COMMUNITY"
+            enabled={isStepValid}
+            onClick={isStepValid ? () => onSubmit() : () => {}}
+            classNames="mt-5"
+          />
+        );
+      }}
+    />
+  );
+}

frontend/packages/client/src/components/CommunityCreate/StepThree.js

@@ -6,8 +6,8 @@ export default function StepThree({
   stepData,
   setStepValid,
   onDataChange,
-  onSubmit,
   isStepValid,
+  moveToNextStep,
 }) {
   const {
     proposalThreshold = '',
@@ -94,7 +94,7 @@ export default function StepThree({
           }
         />
 
-        <label className="checkbox column is-flex is-align-items-center is-full is-full-mobile px-0 mt-4">
+        <label className="checkbox column is-flex is-align-items-center is-full is-full-mobile px-0 mt-4 mb-4">
           <input
             type="checkbox"
             className="mr-2 form-checkbox"
@@ -110,16 +110,18 @@ export default function StepThree({
           </p>
         </label>
       </WrapperResponsive>
-      <div className="column p-0 is-12 mt-4">
-        <button
-          style={{ height: 48, width: '100%' }}
-          className={`button vote-button transition-all is-flex has-background-yellow rounded-sm is-enabled is-size-6 ${
-            !isStepValid ? 'is-disabled' : ''
-          }`}
-          onClick={isStepValid ? () => onSubmit() : () => {}}
-        >
-          CREATE COMMUNITY
-        </button>
+      <div className="columns mb-5">
+        <div className="column is-12">
+          <button
+            style={{ height: 48, width: '100%' }}
+            className={`button vote-button transition-all is-flex has-background-yellow rounded-sm is-size-6 is-uppercase is-${
+              isStepValid ? 'enabled' : 'disabled'
+            }`}
+            onClick={isStepValid ? () => moveToNextStep() : () => {}}
+          >
+            Next: VOTING STRATEGIES
+          </button>
+        </div>
       </div>
     </>
   );

frontend/packages/client/src/components/CommunityCreate/index.js

@@ -2,3 +2,4 @@ export { default as StartSteps } from './StartSteps';
 export { default as StepOne } from './StepOne';
 export { default as StepTwo } from './StepTwo';
 export { default as StepThree } from './StepThree';
+export { default as StepFour } from './StepFour';

frontend/packages/client/src/hooks/useCommunity.js

@@ -80,6 +80,7 @@ export default function useCommunity() {
           contractName,
           storagePath,
           onlyAuthorsToSubmitProposals,
+          strategies,
         } = communityData;
 
         let communityLogo;
@@ -117,6 +118,7 @@ export default function useCommunity() {
             contractAddress,
             contractName,
             storagePath,
+            strategies,
             onlyAuthorsToSubmit: Boolean(onlyAuthorsToSubmitProposals),
             timestamp,
             compositeSignatures,

frontend/packages/client/src/pages/CommunityCreate.js

@@ -8,6 +8,7 @@ import {
   StepOne,
   StepTwo,
   StepThree,
+  StepFour,
 } from 'components/CommunityCreate';
 import useCommunity from 'hooks/useCommunity';
 import { generateSlug } from 'utils';
@@ -93,21 +94,20 @@ export default function CommunityCreate() {
     steps: [
       {
         label: 'Community Profile',
-        description:
-          'Some description of what you can write here that is useful.',
         component: <StepOne />,
       },
       {
         label: 'Community Details',
-        description:
-          'Some description of what you can write here that is useful.',
-        component: <StepTwo stepData={{ test: 'ok' }} />,
+        component: <StepTwo />,
       },
       {
         label: 'Proposal & Voting',
-        description:
-          'Some description of what you can write here that is useful.',
-        component: <StepThree stepData={{ test: 'ok' }} />,
+        description: '',
+        component: <StepThree />,
+      },
+      {
+        label: 'Voting Strategies',
+        component: <StepFour />,
       },
     ],
   };