feat(applications): get app genres from api ✨

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

Hide file tree

Showing 6 changed files with 53 additions and 34 deletions.
diff --git a/src/api.js b/src/api.js
@@ -12,6 +12,7 @@ const API_ENDPOINTS = {
   deleteUser: `${BASE_API}/users/{}/`,
   getApplications: `${BASE_API}/applications/`,
   getApplicationTypes: `${BASE_API}/applications/types`,
+  getApplicationGenres: `${BASE_API}/applications/genres`,
   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
@@ -9,7 +9,8 @@ import {
   SET_APPLICATION_VIEW_CONFIG,
   UPDATE_APPLICATION_SHARING_STATUS,
   SET_SELECTED_APPLICATION,
-  FETCH_APPLICATION_TYPES
+  FETCH_APPLICATION_TYPES,
+  FETCH_APPLICATION_GENRES
 } from '../types';
 import {API_ENDPOINTS} from '../../api';
 import {HttpInterceptor} from '../../services';
@@ -45,6 +46,20 @@ export const fetchApplicationTypes = () => (dispatch) => {
     });
 };
 
+export const fetchApplicationGenres = () => (dispatch) => {
+  const endpoint = API_ENDPOINTS.getApplicationGenres;
+  return http.get(endpoint)
+    .then((response) => {
+      dispatch({
+        type: FETCH_APPLICATION_GENRES,
+        payload: response.data.data,
+      });
+    })
+    .catch((error) => {
+      console.log('[ERROR]', ' [Applications, fetchApplicationGenres()]: 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
@@ -9,12 +9,14 @@ import {
   SET_DELETING_APPLICATION,
   SET_APPLICATION_VIEW_CONFIG,
   UPDATE_APPLICATION_SHARING_STATUS,
-  FETCH_APPLICATION_TYPES
+  FETCH_APPLICATION_TYPES,
+  FETCH_APPLICATION_GENRES
 } from '../types';
 
 const initialState = {
   applications: [],
   applicationTypes: [],
+  applicationGenres: [],
   newApplication: {},
   selectedApplication: {},
   editedApplication: {},
@@ -35,6 +37,11 @@ export function applicationReducer(state = initialState, action) {
         ...state,
         applicationTypes: action.payload,
       };
+    case FETCH_APPLICATION_GENRES:
+      return {
+        ...state,
+        applicationGenres: action.payload,
+      };
     case ADD_APPLICATION:
       return {
         ...state,

diff --git a/src/redux/types.js b/src/redux/types.js
@@ -34,6 +34,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 FETCH_APPLICATION_GENRES = 'FETCH_APPLICATION_GENRES';
 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
@@ -96,6 +96,7 @@ class Applications extends Component {
 
     actions.applications.fetchApplications();
     actions.applications.fetchApplicationTypes();
+    actions.applications.fetchApplicationGenres();
 
     // Generate the Table
     $(this.refs.applicationsTable).DataTable({
@@ -237,7 +238,7 @@ class Applications extends Component {
 
   render() {
     const {
-      actions, modal, viewConfig, editingApplication, applicationTypes
+      actions, modal, viewConfig, editingApplication, applicationTypes, applicationGenres
     } = this.props;
 
     const {
@@ -249,7 +250,16 @@ class Applications extends Component {
     if (applicationTypes) {
       applicationTypesOptions = applicationTypes
         .map(type => (
-          { value: type, label: type.name }
+          { value: type, label: type.display_name_full }
+        ));
+    }
+
+    let applicationGenreOptions = null;
+
+    if (applicationGenres) {
+      applicationGenreOptions = applicationGenres
+        .map(genre => (
+          { value: genre, label: genre.display_name }
         ));
     }
 
@@ -275,7 +285,7 @@ class Applications extends Component {
                       initialValues={(editingApplication && !_.isEmpty(editingApplication)) ? editingApplication : {}}
                       config={viewConfig}
                       applicationTypes={applicationTypesOptions}
-                      genreTypes={applicationTypesOptions}
+                      genreTypes={applicationGenreOptions}
                     />
                   </ModalBody>
                   <ModalFooter/>
@@ -364,6 +374,7 @@ function mapStateToProps(state) {
     modal: state.modal,
     applications: state.applications.applications,
     applicationTypes: state.applications.applicationTypes,
+    applicationGenres: state.applications.applicationGenres,
     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
@@ -28,6 +28,7 @@ class NewSession extends Component {
     const {actions} = this.props;
     actions.applications.fetchApplications();
     actions.applications.fetchApplicationTypes();
+    actions.applications.fetchApplicationGenres();
   }
 
   openModal = (e) => {
@@ -60,7 +61,7 @@ class NewSession extends Component {
 
   render() {
     const {
-      actions, modal, viewConfig, editingApplication, applications, applicationTypes
+      actions, modal, viewConfig, editingApplication, applications, applicationTypes, applicationGenres
     } = this.props;
 
     let applicationOptions = null;
@@ -77,36 +78,18 @@ class NewSession extends Component {
     if (applicationTypes) {
       applicationTypesOptions = applicationTypes
         .map(type => (
-          { value: type, label: type.name }
+          { value: type, label: type.display_name_full }
         ));
     }
 
-    const genreTypesOptions = [
-      {
-        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 applicationGenreOptions = null;
+
+    if (applicationGenres) {
+      applicationGenreOptions = applicationGenres
+        .map(genre => (
+          { value: genre, label: genre.display_name }
+        ));
+    }
 
     return (
       <div className="main-content no-padding new-session-page">
@@ -171,7 +154,7 @@ class NewSession extends Component {
                     initialValues={(editingApplication && !_.isEmpty(editingApplication)) ? editingApplication : {}}
                     config={viewConfig}
                     applicationTypes={applicationTypesOptions}
-                    genreTypes={genreTypesOptions}
+                    genreTypes={applicationGenreOptions}
                   />
                 </ModalBody>
                 <ModalFooter/>
@@ -211,6 +194,7 @@ function mapStateToProps(state) {
     modal: state.modal,
     applications: state.applications.applications,
     applicationTypes: state.applications.applicationTypes,
+    applicationGenres: state.applications.applicationGenres,
     newApplication: state.applications.newApplication,
     editingApplication: state.applications.editedApplication,
     deletingApplication: state.applications.deletingApplication,