feat(applications): get app types from api ✨

project-cssi · Apr 16, 2019 · 2195d8a · 2195d8a
1 parent 17c447f
commit 2195d8a
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 58 deletions.
diff --git a/src/api.js b/src/api.js
@@ -11,6 +11,7 @@ const API_ENDPOINTS = {
   editUser: `${BASE_API}/users/{}/`,
   deleteUser: `${BASE_API}/users/{}/`,
   getApplications: `${BASE_API}/applications/`,
+  getApplicationTypes: `${BASE_API}/applications/types`,
   getApplicationInfo: `${BASE_API}/applications/{}/`,
   updateApplicationSharing: `${BASE_API}/applications/{}/sharing/`,
   createApplication: `${BASE_API}/applications/`,

diff --git a/src/redux/actions/application-actions.js b/src/redux/actions/application-actions.js
@@ -7,7 +7,9 @@ import {
   SET_EDITING_APPLICATION,
   SET_DELETING_APPLICATION,
   SET_APPLICATION_VIEW_CONFIG,
-  UPDATE_APPLICATION_SHARING_STATUS, SET_SELECTED_APPLICATION
+  UPDATE_APPLICATION_SHARING_STATUS,
+  SET_SELECTED_APPLICATION,
+  FETCH_APPLICATION_TYPES
 } from '../types';
 import {API_ENDPOINTS} from '../../api';
 import {HttpInterceptor} from '../../services';
@@ -29,6 +31,20 @@ export const fetchApplications = () => (dispatch) => {
     });
 };
 
