complete test

Author: blockchainGuru1018

src/components/ComponentForms/ImageForm.js

@@ -24,8 +24,8 @@ export const ImageForm = ({
         id="src"
         name="src"
         type="text"
-        value={alt}
-        onChange={e => setAlt(e.target.value)}
+        value={src}
+        onChange={e => setSrc(e.target.value)}
       />
       <label className="component-field__label" htmlFor="alt">
         alt
@@ -36,8 +36,8 @@ export const ImageForm = ({
         id="alt"
         name="alt"
         type="text"
-        value={src}
-        onChange={e => setSrc(e.target.value)}
+        value={alt}
+        onChange={e => setAlt(e.target.value)}
       />
     </div>
     <Actions>

src/components/Components/A.js

@@ -1 +1,26 @@
-export const A = () => {}
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const A = ({ values = {} }) => (
+  <a 
+    href={values.href || '#'} 
+    target="_blank" 
+    rel="noopener noreferrer"
+  >
+    {values.label || ''}
+  </a>
+);
+
+A.propTypes = {
+  values: PropTypes.shape({
+    href: PropTypes.string,
+    label: PropTypes.string,
+  }),
+};
+
+A.defaultProps = {
+  values: {
+    href: '#',
+    label: '',
+  },
+};

src/components/Components/Img.js

@@ -1 +1,16 @@
-export const Img = () => {}
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Img = ({ values }) => (
+  <img 
+    src={values.src} 
+    alt={values.alt} 
+  />
+);
+
+Img.propTypes = {
+  values: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired,
+  }).isRequired,
+};

src/components/ComponentsPicker/components-picker.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 
 import { uuid } from '../../utils/uuid';
 import { componentsActions } from '../../store/components';
@@ -9,15 +10,20 @@ import './components-picker.css'
 
 export const ComponentsPicker = () => {
   const dispatch = useDispatch();
+  const currentlyEdited = useSelector(state => state.components?.currentlyEdited);
+  const lockedPicker = Boolean(currentlyEdited);
+  
   const onComponentClick = layout => dispatch(componentsActions.addComponent({id: uuid(), layout}));
 
   return (
     <div className="components-picker">
       {AvailableComponents.map(component => (
         <div
-          className="components-picker__component"
+          className={`components-picker__component ${
+            lockedPicker ? 'components-picker__component--disabled' : ''
+          }`}
           key={component.layout}
-          onClick={() => onComponentClick(component.layout)}
+          onClick={!lockedPicker ? () => onComponentClick(component.layout) : undefined}
         >
           <span className="components-picker__component-label">
             {component.label}
@@ -27,3 +33,7 @@ export const ComponentsPicker = () => {
     </div>
   );
 }
+
+ComponentsPicker.propTypes = {
+  lockedPicker: PropTypes.bool.isRequired,
+};

src/components/ComponentsWrapper/components-wrapper.js

@@ -9,37 +9,36 @@ export const ComponentsWrapper = ({
   isEdited,
   layout,
   onComponentEdit,
+  values = {},
   ...props
 }) => {
   if (!layout) {
     return null;
   }
 
-  const Component = AvailableComponents.find(comp => comp.layout === layout).component
+  const Component = AvailableComponents.find(comp => comp.layout === layout)?.component;
 
   const wrapperClass = classNames(
     'components-wrapper',
     { 'components-wrapper--active': isEdited },
   );
 
-  return Component
-    ? (
-      <div
-        className={wrapperClass}
-      >
-        <Component layout={layout} {...props} />
-        <span className="edit" onClick={onComponentEdit}>click to edit</span>
-      </div>
-    )
-    : null;
+  return Component ? (
+    <div className={wrapperClass}>
+      <Component layout={layout} values={values} {...props} />
+      <span className="edit" onClick={onComponentEdit}>click to edit</span>
+    </div>
+  ) : null;
 };
 
 ComponentsWrapper.propTypes = {
   isEdited: PropTypes.bool.isRequired,
   layout: PropTypes.string,
   onComponentEdit: PropTypes.func.isRequired,
+  values: PropTypes.object,
 };
 
 ComponentsWrapper.defaultProps = {
   layout: null,
+  values: {},
 };

src/components/Layout/layout.js

@@ -14,23 +14,25 @@ export const Layout = () => {
   const onRemoveClick = id => dispatch(componentsActions.removeComponent({id}));
   const onSubmit = (id, values) => dispatch(componentsActions.updateComponent({id, data: { values }}));
 
-  return   <>
-    <Navbar />
-    <div className="d-flex">
-      <ComponentsPreview />
-      <ComponentsPicker />
-    </div>
-    {currentlyEdited && (
-      <EditedComponent
-        layout={currentlyEdited.layout}
-        onRemoveClick={() => onRemoveClick(currentlyEdited.id)}
-        onSubmit={values => onSubmit(currentlyEdited.id, values)}
-        values={currentlyEdited.values}
-      />
-    )}
-  </>
+  return (
+    <>
+      <Navbar />
+      <div className="d-flex">
+        <ComponentsPreview />
+        <ComponentsPicker lockedPicker={Boolean(currentlyEdited)} />
+      </div>
+      {currentlyEdited && (
+        <EditedComponent
+          layout={currentlyEdited.layout}
+          onRemoveClick={() => onRemoveClick(currentlyEdited.id)}
+          onSubmit={values => onSubmit(currentlyEdited.id, values)}
+          values={currentlyEdited.values}
+        />
+      )}
+    </>
+  );
 }
 
 Layout.defaultProps = {
   currentlyEdited: null,
-};
+};

src/store/components.js

@@ -10,15 +10,29 @@ export const componentsSlice = createSlice({
   initialState,
   reducers: {
     addComponent: (state, action) => {
+      const { id, layout } = action.payload;
+      const newComponent = { id, layout, values: {} };
+      state.items.push(newComponent);
+      state.currentlyEdited = newComponent;
     },
     updateComponent: (state, action) => {
+      const { id, data } = action.payload;
+      const index = state.items.findIndex(item => item.id === id);
+      if (index !== -1) {
+        state.items[index] = { ...state.items[index], ...data };
+      }
+      state.currentlyEdited = null;
     },
     removeComponent: (state, action) => {
+      const { id } = action.payload;
+      state.items = state.items.filter(item => item.id !== id);
+      state.currentlyEdited = null;
     },
     setEditedComponent: (state, action) => {
+      state.currentlyEdited = action.payload.component;
     },
   },
 })
 
 export const componentsActions = componentsSlice.actions
-export const componentsReducer = componentsSlice.reducer
+export const componentsReducer = componentsSlice.reducer

src/store/index.js

@@ -2,5 +2,7 @@ import { configureStore } from '@reduxjs/toolkit'
 import { componentsReducer } from './components';
 
 export const getStore = () => configureStore({
-  reducer: {}
-})
+  reducer: {
+    components: componentsReducer
+  }
+})