FKED-90: Add support for deleting experiences 💥

src/actions/experiences.js

@@ -8,12 +8,14 @@ import { call, put, takeLatest } from 'redux-saga/effects';
 import {
   EXPERIENCES_FETCH_FOR_USER,
   EXPERIENCES_CREATE,
-  EXPERIENCES_EDIT
+  EXPERIENCES_EDIT,
+  EXPERIENCES_DELETE
 } from '../constants';
 import {
   experiencesFetchForUser as getExperiencesForUser,
   experiencesCreate as postExperiences,
-  experiencesEdit as patchExperiences
+  experiencesEdit as patchExperiences,
+  experiencesRemove as removeExperiences
 } from '../lib/api';
 import actionGenerator from '../lib/actionGenerator';
 
@@ -125,8 +127,37 @@ export function* experiencesEdit({
   );
 }
 
+/**
+ * Deletes an existing experience.
+ *
+ * @param {object} payload - Payload for this saga action.
+ * @param {string} payload.id - Id of the experience to be removed
+ * @param {function} payload.successHandler
+ *   Function to be executed if/when this action succeeds.
+ * @param {object} payload.user - Object containing user data.
+ * @param {object} payload.user.authentication - Object containing auth data.
+ * @param {string} payload.user.authentication.accessToken
+ *   Access token for the current user.
+ * @param {string} payload.user.authentication.csrfToken
+ *   CSRF token for the current user.
+ */
+export function* experiencesDelete({ user, id, successHandler = () => {} }) {
+  yield* actionGenerator(
+    EXPERIENCES_DELETE,
+    function* experienceRemoveHandler() {
+      yield call(removeExperiences, id, user);
+      yield put({
+        type: `${EXPERIENCES_DELETE}_SUCCESS`,
+        payload: { id }
+      });
+    },
+    successHandler
+  );
+}
+
 export function* watchExperiencesActions() {
   yield takeLatest(EXPERIENCES_FETCH_FOR_USER, experiencesFetchForUser);
   yield takeLatest(EXPERIENCES_CREATE, experiencesCreate);
   yield takeLatest(EXPERIENCES_EDIT, experiencesEdit);
+  yield takeLatest(EXPERIENCES_DELETE, experiencesDelete);
 }

src/constants/experiences.js

@@ -6,3 +6,4 @@
 export const EXPERIENCES_FETCH_FOR_USER = 'EXPERIENCES_FETCH_FOR_USER';
 export const EXPERIENCES_CREATE = 'EXPERIENCES_CREATE';
 export const EXPERIENCES_EDIT = 'EXPERIENCES_EDIT';
+export const EXPERIENCES_DELETE = 'EXPERIENCES_DELETE';

src/constants/form.js

@@ -7,6 +7,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_MESSAGE_DELETE_EXPERIENCE_CONFIRM =
+  'Are you sure you want to delete this entire experience? \nAll scenes, components it contains will be permanently removed. This action cannot be undone!';
 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/experiences.js

@@ -94,3 +94,20 @@ export const experiencesEdit = async (
       }
     }
   });
+
+/**
+ * Delete a given experience via the API.
+ *
+ * @param {string} id
+ *   ID of experience.
+ * @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 experiencesRemove = async (id, { authentication }) =>
+  axiosInstance(authentication).delete(`${API_ENDPOINT_EXPERIENCE}/${id}`);

src/lib/api/experiences.test.js

@@ -9,6 +9,7 @@ import mockAxios from 'jest-mock-axios';
 import {
   experiencesFetchForUser,
   experiencesCreate,
+  experiencesRemove,
   experiencesEdit
 } from './experiences';
 import { clientId } from '../../config';
@@ -70,6 +71,20 @@ describe('api->experiences', () => {
     });
   });
 
+  it('experiences->experiencesRemove()', () => {
+    const id = '42';
+    experiencesRemove(id, {
+      authentication: {
+        accessToken: 'test',
+        csrfToken: 'test'
+      }
+    });
+
+    expect(mockAxios.delete).toHaveBeenCalledWith(
+      `${API_ENDPOINT_EXPERIENCE}/${id}`
+    );
+  });
+
   it('experiences->experiencesEdit()', () => {
     const id = '10';
     const title = 'test';

src/lib/api/index.js

@@ -13,7 +13,8 @@ import {
 import {
   experiencesFetchForUser,
   experiencesCreate,
-  experiencesEdit
+  experiencesEdit,
+  experiencesRemove
 } from './experiences';
 import { sceneCreate, sceneEdit, sceneAttachComponent } from './scene';
 import { fileImageCreate, fileVideoCreate, fileCreate } from './file';
@@ -32,6 +33,7 @@ export {
   resetUserPassword,
   experiencesFetchForUser,
   experiencesCreate,
+  experiencesRemove,
   sceneCreate,
   sceneEdit,
   sceneAttachComponent,

src/pages/Dashboard/Dashboard.js

@@ -15,11 +15,15 @@ import {
   Tooltip,
   withStyles
 } from '@material-ui/core';
-import { AddBox, Edit, OpenInBrowser } from '@material-ui/icons';
+import { AddBox, Edit, OpenInBrowser, DeleteForever } from '@material-ui/icons';
 
 import { DashboardLayout } from '../../layouts';
 import { Message } from '../../components';
-import { EXPERIENCES_FETCH_FOR_USER } from '../../constants';
+import {
+  EXPERIENCES_FETCH_FOR_USER,
+  EXPERIENCES_DELETE,
+  FORM_MESSAGE_DELETE_EXPERIENCE_CONFIRM
+} from '../../constants';
 import DashboardStyles from './Dashboard.style';
 
 class Dashboard extends Component {
@@ -68,6 +72,19 @@ class Dashboard extends Component {
     });
   }
 
+  /**
+   * Dispatches an action to delete the specified experience.
+   */
+  removeExperience = experienceID => {
+    const { dispatch, user } = this.props;
+
+    dispatch({
+      type: EXPERIENCES_DELETE,
+      id: experienceID,
+      user
+    });
+  };
+
   /**
    * {@inheretdoc}
    */