+export const fetchApplicationTypes = () => (dispatch) => {
+  const endpoint = API_ENDPOINTS.getApplicationTypes;
+  return http.get(endpoint)
+    .then((response) => {
+      dispatch({
+        type: FETCH_APPLICATION_TYPES,
+        payload: response.data.data,
+      });
+    })
+    .catch((error) => {
+      console.log('[ERROR]', ' [Applications, fetchApplicationTypes()]: HTTP GET - Callback Error', error);
+    });
+};
+
 export const createApplication = body => (dispatch) => {
   const endpoint = API_ENDPOINTS.createApplication;
   return http.post(endpoint, body)

diff --git a/src/redux/reducers/application-reducer.js b/src/redux/reducers/application-reducer.js
@@ -8,11 +8,13 @@ import {
   SET_EDITING_APPLICATION,
   SET_DELETING_APPLICATION,
   SET_APPLICATION_VIEW_CONFIG,
-  UPDATE_APPLICATION_SHARING_STATUS
+  UPDATE_APPLICATION_SHARING_STATUS,
+  FETCH_APPLICATION_TYPES
 } from '../types';
 
 const initialState = {
   applications: [],
+  applicationTypes: [],
   newApplication: {},
   selectedApplication: {},
   editedApplication: {},
@@ -28,6 +30,11 @@ export function applicationReducer(state = initialState, action) {
         ...state,
         applications: action.payload,
       };
+    case FETCH_APPLICATION_TYPES:
+      return {
+        ...state,
+        applicationTypes: action.payload,
+      };
     case ADD_APPLICATION:
       return {
         ...state,

diff --git a/src/redux/types.js b/src/redux/types.js
@@ -33,6 +33,7 @@ export const SET_LOGGED_IN_USER_USERNAME = 'SET_LOGGED_IN_USER_USERNAME';
 
 // Applications
 export const FETCH_APPLICATIONS = 'FETCH_APPLICATIONS';
+export const FETCH_APPLICATION_TYPES = 'FETCH_APPLICATION_TYPES';
 export const ADD_APPLICATION = 'ADD_APPLICATION';
 export const EDIT_APPLICATION = 'EDIT_APPLICATION';
 export const DELETE_APPLICATION = 'DELETE_APPLICATION';

diff --git a/src/views/applications/applications.jsx b/src/views/applications/applications.jsx
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Grid,
   Row,
-  Col,
-  ButtonGroup,
+  Col
 } from 'react-bootstrap';
 import $ from 'jquery';
 import {connect} from 'react-redux';
@@ -96,6 +95,7 @@ class Applications extends Component {
     const {actions, applications} = this.props;
 
     actions.applications.fetchApplications();
+    actions.applications.fetchApplicationTypes();
 
     // Generate the Table
     $(this.refs.applicationsTable).DataTable({
@@ -237,37 +237,22 @@ class Applications extends Component {
 
   render() {
     const {
-      actions, modal, viewConfig, editingApplication,
+      actions, modal, viewConfig, editingApplication, applicationTypes
     } = this.props;
+
     const {
       alert,
     } = this.state;
-    const applicationTypesOptions = [
-      {
-        value: {
-          display_name: 'VR',
-          display_name_full: 'Virtual Reality',
-          id: 1,
-          name: 'vr'
-        }, label: 'Virtual Reality'
-      },
-      {
-        value: {
-          display_name: 'AR',
-          display_name_full: 'Augmented Reality',
-          id: 2,
-          name: 'ar'
-        }, label: 'Augmented Reality'
-      },
-      {
-        value: {
-          display_name: 'MR',
-          display_name_full: 'Mixed Reality',
-          id: 3,
-          name: 'mr'
-        }, label: 'Mixed Reality'
-      },
-    ];
+
+    let applicationTypesOptions = null;
+
+    if (applicationTypes) {
+      applicationTypesOptions = applicationTypes
+        .map(type => (
+          { value: type, label: type.name }
+        ));
+    }
+
     return (
       <div className="main-content no-padding no-overflow">
         <Grid fluid>
@@ -290,6 +275,7 @@ class Applications extends Component {
                       initialValues={(editingApplication && !_.isEmpty(editingApplication)) ? editingApplication : {}}
                       config={viewConfig}
                       applicationTypes={applicationTypesOptions}
+                      genreTypes={applicationTypesOptions}
                     />
                   </ModalBody>
                   <ModalFooter/>
@@ -377,6 +363,7 @@ function mapStateToProps(state) {
   return {
     modal: state.modal,
     applications: state.applications.applications,
+    applicationTypes: state.applications.applicationTypes,
     newApplication: state.applications.newApplication,
     editingApplication: state.applications.editedApplication,
     deletingApplication: state.applications.deletingApplication,

diff --git a/src/views/sessions/new-session.jsx b/src/views/sessions/new-session.jsx
@@ -27,6 +27,7 @@ class NewSession extends Component {
   componentDidMount() {
     const {actions} = this.props;
     actions.applications.fetchApplications();
+    actions.applications.fetchApplicationTypes();
   }
 
   openModal = (e) => {
@@ -59,7 +60,7 @@ class NewSession extends Component {
 
   render() {
     const {
-      actions, modal, viewConfig, editingApplication, applications
+      actions, modal, viewConfig, editingApplication, applications, applicationTypes
     } = this.props;
 
     let applicationOptions = null;
@@ -71,32 +72,14 @@ class NewSession extends Component {
         ));
     }
 
-    const applicationTypesOptions = [
-      {
-        value: {
-          display_name: 'VR',
-          display_name_full: 'Virtual Reality',
-          id: 1,
-          name: 'vr'
-        }, label: 'Virtual Reality'
-      },
-      {
-        value: {
-          display_name: 'AR',
-          display_name_full: 'Augmented Reality',
-          id: 2,
-          name: 'ar'
-        }, label: 'Augmented Reality'
-      },
-      {
-        value: {
-          display_name: 'MR',
-          display_name_full: 'Mixed Reality',
-          id: 3,
-          name: 'mr'
-        }, label: 'Mixed Reality'
-      },
-    ];
+    let applicationTypesOptions = null;
+
+    if (applicationTypes) {
+      applicationTypesOptions = applicationTypes
+        .map(type => (
+          { value: type, label: type.name }
+        ));
+    }
 
     const genreTypesOptions = [
       {
@@ -227,6 +210,7 @@ function mapStateToProps(state) {
   return {
     modal: state.modal,
     applications: state.applications.applications,
+    applicationTypes: state.applications.applicationTypes,
     newApplication: state.applications.newApplication,
     editingApplication: state.applications.editedApplication,
     deletingApplication: state.applications.deletingApplication,