From 0852074d608914e6ce3a7c5d6929322a3a4497d0 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 10 Dec 2018 16:16:52 +0000 Subject: [PATCH 1/8] update copy msg source --- src/js/data/copy.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/data/copy.json b/src/js/data/copy.json index 5fd1890..2feca2b 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -137,7 +137,7 @@ "tags": "Tags", "notags": "No known tags for this event.", "source": "Source", - "unknown_source": "Unknown source. The relability of this event cannot be confirmed.", + "unknown_source": "The information for this source could not be retrieved.", "category": "Category", "communication": "Communication", "transmitter": "Transmitter", From eb0f7baadbcda4d36f168238dd1aec59716eda78 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 10 Dec 2018 16:35:18 +0000 Subject: [PATCH 2/8] open cards by default --- src/components/Card.jsx | 54 +++++++++++++----------------------- src/components/CardStack.jsx | 2 +- 2 files changed, 21 insertions(+), 35 deletions(-) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 0184063..7d77a03 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -122,16 +122,6 @@ class Card extends React.Component { } } - renderLoadingCard() { - return ( -
  • -
    - -
    -
    • - ); - } - renderHeader() { return (
    @@ -146,19 +136,19 @@ class Card extends React.Component { } renderContent() { - if (!this.state.isHighlighted) { - return ( -
    - ); - } else { - return ( -
    - {this.renderTags()} - {this.renderSource()} - {this.renderNarrative()} -
    - ); - } + // if (!this.state.isHighlighted) { + // return ( + //
    + // ); + // } else { + return ( +
    + {this.renderTags()} + {this.renderSource()} + {this.renderNarrative()} +
    + ); + // } } renderCaret() { @@ -171,17 +161,13 @@ class Card extends React.Component { } render() { - if (this.props.isLoading) { - return this.renderLoadingCard(); - } else { - return ( -
  • - {this.renderHeader()} - {this.renderContent()} - {this.renderCaret()} -
    • - ); - } + return ( +
  • + {this.renderHeader()} + {this.renderContent()} + {/* {this.renderCaret()} */} +
    • + ); } } diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index d7c5ab1..3178342 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -91,7 +91,7 @@ function mapStateToProps(state) { selected: state.app.selected, language: state.app.language, isCardstack: state.app.flags.isCardstack, - isLoading: state.app.flags.isFetchingEvents + isLoading: state.app.flags.isFetchingSources } } From e15a656479711bcb6587e24bbc44c97897f2a27f Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Mon, 10 Dec 2018 16:44:27 +0000 Subject: [PATCH 3/8] pass loading to CardSource --- src/components/Card.jsx | 1 + src/components/presentational/CardSource.js | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 7d77a03..9c65c2a 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -89,6 +89,7 @@ class Card extends React.Component { renderSource() { return ( diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index b234143..d82085d 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -2,16 +2,17 @@ import React from 'react'; import copy from '../../js/data/copy.json'; -const CardSource = ({ source, language }) => { - const source_lang = copy[language].cardstack.source; - if (!source) source = copy[language].cardstack.unknown_source; +const CardSource = ({ source, language, isLoading }) => { + const source_lang = copy[language].cardstack.source; + if (!source) source = copy[language].cardstack.unknown_source; + console.log(isLoading) - return ( -
    -

    {source_lang}:

    -

    {source}

    -
    - ); + return ( +
    +

    {source_lang}:

    +

    {source}

    +
    + ); } export default CardSource; From bf0c78d0a03b66a446d8c0498f572fa9c552d69c Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 11 Dec 2018 10:37:52 +0000 Subject: [PATCH 4/8] loading in CardSource when flag set --- src/components/presentational/CardSource.js | 30 ++++++++++++--------- src/components/presentational/Spinner.js | 6 ++--- src/scss/card.scss | 6 ++++- src/scss/loading.scss | 13 ++++----- 4 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index d82085d..7b03d22 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -1,18 +1,24 @@ -import React from 'react'; +import React from 'react' +import Spinner from './Spinner' -import copy from '../../js/data/copy.json'; +import copy from '../../js/data/copy.json' const CardSource = ({ source, language, isLoading }) => { - const source_lang = copy[language].cardstack.source; - if (!source) source = copy[language].cardstack.unknown_source; - console.log(isLoading) + const source_lang = copy[language].cardstack.source + if (!source) source = copy[language].cardstack.unknown_source - return ( -
    -

    {source_lang}:

    -

    {source}

    -
    - ); + const content = isLoading ? ( + + ) : ( +
    {source}
    + ) + + return ( +
    +

    {source_lang}:

    + {content} +
    + ) } -export default CardSource; +export default CardSource diff --git a/src/components/presentational/Spinner.js b/src/components/presentational/Spinner.js index e3bad6d..062bd83 100644 --- a/src/components/presentational/Spinner.js +++ b/src/components/presentational/Spinner.js @@ -1,10 +1,10 @@ import React from 'react'; -const Spinner = ({}) => { +const Spinner = () => { return (
    -
    -
    +
    +
    ) } diff --git a/src/scss/card.scss b/src/scss/card.scss index 2afcb63..e95213b 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -36,7 +36,7 @@ margin-right: 5px; } - .card-row { + .card-row, .card-col { display: flex; flex-direction: row; border-bottom: 1px solid $lightwhite; @@ -53,6 +53,10 @@ } } + .card-col { + flex-direction: column; + } + .card-cell { a { transition: color 0.2s; diff --git a/src/scss/loading.scss b/src/scss/loading.scss index dee8697..1fdcff6 100644 --- a/src/scss/loading.scss +++ b/src/scss/loading.scss @@ -41,10 +41,10 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE height: 40px; position: relative; - margin: 20px auto; + margin: 10px auto; } -.double-bounce1, .double-bounce2 { +.double-bounce, .double-bounce-overlay { width: 100%; height: 100%; border-radius: 50%; @@ -58,20 +58,21 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE animation: sk-bounce 3.0s infinite ease-in-out; } -.double-bounce2 { +.double-bounce-overlay { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; + background-color: black; } @-webkit-keyframes sk-bounce { - 0%, 100% { -webkit-transform: scale(0.0) } + 0%, 100% { -webkit-transform: scale(0.3) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); + transform: scale(0.3); + -webkit-transform: scale(0.3); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); From ab20d962ada623b143b75d9041f829a860a8db85 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 11 Dec 2018 11:24:53 +0000 Subject: [PATCH 5/8] display source errors in card --- src/actions/index.js | 2 +- src/components/Card.jsx | 11 ++++------ src/components/CardStack.jsx | 2 ++ src/components/presentational/CardSource.js | 23 ++++++++++++++------- src/reducers/app.js | 13 ++++++++++++ src/store/initial.js | 4 +++- 6 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 99f65e0..311f4d3 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -118,7 +118,6 @@ export function updateDomain(domain) { export function fetchSelected(selected) { if (!selected || !selected.length || selected.length === 0) { - console.log('hitting base') return updateSelected([]) } return dispatch => { @@ -127,6 +126,7 @@ export function fetchSelected(selected) { dispatch(fetchSourceError('No source extension specified.')) } else { dispatch(toggleFetchingSources()) + // TODO: fetching logic } } diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 9c65c2a..60be91f 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -91,7 +91,10 @@ class Card extends React.Component { ) } @@ -137,11 +140,6 @@ class Card extends React.Component { } renderContent() { - // if (!this.state.isHighlighted) { - // return ( - //
    - // ); - // } else { return (
    {this.renderTags()} @@ -149,7 +147,6 @@ class Card extends React.Component { {this.renderNarrative()}
    ); - // } } renderCaret() { diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 3178342..98185be 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -20,6 +20,7 @@ class CardStack extends React.Component { return ( { +const CardSource = ({ source, language, isLoading, error }) => { const source_lang = copy[language].cardstack.source - if (!source) source = copy[language].cardstack.unknown_source - const content = isLoading ? ( - - ) : ( -
    {source}
    - ) + if (isLoading) { + return + } + + function renderSource() { + return ( +

    TODO: display source properly.

    + ) + } return (

    {source_lang}:

    - {content} + {source.error ? ( +
    {source.error}
    + ) : ( + renderSource() + )}
    ) } diff --git a/src/reducers/app.js b/src/reducers/app.js index c8f243b..7fe01be 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -16,6 +16,7 @@ import { TOGGLE_INFOPOPUP, TOGGLE_NOTIFICATIONS, FETCH_ERROR, + FETCH_SOURCE_ERROR, } from '../actions'; function updateHighlighted(appState, action) { @@ -156,6 +157,16 @@ function toggleNotifications(appState, action) { }); } +function fetchSourceError(appState, action) { + return { + ...appState, + errors: { + ...appState.errors, + source: action.msg + } + } +} + function app(appState = initial.app, action) { @@ -186,6 +197,8 @@ function app(appState = initial.app, action) { return toggleInfoPopup(appState, action); case TOGGLE_NOTIFICATIONS: return toggleNotifications(appState, action); + case FETCH_SOURCE_ERROR: + return fetchSourceError(appState, action); default: return appState; } diff --git a/src/store/initial.js b/src/store/initial.js index d487022..dbe0dd7 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -25,7 +25,9 @@ const initial = { * or by the characteristics of the client, browser, etc. */ app: { - error: null, + errors: { + source: null, + }, highlighted: null, selected: [], narrative: null, From 50d8058366c0621d494a6bedfa1b2cc49bf74b6a Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 11 Dec 2018 11:39:43 +0000 Subject: [PATCH 6/8] refmt CardSource --- src/components/presentational/CardSource.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index c66d685..95fdb06 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -6,24 +6,22 @@ import copy from '../../js/data/copy.json' const CardSource = ({ source, language, isLoading, error }) => { const source_lang = copy[language].cardstack.source - if (isLoading) { - return - } - function renderSource() { - return ( + return source.error ? ( +
    {source.error}
    + ) : (

    TODO: display source properly.

    ) } + function renderContent() { + return isLoading ? : renderSource() + } + return (

    {source_lang}:

    - {source.error ? ( -
    {source.error}
    - ) : ( - renderSource() - )} + {renderContent()}
    ) } From 92c98e9199faf10f63eb8e725d6c7b25640ef5d9 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 11 Dec 2018 17:05:21 +0000 Subject: [PATCH 7/8] fix default category style --- src/actions/index.js | 30 ++++++++++++++++++++++++++++-- src/components/Dashboard.jsx | 2 +- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 311f4d3..590f56d 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -16,6 +16,16 @@ const NARRATIVE_URL = urlFromEnv('NARRATIVE_EXT'); const SITES_URL = urlFromEnv('SITES_EXT'); const eventUrlMap = (event) => `${process.env.SERVER_ROOT}${process.env.EVENT_DESC_ROOT}/${(event.id) ? event.id : event}`; + +const DEBUG_GER = 'DEBUG_GER' +function _debugger(value) { + console.log(value) + return { + type: DEBUG_GER, + value + } +} + /* * Create an error notification object * Types: ['error', 'warning', 'good', 'neural'] @@ -64,7 +74,7 @@ export function fetchDomain () { .catch(handleError('sites')) } - let tagsPromise + let tagsPromise = Promise.resolve([]) if (process.env.features.USE_TAGS) { tagsPromise = fetch(TAG_URL) .then(response => response.json()) @@ -126,7 +136,23 @@ export function fetchSelected(selected) { dispatch(fetchSourceError('No source extension specified.')) } else { dispatch(toggleFetchingSources()) - // TODO: fetching logic + + fetch(SOURCES_URL) + .then(response => { + if (!response.ok) { + throw new Error('No sources are available at the URL specified in the config specified.') + } else { + return response.json() + } + }) + .then(sources => { + dispatch(_debugger(sources)) + }) + .catch(err => { + dispatch(fetchSourceError(err.message)) + dispatch(toggleFetchingSources()) + }) + } } diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 401d2a3..744b990 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -64,7 +64,7 @@ class Dashboard extends React.Component { } getCategoryColor(category='other') { - return this.props.ui.style.categories[category] || this.props.style.categories['other'] + return this.props.ui.style.categories[category] || this.props.ui.style.categories['other'] } getNarrativeLinks(event) { From ae6db9434323580f7d8b8781d551d7ad646ae4f0 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 12 Dec 2018 11:25:38 +0000 Subject: [PATCH 8/8] show full text in cards, hide dynamic fields --- src/components/Card.jsx | 25 ++++++++++++-------- src/components/presentational/CardSummary.js | 3 +-- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 60be91f..520b7b9 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -129,24 +129,29 @@ class Card extends React.Component { renderHeader() { return (
    -
    +
    {this.renderTimestamp()} {this.renderLocation()}
    - {this.renderCategory()} + {/* {this.renderCategory()} */} +
    {this.renderSummary()}
    ); } renderContent() { - return ( -
    - {this.renderTags()} - {this.renderSource()} - {this.renderNarrative()} -
    - ); + if (this.state.isHighlighted) { + return ( +
    + {this.renderTags()} + {this.renderSource()} + {this.renderNarrative()} +
    + ) + } else { + return
    + } } renderCaret() { @@ -163,7 +168,7 @@ class Card extends React.Component {
  • {this.renderHeader()} {this.renderContent()} - {/* {this.renderCaret()} */} + {this.renderCaret()}
    • ); } diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/CardSummary.js index 8dd9d8d..3e0cdbf 100644 --- a/src/components/presentational/CardSummary.js +++ b/src/components/presentational/CardSummary.js @@ -5,13 +5,12 @@ import copy from '../../js/data/copy.json'; const CardSummary = ({ language, description, isHighlighted }) => { const summary = copy[language].cardstack.description; - const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`; return (

    {summary}

    -

    {descriptionText}

    +

    {description}

    );