Permalink
Browse files

Title and logo are now customizable based on Settings page

  • Loading branch information...
marcomontalbano committed Jan 9, 2019
1 parent 4f3380d commit 1094037fe8fde0c51e9870731cc68f0ae2b7b486

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1,6 +1,6 @@
{
"name": "technology-radar",
"version": "4.2.0",
"version": "5.0.0",
"description": "Technology Radar is a tool that helps organizations to monitor their own discoveries. Keep track of your technologies according to your previous successes and failures.",
"main": "index.js",
"homepage": ".",
@@ -55,12 +55,13 @@
"js-cookie": "~2.2.0",
"lodash": "~4.17.11",
"prop-types": "^15.6.2",
"react": "~16.6.3",
"react-dom": "~16.6.3",
"react": "~16.7.0",
"react-dom": "~16.7.0",
"rest": "^2.0.0",
"uikit": "~3.0.0-rc.26"
"uikit": "~3.0.2"
},
"devDependencies": {
"dotenv": "~6.2.0",
"gh-pages": "^1.2.0",
"less": "~3.9.0",
"less-plugin-clean-css": "^1.5.1",
@@ -1,3 +1,5 @@
require('dotenv').config({ silent: true });

const ghpages = require('gh-pages');
const config = require('../package.json');
const domain = process.env.GH_TOKEN ? `${process.env.GH_TOKEN}@github.com` : 'github.com';
@@ -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,10 +31,10 @@ 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>
<div className="uk-container uk-margin-top uk-text-center uk-text-right@s"><button className="uk-button uk-button-link" onClick={this.onLogoutHandler}>logout</button></div>
) : ''}
</div>
);
@@ -78,7 +78,7 @@ export default class ItemComponent extends Component {
return (
<div className="uk-card uk-card-default uk-card-hover" onClick={this.onClickModal}>
<div className="uk-card-body">
<div className="uk-card-badge uk-label" style={this.labelStyle}>{this.props.item.status}</div>
{this.props.item.status ? (<div className="uk-card-badge uk-label" style={this.labelStyle}>{this.props.item.status}</div>) : ''}
<h3 className="uk-card-title">{this.props.item.name}</h3>
<p className="uk-card-description">{this.props.item.description}</p>
</div>
@@ -100,7 +100,7 @@ export default class ItemComponent extends Component {
<h3 className="uk-modal-title">{this.props.item.name}</h3>
</div>
<div className="uk-modal-body">
<div className="uk-modal-badge uk-label" style={this.labelStyle}>{this.props.item.status}</div>
{this.props.item.status ? (<div className="uk-modal-badge uk-label" style={this.labelStyle}>{this.props.item.status}</div>) : ''}
<p className="uk-modal-description">{this.props.item.description}</p>
<a target="_blank" rel="noopener noreferrer" {...this.props.item.url ? { href: this.props.item.url } : {}}><i className="fa fa-globe"></i>website</a>
</div>
@@ -8,9 +8,9 @@ export default class NavbarComponent extends Component {
return (
<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>
<a href="./">
<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>
);
}
Oops, something went wrong.

0 comments on commit 1094037

Please sign in to comment.