From aa65fa4b11deb15f41fae8855222ff3aec91e81e Mon Sep 17 00:00:00 2001 From: Ahmed-Ayman Date: Fri, 21 Dec 2018 14:44:18 +0200 Subject: [PATCH] implement the random location --- src/actions/action_types.js | 7 ++++ src/actions/places.js | 70 ++++++++++++++++++++++++++++++++ src/components/RandomLocation.js | 24 ----------- src/components/RandomPlace.js | 62 ++++++++++++++++++++++++++++ src/containers/Home.js | 51 ++++++++++++++++++----- src/utils/get-random-place.js | 5 +++ 6 files changed, 184 insertions(+), 35 deletions(-) create mode 100644 src/actions/places.js delete mode 100644 src/components/RandomLocation.js create mode 100644 src/components/RandomPlace.js create mode 100644 src/utils/get-random-place.js diff --git a/src/actions/action_types.js b/src/actions/action_types.js index 8ec6837..8599cfa 100644 --- a/src/actions/action_types.js +++ b/src/actions/action_types.js @@ -3,6 +3,13 @@ export const START_LOADING_ALL_TOPICS = 'START_LOADING_ALL_TOPICS'; export const LOADED_ALL_TOPICS = 'LOADED_ALL_TOPICS'; export const START_LOADING_RANDOM_TOPIC = 'START_LOADING_RANDOM_TOPIC'; export const LOADED_RANDOM_TOPIC = 'LOADED_RANDOM_TOPIC'; +// Locations/Places + +// Places Action Types +export const START_LOADING_ALL_PLACES = 'START_LOADING_ALL_PLACES'; +export const LOADED_ALL_PLACES = 'LOADED_ALL_PLACES'; +export const START_LOADING_RANDOM_PLACE = 'START_LOADING_RANDOM_PLACE'; +export const LOADED_RANDOM_PLACE = 'LOADED_RANDOM_PLACE'; // Videos Action Types export const ADD_VIDEOS_TO_STATE = 'ADD_VIDEOS_TO_STATE'; diff --git a/src/actions/places.js b/src/actions/places.js new file mode 100644 index 0000000..087b820 --- /dev/null +++ b/src/actions/places.js @@ -0,0 +1,70 @@ +import { fetchPlaces, fetchVideosByPlace } from '../utils/api'; +import { APIError } from './errors'; +import { getItem, setItem } from '../utils/safe-storage'; +import getRandomTopic from '../utils/get-random-place'; +import { addVideosToState } from './videos'; +import { + START_LOADING_ALL_PLACES, + LOADED_ALL_PLACES, + START_LOADING_RANDOM_PLACE, + LOADED_RANDOM_PLACE +} from './action_types'; + +export function getAllPlaces() { + return dispatch => { + dispatch(startLoadingAllPlaces()); + // this calls the API + fetchPlaces() + .then(places => { + dispatch(loadedPlaces(places)); + }).catch(error => { + dispatch(APIError(error)); + }) + }; +}; + +function startLoadingAllPlaces() { + return { + type: START_LOADING_ALL_PLACES + }; +}; + +function loadedPlaces(places) { + // cache + setItem('allPlaces', JSON.stringify(places)); + setItem('placesUpdatedAt', new Date()); + return { + type: LOADED_ALL_PLACES, + payload: places + }; +}; +// actions : +// - async actions +// - simple: return action type and payload. +export function getRandomPlaceVideos(allPlaces, numVideos=3) { + return dispatch => { + const randomTopic = getRandomTopic(allPlaces); + dispatch(loadingRandomTopicVideos()); + fetchVideosByPlace(randomTopic.name, 0, numVideos) + .then(videos => { + dispatch(addVideosToState(videos)); + dispatch(loadedRandomTopicVideos(randomTopic, videos)); + }); + }; +}; + +function loadedRandomTopicVideos(place, videos) { + return { + type: LOADED_RANDOM_PLACE, + payload: { + place: place, + videos: videos + } + }; +}; + +function loadingRandomTopicVideos() { + return { + type: START_LOADING_RANDOM_PLACE + }; +}; \ No newline at end of file diff --git a/src/components/RandomLocation.js b/src/components/RandomLocation.js deleted file mode 100644 index 0c9ab4a..0000000 --- a/src/components/RandomLocation.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import VideoItem from "./VideoItem"; -import Grid from 'react-css-grid' -import SectionHeading from "./SectionHeading"; - -class RandomLocation extends React.Component { - render() { - - return ( -
- - - - - - -
- ) - } -} - -export default (RandomLocation); \ No newline at end of file diff --git a/src/components/RandomPlace.js b/src/components/RandomPlace.js new file mode 100644 index 0000000..f041692 --- /dev/null +++ b/src/components/RandomPlace.js @@ -0,0 +1,62 @@ +import Grid from 'react-css-grid' +import React from 'react'; +import PropTypes from 'prop-types'; +import VideoItem from "./VideoItem"; +import RandomItemTitle from "./SectionHeading"; +import {Link} from 'react-router-dom'; + +class RandomPlace extends React.Component { + + shufflePlace() { + this.props.getRandomPlaceVideos(this.props.allPlaces); + } + + render() { + return ( +
+

from the Archive Places - من مواضيع الارشيف

+ + + {/* View all places button*/} + + + + {/* Shuffle button */} + + + + + {this.props.videos.map(video => + + )} + +
+ + ) + } +} + +RandomPlace.propTypes = { + placeName: PropTypes.string, + allPlaces: PropTypes.array, + videos: PropTypes.array, + loading: PropTypes.bool, + placeCount: PropTypes.number, + getRandomPlaceVideos: PropTypes.func +}; + +export default (RandomPlace); \ No newline at end of file diff --git a/src/containers/Home.js b/src/containers/Home.js index a5df051..c6be901 100644 --- a/src/containers/Home.js +++ b/src/containers/Home.js @@ -1,7 +1,8 @@ import React from 'react'; import {connect} from 'react-redux'; -import { getAllTopics, getRandomTopicVideos } from '../actions/topics'; -import RandomLocation from "../components/RandomLocation"; +import {getAllTopics, getRandomTopicVideos} from '../actions/topics'; +import {getAllPlaces, getRandomPlaceVideos} from '../actions/places'; +import RandomPlace from "../components/RandomPlace"; import RandomDate from "../components/RandomDate"; import RandomTopic from "../components/RandomTopic"; @@ -12,6 +13,12 @@ class Home extends React.Component { } else { this.props.getAllTopics(); } + // places + if (this.props.allPlaces && this.props.allPlaces.length > 0 && !this.props.randomPlace) { + this.props.getRandomPlaceVideos()(this.props.allPlaces); + } else { + this.props.getAllPlaces(); + } } componentWillReceiveProps(nextProps) { @@ -20,20 +27,31 @@ class Home extends React.Component { if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) { this.props.getRandomTopicVideos(nextProps.allTopics); } + // places + if ((this.props.allPlaces || nextProps.allPlaces) && !this.props.loadingRandomPlace && !nextProps.loadingRandomPlace && !this.props.randomPlace) { + this.props.getRandomPlaceVideos()(nextProps.allPlaces); + } } render() { return (
+ -
); @@ -46,12 +64,23 @@ const mapStateToProps = state => ({ randomTopic: state.topics.randomTopic, randomTopicCount: state.topics.randomTopicCount, loadingRandomTopic: state.topics.loadingRandomTopic, - randomTopicVideos: state.topics.randomTopicVideos + randomTopicVideos: state.topics.randomTopicVideos, + // places + allPlaces: state.topics.allPlaces, + loadingAllPlaces: state.topics.loadingAllPlaces, + randomPlace: state.topics.randomPlace, + randomPlaceCount: state.topics.randomPlaceCount, + loadingRandomPlace: state.topics.loadingRandomPlace, + randomPlaceVideos: state.topics.randomPlaceVideos, }); const mapDispatchToProps = dispatch => ({ getAllTopics: () => dispatch(getAllTopics()), - getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics)) + getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics)), + // places + getAllPlaces: () => dispatch(getAllPlaces()), + getRandomPlaceVideos: allTopics => dispatch(getRandomPlaceVideos(allTopics)), + }); export default connect(mapStateToProps, mapDispatchToProps)(Home); \ No newline at end of file diff --git a/src/utils/get-random-place.js b/src/utils/get-random-place.js new file mode 100644 index 0000000..9d48411 --- /dev/null +++ b/src/utils/get-random-place.js @@ -0,0 +1,5 @@ + +export default function getRandomPlace(allPlaces, minVideos=3) { + const validPlaces = allPlaces.filter(place => place.items >= minVideos); + return validPlaces[Math.floor(Math.random() * validPlaces.length)]; +} \ No newline at end of file