Permalink
Browse files

Title and logo are now customizable based on Settings page

  • Loading branch information...
marcomontalbano committed Jan 9, 2019
1 parent ab42d84 commit 07a3838794e7c4f616b77fa1e7a6a3a1bb13a5d3
@@ -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 });
@@ -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,
});
},
};

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,7 @@
export default class Settings {
constructor({ name = '', version = '', logo = '' }) {
this.name = name;
this.version = version;
this.logo = logo;
}
}
@@ -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>
@@ -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 />
@@ -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);
@@ -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>
);
@@ -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(),
};
}

@@ -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>
);
}
@@ -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(),
};
}

@@ -1,4 +1,5 @@
export default {
UPDATE_SETTINGS: 'UPDATE_SETTINGS',
VIEW_GRID: 'view--grid',
VIEW_LIST: 'view--list',
};
@@ -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();

This file was deleted.

Oops, something went wrong.

0 comments on commit 07a3838

Please sign in to comment.