feat(components): wip allow for deletion of components

Author: techninja

src/actions/component.js

@@ -3,9 +3,15 @@
  * Exports actions related to components.
  */
 
-import { put, takeLatest } from 'redux-saga/effects';
+import { call, put, takeLatest } from 'redux-saga/effects';
 
-import { COMPONENT_SELECT } from '../constants';
+import { COMPONENT_SELECT, COMPONENT_DELETE } from '../constants';
+
+import {
+  componentRemove
+} from '../lib/api';
+
+import actionGenerator from '../lib/actionGenerator';
 
 /**
  * Sets the currently selected component.
@@ -22,6 +28,36 @@ export function* componentSelect({ id }) {
   });
 }
 
+/**
+ * Delete a component.
+ *
+ * @param {object} payload - Payload for this saga action.
+ * @param {string} payload.id - ID of the component to be deleted.
+ * @param {object} payload.user - Current user object with authentication.
+ * @param {function} payload.successHandler - Function to be executed on success.
+ * @param {function} payload.errorHandler - Function to be executed on error.
+ */
+export function* componentDelete({
+  id,
+  user,
+  successHandler = () => {},
+  errorHandler = () => {}
+}) {
+  yield* actionGenerator(
+    COMPONENT_DELETE,
+    function* componentDeleteHandler() {
+      yield call(componentRemove, id, user);
+      yield put({
+        type: `${COMPONENT_DELETE}_SUCCESS`,
+        payload: { id }
+      });
+    },
+    successHandler,
+    errorHandler
+  );
+}
+
 export function* watchComponentActions() {
   yield takeLatest(COMPONENT_SELECT, componentSelect);
+  yield takeLatest(COMPONENT_DELETE, componentDelete);
 }

src/components/ComponentForm/ComponentForm.js

@@ -11,7 +11,10 @@ import { withStyles, TextField, Button } from '@material-ui/core';
 
 import {
   COMPONENT_SELECT,
+  COMPONENT_DELETE,
   FORM_BUTTON_INSERT_UPDATE,
+  FORM_BUTTON_DELETE,
+  FORM_MESSAGE_DELETE_CONFIRM,
   OPEN_EXPERIENCE_COMPONENT_FIELD_PRESAVE,
   OPEN_EXPERIENCE_COMPONENT_EDIT
 } from '../../constants';
@@ -58,7 +61,13 @@ class ComponentForm extends Component {
     }).isRequired,
     experience: PropTypes.shape({
       error: PropTypes.string
-    })
+    }),
+    user: PropTypes.shape({
+      authentication: PropTypes.shape({
+        accessToken: PropTypes.string.isRequired,
+        csrfToken: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired
   };
 
   static defaultProps = {
@@ -104,6 +113,19 @@ class ComponentForm extends Component {
     }, 200);
   };
 
+  /**
+   * Dispatches an action to delete the current component.
+   */
+  removeComponent = () => {
+    const {
+      dispatch,
+      user,
+      selectedComponent,
+    } = this.props;
+
+    dispatch({ type: COMPONENT_DELETE, id: selectedComponent, user });
+  };
+
   /**
    * Handles field changes.
    *
@@ -228,6 +250,20 @@ class ComponentForm extends Component {
         >
           {FORM_BUTTON_INSERT_UPDATE}
         </Button>
+        <Button
+          onClick={e => {
+            e.preventDefault();
+            if (window.confirm(FORM_MESSAGE_DELETE_CONFIRM)) {
+              this.removeComponent();
+            }
+          }}
+          variant="raised"
+          color="secondary"
+          disabled={isSubmitting}
+          className={classes.button}
+        >
+          {FORM_BUTTON_DELETE}
+        </Button>
       </form>
     );
   }

src/constants/component.js

@@ -4,5 +4,6 @@
  */
 
 export const COMPONENT_SELECT = 'COMPONENT_SELECT';
+export const COMPONENT_DELETE = 'COMPONENT_DELETE';
 export const COMPONENT_TYPE_DIALOG = 'panelimage';
 export const COMPONENT_TYPE_LINK = 'link';

src/constants/form.js

@@ -4,6 +4,8 @@
  */
 
 export const FORM_BUTTON_INSERT_UPDATE = 'Save';
+export const FORM_BUTTON_DELETE = 'Delete';
+export const FORM_MESSAGE_DELETE_CONFIRM = 'Are you sure you want to delete this component?';
 export const FORM_BUTTON_REGISTER = 'Register';
 export const FORM_BUTTON_RESET_PASSWORD = 'Reset Password';
 export const FORM_BUTTON_FORGOT_PASSWORD = 'Forgot Password';

src/lib/api/component.js

@@ -142,3 +142,21 @@ export const componentEdit = async (
       }
     }
   });
+
+
+/**
+ * Delete a given component ID via the API.
+ *
+ * @param {string} id
+ *   ID of component being updated.
+ * @param {object} user
+ *   Object containing information about the current user.
+ * @param {object} user.authentication
+ *   Object containing auth data.
+ * @param {string} user.authentication.accessToken
+ *   Access token for the current user.
+ * @param {string} user.authentication.csrfToken
+ *   CSRF token for the current user.
+ */
+export const componentRemove = async ( id, { authentication } ) =>
+  axiosInstance(authentication).delete(`${API_ENDPOINT_COMPONENT}/${id}`);

src/lib/api/index.js

@@ -17,7 +17,7 @@ import {
 } from './experiences';
 import { sceneCreate, sceneEdit, sceneAttachComponent } from './scene';
 import { fileImageCreate, fileVideoCreate, fileCreate } from './file';
-import { componentEdit, componentCreate } from './component';
+import { componentEdit, componentCreate, componentRemove } from './component';
 
 import {
   openExperienceFetchForUser,
@@ -37,6 +37,7 @@ export {
   sceneAttachComponent,
   componentCreate,
   componentEdit,
+  componentRemove,
   experiencesEdit,
   openExperienceFetchForUser,
   openExperienceAttachScene,

src/reducers/component.js

@@ -3,7 +3,7 @@
  * Exports reducers pertaining to component state.
  */
 
-import { COMPONENT_SELECT } from '../constants';
+import { COMPONENT_SELECT, COMPONENT_DELETE } from '../constants';
 
 /**
  * Default user state.
@@ -30,6 +30,16 @@ export default function component(state = defaultState, action) {
       return { id };
     }
 
+    /**
+     * Reducer that handles component selection.
+     */
+    case `${COMPONENT_DELETE}_SUCCESS`: {
+      const { id } = action.payload;
+      // TODO: Remove component from state
+
+      return { id };
+    }
+
     /**
      * Default reducer that returns defaulted state.
      */