Project - Jonas Høier Christiansen

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:10
+
+WORKDIR /app
+
+EXPOSE 3000
+
+COPY package.json package.json
+RUN yarn install
+
+COPY . /app
+
+RUN yarn build
+
+CMD [ "yarn", "start" ]

package.json

@@ -7,7 +7,8 @@
   "license": "MIT",
   "scripts": {
     "start-next": "next -p 3008",
-    "start": "next"
+    "start": "next",
+    "build": "next build"
   },
   "dependencies": {
     "babel-cli": "^6.26.0",

swapi/actions.js

@@ -1,10 +1,26 @@
 import * as types from './types';
+import { relativeTimeRounding } from 'moment';
+
 
 const sleep = (seconds, withValue) => new Promise(resolve => setTimeout(resolve, seconds * 1000, withValue));
 
 export const onChooseEndpoint = (endpoint) => (dispatch, getState) => {
 	dispatch({ type: types.PICK_ENDPOINT, payload: endpoint });
-	dispatch({ type: types.START_LOAD });
+
+	const dataCached = getState().data[endpoint]
+
+	if (!dataCached || dataCached.length === 0) {
+		dispatch({ type: types.START_LOAD });
+
+		return loadData('https://swapi.co/api/' + endpoint + '/')
+			.catch((err) => {
+				console.error(err);
+				alert('It went wrong.')
+			})
+			.then(() => dispatch({ type: types.DONE_LOAD }))
+	} else {
+		return;
+	}
 
 	function loadData(url, loadedData = []) {
 		dispatch({ type: types.START_LOAD });
@@ -13,7 +29,9 @@ export const onChooseEndpoint = (endpoint) => (dispatch, getState) => {
 			.then((response) => response.json())
 			.then((json) => {
 				const result = json.results.map((item) => ({ ...item, name: item.title || item.name, kind: endpoint }));
-				loadedData = loadedData.concat(result);
+
+				loadedData = loadedData.concat(result)
+				loadedData = loadedData.sort((a, b) => (a.name.toString()).localeCompare(b.name.toString(), 'en'));
 
 				dispatch({
 					type: types.SET_DATA,
@@ -34,11 +52,21 @@ export const onChooseEndpoint = (endpoint) => (dispatch, getState) => {
 			.catch(() => console.error('Oops'))
 
 	}
+};
+
+export const onExpandToggle = (item) => (dispatch) => {
+	dispatch({ type: types.TOGGLE_EXPAND_ITEM, payload: item });
+};
+
+export const onMergeLists = (endpoint) => (dispatch, getState) => {
+	dispatch({ type: types.START_LOAD });
+	dispatch({ type: types.PICK_ENDPOINT, payload: endpoint });
+
+	const dataCached = getState().data[endpoint]
+
+	if (!dataCached) {
+		dispatch({ type: types.MERGE_LISTS, payload: endpoint });
+	}
 
-	return loadData('https://swapi.co/api/' + endpoint + '/')
-		.catch((err) => {
-			console.error(err);
-			alert('It went wrong.')
-		})
-		.then(() => dispatch({ type: types.DONE_LOAD }))
+	dispatch({ type: types.DONE_LOAD });
 };

swapi/components/item-display.js

@@ -1,37 +1,58 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export default class ItemDisplay extends React.PureComponent {
 
 	static propTypes = {
 		children: PropTypes.shape({
-			url: PropTypes.string.isRequired,
 			name: PropTypes.string.isRequired,
 			kind: PropTypes.string.isRequired,
-		})
-	};
-
-	state = {
-		isExpanded: false,
+			url: PropTypes.string.isRequired,
+			expanded: PropTypes.bool,
+			episode_id: PropTypes.number,
+			gender: PropTypes.string,
+		}),
 	};
 
-	handleExpandToggle = () => {
-		this.setState((state) => ({ isExpanded: !state.isExpanded }));
+	expandToggle = () => {
+		this.props.setExpandToggle(this.props.children.url)
 	};
 
 	render() {
-		const { children: { name }, onExpandToggle} = this.props;
-		const { isExpanded } = this.state;
+		const { children: { name, kind, expanded, gender, episode_id, charactersNames }, endpoint} = this.props;
+
+		const iconKindClass = classNames('fa', {
+			'fa-female': kind === 'people' && gender === 'female',
+			'fa-male': kind === 'people' && gender === 'male',
+			'fa-android': kind === 'people' && (gender === 'none' || gender === 'n/a'),
+			'fa-transgender-alt': kind === 'people' && gender === 'hermaphrodite',
+			'fa-flag': episode_id,
+		});
 
-		return (<span>
-			<button className="btn btn-xs btn-default" onClick={this.handleExpandToggle} aria-label={isExpanded ? 'Collapse' : 'Expand'}>
-				{isExpanded
-					? <i className="fa fa-chevron-circle-up" />
-					: <i className="fa fa-chevron-circle-down" />}
-			</button>
-			{' '}
-			{name}
-			{ isExpanded ? <pre>{JSON.stringify(this.props.children, null, 4)}</pre> : null}
-		</span>);
+		return (
+			<span>
+
+				<button className="btn btn-xs btn-default" onClick={this.expandToggle} aria-label={expanded > 0 ? 'Collapse' : 'Expand'}>
+					{expanded > 0
+						? <i className="fa fa-chevron-circle-up" />
+						: <i className="fa fa-chevron-circle-down" />
+					}
+				</button>
+				{' '}
+				{name} - <i className={iconKindClass}/>
+				{' '}
+				{ episode_id  && 
+					<span> Episode {episode_id}</span>
+				}
+				{' '}
+				{ endpoint === 'charactersNames' && 
+					<span> - <span className='fa fa-users'> {charactersNames.length}</span></span>
+				}
+				{ endpoint === 'charactersNames'
+					? expanded ? <pre>{JSON.stringify(charactersNames, null, 4)}</pre> : null
+					: expanded ? <pre>{JSON.stringify(this.props.children, null, 4)}</pre> : null
+				}
+			</span>);
 	}
 }

swapi/components/millennium-falcon-connected.js

@@ -3,22 +3,27 @@ import { connect } from 'react-redux';
 import MillenniumFalcon from '../components/millennium-falcon';
 
 import { onChooseEndpoint } from '../actions';
+import { onExpandToggle } from '../actions';
+import { onMergeLists } from '../actions';
 
 const mapStateToProps = (state) => {
 	const  { endpoint, data } = state;
 
 	const list = (data && data[endpoint]) || [];
-	console.log(state.operations);
+
 	return {
 		list,
 		endpoint,
 		loading: state.operations > 0,
+		data,
 	}
 };
 
 const mapDispatchToProps = (dispatch) => {
 	return bindActionCreators({
 		onChooseEndpoint: onChooseEndpoint,
+		onExpandToggle: onExpandToggle,
+		onMergeLists: onMergeLists,
 	}, dispatch);
 };
 

swapi/components/millennium-falcon.js

@@ -7,32 +7,58 @@ export default class MillenniumFalcon extends React.PureComponent {
 
 	static propTypes = {
 		onChooseEndpoint: PropTypes.func.isRequired,
+		onExpandToggle: PropTypes.func.isRequired,
+		onMergeLists: PropTypes.func.isRequired,
 		list: PropTypes.arrayOf(PropTypes.shape({
 			url: PropTypes.string.isRequired,
 		})).isRequired,
 		side: PropTypes.string,
 	};
 
 	render() {
-		const { loading, list, onChooseEndpoint } = this.props;
+		const { loading, list, onChooseEndpoint, onExpandToggle, onMergeLists, endpoint } = this.props;
+
+		const listName = endpoint === 'people' ? endpoint : 'films'
 
 		const iconClass = classNames('fa', {
 			'fa-refresh': loading,
 			'fa-spin': loading,
 			'fa-star': !loading,
 		});
 
-		return (<div>
-			<p><i className={iconClass} /> What do you want to see?</p>
-			<div className="btn-group">
-				<button disabled={loading} onClick={() => onChooseEndpoint('people')} className="btn btn-danger">People</button>
-				<button disabled={loading} onClick={() => onChooseEndpoint('films')} className="btn btn-danger">Films</button>
+		return (
+			<div>
+				<p>
+					<i className={iconClass} />
+					{' '}
+					{loading
+						? <span>Loading {endpoint}, please wait...</span>
+						: <span>What do you want to see?</span>
+					}
+					<br />
+					{!this.props.data.films || !this.props.data.people 
+						? <span>Hint: A secret button will appear when you have seen both the lists of characters and films</span>
+						: <span>You can now see the new button</span>
+					}
+				</p>
+				<div className="btn-group">
+					<button disabled={loading} onClick={() => onChooseEndpoint('people')} className={"btn " + (endpoint === 'people' ? 'btn-success' : 'btn-primary')}><i className="fa fa-male"/><i className="fa fa-female"/> Characters</button>
+					<button disabled={loading} onClick={() => onChooseEndpoint('films')} className={"btn " + (endpoint === 'films' ? 'btn-success' : 'btn-primary')}><i className="fa fa-film"/> Films</button>
+					{this.props.data.films && this.props.data.people && !loading &&
+						<button onClick={() => onMergeLists('charactersNames')} className={"btn " + (endpoint === 'charactersNames' ? 'btn-success' : 'btn-primary')}><i className="fa fa-users"/> Cast</button>
+					}
+				</div>
+				<br /><br />
+				<p>{!loading && endpoint &&
+						<span>{listName.toUpperCase()}({this.props.data[endpoint].length})</span>
+					}
+				</p>
+				<table className="table">
+					<tbody>
+						{list.map((item) => <tr key={item.url}><td><ItemDisplay endpoint={endpoint} setExpandToggle={onExpandToggle}>{item}</ItemDisplay></td></tr>)}
+					</tbody>
+				</table>
 			</div>
-			<br /><br />
-			<table className="table"><tbody>
-					{list.map((item) => <tr key={item.url}><td><ItemDisplay>{item}</ItemDisplay></td></tr>)}
-				</tbody>
-			</table>
-		</div>);
+		);
 	}
 }

swapi/store.js

@@ -43,6 +43,30 @@ const reducer = (state = {}, action) => {
 				operations: state.operations - 1,
 			}
 		}
+
+		case types.TOGGLE_EXPAND_ITEM: {
+			return {
+				...state,
+				data: {
+					...state.data,
+					[state.endpoint]: state.data[state.endpoint].map(item => item.url === action.payload ? { ...item, expanded: !item.expanded } : item)
+				}
+			}
+
+		}
+
+		case types.MERGE_LISTS: {
+			return {
+				...state,
+				data: {
+					...state.data,
+					[action.payload]: state.data.films.map(film => ({ ...film, charactersNames: film.characters.map(character => ({
+						name: state.data.people.filter(person => person.url === character)[0].name
+					})).sort((a, b) => (a.name.toString()).localeCompare(b.name.toString(), 'en')) }))
+				}
+			}
+
+		}
 	}
 
 	return state;

swapi/types.js

@@ -2,3 +2,5 @@ export const PICK_ENDPOINT = 'PICK_ENDPOINT';
 export const SET_DATA = 'SET_DATA';
 export const START_LOAD = 'START_LOAD';
 export const DONE_LOAD = 'DONE_LOAD';
+export const TOGGLE_EXPAND_ITEM = 'TOGGLE_EXPAND_ITEM';
+export const MERGE_LISTS = 'MERGE_LISTS';