base setup

Author: prabaprakash

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env","@babel/preset-react"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

package-lock.json

@@ -0,0 +1,36 @@
+{
+  "name": "reactredux",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --config webpack.config.js --mode development"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.0.0-rc.1",
+    "@babel/preset-env": "^7.0.0-rc.1",
+    "@babel/preset-react": "^7.0.0-rc.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.0-beta.4",
+    "babel-polyfill": "^6.26.0",
+    "express": "^4.16.3",
+    "node-sass": "^4.9.3",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "sass-loader": "^7.1.0",
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0"
+  },
+  "dependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^1.0.0",
+    "react-player": "^1.6.4",
+    "redux-saga": "^0.16.0",
+    "style-loader": "^0.22.1"
+  }
+}

package.json

@@ -0,0 +1,4 @@
+import { action } from "../helpers/actionCreator";
+import * as actions from '../constants/index';
+
+export const add = (text) => action(actions.ADD, { text });

src/client/actions/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactPlayer from 'react-player'
+import '../styles/App.scss'
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return this.props.number == 1 ?(
+      <div>
+       <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
+      </div>
+    ): <div className="container"> Praba <input type="button" value = "Play Me" onClick = {()=> this.props.add(1)}/> </div>;
+  }
+}
+
+App.propTypes = {
+  number: PropTypes.string,
+  add: PropTypes.func,
+  recipes: PropTypes.array,
+};

src/client/components/App.jsx

@@ -0,0 +1,4 @@
+export const ADD = 'ADD';
+export const SAVE = 'SAVE';
+export const START_APPLICATION = 'START_APPLICATION';
+export const ADD_RECIPES = 'ADD_RECIPES';

src/client/constants/index.js

@@ -0,0 +1,17 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import App from '../components/App';
+import { add } from '../actions'
+
+const mapStateToProps = (state) => ({
+  number: state.add.number,
+  recipes: state.recipe.recipes,
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  add,
+}, dispatch);
+
+const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
+
+export default AppContainer;

src/client/containers/App.js

@@ -0,0 +1 @@
+export const action = (type, payload = {}) => ({ type, payload });

src/client/helpers/actionCreator.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux'
+import createSagaMiddleware from 'redux-saga'
+import cr from './reducers/combined';
+import AppContainer from './containers/App';
+import rootSaga from './sagas/combined'
+const sagaMiddleware = createSagaMiddleware();
+import * as actions from "./constants"
+// then run the saga
+const store = createStore(cr, applyMiddleware(sagaMiddleware))
+sagaMiddleware.run(rootSaga)
+export const action = type => store.dispatch({ type });
+action(actions.START_APPLICATION);
+
+render(
+  <Provider store={store}>
+    <AppContainer />
+  </Provider>,
+  document.getElementById('app')
+);

src/client/index.js

@@ -0,0 +1,13 @@
+import * as actions from '../constants';
+
+const add = (state = {}, action) => {
+  switch (action.type) {
+  case actions.SAVE:
+    return Object.assign({}, state, {
+      number: action.number,
+    });
+  default:
+    return state;
+}};
+
+export default add;

src/client/reducers/add.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import  add  from "./add";
+import recipe from './recipe';
+
+const combined = combineReducers({
+  add,
+  recipe
+});
+
+export default combined;

src/client/reducers/combined.js

@@ -0,0 +1,13 @@
+import * as actions from '../constants';
+
+const recipe = (state = {}, action) => {
+  switch (action.type) {
+  case actions.ADD_RECIPES:
+    return Object.assign({}, state, {
+      recipes: action.recipes,
+    });
+  default:
+    return state;
+}};
+
+export default recipe;

src/client/reducers/recipe.js

@@ -0,0 +1,16 @@
+import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+import * as actions from "../constants"
+import { action } from '../helpers/actionCreator';
+
+function* addnumber(action) {
+   try {
+      yield put({type: actions.SAVE, number: "1"});
+   } catch (e) {
+      yield put({type: "ADD_FAILED", message: e.message});
+   }
+}
+
+function* addWatcher() {
+  yield takeEvery(actions.ADD, addnumber);
+}
+export default addWatcher;

src/client/sagas/add.js

@@ -0,0 +1,9 @@
+import { all } from 'redux-saga/effects';
+import addWatcher from './add';
+import startWatcher from './start'
+export default function* rootSaga() {
+  yield all([
+    addWatcher(),
+    startWatcher()
+  ]);
+}

src/client/sagas/combined.js

@@ -0,0 +1,17 @@
+import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+import * as actions from "../constants"
+import { action } from '../helpers/actionCreator';
+import {  callFetch } from '../services/api'
+function* initalize(action) {
+   try {
+       const recipes = yield call(callFetch, "/recipes")
+       yield put({type: actions.ADD_RECIPES, recipes: JSON.parse(recipes.response)});
+   } catch (e) {
+      yield put({type: "START_APPLICATION_FAILED", recipes: []});
+   }
+}
+
+function* startWatcher() {
+  yield takeEvery(actions.START_APPLICATION, initalize);
+}
+export default startWatcher;

src/client/sagas/start.js

@@ -0,0 +1,33 @@
+import _ from 'lodash';
+
+export function callFetch(endpoint, params = {}) {
+  const requestOptions = {};
+  if (!_.isEmpty(params)) {
+    requestOptions['headers'] = params;
+  }
+  return fetch(endpoint, requestOptions)
+    .then(
+      response => _.get(response, 'ok') ? response.json() : Promise.reject(response)
+    )
+    .then(
+      response => ({ response }),
+      error => ({ error: error.message || 'Something bad happened' })
+    );
+}
+
+export function callPost(endpoint, body = {}) {
+  const requestOptions = {
+    credentials: 'same-origin',
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  };
+  return fetch(endpoint, requestOptions)
+    .then(
+      response => ({ response }),
+      error => ({ error: error.message || 'Something bad happened' })
+    );
+}

src/client/services/api.js

@@ -0,0 +1,6 @@
+.container {
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+    background-color: #fff;
+    text-transform: capitalize;
+}

src/client/styles/App.scss

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
+    <title>ADD</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="public/bundle.js"></script>
+  </body>
+</html>

src/dist/index.html

@@ -0,0 +1,24 @@
+"use strict";
+const express = require("express");
+const app = express();
+const path = require("path");
+const fs = require("fs");
+
+app.use(express.static("../dist/"));
+/* istanbul ignore next */
+app.get("/", function(request, response) {
+  /* istanbul ignore next */
+  response.redirect("index.html");
+});
+app.get("/recipes", function(request, response) {
+  var file = fs.readFileSync("./stub/recipes.json", "utf-8");
+  //response.setHeader('Content-Type', 'application/json');
+  response.json(file);
+});
+/* istanbul ignore next */
+const port = process.env.PORT || 3200;
+app.listen(port, function() {
+  console.log(`Application listening on port ${port}`);
+});
+
+module.exports = app;