From 3bc6ada42ceee2402d2d0bb6462edd71bd4832b1 Mon Sep 17 00:00:00 2001 From: Brion Mario Date: Wed, 17 Apr 2019 03:41:47 +0530 Subject: [PATCH] feat(applications): get app genres from api :sparkles: --- src/api.js | 1 + src/redux/actions/application-actions.js | 17 ++++++++- src/redux/reducers/application-reducer.js | 9 ++++- src/redux/types.js | 1 + src/views/applications/applications.jsx | 17 +++++++-- src/views/sessions/new-session.jsx | 42 +++++++---------------- 6 files changed, 53 insertions(+), 34 deletions(-) diff --git a/src/api.js b/src/api.js index 865ba8f..0c11d18 100644 --- 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 index a896d73..d0be59d 100644 --- 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 index 049b286..2a0ced4 100644 --- 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 index bf319bb..ec91dc2 100644 --- 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 index ae04153..42827e2 100644 --- 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} /> @@ -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 index 64cc170..e1e8829 100644 --- 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 (
@@ -171,7 +154,7 @@ class NewSession extends Component { initialValues={(editingApplication && !_.isEmpty(editingApplication)) ? editingApplication : {}} config={viewConfig} applicationTypes={applicationTypesOptions} - genreTypes={genreTypesOptions} + genreTypes={applicationGenreOptions} /> @@ -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,