├── diagrams ├── 10 │ └── .gitkeep ├── 11 │ └── .gitkeep ├── 12 │ └── .gitkeep ├── 13 │ └── .gitkeep ├── 14 │ └── .gitkeep ├── 15 │ ├── .gitkeep │ └── diagrams.xml ├── 16 │ └── .gitkeep ├── 17 │ └── .gitkeep ├── 18 │ ├── .gitkeep │ └── diagrams.xml ├── 19 │ └── .gitkeep ├── 20 │ ├── .gitkeep │ └── diagrams.xml ├── 21 │ └── .gitkeep ├── 02 │ ├── .gitkeep │ └── diagrams.xml ├── 03 │ └── .gitkeep ├── 04 │ └── .gitkeep ├── 05 │ └── .gitkeep ├── 06 │ └── .gitkeep ├── 07 │ └── .gitkeep ├── 08 │ ├── .gitkeep │ └── diagrams.xml ├── arch │ ├── 11 │ │ └── .gitkeep │ ├── 12 │ │ └── .gitkeep │ ├── 13 │ │ ├── .gitkeep │ │ └── diagrams.xml │ └── 14 │ │ └── .gitkeep ├── deploy │ └── .gitkeep ├── widgets │ └── .gitkeep ├── videos-hooks │ └── .gitkeep ├── youtube │ ├── README.MD │ ├── 007 - flow.png │ ├── 004 - mockup.png │ ├── 006 - webpack.png │ ├── 010 - es2015.png │ ├── 001 - syllabus.png │ ├── 003 - ecosystem.png │ ├── 008 - many files.png │ ├── 009 - single file.png │ ├── 002 - what is react.png │ ├── 014 - separate libs.png │ ├── 011 - create-react-app.png │ ├── 012 - path to content.png │ ├── 013 - import statements.png │ └── 015 - class vs instance.png └── README.md ├── .gitignore ├── checker ├── src │ ├── ProjectSelector.js │ ├── CompareFile.css │ ├── BranchSelector.js │ ├── CompareProject.js │ ├── Upload.js │ ├── LocalFetcher.js │ ├── GithubFetcher.js │ ├── CompareFile.js │ └── index.js ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json └── README.md ├── seasons-hooks ├── src │ ├── s.json │ ├── Spinner.js │ ├── useLocation.js │ ├── SeasonDisplay.css │ ├── index.js │ └── SeasonDisplay.js ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json └── README.md ├── streams ├── api │ ├── .gitignore │ ├── package.json │ └── db.json ├── rtmpserver │ ├── .gitignore │ ├── package.json │ └── index.js └── client │ ├── public │ ├── favicon.ico │ ├── manifest.json │ ├── modal.html │ └── index.html │ ├── src │ ├── history.js │ ├── apis │ │ └── streams.js │ ├── actions │ │ ├── types.js │ │ └── index.js │ ├── reducers │ │ ├── index.js │ │ ├── authReducer.js │ │ └── streamReducer.js │ ├── components │ │ ├── Header.js │ │ ├── streams │ │ │ ├── StreamCreate.js │ │ │ ├── StreamEdit.js │ │ │ ├── StreamShow.js │ │ │ ├── StreamDelete.js │ │ │ ├── StreamForm.js │ │ │ └── StreamList.js │ │ ├── Modal.js │ │ ├── App.js │ │ └── GoogleAuth.js │ └── index.js │ ├── .gitignore │ ├── package.json │ └── README.md ├── projects └── README.md ├── README.md ├── blog ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── apis │ │ └── jsonPlaceholder.js │ ├── reducers │ │ ├── postsReducer.js │ │ ├── usersReducer.js │ │ └── index.js │ ├── components │ │ ├── App.js │ │ ├── UserHeader.js │ │ └── PostList.js │ ├── index.js │ └── actions │ │ └── index.js ├── .gitignore ├── package.json └── README.md ├── jsx ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json ├── src │ └── index.js └── README.md ├── pics ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ ├── api │ │ └── unsplash.js │ └── components │ │ ├── ImageList.css │ │ ├── ImageList.js │ │ ├── App.js │ │ ├── SearchBar.js │ │ └── ImageCard.js ├── .gitignore ├── package.json └── README.md ├── songs ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── actions │ │ └── index.js │ ├── index.js │ ├── components │ │ ├── App.js │ │ ├── SongDetail.js │ │ └── SongList.js │ └── reducers │ │ └── index.js ├── .gitignore ├── package.json └── README.md ├── widgets ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ ├── components │ │ ├── Link.js │ │ ├── Header.js │ │ ├── Route.js │ │ ├── Accordion.js │ │ ├── Translate.js │ │ ├── Convert.js │ │ ├── Dropdown.js │ │ └── Search.js │ └── App.js ├── .gitignore ├── package.json └── README.md ├── seasons ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── Spinner.js │ ├── SeasonDisplay.css │ ├── SeasonDisplay.js │ └── index.js ├── .gitignore ├── package.json └── README.md ├── videos ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ ├── components │ │ ├── VideoItem.css │ │ ├── VideoList.js │ │ ├── VideoItem.js │ │ ├── VideoDetail.js │ │ ├── SearchBar.js │ │ └── App.js │ └── apis │ │ └── youtube.js ├── .gitignore ├── package.json └── README.md ├── components ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── .gitignore ├── src │ ├── ApprovalCard.js │ ├── CommentDetail.js │ └── index.js ├── package.json └── README.md ├── translate ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── contexts │ │ ├── ColorContext.js │ │ └── LanguageContext.js │ ├── index.js │ └── components │ │ ├── UserCreate.js │ │ ├── Field.js │ │ ├── LanguageSelector.js │ │ ├── App.js │ │ └── Button.js ├── .gitignore ├── package.json └── README.md ├── hooks-simple ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ └── components │ │ ├── UserList.js │ │ ├── ResourceList.js │ │ ├── App.js │ │ └── useResources.js ├── .gitignore ├── package.json └── README.md └── videoshooks ├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── index.js ├── components │ ├── VideoItem.css │ ├── VideoList.js │ ├── VideoItem.js │ ├── VideoDetail.js │ ├── SearchBar.js │ └── App.js ├── apis │ └── youtube.js └── hooks │ └── useVideos.js ├── .gitignore ├── package.json └── README.md /diagrams/11/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /diagrams/12/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /diagrams/13/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /diagrams/14/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /diagrams/02/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/03/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/04/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/05/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/06/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/07/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/08/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/10/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/15/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/16/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/17/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/18/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/19/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/20/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/21/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /checker/src/ProjectSelector.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /diagrams/arch/11/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/arch/12/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/arch/13/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/arch/14/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/deploy/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /diagrams/widgets/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /seasons-hooks/src/s.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /diagrams/videos-hooks/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /streams/api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /streams/rtmpserver/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /projects/README.md: -------------------------------------------------------------------------------- 1 | All completed project code is in here! 2 | -------------------------------------------------------------------------------- /diagrams/youtube/README.MD: -------------------------------------------------------------------------------- 1 | Diagrams related to the youtube app 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReduxCode 2 | 3 | Companion repo for a course on Udemy! 4 | -------------------------------------------------------------------------------- /blog/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/blog/public/favicon.ico -------------------------------------------------------------------------------- /jsx/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/jsx/public/favicon.ico -------------------------------------------------------------------------------- /pics/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/pics/public/favicon.ico -------------------------------------------------------------------------------- /songs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/songs/public/favicon.ico -------------------------------------------------------------------------------- /widgets/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /checker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/checker/public/favicon.ico -------------------------------------------------------------------------------- /seasons/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/seasons/public/favicon.ico -------------------------------------------------------------------------------- /videos/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/videos/public/favicon.ico -------------------------------------------------------------------------------- /widgets/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/widgets/public/favicon.ico -------------------------------------------------------------------------------- /widgets/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/widgets/public/logo192.png -------------------------------------------------------------------------------- /widgets/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/widgets/public/logo512.png -------------------------------------------------------------------------------- /components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/components/public/favicon.ico -------------------------------------------------------------------------------- /translate/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/translate/public/favicon.ico -------------------------------------------------------------------------------- /translate/src/contexts/ColorContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.createContext(); 4 | -------------------------------------------------------------------------------- /diagrams/youtube/007 - flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/007 - flow.png -------------------------------------------------------------------------------- /hooks-simple/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/hooks-simple/public/favicon.ico -------------------------------------------------------------------------------- /videoshooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/videoshooks/public/favicon.ico -------------------------------------------------------------------------------- /diagrams/youtube/004 - mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/004 - mockup.png -------------------------------------------------------------------------------- /diagrams/youtube/006 - webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/006 - webpack.png -------------------------------------------------------------------------------- /diagrams/youtube/010 - es2015.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/010 - es2015.png -------------------------------------------------------------------------------- /seasons-hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/seasons-hooks/public/favicon.ico -------------------------------------------------------------------------------- /streams/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/streams/client/public/favicon.ico -------------------------------------------------------------------------------- /diagrams/youtube/001 - syllabus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/001 - syllabus.png -------------------------------------------------------------------------------- /diagrams/youtube/003 - ecosystem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/003 - ecosystem.png -------------------------------------------------------------------------------- /streams/client/src/history.js: -------------------------------------------------------------------------------- 1 | import createHistory from 'history/createBrowserHistory'; 2 | 3 | export default createHistory(); 4 | -------------------------------------------------------------------------------- /diagrams/youtube/008 - many files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/008 - many files.png -------------------------------------------------------------------------------- /diagrams/youtube/009 - single file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/009 - single file.png -------------------------------------------------------------------------------- /diagrams/youtube/002 - what is react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/002 - what is react.png -------------------------------------------------------------------------------- /diagrams/youtube/014 - separate libs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/014 - separate libs.png -------------------------------------------------------------------------------- /diagrams/youtube/011 - create-react-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/011 - create-react-app.png -------------------------------------------------------------------------------- /diagrams/youtube/012 - path to content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/012 - path to content.png -------------------------------------------------------------------------------- /diagrams/youtube/013 - import statements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/013 - import statements.png -------------------------------------------------------------------------------- /diagrams/youtube/015 - class vs instance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephenGrider/redux-code/HEAD/diagrams/youtube/015 - class vs instance.png -------------------------------------------------------------------------------- /streams/client/src/apis/streams.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export default axios.create({ 4 | baseURL: 'http://localhost:3001' 5 | }); 6 | -------------------------------------------------------------------------------- /blog/src/apis/jsonPlaceholder.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export default axios.create({ 4 | baseURL: 'https://jsonplaceholder.typicode.com' 5 | }); 6 | -------------------------------------------------------------------------------- /widgets/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /pics/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /songs/src/actions/index.js: -------------------------------------------------------------------------------- 1 | // Action creator 2 | export const selectSong = song => { 3 | // Return an action 4 | return { 5 | type: 'SONG_SELECTED', 6 | payload: song 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /videos/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /hooks-simple/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /translate/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /videoshooks/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /blog/src/reducers/postsReducer.js: -------------------------------------------------------------------------------- 1 | export default (state = [], action) => { 2 | switch (action.type) { 3 | case 'FETCH_POSTS': 4 | return action.payload; 5 | default: 6 | return state; 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /videos/src/components/VideoItem.css: -------------------------------------------------------------------------------- 1 | .video-item { 2 | display: flex !important; 3 | align-items: center !important; 4 | cursor: pointer; 5 | } 6 | 7 | .video-item.item img { 8 | max-width: 180px; 9 | } 10 | -------------------------------------------------------------------------------- /videoshooks/src/components/VideoItem.css: -------------------------------------------------------------------------------- 1 | .video-item { 2 | display: flex !important; 3 | align-items: center !important; 4 | cursor: pointer; 5 | } 6 | 7 | .video-item.item img { 8 | max-width: 180px; 9 | } 10 | -------------------------------------------------------------------------------- /blog/src/reducers/usersReducer.js: -------------------------------------------------------------------------------- 1 | export default (state = [], action) => { 2 | switch (action.type) { 3 | case 'FETCH_USER': 4 | return [...state, action.payload]; 5 | default: 6 | return state; 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /blog/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import postsReducer from './postsReducer'; 3 | import usersReducer from './usersReducer'; 4 | 5 | export default combineReducers({ 6 | posts: postsReducer, 7 | users: usersReducer 8 | }); 9 | -------------------------------------------------------------------------------- /blog/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PostList from './PostList'; 3 | 4 | const App = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /pics/src/api/unsplash.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export default axios.create({ 4 | baseURL: 'https://api.unsplash.com', 5 | headers: { 6 | Authorization: 7 | 'Client-ID 34e39e5c2f447ce52009a515846ca2b6ccc35552bb63de59cf4a6d06728f3f7e' 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /pics/src/components/ImageList.css: -------------------------------------------------------------------------------- 1 | .image-list { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 4 | grid-gap: 0 10px; 5 | grid-auto-rows: 10px; 6 | } 7 | 8 | .image-list img { 9 | width: 250px; 10 | grid-row-end: span 2; 11 | } 12 | -------------------------------------------------------------------------------- /videos/src/apis/youtube.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const KEY = 'AIzaSyDVfeUxsJzp8Vs0xnFGlhC2zrllcqbC4zc'; 4 | 5 | export default axios.create({ 6 | baseURL: 'https://www.googleapis.com/youtube/v3', 7 | params: { 8 | part: 'snippet', 9 | maxResults: 5, 10 | key: KEY, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /videoshooks/src/apis/youtube.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const KEY = 'AIzaSyDVfeUxsJzp8Vs0xnFGlhC2zrllcqbC4zc'; 4 | 5 | export default axios.create({ 6 | baseURL: 'https://www.googleapis.com/youtube/v3', 7 | params: { 8 | part: 'snippet', 9 | maxResults: 5, 10 | key: KEY, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /streams/api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "json-server -p 3001 -w db.json" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "json-server": "^0.14.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /streams/rtmpserver/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rtmpserver", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node index.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "node-media-server": "^1.4.7" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /diagrams/08/diagrams.xml: -------------------------------------------------------------------------------- 1 | UzV2zq1wL0osyPDNT0nNUTV2VTV2LsrPL4GwciucU3NyVI0MMlNUjV1UjYwMgFjVyA2HrCFY1qAgsSg1rwSLBiADYTaQg2Y1AA== -------------------------------------------------------------------------------- /translate/src/components/UserCreate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Field from './Field'; 3 | import Button from './Button'; 4 | 5 | const UserCreate = () => { 6 | return ( 7 |
8 | 9 |
11 | ); 12 | }; 13 | 14 | export default UserCreate; 15 | -------------------------------------------------------------------------------- /streams/client/src/actions/types.js: -------------------------------------------------------------------------------- 1 | export const SIGN_IN = 'SIGN_IN'; 2 | export const SIGN_OUT = 'SIGN_OUT'; 3 | export const CREATE_STREAM = 'CREATE_STREAM'; 4 | export const FETCH_STREAMS = 'FETCH_STREAMS'; 5 | export const FETCH_STREAM = 'FETCH_STREAM'; 6 | export const DELETE_STREAM = 'DELETE_STREAM'; 7 | export const EDIT_STREAM = 'EDIT_STREAM'; 8 | -------------------------------------------------------------------------------- /seasons/src/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spinner = props => { 4 | return ( 5 |
6 |
{props.message}
7 |
8 | ); 9 | }; 10 | 11 | Spinner.defaultProps = { 12 | message: 'Loading...' 13 | }; 14 | 15 | export default Spinner; 16 | -------------------------------------------------------------------------------- /seasons-hooks/src/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spinner = props => { 4 | return ( 5 |
6 |
{props.message}
7 |
8 | ); 9 | }; 10 | 11 | Spinner.defaultProps = { 12 | message: 'Loading...' 13 | }; 14 | 15 | export default Spinner; 16 | -------------------------------------------------------------------------------- /streams/client/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { reducer as formReducer } from 'redux-form'; 3 | import authReducer from './authReducer'; 4 | import streamReducer from './streamReducer'; 5 | 6 | export default combineReducers({ 7 | auth: authReducer, 8 | form: formReducer, 9 | streams: streamReducer 10 | }); 11 | -------------------------------------------------------------------------------- /checker/src/CompareFile.css: -------------------------------------------------------------------------------- 1 | .compare-file { 2 | border: 1px solid black; 3 | } 4 | 5 | .code { 6 | display: flex; 7 | } 8 | 9 | .compare-file pre { 10 | width: 33%; 11 | overflow-x: scroll; 12 | } 13 | 14 | span.removed { 15 | background-color: lightcoral; 16 | } 17 | 18 | span.added { 19 | color: green; 20 | background-color: beige; 21 | } 22 | -------------------------------------------------------------------------------- /hooks-simple/src/components/UserList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useResources from './useResources'; 3 | 4 | const UserList = () => { 5 | const users = useResources('users'); 6 | 7 | return ( 8 |
    9 | {users.map(user => ( 10 |
  • {user.name}
  • 11 | ))} 12 |
13 | ); 14 | }; 15 | 16 | export default UserList; 17 | -------------------------------------------------------------------------------- /blog/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /jsx/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /pics/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /pics/src/components/ImageList.js: -------------------------------------------------------------------------------- 1 | import './ImageList.css'; 2 | import React from 'react'; 3 | import ImageCard from './ImageCard'; 4 | 5 | const ImageList = props => { 6 | const images = props.images.map(image => { 7 | return ; 8 | }); 9 | 10 | return
{images}
; 11 | }; 12 | 13 | export default ImageList; 14 | -------------------------------------------------------------------------------- /songs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /checker/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /components/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /seasons/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /streams/rtmpserver/index.js: -------------------------------------------------------------------------------- 1 | const { NodeMediaServer } = require('node-media-server'); 2 | 3 | const config = { 4 | rtmp: { 5 | port: 1935, 6 | chunk_size: 60000, 7 | gop_cache: true, 8 | ping: 60, 9 | ping_timeout: 30 10 | }, 11 | http: { 12 | port: 8000, 13 | allow_origin: '*' 14 | } 15 | }; 16 | 17 | var nms = new NodeMediaServer(config); 18 | nms.run(); 19 | -------------------------------------------------------------------------------- /translate/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /videos/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /hooks-simple/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /seasons-hooks/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /songs/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | import { createStore } from 'redux'; 5 | import App from './components/App'; 6 | import reducers from './reducers'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.querySelector('#root') 13 | ); 14 | -------------------------------------------------------------------------------- /streams/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /videoshooks/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /blog/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /hooks-simple/src/components/ResourceList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useResources from './useResources'; 3 | 4 | const ResourceList = ({ resource }) => { 5 | const resources = useResources(resource); 6 | 7 | return ( 8 |
    9 | {resources.map(record => ( 10 |
  • {record.title}
  • 11 | ))} 12 |
13 | ); 14 | }; 15 | 16 | export default ResourceList; 17 | -------------------------------------------------------------------------------- /jsx/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /pics/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /songs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /videos/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /checker/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seasons/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /translate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /widgets/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /hooks-simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seasons-hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /streams/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /videoshooks/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .vercel -------------------------------------------------------------------------------- /streams/api/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "streams": [ 3 | { 4 | "title": "My Stream", 5 | "description": "This is a great stream.", 6 | "id": 1 7 | }, 8 | { 9 | "title": "Other Stream", 10 | "description": "Here's some stream", 11 | "id": 2 12 | }, 13 | { 14 | "title": "Me Streaming Component Reuse!", 15 | "description": "This stream is about refactoring!!!", 16 | "id": 4 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /checker/src/BranchSelector.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Select from 'react-select'; 3 | 4 | const BRANCHES = [ 5 | { 6 | value: { branch: '213-forms', path: 'streams/client/src' }, 7 | label: 'Forms with Redux Form' 8 | } 9 | ]; 10 | 11 | class BranchSelector extends React.Component { 12 | render() { 13 | return 14 | 15 | ); 16 | } 17 | } 18 | 19 | export default Field; 20 | -------------------------------------------------------------------------------- /videos/src/components/VideoList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import VideoItem from './VideoItem'; 3 | 4 | const VideoList = ({ videos, onVideoSelect }) => { 5 | const renderedList = videos.map(video => { 6 | return ( 7 | 12 | ); 13 | }); 14 | 15 | return
{renderedList}
; 16 | }; 17 | 18 | export default VideoList; 19 | -------------------------------------------------------------------------------- /blog/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | import { createStore, applyMiddleware } from 'redux'; 5 | import thunk from 'redux-thunk'; 6 | 7 | import App from './components/App'; 8 | import reducers from './reducers'; 9 | 10 | const store = createStore(reducers, applyMiddleware(thunk)); 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.querySelector('#root') 17 | ); 18 | -------------------------------------------------------------------------------- /videoshooks/src/components/VideoList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import VideoItem from './VideoItem'; 3 | 4 | const VideoList = ({ videos, onVideoSelect }) => { 5 | const renderedList = videos.map(video => { 6 | return ( 7 | 12 | ); 13 | }); 14 | 15 | return
{renderedList}
; 16 | }; 17 | 18 | export default VideoList; 19 | -------------------------------------------------------------------------------- /components/src/ApprovalCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ApprovalCard = props => { 4 | return ( 5 |
6 |
{props.children}
7 |
8 |
9 |
Approve
10 |
Reject
11 |
12 |
13 |
14 | ); 15 | }; 16 | 17 | export default ApprovalCard; 18 | -------------------------------------------------------------------------------- /seasons-hooks/src/useLocation.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import s from './s.json'; 3 | 4 | console.log(s); 5 | 6 | export default () => { 7 | const [lat, setLat] = useState(null); 8 | const [errorMessage, setErrorMessage] = useState(''); 9 | 10 | useEffect(() => { 11 | window.navigator.geolocation.getCurrentPosition( 12 | position => setLat(position.coords.latitude), 13 | err => setErrorMessage(err.message) 14 | ); 15 | }, []); 16 | 17 | return [lat, errorMessage]; 18 | }; 19 | -------------------------------------------------------------------------------- /songs/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SongList from './SongList'; 3 | import SongDetail from './SongDetail'; 4 | 5 | const App = () => { 6 | return ( 7 |
8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 |
17 | ); 18 | }; 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /blog/src/components/UserHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | class UserHeader extends React.Component { 5 | render() { 6 | const { user } = this.props; 7 | 8 | if (!user) { 9 | return null; 10 | } 11 | 12 | return
{user.name}
; 13 | } 14 | } 15 | 16 | const mapStateToProps = (state, ownProps) => { 17 | return { user: state.users.find(user => user.id === ownProps.userId) }; 18 | }; 19 | 20 | export default connect(mapStateToProps)(UserHeader); 21 | -------------------------------------------------------------------------------- /streams/client/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import GoogleAuth from './GoogleAuth'; 4 | 5 | const Header = () => { 6 | return ( 7 |
8 | 9 | Streamy 10 | 11 |
12 | 13 | All Streams 14 | 15 | 16 |
17 |
18 | ); 19 | }; 20 | 21 | export default Header; 22 | -------------------------------------------------------------------------------- /videos/src/components/VideoItem.js: -------------------------------------------------------------------------------- 1 | import './VideoItem.css'; 2 | import React from 'react'; 3 | 4 | const VideoItem = ({ video, onVideoSelect }) => { 5 | return ( 6 |
onVideoSelect(video)} className="video-item item"> 7 | {video.snippet.title} 12 |
13 |
{video.snippet.title}
14 |
15 |
16 | ); 17 | }; 18 | 19 | export default VideoItem; 20 | -------------------------------------------------------------------------------- /diagrams/README.md: -------------------------------------------------------------------------------- 1 | ## Course Diagrams 2 | 3 | All diagrams are authored using https://www.draw.io/ 4 | 5 | 6 | - You can edit diagrams on your own! 7 | - Go to https://github.com/StephenGrider/ReduxCodeV2/tree/master/diagrams/ 8 | - Open the folder containing the set of diagrams you want to edit 9 | - Click on the ‘.xml’ file 10 | - Click the ‘raw’ button 11 | - Copy the URL 12 | - Go to https://www.draw.io/ 13 | - On the ‘Save Diagrams To…’ window click ‘Decide later’ at the bottom 14 | - Click ‘File’ -> ‘Import From’ -> ‘URL’ 15 | - Paste the link to the XML file 16 | - Tada! 17 | -------------------------------------------------------------------------------- /hooks-simple/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import ResourceList from './ResourceList'; 3 | import UserList from './UserList'; 4 | 5 | const App = () => { 6 | const [resource, setResource] = useState('posts'); 7 | 8 | return ( 9 |
10 | 11 |
12 | 13 | 14 |
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /seasons/src/SeasonDisplay.css: -------------------------------------------------------------------------------- 1 | .icon-left { 2 | position: absolute; 3 | top: 10px; 4 | left: 10px; 5 | } 6 | 7 | .icon-right { 8 | position: absolute; 9 | bottom: 10px; 10 | right: 10px; 11 | } 12 | 13 | .season-display.winter i { 14 | color: blue; 15 | } 16 | 17 | .season-display.summer i { 18 | color: red; 19 | } 20 | 21 | .season-display { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | height: 100vh; 26 | } 27 | 28 | .winter { 29 | background-color: aliceblue; 30 | } 31 | 32 | .summer { 33 | background-color: orange; 34 | } 35 | -------------------------------------------------------------------------------- /videoshooks/src/components/VideoItem.js: -------------------------------------------------------------------------------- 1 | import './VideoItem.css'; 2 | import React from 'react'; 3 | 4 | const VideoItem = ({ video, onVideoSelect }) => { 5 | return ( 6 |
onVideoSelect(video)} className="video-item item"> 7 | {video.snippet.title} 12 |
13 |
{video.snippet.title}
14 |
15 |
16 | ); 17 | }; 18 | 19 | export default VideoItem; 20 | -------------------------------------------------------------------------------- /widgets/src/components/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Link = ({ className, href, children }) => { 4 | const onClick = (event) => { 5 | if (event.metaKey || event.ctrlKey) { 6 | return; 7 | } 8 | 9 | event.preventDefault(); 10 | window.history.pushState({}, '', href); 11 | 12 | const navEvent = new PopStateEvent('popstate'); 13 | window.dispatchEvent(navEvent); 14 | }; 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | 23 | export default Link; 24 | -------------------------------------------------------------------------------- /jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.6.0", 7 | "react-dom": "^16.6.0", 8 | "react-scripts": "2.1.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /songs/src/components/SongDetail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | const SongDetail = ({ song }) => { 5 | if (!song) { 6 | return
Select a song
; 7 | } 8 | 9 | return ( 10 |
11 |

Details for:

12 |

13 | Title: {song.title} 14 |
15 | Duration: {song.duration} 16 |

17 |
18 | ); 19 | }; 20 | 21 | const mapStateToProps = state => { 22 | return { song: state.selectedSong }; 23 | }; 24 | 25 | export default connect(mapStateToProps)(SongDetail); 26 | -------------------------------------------------------------------------------- /hooks-simple/src/components/useResources.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import axios from 'axios'; 3 | 4 | const useResources = resource => { 5 | const [resources, setResources] = useState([]); 6 | 7 | useEffect( 8 | () => { 9 | (async resource => { 10 | const response = await axios.get( 11 | `https://jsonplaceholder.typicode.com/${resource}` 12 | ); 13 | 14 | setResources(response.data); 15 | })(resource); 16 | }, 17 | [resource] 18 | ); 19 | 20 | return resources; 21 | }; 22 | 23 | export default useResources; 24 | -------------------------------------------------------------------------------- /seasons-hooks/src/SeasonDisplay.css: -------------------------------------------------------------------------------- 1 | .icon-left { 2 | position: absolute; 3 | top: 10px; 4 | left: 10px; 5 | } 6 | 7 | .icon-right { 8 | position: absolute; 9 | bottom: 10px; 10 | right: 10px; 11 | } 12 | 13 | .season-display.winter i { 14 | color: blue; 15 | } 16 | 17 | .season-display.summer i { 18 | color: red; 19 | } 20 | 21 | .season-display { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | height: 100vh; 26 | } 27 | 28 | .winter { 29 | background-color: aliceblue; 30 | } 31 | 32 | .summer { 33 | background-color: orange; 34 | } 35 | -------------------------------------------------------------------------------- /seasons/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "seasons", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.6.0", 7 | "react-dom": "^16.6.0", 8 | "react-scripts": "2.1.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /translate/src/contexts/LanguageContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Context = React.createContext('english'); 4 | 5 | export class LanguageStore extends React.Component { 6 | state = { language: 'english' }; 7 | 8 | onLanguageChange = language => { 9 | this.setState({ language }); 10 | }; 11 | 12 | render() { 13 | return ( 14 | 17 | {this.props.children} 18 | 19 | ); 20 | } 21 | } 22 | 23 | export default Context; 24 | -------------------------------------------------------------------------------- /translate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "translate", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.6.3", 7 | "react-dom": "^16.6.3", 8 | "react-scripts": "2.1.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /widgets/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from './Link'; 3 | 4 | const Header = () => { 5 | return ( 6 |
7 | 8 | Accordion 9 | 10 | 11 | Search 12 | 13 | 14 | Dropdown 15 | 16 | 17 | Translate 18 | 19 |
20 | ); 21 | }; 22 | 23 | export default Header; 24 | -------------------------------------------------------------------------------- /seasons-hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "seasons", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.7.0-alpha.2", 7 | "react-dom": "^16.7.0-alpha.2", 8 | "react-scripts": "2.1.0" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /videoshooks/src/hooks/useVideos.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import youtube from '../apis/youtube'; 3 | 4 | const useVideos = (defaultSearchTerm) => { 5 | const [videos, setVideos] = useState([]); 6 | 7 | useEffect(() => { 8 | search(defaultSearchTerm); 9 | }, [defaultSearchTerm]); 10 | 11 | const search = async (term) => { 12 | const response = await youtube.get('/search', { 13 | params: { 14 | q: term, 15 | }, 16 | }); 17 | 18 | setVideos(response.data.items); 19 | }; 20 | 21 | return [videos, search]; 22 | }; 23 | 24 | export default useVideos; 25 | -------------------------------------------------------------------------------- /widgets/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /pics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pics", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "react": "^16.6.0", 8 | "react-dom": "^16.6.0", 9 | "react-scripts": "2.1.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /widgets/src/components/Route.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const Route = ({ path, children }) => { 4 | const [currentPath, setCurrentPath] = useState(window.location.pathname); 5 | 6 | useEffect(() => { 7 | const onLocationChange = () => { 8 | setCurrentPath(window.location.pathname); 9 | }; 10 | 11 | window.addEventListener('popstate', onLocationChange); 12 | 13 | return () => { 14 | window.removeEventListener('popstate', onLocationChange); 15 | }; 16 | }, []); 17 | 18 | return currentPath === path ? children : null; 19 | }; 20 | 21 | export default Route; 22 | -------------------------------------------------------------------------------- /checker/src/CompareProject.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CompareFile from './CompareFile'; 3 | 4 | class Compare extends React.Component { 5 | render() { 6 | return this.props.localFetcher.files.map(localFile => { 7 | const githubFile = this.props.githubFetcher.files.find(gh => { 8 | return localFile.fullPath.replace('/src', '') === gh.path; 9 | }); 10 | 11 | return ( 12 | 17 | ); 18 | }); 19 | } 20 | } 21 | 22 | export default Compare; 23 | -------------------------------------------------------------------------------- /components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "faker": "^4.1.0", 7 | "react": "^16.6.0", 8 | "react-dom": "^16.6.0", 9 | "react-scripts": "2.1.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /streams/client/src/components/streams/StreamCreate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { createStream } from '../../actions'; 4 | import StreamForm from './StreamForm'; 5 | 6 | class StreamCreate extends React.Component { 7 | onSubmit = formValues => { 8 | this.props.createStream(formValues); 9 | }; 10 | 11 | render() { 12 | return ( 13 |
14 |

Create a Stream

15 | 16 |
17 | ); 18 | } 19 | } 20 | 21 | export default connect( 22 | null, 23 | { createStream } 24 | )(StreamCreate); 25 | -------------------------------------------------------------------------------- /videos/src/components/VideoDetail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const VideoDetail = ({ video }) => { 4 | if (!video) { 5 | return
Loading...
; 6 | } 7 | 8 | const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`; 9 | 10 | return ( 11 |
12 |
13 |