diff --git a/src/actions/index.js b/src/actions/index.js index 99f65e0..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()) @@ -118,7 +128,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 +136,23 @@ export function fetchSelected(selected) { dispatch(fetchSourceError('No source extension specified.')) } else { dispatch(toggleFetchingSources()) + + 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/Card.jsx b/src/components/Card.jsx index 0184063..520b7b9 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -89,8 +89,12 @@ class Card extends React.Component { renderSource() { return ( ) } @@ -122,42 +126,31 @@ class Card extends React.Component { } } - renderLoadingCard() { - return ( -
  • -
    - -
    -
  • - ); - } - renderHeader() { return (
    -
    +
    {this.renderTimestamp()} {this.renderLocation()}
    - {this.renderCategory()} + {/* {this.renderCategory()} */} +
    {this.renderSummary()}
    ); } renderContent() { - if (!this.state.isHighlighted) { - return ( -
    - ); - } else { + if (this.state.isHighlighted) { return (
    {this.renderTags()} {this.renderSource()} {this.renderNarrative()}
    - ); + ) + } else { + return
    } } @@ -171,17 +164,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..98185be 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -20,6 +20,7 @@ class CardStack extends React.Component { return ( { - const source_lang = copy[language].cardstack.source; - if (!source) source = copy[language].cardstack.unknown_source; +const CardSource = ({ source, language, isLoading, error }) => { + const source_lang = copy[language].cardstack.source + + function renderSource() { + return source.error ? ( +
    {source.error}
    + ) : ( +

    TODO: display source properly.

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

    {source_lang}:

    -

    {source}

    + {renderContent()}
    - ); + ) } -export default CardSource; +export default CardSource 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}

    ); 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/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", 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/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); 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,