Title and logo are now customizable based on Settings page

src/app/Api.js

@@ -3,10 +3,12 @@ import Cookie from 'js-cookie';
 
 import ItemsLoader from './class/ItemsLoader';
 import SearchActions from './actions/SearchActions';
+import AppActions from './actions/AppActions';
 
 import Item from './class/Item';
 import Category from './class/Category';
 import Comment from './class/Comment';
+import Settings from './class/Settings';
 
 class Api {
     setup() {
@@ -15,9 +17,11 @@ class Api {
             // items: 'mock/items.json',
             // categories: 'mock/categories.json',
             // comments: 'mock/comments.json',
+            // settings: 'mock/settings.json',
             items: `https://spreadsheets.google.com/feeds/list/${this.spreadsheetId}/1/public/values?alt=json-in-script&callback={1}`,
             categories: `https://spreadsheets.google.com/feeds/list/${this.spreadsheetId}/2/public/values?alt=json-in-script&callback={1}`,
             comments: `https://spreadsheets.google.com/feeds/list/${this.spreadsheetId}/3/public/values?alt=json-in-script&callback={1}`,
+            settings: `https://spreadsheets.google.com/feeds/list/${this.spreadsheetId}/4/public/values?alt=json-in-script&callback={1}`,
         };
     }
 
@@ -33,8 +37,11 @@ class Api {
 
         Promise.all([
             ItemsLoader.load(this.urls.categories, Category),
-            ItemsLoader.load(this.urls.comments, Comment)
-        ]).then(([categories, comments]) => {
+            ItemsLoader.load(this.urls.comments, Comment),
+            ItemsLoader.load(this.urls.settings, Settings),
+        ]).then(([categories, comments, settings]) => {
+
+            AppActions.updateSettings(settings[0]);
 
             const filterByName = (list, name) => {
                 return _.filter(list, (o) => { return o.name === name });

src/app/actions/AppActions.js

@@ -0,0 +1,21 @@
+import AppDispatcher from '../dispatcher/AppDispatcher';
+import AppConstants from '../constants/AppConstants';
+
+export default {
+    updateSettings(settings) {
+        AppDispatcher.dispatch({
+            type: AppConstants.UPDATE_SETTINGS,
+            value: settings
+        });
+    },
+    selectGrid() {
+        AppDispatcher.dispatch({
+            type: AppConstants.VIEW_GRID,
+        });
+    },
+    selectList() {
+        AppDispatcher.dispatch({
+            type: AppConstants.VIEW_LIST,
+        });
+    },
+};

src/app/class/Settings.js

@@ -0,0 +1,7 @@
+export default class Settings {
+    constructor({ name = '', version = '', logo = '' }) {
+        this.name = name;
+        this.version = version;
+        this.logo = logo;
+    }
+}

src/app/components/AppComponent.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Cookies from 'js-cookie';
-import NavbarComponent from './NavbarComponent';
+import NavbarContainer from './NavbarContainer';
 import ResultContainer from './ResultContainer';
 import SearchActions from '../actions/SearchActions';
 
@@ -31,7 +31,7 @@ export default class AppComponent extends Component {
     render() {
         return (
             <div className="app">
-                <NavbarComponent />
+                <NavbarContainer />
                 <ResultContainer />
                 {this.state.document_id ? (
                     <div className="uk-container uk-margin-top uk-text-right"><button className="uk-button uk-button-link" onClick={this.onLogoutHandler}>logout</button></div>

src/app/components/NavbarComponent.jsx

@@ -9,8 +9,8 @@ export default class NavbarComponent extends Component {
             <nav className="uk-navbar-container uk-navbar-fixed uk-navbar-brand">
                 <div className="uk-container">
                     <a href="/">
-                        <img alt="Technology Radar logo" src="images/logo.png" />
-                        <h1>Technology Radar</h1>
+                        <img alt="Technology Radar logo" src={this.props.appStore.settings.logo} />
+                        <h1>{this.props.appStore.settings.name}</h1>
                     </a>
                     <div className="uk-search uk-width-1-4@s uk-align-right">
                         <SearchComponent />

src/app/components/NavbarContainer.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Container } from 'flux/utils';
+import NavbarComponent from './NavbarComponent';
+import AppStore from '../stores/AppStore';
+
+class NavbarContainer extends Component {
+
+    static getStores() {
+        return [AppStore];
+    }
+
+    static calculateState() {
+        return {
+            appStore: AppStore.getState(),
+        };
+    }
+
+    render() {
+        return <NavbarComponent {...this.state} />;
+    }
+
+}
+
+export default Container.create(NavbarContainer);

src/app/components/ResultComponent.jsx

@@ -4,14 +4,14 @@ import _ from 'lodash';
 import classnames from 'classnames';
 import ItemComponent from './ItemComponent';
 import SpinnerComponent from './SpinnerComponent';
-import ViewConstants from '../constants/ViewConstants';
+import AppConstants from '../constants/AppConstants';
 
 export default class ResultComponent extends Component {
 
     static get propTypes() {
         return {
             itemsStore: PropTypes.object.isRequired,
-            viewStore: PropTypes.object.isRequired,
+            appStore: PropTypes.object.isRequired,
         };
     }
 
@@ -28,8 +28,8 @@ export default class ResultComponent extends Component {
             background: obj.category.color,
         };
         const itemsContainer = classnames({
-            'uk-child-width-1-2@m uk-child-width-1-3@l': this.props.viewStore.view === ViewConstants.VIEW_GRID,
-            'uk-child-width-1-1': this.props.viewStore.view === ViewConstants.VIEW_LIST,
+            'uk-child-width-1-2@m uk-child-width-1-3@l': this.props.appStore.view === AppConstants.VIEW_GRID,
+            'uk-child-width-1-1': this.props.appStore.view === AppConstants.VIEW_LIST,
             'uk-grid uk-grid-match': true,
         });
 
@@ -74,7 +74,7 @@ export default class ResultComponent extends Component {
 
     render() {
         return (
-            <div className={`app--result ${this.props.viewStore.view}`}>
+            <div className={`app--result ${this.props.appStore.view}`}>
                 { this.renderCategories() }
             </div>
         );

src/app/components/ResultContainer.jsx

@@ -2,18 +2,18 @@ import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import ResultComponent from './ResultComponent';
 import ItemsStore from '../stores/ItemsStore';
-import ViewStore from '../stores/ViewStore';
+import AppStore from '../stores/AppStore';
 
 class ResultContainer extends Component {
 
     static getStores() {
-        return [ItemsStore, ViewStore];
+        return [ItemsStore, AppStore];
     }
 
     static calculateState() {
         return {
             itemsStore: ItemsStore.getState(),
-            viewStore: ViewStore.getState(),
+            appStore: AppStore.getState(),
         };
     }
 

src/app/components/ViewComponent.jsx

@@ -1,35 +1,35 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ViewActions from '../actions/ViewActions';
-import ViewConstants from '../constants/ViewConstants';
+import AppActions from '../actions/AppActions';
+import AppConstants from '../constants/AppConstants';
 
 export default class ViewComponent extends Component {
 
     componentDidMount() {
         if (window.innerWidth < 960) {
-            ViewActions.selectList();
+            AppActions.selectList();
         }
     }
 
     static get propTypes() {
         return {
-            viewStore: PropTypes.object.isRequired,
+            appStore: PropTypes.object.isRequired,
         };
     }
 
     onClickViewGrid() {
-        ViewActions.selectGrid();
+        AppActions.selectGrid();
     }
 
     onClickViewList() {
-        ViewActions.selectList();
+        AppActions.selectList();
     }
 
     render() {
         return (
             <div className="view-component">
-                <button className={this.props.viewStore.view === ViewConstants.VIEW_GRID ? 'active' : ''} onClick={this.onClickViewGrid}><i className="fa fa-th-large" /></button>
-                <button className={this.props.viewStore.view === ViewConstants.VIEW_LIST ? 'active' : ''} onClick={this.onClickViewList}><i className="fa fa-bars" /></button>
+                <button className={this.props.appStore.view === AppConstants.VIEW_GRID ? 'active' : ''} onClick={this.onClickViewGrid}><i className="fa fa-th-large" /></button>
+                <button className={this.props.appStore.view === AppConstants.VIEW_LIST ? 'active' : ''} onClick={this.onClickViewList}><i className="fa fa-bars" /></button>
             </div>
         );
     }

src/app/components/ViewContainer.jsx

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import ViewComponent from './ViewComponent';
-import ViewStore from '../stores/ViewStore';
+import AppStore from '../stores/AppStore';
 
 class ViewContainer extends Component {
 
     static getStores() {
-        return [ViewStore];
+        return [AppStore];
     }
 
     static calculateState() {
         return {
-            viewStore: ViewStore.getState(),
+            appStore: AppStore.getState(),
         };
     }
 

src/app/constants/ViewConstants.js → src/app/constants/AppConstants.js

@@ -1,4 +1,5 @@
 export default {
+    UPDATE_SETTINGS: 'UPDATE_SETTINGS',
     VIEW_GRID: 'view--grid',
     VIEW_LIST: 'view--list',
 };

src/app/stores/AppStore.js

@@ -0,0 +1,45 @@
+import { ReduceStore } from 'flux/utils';
+import AppDispatcher from '../dispatcher/AppDispatcher';
+import AppConstants from '../constants/AppConstants';
+
+import Settings from '../class/Settings';
+
+class AppStore extends ReduceStore {
+    constructor() {
+        super(AppDispatcher);
+    }
+
+    getInitialState() {
+        return {
+            view: AppConstants.VIEW_GRID,
+            settings: new Settings({
+                name: 'Technology Radar',
+                logo: 'images/logo.png',
+            })
+        };
+    }
+
+    reduce(state, action) {
+        switch (action.type) {
+        case AppConstants.UPDATE_SETTINGS:
+            return {
+                ...state,
+                settings: action.value,
+            };
+        case AppConstants.VIEW_GRID:
+            return {
+                ...state,
+                view: AppConstants.VIEW_GRID,
+            };
+        case AppConstants.VIEW_LIST:
+            return {
+                ...state,
+                view: AppConstants.VIEW_LIST,
+            };
+        default:
+            return state;
+        }
+    }
+}
+
+export default new AppStore();