├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .setup.js
├── .travis.yml
├── Procfile
├── README.md
├── build
├── favicon.ico
├── index.html
└── static
│ ├── css
│ ├── main.b686448c.css
│ └── main.b686448c.css.map
│ └── js
│ ├── main.5068efe5.js
│ └── main.5068efe5.js.map
├── favicon.ico
├── index.html
├── package.json
├── src
├── Api
│ └── api.js
├── actions
│ └── mediaActions.js
├── common
│ └── Header.js
├── components
│ ├── HomePage.js
│ ├── PhotosPage.js
│ └── VideosPage.js
├── constants
│ └── actionTypes.js
├── containers
│ ├── App.js
│ └── MediaGalleryPage.js
├── index.js
├── reducers
│ ├── imageReducer.js
│ ├── index.js
│ ├── initialState.js
│ └── videoReducer.js
├── routes.js
├── sagas
│ ├── index.js
│ ├── mediaSagas.js
│ └── watchers.js
├── stores
│ └── configureStores.js
└── styles
│ └── style.css
└── test
├── App.test.js
├── Header.test.js
├── HomePage.test.js
├── MediaGalleryPage.test.js
├── PhotoPage.test.js
├── flickr.test.js
├── imageReducers.test.js
├── mediaActions.test.js
├── mediaSagas.test.js
├── sagas.index.test.js
├── store.test.js
├── videoPage.test.js
├── videoReducer.test.js
└── watchers.test.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "react",
4 | "es2015",
5 | "stage-2"
6 | ],
7 | "plugins": [
8 | [
9 | "transform-runtime", {
10 | "polyfill": false,
11 | "regenerator": true
12 | }
13 | ]
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | object-curly-spacing = true
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 |
13 | [*.md]
14 | trim_trailing_whitespace = false
15 |
16 | [{*.json, *.yml, .eslintrc}]
17 | indent_size = 2
18 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "parser": "babel-eslint",
4 | "env": {
5 | "mocha": true,
6 | "node": true
7 | },
8 | "globals": {
9 | "expect": true,
10 | "describe": true,
11 | "document": true,
12 | "fetch": true,
13 | "window": true
14 | },
15 | "rules": {
16 | "padded-blocks": 0,
17 | "object-curly-spacing": [1, "always"],
18 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
19 | "comma-dangle": [2, "never"],
20 | "arrow-body-style": ["error", "as-needed"],
21 | "no-return-assign": 2,
22 | "no-use-before-define": [2, "nofunc"],
23 | "no-unused-expressions": 0
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # nyc test coverage
18 | .nyc_output
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # node-waf configuration
24 | .lock-wscript
25 |
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 |
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 |
33 | # Optional npm cache directory
34 | .npm
35 |
36 | # Optional REPL history
37 | .node_repl_history
38 | node_modules
39 | coverage
40 | .idea
41 | .env
42 |
--------------------------------------------------------------------------------
/.setup.js:
--------------------------------------------------------------------------------
1 | require('babel-core/register')();
2 |
3 | var jsdom = require('jsdom').jsdom;
4 |
5 | var exposedProperties = ['window', 'navigator', 'document'];
6 |
7 | global.document = jsdom('');
8 | global.window = document.defaultView;
9 | Object.keys(document.defaultView).forEach((property) => {
10 | if (typeof global[property] === 'undefined') {
11 | exposedProperties.push(property);
12 | global[property] = document.defaultView[property];
13 | }
14 | });
15 |
16 | global.navigator = {
17 | userAgent: 'node.js'
18 | };
19 |
20 | documentRef = document;
21 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - "5.0"
5 | env:
6 | - CXX=g++-4.8
7 | cache:
8 | directories:
9 | - node_modules
10 | notifications:
11 | email: false
12 | branches:
13 | only:
14 | - develop
15 | - master
16 | script:
17 | - npm run test:coverage
18 | after_success:
19 | - npm run coveralls
20 | deploy:
21 | provider: heroku
22 | api_key: 4fd3f4ce-2f6a-49c7-b238-21dd660db329
23 | app:
24 | develop: media-gallery
25 | master: media-gallery
26 | before_deploy:
27 | - npm i pushstate-server -g
28 |
--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: npm run deploy
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/andela-rekemezie/media-library)
2 | [](https://coveralls.io/github/andela-rekemezie/media-library?branch=master)
3 |
4 | 
5 |
6 |
7 | - Click here for see the [Live demo](http://media-gallery.herokuapp.com).
8 | - Click here for the tutorial post.
9 |
10 | # Motivation
11 | media-gallery is a tutorial app to get all levels of React developers up to speed with how to architect a scalable, maintainable and testable react/redux application.
12 |
13 | # Technology used
14 | * [React](https://facebook.github.io/react/) as the core infrastructure.
15 | * [Redux](https://github.com/reactjs/redux) for state management.
16 | * [Redux-saga](https://github.com/yelouafi/redux-saga) for handling async tasks with agility.
17 |
18 | # Modules covered
19 | 1. Introduction.
20 | 2. Project setup.
21 | 2. Define action.
22 | 3. Setup state management system.
23 | 4. Define async task handlers.
24 | 5. Create a container component.
25 | 6. Create presentational component.
26 | 7. Connect React component to redux store.
27 | 8. Deploy app on Heroku.
28 |
29 | ## Credit
30 | Special credit goes to Facebook team for [create-react-app](https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html)
31 |
32 | ## Sending Feedback
33 | I am always open to [your feedback](https://github.com/andela-rekemezie/media-gallery/issues).
34 |
35 | ## Contributing
36 | If you have ideas of how to make the app a good learning tool, open an [issue](https://github.com/andela-rekemezie/media-gallery/issues).
37 |
38 | * Follow me on [Twitter](https://twitter.com/row_net)
39 |
40 |
--------------------------------------------------------------------------------
/build/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scotch-io/react-redux-media-library/b8dbe8ef3e835badbe3fc30bb260b6a3529f069d/build/favicon.ico
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 | React App
--------------------------------------------------------------------------------
/build/static/css/main.b686448c.css:
--------------------------------------------------------------------------------
1 | body{margin:0;padding:0;font-family:Helvetica,Arial,Sans-Serif,sans-serif;background:#fff}.title{padding:2px;text-overflow-ellipsis:overflow;overflow:hidden;display:block;text-overflow:ellipsis}.select-video,.selected-image{height:500px}.select-video video,.selected-image img{width:100%;height:450px}.image-thumbnail,.video-thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;overflow:auto;overflow-y:hidden}.image-thumbnail img,.video-thumbnail video{width:70px;height:70px;padding:1px;border:1px solid grey}
2 | /*# sourceMappingURL=main.b686448c.css.map*/
--------------------------------------------------------------------------------
/build/static/css/main.b686448c.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.b686448c.css","sourceRoot":""}
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scotch-io/react-redux-media-library/b8dbe8ef3e835badbe3fc30bb260b6a3529f069d/favicon.ico
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React App
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "media-library",
3 | "version": "0.0.1",
4 | "private": true,
5 | "devDependencies": {
6 | "babel-core": "^6.13.2",
7 | "babel-eslint": "^6.1.2",
8 | "babel-plugin-transform-runtime": "^6.12.0",
9 | "babel-polyfill": "^6.13.0",
10 | "babel-preset-es2015": "^6.13.2",
11 | "babel-preset-react": "^6.11.1",
12 | "babel-preset-stage-2": "^6.13.0",
13 | "coveralls": "^2.11.12",
14 | "eslint": "^3.2.2",
15 | "eslint-config-airbnb": "^10.0.0",
16 | "eslint-plugin-react": "^6.0.0",
17 | "ignore-styles": "^4.0.0",
18 | "istanbul": "^1.0.0-alpha.2",
19 | "mocha": "^3.0.2",
20 | "nock": "^8.0.0",
21 | "react-addons-test-utils": "^15.3.0",
22 | "react-scripts": "0.2.1",
23 | "redux-mock-store": "^1.1.2"
24 | },
25 | "dependencies": {
26 | "react": "^15.2.1",
27 | "react-dom": "^15.2.1",
28 | "react-redux": "^4.4.5",
29 | "react-router": "^2.6.0",
30 | "redux": "^3.5.2",
31 | "redux-saga": "^0.11.0",
32 | "enzyme": "^2.4.1",
33 | "expect": "latest",
34 | "pushstate-server": "latest",
35 | "isomorphic-fetch": "^2.2.1"
36 | },
37 | "bugs": {
38 | "url": "https://github.com/andela-rekemezie/media-gallery/issues"
39 | },
40 | "scripts": {
41 | "start": "react-scripts start",
42 | "build": "rm -rf build/ && react-scripts build",
43 | "eject": "react-scripts eject",
44 | "test:coverage": "rm -rf coverage/ && istanbul cover _mocha -- --compilers css:ignore-styles ./.setup.js \"test\"",
45 | "test": "clear && _mocha --compilers css:ignore-styles ./.setup.js \"test\" --recursive",
46 | "test:watch": "npm run test -- --watch",
47 | "deploy": "pushstate-server build",
48 | "homepage": "https://media-gallery.herokuapp.com",
49 | "coveralls": "cat ./coverage/lcov.info | coveralls"
50 | },
51 | "eslintConfig": {
52 | "extends": "./node_modules/react-scripts/config/eslint.js"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/Api/api.js:
--------------------------------------------------------------------------------
1 | const FLICKR_API_KEY = 'a46a979f39c49975dbdd23b378e6d3d5';
2 | const SHUTTER_CLIENT_ID = '3434a56d8702085b9226';
3 | const SHUTTER_CLIENT_SECRET = '7698001661a2b347c2017dfd50aebb2519eda578';
4 |
5 | const basicAuth = () => 'Basic '.concat(window.btoa(`${SHUTTER_CLIENT_ID}:${SHUTTER_CLIENT_SECRET}`));
6 | const authParameters = {
7 | headers: {
8 | Authorization: basicAuth()
9 | }
10 | };
11 |
12 | export const shutterStockVideos = (searchQuery) => {
13 | const SHUTTERSTOCK_API_ENDPOINT = `https://api.shutterstock.com/v2/videos/search?query=${searchQuery}&page=1&per_page=10`;
14 | return fetch(SHUTTERSTOCK_API_ENDPOINT, authParameters)
15 | .then(response => {
16 | return response.json();
17 | })
18 | .then(json => {
19 | return json.data.map(({ id, assets, description }) => ({
20 | id,
21 | mediaUrl: assets.preview_mp4.url,
22 | description
23 | }));
24 | });
25 | };
26 |
27 | export const flickrImages = (searchQuery) => {
28 | const FLICKR_API_ENDPOINT = `https://api.flickr.com/services/rest/?method=flickr.photos.search&text=${searchQuery}&api_key=${FLICKR_API_KEY}&format=json&nojsoncallback=1&per_page=10`;
29 | return fetch(FLICKR_API_ENDPOINT)
30 | .then(response => {
31 | return response.json()
32 | })
33 | .then(json => {
34 | return json.photos.photo.map(({ farm, server, id, secret, title }) => ({
35 | id,
36 | title,
37 | mediaUrl: `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg`
38 | }));
39 | });
40 | };
41 |
--------------------------------------------------------------------------------
/src/actions/mediaActions.js:
--------------------------------------------------------------------------------
1 | import * as types from '../constants/actionTypes';
2 |
3 | export const selectImageAction = (image) => ({
4 | type: types.SELECTED_IMAGE,
5 | image
6 | });
7 |
8 | export const selectVideoAction = (video) => ({
9 | type: types.SELECTED_VIDEO,
10 | video
11 | });
12 |
13 | export const searchMediaAction = (payload) => ({
14 | type: types.SEARCH_MEDIA_REQUEST,
15 | payload
16 | });
17 |
--------------------------------------------------------------------------------
/src/common/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link, IndexLink } from 'react-router';
3 |
4 | const Header = () => (
5 |
6 |
11 |
12 | );
13 |
14 | export default Header;
15 |
--------------------------------------------------------------------------------
/src/components/HomePage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router';
3 |
4 | const HomePage = () => (
5 |
6 |
Welcome to Media Library built with React, Redux, Redux-saga
7 |
8 |
9 |
10 |
11 |
12 |
5 |
Images
6 |
7 |
8 |
{selectedImage.title}
9 |
10 |
11 |
12 |
13 | {images.map(image => (
14 |
15 |
16 |
17 | ))}
18 |
19 |
5 |
Videos
6 |
7 |
8 |
{selectedVideo.description}
9 |
10 |
11 |
12 |
13 | {videos.map(video => (
14 |
15 |
16 |
17 | ))}
18 |
19 |
8 |
9 | {this.props.children}
10 |
11 | );
12 | }
13 | }
14 | App.propTypes = {
15 | children: PropTypes.object.isRequired
16 | };
17 | export default App;
18 |
--------------------------------------------------------------------------------
/src/containers/MediaGalleryPage.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import {
4 | selectImageAction, searchMediaAction,
5 | selectVideoAction
6 | } from '../actions/mediaActions';
7 | import PhotosPage from '../components/PhotosPage';
8 | import VideosPage from '../components/VideosPage';
9 | import '../styles/style.css';
10 |
11 |
12 | export class MediaGalleryPage extends Component {
13 | constructor() {
14 | super();
15 | this.handleSearch = this.handleSearch.bind(this);
16 | this.handleSelectImage = this.handleSelectImage.bind(this);
17 | this.handleSelectVideo = this.handleSelectVideo.bind(this);
18 | }
19 |
20 | componentDidMount() {
21 | this.props.dispatch(searchMediaAction('rain'));
22 | }
23 |
24 | handleSelectImage(selectedImage) {
25 | this.props.dispatch(selectImageAction(selectedImage));
26 | }
27 |
28 | handleSelectVideo(selectedVideo) {
29 | this.props.dispatch(selectVideoAction(selectedVideo));
30 | }
31 |
32 | handleSearch(event) {
33 | event.preventDefault();
34 | if (this.query !== null) {
35 | this.props.dispatch(searchMediaAction(this.query.value));
36 | this.query.value = '';
37 | }
38 | }
39 |
40 | render() {
41 | const { images, selectedImage, videos, selectedVideo } = this.props;
42 | return (
43 |
44 | {images ?
: 'loading ....'}
68 |