diff --git a/frontend/packages/client/src/components/Community/StrategySelectorForm.js b/frontend/packages/client/src/components/Community/StrategySelectorForm.js index 7a437acab..63c6cfbc3 100644 --- a/frontend/packages/client/src/components/Community/StrategySelectorForm.js +++ b/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(); diff --git a/frontend/packages/client/src/components/CommunityCreate/StepFour.js b/frontend/packages/client/src/components/CommunityCreate/StepFour.js new file mode 100644 index 000000000..b2b1315f0 --- /dev/null +++ b/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 ( + { + return ( + onSubmit() : () => {}} + classNames="mt-5" + /> + ); + }} + /> + ); +} diff --git a/frontend/packages/client/src/components/CommunityCreate/StepThree.js b/frontend/packages/client/src/components/CommunityCreate/StepThree.js index 3ea8ddf09..69dabefc4 100644 --- a/frontend/packages/client/src/components/CommunityCreate/StepThree.js +++ b/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({ } /> -