Add components to dynamic zone

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/MultipleMenuList.js

@@ -9,7 +9,7 @@ import Ul from './Ul';
 import hasSubArray from './utils/hasSubArray';
 
 const MultipleMenuList = ({
-  selectProps: { name, onClickAddComponentsToDynamicZone, refState, value },
+  selectProps: { name, addComponentsToDynamicZone, refState, value },
   ...rest
 }) => {
   const { componentsGroupedByCategory } = useDataManager();
@@ -41,7 +41,7 @@ const MultipleMenuList = ({
       components: allComponentsCategory[target.name],
       shouldAddComponents: target.value,
     };
-    onClickAddComponentsToDynamicZone({ target: dataTarget });
+    addComponentsToDynamicZone({ target: dataTarget });
   };
 
   const handleChange = ({ target }) => {
@@ -51,7 +51,7 @@ const MultipleMenuList = ({
       shouldAddComponents: target.value,
     };
 
-    onClickAddComponentsToDynamicZone({ target: dataTarget });
+    addComponentsToDynamicZone({ target: dataTarget });
   };
 
   return (
@@ -140,8 +140,8 @@ MultipleMenuList.defaultProps = {
 
 MultipleMenuList.propTypes = {
   selectProps: PropTypes.shape({
+    addComponentsToDynamicZone: PropTypes.func.isRequired,
     name: PropTypes.string.isRequired,
-    onClickAddComponentsToDynamicZone: PropTypes.func.isRequired,
     refState: PropTypes.object,
     value: PropTypes.object,
   }).isRequired,

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js

@@ -6,12 +6,12 @@ import MultipleMenuList from './MultipleMenuList';
 import Value from './Value';
 
 const ComponentSelect = ({
+  addComponentsToDynamicZone,
   componentCategoryNeededForAddingAfieldWhileCreatingAComponent,
   componentNameNeededForAddingAfieldWhileCreatingAComponent,
   isCreatingComponentWhileAddingAField,
   isMultiple,
   onChange,
-  onClickAddComponentsToDynamicZone,
   name,
   value,
   styles,
@@ -34,6 +34,7 @@ const ComponentSelect = ({
 
   return (
     <Select
+      addComponentsToDynamicZone={addComponentsToDynamicZone}
       isClearable={!isMultiple}
       isDisabled={isCreatingComponentWhileAddingAField}
       isCreatingComponent={isCreatingComponentWhileAddingAField}
@@ -44,7 +45,6 @@ const ComponentSelect = ({
       componentName={componentNameNeededForAddingAfieldWhileCreatingAComponent}
       name={name}
       onChange={handleChange}
-      onClickAddComponentsToDynamicZone={onClickAddComponentsToDynamicZone}
       onClickOption={onChange}
       styles={styles}
       value={{ label: value, value }}
@@ -69,6 +69,7 @@ ComponentSelect.defaultProps = {
 };
 
 ComponentSelect.propTypes = {
+  addComponentsToDynamicZone: PropTypes.func.isRequired,
   componentCategoryNeededForAddingAfieldWhileCreatingAComponent:
     PropTypes.string,
   componentNameNeededForAddingAfieldWhileCreatingAComponent: PropTypes.string,
@@ -76,7 +77,7 @@ ComponentSelect.propTypes = {
   isMultiple: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  onClickAddComponentsToDynamicZone: PropTypes.func.isRequired,
+
   styles: PropTypes.object.isRequired,
   value: PropTypes.oneOfType([
     PropTypes.string,

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/index.js

@@ -94,9 +94,12 @@ const DataManagerProvider = ({ allIcons, children }) => {
       shouldAddComponentToData,
     });
   };
-  const addComponentsToDynamicZone = (dynamicZoneTarget, componentsToAdd) => {
+  const addCreatedComponentToDynamicZone = (
+    dynamicZoneTarget,
+    componentsToAdd
+  ) => {
     dispatch({
-      type: 'ADD_COMPONENTS_TO_DYNAMIC_ZONE',
+      type: 'ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE',
       dynamicZoneTarget,
       componentsToAdd,
     });
@@ -122,6 +125,14 @@ const DataManagerProvider = ({ allIcons, children }) => {
       shouldAddComponentToData,
     });
   };
+  const changeDynamicZoneComponents = (dynamicZoneTarget, newComponents) => {
+    console.log({ newComponents });
+    dispatch({
+      type: 'CHANGE_DYNAMIC_ZONE_COMPONENTS',
+      dynamicZoneTarget,
+      newComponents,
+    });
+  };
   const removeAttribute = (
     mainDataKey,
     attributeToRemoveName,
@@ -204,7 +215,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
     <DataManagerContext.Provider
       value={{
         addAttribute,
-        addComponentsToDynamicZone,
+        addCreatedComponentToDynamicZone,
         allComponentsCategories: retrieveSpecificInfoFromComponents(
           components,
           ['category']
@@ -213,6 +224,7 @@ const DataManagerProvider = ({ allIcons, children }) => {
           components,
           ['schema', 'icon']
         ),
+        changeDynamicZoneComponents,
         components,
         componentsGroupedByCategory: groupBy(components, 'category'),
         contentTypes,

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/reducer.js

@@ -93,7 +93,7 @@ const reducer = (state, action) => {
           return existingCompos;
         });
     }
-    case 'ADD_COMPONENTS_TO_DYNAMIC_ZONE': {
+    case 'ADD_CREATED_COMPONENT_TO_DYNAMIC_ZONE': {
       const { dynamicZoneTarget, componentsToAdd } = action;
 
       return state.updateIn(
@@ -110,6 +110,32 @@ const reducer = (state, action) => {
         }
       );
     }
+    case 'CHANGE_DYNAMIC_ZONE_COMPONENTS': {
+      const { dynamicZoneTarget, newComponents } = action;
+
+      return state
+        .updateIn(
+          [
+            'modifiedData',
+            'contentType',
+            'schema',
+            'attributes',
+            dynamicZoneTarget,
+            'components',
+          ],
+          () => fromJS(newComponents)
+        )
+        .updateIn(['modifiedData', 'components'], old => {
+          const componentsSchema = newComponents.reduce((acc, current) => {
+            const addedCompoSchema = state.getIn(['components', current]);
+
+            return acc.set(current, addedCompoSchema);
+          }, old);
+
+          return componentsSchema;
+        });
+    }
+
     case 'CREATE_SCHEMA': {
       const newSchema = {
         uid: action.uid,

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -47,7 +47,8 @@ const FormModal = () => {
   const attributeOptionRef = useRef();
   const {
     addAttribute,
-    addComponentsToDynamicZone,
+    addCreatedComponentToDynamicZone,
+    changeDynamicZoneComponents,
     contentTypes,
     components,
     createSchema,
@@ -128,7 +129,6 @@ const FormModal = () => {
         // This condition is added to prevent the reducer state to be cleared when navigating from the base tab to tha advanced one
         state.modalType !== 'attribute'
       ) {
-        console.log('effect');
         const attributeToEditNotFormatted = get(
           allDataSchema,
           [...pathToSchema, 'schema', 'attributes', attributeName],
@@ -538,10 +538,23 @@ const FormModal = () => {
               // Like explained above we will be able to modify the created component structure
               isCreatingComponentFromAView
             );
-            addComponentsToDynamicZone(state.dynamicZoneTarget, [componentUid]);
+            // Add the created component to the DZ
+            // We don't want to remove the old ones
+            addCreatedComponentToDynamicZone(state.dynamicZoneTarget, [
+              componentUid,
+            ]);
+
+            // TODO change routing so the user can add fields to the created component
+            push({ search: '' });
           } else {
-            console.log('not ready');
+            // Add the components to the DZ
-            // TODO apply components to DZ
+            changeDynamicZoneComponents(
+              state.dynamicZoneTarget,
+              modifiedData.components
+            );
+
+            // TODO nav
+            push({ search: '' });
           }
         } else {
           console.log('step 2???');
@@ -825,6 +838,9 @@ const FormModal = () => {
                                 key={input.name}
                               >
                                 <Inputs
+                                  addComponentsToDynamicZone={
+                                    handleClickAddComponentsToDynamicZone
+                                  }
                                   customInputs={{
                                     componentIconPicker: ComponentIconPicker,
                                     componentSelect: WrapperSelect,
@@ -859,9 +875,6 @@ const FormModal = () => {
                                       : formatMessage({ id: errorId })
                                   }
                                   onChange={handleChange}
-                                  onClickAddComponentsToDynamicZone={
-                                    handleClickAddComponentsToDynamicZone
-                                  }
                                   onBlur={() => {}}
                                   description={
                                     get(input, 'description.id', null)