@@ -80,8 +97,9 @@ class Dashboard extends Component {
     return (
       <DashboardLayout title="Experiences">
         <Typography component="p">
-          On this page you can create an experience, or open one of your
-          existing experiences for editing by clicking the Open button.
+          On this page you can create an experience, open one of your existing
+          experiences for editing by clicking the Open button, or delete an
+          experience by clicking the delete button.
         </Typography>
         <div className={classes.buttons}>
           <Button
@@ -96,7 +114,7 @@ class Dashboard extends Component {
         </div>
         {error && <Message>{error}</Message>}
         {Object.entries(items).map(
-          ([key, { title, body, field_experience_path: path }]) => (
+          ([key, { title, id, body, field_experience_path: path }]) => (
             <Card key={key} className={classes.card}>
               <CardContent>
                 <Typography gutterBottom variant="headline">
@@ -134,6 +152,23 @@ class Dashboard extends Component {
                     <Edit />
                   </Button>
                 </Tooltip>
+                <Tooltip title={`Delete ${title}`}>
+                  <Button
+                    onClick={e => {
+                      e.preventDefault();
+                      if (
+                        window.confirm(FORM_MESSAGE_DELETE_EXPERIENCE_CONFIRM)
+                      ) {
+                        this.removeExperience(id);
+                      }
+                    }}
+                    variant="outlined"
+                    size="small"
+                    className={classes.cardActionButton}
+                  >
+                    <DeleteForever />
+                  </Button>
+                </Tooltip>
               </CardActions>
             </Card>
           )

src/pages/Dashboard/__snapshots__/Dashboard.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dashboard /> Matches its snapshot 1`] = `"<div id=\\"layout__wrapper\\" class=\\"DashboardLayout-wrapper-5\\"><div></div><header class=\\"MuiPaper-root-18 MuiPaper-elevation4-24 MuiAppBar-root-10 MuiAppBar-positionFixed-11 MuiAppBar-colorPrimary-16 mui-fixed DashboardLayout-appBar-6\\"><div class=\\"MuiToolbar-root-45 MuiToolbar-gutters-46\\"><img src=\\"editvr-logo.svg\\" alt=\\"EditVR logo\\" class=\\"DashboardLayout-logo-9\\"></div></header><div class=\\"MuiDrawer-docked-47\\"><div class=\\"MuiPaper-root-18 MuiPaper-elevation0-20 MuiDrawer-paper-48 DashboardLayout-drawerPaper-7 MuiDrawer-paperAnchorLeft-49 MuiDrawer-paperAnchorDockedLeft-53\\"><ul class=\\"MuiList-root-58 MuiList-padding-59\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiListItem-root-62 MuiListItem-default-65 MuiListItem-gutters-69 MuiListItem-button-70\\" role=\\"button\\" href=\\"/dashboard\\"><svg class=\\"MuiSvgIcon-root-76 MuiListItemIcon-root-75\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M12 6c2.45 0 4.71.2 7.29.64.47 1.78.71 3.58.71 5.36 0 1.78-.24 3.58-.71 5.36-2.58.44-4.84.64-7.29.64s-4.71-.2-7.29-.64C4.24 15.58 4 13.78 4 12c0-1.78.24-3.58.71-5.36C7.29 6.2 9.55 6 12 6m0-2c-2.73 0-5.22.24-7.95.72l-.93.16-.25.9C2.29 7.85 2 9.93 2 12s.29 4.15.87 6.22l.25.89.93.16c2.73.49 5.22.73 7.95.73s5.22-.24 7.95-.72l.93-.16.25-.89c.58-2.08.87-4.16.87-6.23s-.29-4.15-.87-6.22l-.25-.89-.93-.16C17.22 4.24 14.73 4 12 4z\\"></path></g></svg><div class=\\"MuiListItemText-root-82\\"><h3 class=\\"MuiTypography-root-88 MuiTypography-subheading-95 MuiListItemText-primary-85\\">Experiences</h3></div><span class=\\"MuiTouchRipple-root-112\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiListItem-root-62 MuiListItem-default-65 MuiListItem-gutters-69 MuiListItem-button-70\\" role=\\"button\\" href=\\"/logout\\"><svg class=\\"MuiSvgIcon-root-76 MuiListItemIcon-root-75\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></g></svg><div class=\\"MuiListItemText-root-82\\"><h3 class=\\"MuiTypography-root-88 MuiTypography-subheading-95 MuiListItemText-primary-85\\">Logout</h3></div><span class=\\"MuiTouchRipple-root-112\\"></span></a></ul></div></div><main class=\\"DashboardLayout-content-8\\"><h1 class=\\"MuiTypography-root-88 MuiTypography-headline-93\\">Experiences</h1><p class=\\"MuiTypography-root-88 MuiTypography-body1-97\\">On this page you can create an experience, or open one of your existing experiences for editing by clicking the Open button.</p><div class=\\"Dashboard-buttons-2\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-raised-125 MuiButton-raisedPrimary-126\\" role=\\"button\\" href=\\"/experience/create\\"><span class=\\"MuiButton-label-120\\">Create<svg class=\\"MuiSvgIcon-root-76 Dashboard-buttonIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a></div><div class=\\"MuiPaper-root-18 MuiPaper-elevation2-22 MuiPaper-rounded-19 MuiCard-root-135 Dashboard-card-1\\"><div class=\\"MuiCardContent-root-136\\"><h1 class=\\"MuiTypography-root-88 MuiTypography-headline-93 MuiTypography-gutterBottom-105\\">test experience</h1><p class=\\"MuiTypography-root-88 MuiTypography-body1-97\\">this is a test experience</p></div><div class=\\"MuiCardActions-root-137\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-outlined-123 MuiButton-sizeSmall-132 Dashboard-cardActionButton-4\\" role=\\"button\\" href=\\"/experience/vreditor/test\\"><span class=\\"MuiButton-label-120\\"><svg class=\\"MuiSvgIcon-root-76\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-outlined-123 MuiButton-sizeSmall-132 Dashboard-cardActionButton-4\\" role=\\"button\\" href=\\"/experience/edit/test\\"><span class=\\"MuiButton-label-120\\"><svg class=\\"MuiSvgIcon-root-76\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a></div></div></main></div>"`;
+exports[`<Dashboard /> Matches its snapshot 1`] = `"<div id=\\"layout__wrapper\\" class=\\"DashboardLayout-wrapper-5\\"><div></div><header class=\\"MuiPaper-root-18 MuiPaper-elevation4-24 MuiAppBar-root-10 MuiAppBar-positionFixed-11 MuiAppBar-colorPrimary-16 mui-fixed DashboardLayout-appBar-6\\"><div class=\\"MuiToolbar-root-45 MuiToolbar-gutters-46\\"><img src=\\"editvr-logo.svg\\" alt=\\"EditVR logo\\" class=\\"DashboardLayout-logo-9\\"></div></header><div class=\\"MuiDrawer-docked-47\\"><div class=\\"MuiPaper-root-18 MuiPaper-elevation0-20 MuiDrawer-paper-48 DashboardLayout-drawerPaper-7 MuiDrawer-paperAnchorLeft-49 MuiDrawer-paperAnchorDockedLeft-53\\"><ul class=\\"MuiList-root-58 MuiList-padding-59\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiListItem-root-62 MuiListItem-default-65 MuiListItem-gutters-69 MuiListItem-button-70\\" role=\\"button\\" href=\\"/dashboard\\"><svg class=\\"MuiSvgIcon-root-76 MuiListItemIcon-root-75\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M12 6c2.45 0 4.71.2 7.29.64.47 1.78.71 3.58.71 5.36 0 1.78-.24 3.58-.71 5.36-2.58.44-4.84.64-7.29.64s-4.71-.2-7.29-.64C4.24 15.58 4 13.78 4 12c0-1.78.24-3.58.71-5.36C7.29 6.2 9.55 6 12 6m0-2c-2.73 0-5.22.24-7.95.72l-.93.16-.25.9C2.29 7.85 2 9.93 2 12s.29 4.15.87 6.22l.25.89.93.16c2.73.49 5.22.73 7.95.73s5.22-.24 7.95-.72l.93-.16.25-.89c.58-2.08.87-4.16.87-6.23s-.29-4.15-.87-6.22l-.25-.89-.93-.16C17.22 4.24 14.73 4 12 4z\\"></path></g></svg><div class=\\"MuiListItemText-root-82\\"><h3 class=\\"MuiTypography-root-88 MuiTypography-subheading-95 MuiListItemText-primary-85\\">Experiences</h3></div><span class=\\"MuiTouchRipple-root-112\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiListItem-root-62 MuiListItem-default-65 MuiListItem-gutters-69 MuiListItem-button-70\\" role=\\"button\\" href=\\"/logout\\"><svg class=\\"MuiSvgIcon-root-76 MuiListItemIcon-root-75\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></g></svg><div class=\\"MuiListItemText-root-82\\"><h3 class=\\"MuiTypography-root-88 MuiTypography-subheading-95 MuiListItemText-primary-85\\">Logout</h3></div><span class=\\"MuiTouchRipple-root-112\\"></span></a></ul></div></div><main class=\\"DashboardLayout-content-8\\"><h1 class=\\"MuiTypography-root-88 MuiTypography-headline-93\\">Experiences</h1><p class=\\"MuiTypography-root-88 MuiTypography-body1-97\\">On this page you can create an experience, open one of your existing experiences for editing by clicking the Open button, or delete an experience by clicking the delete button.</p><div class=\\"Dashboard-buttons-2\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-raised-125 MuiButton-raisedPrimary-126\\" role=\\"button\\" href=\\"/experience/create\\"><span class=\\"MuiButton-label-120\\">Create<svg class=\\"MuiSvgIcon-root-76 Dashboard-buttonIcon-3\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a></div><div class=\\"MuiPaper-root-18 MuiPaper-elevation2-22 MuiPaper-rounded-19 MuiCard-root-135 Dashboard-card-1\\"><div class=\\"MuiCardContent-root-136\\"><h1 class=\\"MuiTypography-root-88 MuiTypography-headline-93 MuiTypography-gutterBottom-105\\">test experience</h1><p class=\\"MuiTypography-root-88 MuiTypography-body1-97\\">this is a test experience</p></div><div class=\\"MuiCardActions-root-137\\"><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-outlined-123 MuiButton-sizeSmall-132 Dashboard-cardActionButton-4\\" role=\\"button\\" href=\\"/experience/vreditor/test\\"><span class=\\"MuiButton-label-120\\"><svg class=\\"MuiSvgIcon-root-76\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a><a tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-outlined-123 MuiButton-sizeSmall-132 Dashboard-cardActionButton-4\\" role=\\"button\\" href=\\"/experience/edit/test\\"><span class=\\"MuiButton-label-120\\"><svg class=\\"MuiSvgIcon-root-76\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></a><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-72 MuiButton-root-119 MuiButton-outlined-123 MuiButton-sizeSmall-132 Dashboard-cardActionButton-4\\" type=\\"button\\"><span class=\\"MuiButton-label-120\\"><svg class=\\"MuiSvgIcon-root-76\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><g><path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z\\"></path></g></svg></span><span class=\\"MuiTouchRipple-root-112\\"></span></button></div></div></main></div>"`;

src/reducers/experiences.js

@@ -6,7 +6,8 @@
 import {
   EXPERIENCES_FETCH_FOR_USER,
   EXPERIENCES_CREATE,
-  EXPERIENCES_EDIT
+  EXPERIENCES_EDIT,
+  EXPERIENCES_DELETE
 } from '../constants';
 
 /**
@@ -132,6 +133,28 @@ export default function experiences(state = defaultState, action) {
       };
     }
 
+    /**
+     * Reducer that handles experience deletion success actions.
+     */
+    case `${EXPERIENCES_DELETE}_SUCCESS`: {
+      const { id } = action.payload;
+
+      // Filter out the deleted experience.
+      const newItems = [...state.items].filter(item => {
+        if (item.id === id) {
+          return false;
+        }
+
+        return true;
+      });
+
+      return {
+        loading: false,
+        error: null,
+        items: newItems
+      };
+    }
+
     /**
      * Reducer that handles experience edit failure actions.
      */