const http = require('http')

const server = http.createServer(function (req, res) {
  console.log(req)
})

const PORT = 5000

server.listen(PORT, function () {
  console.log('El servidor está corriendo en el puerto ' + PORT)
})

// ...
const PORT = 5000

server.listen(PORT, function () {
  console.log(`El servidor está corriendo en el puerto ${PORT}`)
})

const server = http.createServer(function (req, res) {
  const { method, headers, url } = req
  console.log(method, headers, url)
  res.end()
})

npm init

npm install --save nodemon

  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

npm run dev

const http = require('http')

const todos = [
  {
    id: 1,
    text: 'Ir al supermercado',
  },
  {
    id: 2,
    text: 'Terminar la tarea de sobre API de Aplicaciones Web',
  },
  {
    id: 3,
    text: 'Bañar al perro',
  },
]

const server = http.createServer(function (req, res) {
  // res.setHeader('Content-type', 'text/plain')
  // res.setHeader('Content-type', 'text/html')
  res.setHeader('Content-type', 'application/json')
  res.setHeader('X-Powered-By', 'Node.js')
  // res.write('<h1>Hola</h1>')
  // res.write('<h2>Hola de nuevo</h2>')

  res.end(JSON.stringify({ success: true, data: todos }))
})

const PORT = 5000

server.listen(PORT, function () {
  console.log(`El servidor está corriendo en el puerto ${PORT}`)
})

const http = require('http')

const todos = [
  {
    id: 1,
    text: 'Ir al supermercado',
  },
  {
    id: 2,
    text: 'Terminar la tarea de sobre API de Aplicaciones Web',
  },
  {
    id: 3,
    text: 'Bañar al perro',
  },
]

const server = http.createServer(function (req, res) {
  res.writeHead(404, {
    'Content-type': 'application/json',
    'X-Powered-By': 'Node.js',
  })

  res.end(
    JSON.stringify({
      success: false,
      error: 'No se encontró el recurso solicitado',
      data: null,
    })
  )
})

const PORT = 5000

server.listen(PORT, function () {
  console.log(`El servidor está corriendo en el puerto ${PORT}`)
})

// ...
  
// console.log(req.headers.authorization)

  let body = []

  req
    .on('data', (chunk) => {
      body.push(chunk)
    })
    .on('end', () => {
      body =  
      console.log(body)
    })

// ...

const { equal } = require('assert')
const http = require('http')

const todos = [
  {
    id: 1,
    text: 'Ir al supermercado',
  },
  {
    id: 2,
    text: 'Terminar la tarea de sobre API de Aplicaciones Web',
  },
  {
    id: 3,
    text: 'Bañar al perro',
  },
]

const server = http.createServer(function (req, res) {
  const { method, url } = req

  let body = []

  req
    .on('data', (chunk) => {
      body.push(chunk)
    })
    .on('end', () => {
      body = Buffer.concat(body).toString()

      let status = 404

      const response = {
        success: false,
        data: null,
        error: null,
      }

      if (method === 'GET' && url === '/todos') {
        status = 200
        response.success = true
        response.data = todos
      } else if (method === 'POST' && url === '/todos') {
        const { id, text } = JSON.parse(body)

        if (!id || !text) {
          status = 400
          response.error = 'Por favor agregar id y texto del todo'
        } else {
          todos.push({ id, text })
          status = 201
          response.success = true
          response.data = todos
        }
      }

      res.writeHead(status, {
        'Content-type': 'application/json',
        'X-Powered-By': 'Node.js',
      })

      res.end(JSON.stringify(response))
    })
})

const PORT = 5000

server.listen(PORT, function () {
  console.log(`El servidor está corriendo en el puerto ${PORT}`)
})

// Crear el folder backend

npm init
npm install express dotenv
npm install -D nodemon

const express = require('express')
const dotenv = require('dotenv')

// Load env vars
dotenv.config({ path: './config/config.env' })

const app = express()

const PORT = process.env.PORT || 5000

app.listen(PORT, () => {
  console.log(`Server is running in ${process.env.NODE_ENV} on port ${PORT}`)
})

[
  {
    "name": "Auriculares inalámbricos Bluetooth Airpods",
    "image": "/images/airpods.jpg",
    "description": "La tecnología Bluetooth le permite conectarlo con dispositivos compatibles de forma inalámbrica El audio AAC de alta calidad ofrece una experiencia auditiva envolvente El micrófono incorporado le permite recibir llamadas mientras trabaja",
    "brand": "Apple",
    "category": "Electrónica",
    "price": 89.99,
    "countInStock": 3,
    "rating": 0,
    "numReviews": 0
  },
  {
    "name": "iPhone 11 Pro 256GB Memoria",
    "image": "/images/phone.jpg",
    "description": "Presentamos el iPhone 11 Pro. Un sistema transformador de triple cámara que agrega toneladas de capacidad sin complejidad. Un salto sin precedentes en la duración de la batería",
    "brand": "Apple",
    "category": "Electrónica",
    "price": 599.99,
    "countInStock": 10,
    "rating": 0,
    "numReviews": 0
  },
  {
    "name": "Cámara Cannon EOS 80D DSLR",
    "image": "/images/camera.jpg",
    "description": "Caracterizada por especificaciones de imagen versátiles, la Canon EOS 80D se aclara aún más mediante un par de sistemas de enfoque robustos y un diseño intuitivo",
    "brand": "Cannon",
    "category": "Electrónica",
    "price": 929.99,
    "countInStock": 0,
    "rating": 0,
    "numReviews": 0
  },
  {
    "name": "Sony Playstation 4 Pro versión blanca",
    "image": "/images/playstation.jpg",
    "description": "El centro de entretenimiento doméstico definitivo comienza con PlayStation. Ya sea que le gusten los juegos, las películas HD, la televisión, la música",
    "brand": "Sony",
    "category": "Electrónica",
    "price": 399.99,
    "countInStock": 10,
    "rating": 0,
    "numReviews": 0
  },
  {
    "name": "Mouse para juegos Logitech G-Series",
    "image": "/images/mouse.jpg",
    "description": "Controle mejor sus juegos con este mouse para juegos Logitech LIGHTSYNC. Los seis botones programables permiten la personalización para una experiencia de juego fluida",
    "brand": "Logitech",
    "category": "Electrónica",
    "price": 49.99,
    "countInStock": 7,
    "rating": 0,
    "numReviews": 0
  },
  {
    "name": "Amazon Echo Dot 3ra Generación",
    "image": "/images/alexa.jpg",
    "description": "Conoce a Echo Dot: nuestro altavoz inteligente más popular con un diseño de tela. Es nuestro altavoz inteligente más compacto que se adapta perfectamente a espacios reducidos",
    "brand": "Amazon",
    "category": "Electrónica",
    "price": 29.99,
    "countInStock": 0,
    "rating": 0,
    "numReviews": 0
  }
]

/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

[
  {
    "_id": "6041ab94157a1f54e0e75666",
    "name": "Auriculares inalámbricos Bluetooth Airpods",
    "image": "/images/airpods.jpg",
    "description": "La tecnología Bluetooth le permite conectarlo con dispositivos compatibles de forma inalámbrica El audio AAC de alta calidad ofrece una experiencia auditiva envolvente El micrófono incorporado le permite recibir llamadas mientras trabaja",
    "brand": "Apple",
    "category": "Electrónica",
    "price": 89.99,
    "countInStock": 3,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d2454ed"
  },
  {
    "_id": "6041ab75157a1f54e0e75664",
    "name": "iPhone 11 Pro 256GB Memoria",
    "image": "/images/phone.jpg",
    "description": "Presentamos el iPhone 11 Pro. Un sistema transformador de triple cámara que agrega toneladas de capacidad sin complejidad. Un salto sin precedentes en la duración de la batería",
    "brand": "Apple",
    "category": "Electrónica",
    "price": 599.99,
    "countInStock": 10,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d2454ed"
  },
  {
    "_id": "6041a8cf33f6a452cad6d885",
    "name": "Cámara Cannon EOS 80D DSLR",
    "image": "/images/camera.jpg",
    "description": "Caracterizada por especificaciones de imagen versátiles, la Canon EOS 80D se aclara aún más mediante un par de sistemas de enfoque robustos y un diseño intuitivo",
    "brand": "Cannon",
    "category": "Electrónica",
    "price": 929.99,
    "countInStock": 0,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d2454ed"
  },
  {
    "_id": "6041a8cf33f6a452cad6d886",
    "name": "Sony Playstation 4 Pro versión blanca",
    "image": "/images/playstation.jpg",
    "description": "El centro de entretenimiento doméstico definitivo comienza con PlayStation. Ya sea que le gusten los juegos, las películas HD, la televisión, la música",
    "brand": "Sony",
    "category": "Electrónica",
    "price": 399.99,
    "countInStock": 10,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d2454ed"
  },
  {
    "_id": "6041a8cf33f6a452cad6d883",
    "name": "Mouse para juegos Logitech G-Series",
    "image": "/images/mouse.jpg",
    "description": "Controle mejor sus juegos con este mouse para juegos Logitech LIGHTSYNC. Los seis botones programables permiten la personalización para una experiencia de juego fluida",
    "brand": "Logitech",
    "category": "Electrónica",
    "price": 49.99,
    "countInStock": 7,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d24541a"
  },
  {
    "_id": "6041a8cf33f6a452cad6d884",
    "name": "Amazon Echo Dot 3ra Generación",
    "image": "/images/alexa.jpg",
    "description": "Conoce a Echo Dot: nuestro altavoz inteligente más popular con un diseño de tela. Es nuestro altavoz inteligente más compacto que se adapta perfectamente a espacios reducidos",
    "brand": "Amazon",
    "category": "Electrónica",
    "price": 29.99,
    "countInStock": 0,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d24541a"
  }
]

[
  {
    "_id": "6041a8da4e0425528d2454ed",
    "name": "Joshua Bonilla",
    "email": "joshua@gmail.com",
    "password": "123456"
  },
  {
    "_id": "6041a8da4e0425528d24541a",
    "name": "Ashley López",
    "email": "ashley@gmail.com",
    "password": "123456"
  }
]

[
  {
    "title": "Muy buen producto",
    "comment": "Tengo seis meses de usar el producto y me ha parecido excelente",
    "product": "6041ab75157a1f54e0e75664",
    "rating": 8,
    "user": "6041a8da4e0425528d2454ed"
  },
  {
    "title": "Excelente",
    "comment": "Calidad inigualable",
    "product": "6041ab75157a1f54e0e75664",
    "rating": 10,
    "user": "6041a8da4e0425528d24541a"
  }
]

  {
    "_id": "6041ab94157a1f54e0e75666",
    "name": "Auriculares inalámbricos Bluetooth Airpods",
    "image": "/images/airpods.jpg",
    "description": "La tecnología Bluetooth le permite conectarlo con dispositivos compatibles de forma inalámbrica El audio AAC de alta calidad ofrece una experiencia auditiva envolvente El micrófono incorporado le permite recibir llamadas mientras trabaja",
    "brand": "Apple",
    "category": "Electrónica",
    "price": 89.99,
    "countInStock": 3,
    "rating": 0,
    "numReviews": 0,
    "user": "6041a8da4e0425528d2454ed"
  },

mkdir MBShop
cd MBShop
npx create-react-app frontend
cd frontend
npmstart

// Borrar archivo innecesarios del frontend
// Sacar el .gitignore a la raiz
// Agregar noe_modules/ y .env al .gitignore
// Borrar el .git
Ctrl + C
cd ..
git init
git add .
git commit -m 'React setup'
cd frontend
npm start

npm install react-bootstrap

 npm install react-router-dom react-router-bootstrap

cd frontend
npm install axios

// Desde MBShop
npm i -D nodemon concurrently

// ... 
"scripts": {
  "start": "node backend/server",
    "server": "nodemon backend/server",
      "client": "npm start --prefix frontend",
        "dev": "concurrently \"npm run server\" \"npm run client\""
},
  
// ...

// https://www.npmjs.com/package/dotenv

npm install dotenv

NODE_ENV = development
PORT = 5000

"type": "module"

npm i bcryptjs

cd frontend
npm i redux react-redux redux-thunk redux-devtools-extension

npm i jsonwebtoken

const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.send({ hola: 'Mundo' });
});

app.listen(5000);

// Desde la consola ejecutamos el comando: node index.js
// En el navegador escribimos http://localhost:5000/

const PORT = process.env.PORT || 5000;
app.listen(PORT);

  "main": "index.js",
  "engines": {
    "node": "12.14.1",
    "npm": "6.13.4"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  "scripts": {
    "start": "node index.js"
  },

node_modules

git init
git add .
git commit -m "Commit inicial"

//Desde la línea de comandos
heroku -v
//Para hacer login solicitará el email y contraseña de nuestra cuenta heroku
heroku login
// Creamos la App. Heroku le asigna un nombre 
// y provee la ruta git para el diployment
heroku create

//Desde la línea de comandos
heroku -v
//Para hacer login solicitará el email y contraseña de nuestra cuenta heroku
heroku login
// Creamos la App. Heroku le asigna un nombre 
// y provee la ruta git para el diployment
heroku create
// Ejemplo de proyecto creado en Heroku
// https://fathomless-waters-86018.herokuapp.com/ | https://git.heroku.com/fathomless-waters-86018.git

// Agregar el repositorio remoto
git remote add heroku https://git.heroku.com/fathomless-waters-86018.git

// Pasar la información del repositorio local al remoto
git push heroku master

// Probamos la App
heroku open

// En caso de error
heroku logs

npm install --save passport passport-google-oauth20 

const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

const app = express();

passport.use(new GoogleStrategy());

const PORT = process.env.PORT || 5000;
app.listen(PORT);

module.exports = {
    googleClientID: '439988331208-j7m4lnq3m4sr14soce1ro8c7l41vvp6e.apps.googleusercontent.com',
    googleClientSecret: 'PUkKItVVoJ3nRQKqoTybgcWy'
}

node_modules
keys.js

const express = require("express");
const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const keys = require("./config/keys");

const app = express();

passport.use(
  new GoogleStrategy(
    {
      clientID: keys.googleClientID,
      clientSecret: keys.googleClientSecret,
      callbackURL: "/auth/google/callback"
    },
    accessToken => {
      console.log(accessToken);
    }
  )
);

const PORT = process.env.PORT || 5000;
app.listen(PORT);

app.get(
  "/auth/google",
  passport.authenticate("google", {
    scope: ["profile", "email"]
  })
);

app.get('/auth/google/callback', passport.authenticate('google'));

passport.use(
  new GoogleStrategy(
    {
      clientID: keys.googleClientID,
      clientSecret: keys.googleClientSecret,
      callbackURL: "/auth/google/callback"
    },
    (accessToken, refreshToken, profile, done) => {
      console.log('access token: ', accessToken);
      console.log('refresh token: ', refreshToken);
      console.log('profile: ', profile);
    }
  )
);

const express = require("express");
require('./services/passport');
// const authRoutes = require('./routes/authRoutes');

const app = express();

require('./routes/authRoutes')(app);

const PORT = process.env.PORT || 5000;
app.listen(PORT);

const passport = require('passport');

module.exports = app => {
    app.get(
        "/auth/google",
        passport.authenticate("google", {
        scope: ["profile", "email"]
        })
    );
    
    app.get('/auth/google/callback', passport.authenticate('google'));
}

const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const keys = require("../config/keys");

passport.use(
    new GoogleStrategy(
      {
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: "/auth/google/callback"
      },
      (accessToken, refreshToken, profile, done) => {
        console.log('access token: ', accessToken);
        console.log('refresh token: ', refreshToken);
        console.log('profile: ', profile);
      }
    )
);

// ... el código anterior queda igual

passport.use(
    new GoogleStrategy(
      {
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: "/auth/google/callback"
      },
      (accessToken, refreshToken, profile, done) => {
        // Retorna una promesa
        User.findOne({ googleId: profile.id })
          .then( (existingUser) => {
            if(existingUser) {
              // Tenemos un registro con el Id de perfil
              // El primer parámtro indica que no hay error
              // El segundo parámetro indica a passport el 
              // usuario que hemos encontrado
              done(null, existingUser);
            } else {
              // No tenemos un registro del Id de Perfil, hacemos un nuevo registro
              new User({ googleId: profile.id })
                .save()
                .then(user => DelayNode(null, user));
            }
          }
        );
      }
    )
);

// ... el código anterio queda igual

const User = mongoose.model('users');

passport.serializeUser((user, done)=> {
  done(null, user.id);
});

// ... el resto de código queda igual

// ... el código anterio queda igual
passport.serializeUser((user, done)=> {
  done(null, user.id);
});

// El primer pqarámetro del arrow function es el token (id)
// que deseamos buscar en la cookie
passport.deserializeUser( (id, done) => {
  User.findById(id)
    .then(user => {
      done(null, user);
    });
});

// ... el resto de código queda igual

npm install --save cookie-session

// ... el código anterior queda igual
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const passport = require('passport');
// ... el código posterior queda igual

module.exports = {
    //... lo anterior queda igual
    cookieKey: 'qiwpsbjtarsporle'
}

// ... el resto de código queda igual
const app = express();

app.use(
    cookieSession({
        maxAge: 30 * 24 * 60 * 60 * 1000,
        keys: [keys.cookieKey]
    })
);
app.use(passport.initialize());
app.use(passport.session());

app.get('/api/current_user', (req, res) => {
  res.send(req.user);
});

app.get('/api/logout', (req, res) => {
  req.logout();
  res.send(req.user);
});

heroku open

module.exports = {
    googleClientID: '439988331208-j7m4lnq3m4sr14soce1ro8c7l41vvp6e.apps.googleusercontent.com',
    googleClientSecret: 'PUkKItVVoJ3nRQKqoTybgcWy',
    mongoURI: 'mongodb://wilfredo:Password1.@ds061711.mlab.com:61711/mb-feedback-dev',
    cookieKey: 'qiwpsbjtarsporle'
}

module.exports = {
    googleClientID: process.env.GOOGLE_CLIENT_ID,
    googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
    mongoURI: process.env.MONGO_URI,
    cookieKey: process.env.COOKIE_KEY
}

node_modules
dev.js

if(process.env.NODE_ENV === 'production') {
    module.exports = require('./prod');
} else {
    module.exports = require('./dev');
}

git status
git add .
git commit -m "Flujo Auth finalizado"
git push heroku master
heroku open

new GoogleStrategy(
  {
    clientID: keys.googleClientID,
    clientSecret: keys.googleClientSecret,
    callbackURL: "/auth/google/callback",
    proxy: true
  },
  
  // el resto queda igual

git status
git add .
git commit -m "Ajuste al Google Strategy"
git push heroku master
heroku open

npm install -g create-react-app

npx create-react-app my-app

// Client tiene su propio servidor
cd client
npm start

npm start

npm run dev

npm install --save concurrently

  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

npm run dev

cd client
npm install http-proxy-middleware --save

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/auth/google',
    createProxyMiddleware({
      target: 'http://localhost:5000'
    })
  );
};

cd client
npm run build

function fetchAlbums() {
    fetch('http://rallycoding.herokuapp.com/api/music_albums')
    .then(res => res.json())
    .then(json => console.log(json));
}

fetchAlbums();

async function fetchAlbums() {
    const res = await fetch('http://rallycoding.herokuapp.com/api/music_albums')
    const json = await res.json();

    console.log(json);
}

fetchAlbums();

const fetchAlbums = async () => {
    const res = await fetch('http://rallycoding.herokuapp.com/api/music_albums')
    const json = await res.json();

    console.log(json);
}

fetchAlbums();

async (accessToken, refreshToken, profile, done) => {
  const existingUser = await User.findOne({ googleId: profile.id });

  if (existingUser) {
    // Tenemos un registro con el Id de perfil
    return done(null, existingUser);
  } 
  // No tenemos un registro del Id de Perfil, hacemos un nuevo registro
  const user = await new User({ googleId: profile.id }).save();
  done(null, user);
}

cd client
npm install --save redux react-redux react-router-dom

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(); 

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

ReactDOM.render(<App />, document.querySelector("#root"));

import React from 'react';

const App = () => {
    return (
        <div>
            Hola
        </div>
    )
}

export default App;

cd ..

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from "./components/App";

const store = createStore(() => [], {}, applyMiddleware());

ReactDOM.render(
    <Provider store={store}><App /></Provider>, 
    document.querySelector("#root")
);

export default function(state = {}, action) {
    switch(action.type) {
        default:
            return state;
    }
}

import { combineReducers } from 'redux';
import authReducer from './authReducer';

export default combineReducers({
    auth: authReducer
});

import App from "./components/App";
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware());

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

const Header = () => <h2>Header</h2>;
const Dashboard = () => <h2>Dashboard</h2>;
const SurveyNew = () => <h2>SurveyNew</h2>;
const Landing = () => <h2>Landing</h2>;

const App = () => {
    return (
        <div>
            <BrowserRouter>
                <div>
                    <Route path="/" component={Landing} />
                </div>
            </BrowserRouter>
        </div>
    )
}

export default App;

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

const Header = () => <h2>Header</h2>;
const Dashboard = () => <h2>Dashboard</h2>;
const SurveyNew = () => <h2>SurveyNew</h2>;
const Landing = () => <h2>Landing</h2>;

const App = () => {
    return (
        <div>
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Landing} />
                    <Route path="/surveys" component={Dashboard} />
                </div>
            </BrowserRouter>
        </div>
    )
}

export default App;

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

const Header = () => <h2>Header</h2>;
const Dashboard = () => <h2>Dashboard</h2>;
const SurveyNew = () => <h2>SurveyNew</h2>;
const Landing = () => <h2>Landing</h2>;

const App = () => {
    return (
        <div>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={Landing} />
                    <Route exact path="/surveys" component={Dashboard} />
                    <Route path="/surveys/new" component={SurveyNew} />
                </div>
            </BrowserRouter>
        </div>
    )
}

export default App;

import React, { Component } from 'react';

class Header extends Component {
    render(){
        return (
            <div>
                Header
            </div>
        );
    }
}

export default Header;

// Reemplazar 
const Header = () => <h2>Header</h2>;
// por 
import Header from './Header';

  cd client
  npm install --save materialize-css

import 'materialize-css/dist/css/materialize.min.css';

import React, { Component } from 'react';

class Header extends Component {
    render(){
        return (
            <nav>
                <div className="nav-wrapper">
                <a href="#" className="left brand-logo">mb-feedback</a>
                <ul id="nav-mobile" className="right hide-on-med-and-down">
                    <li><a href="#">Login con Google</a></li>
                </ul>
                </div>
            </nav>
        );
    }
}

export default Header;

return (
  <div className="container">
  <BrowserRouter>

  cd client
  npm install --save axios redux-thunk

// ....
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';

import App from "./components/App";
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
// ....

  app.use(
    '/api/*',
    createProxyMiddleware({ 
      target: 'http://localhost:5000'
    })
  );  

export const FETCH_USER = 'fetch_user';

// Para hacer peticiones ajax
import axios from 'axios';
import { FETCH_USER } from './types';

export const fetchUser = () => {
    axios.get('/api/current_user');
}

// Para hacer peticiones ajax
import axios from "axios";
import { FETCH_USER } from "./types";

export const fetchUser = () => {
  return function(dispatch) {
    axios.get("/api/current_user").then(res =>
      dispatch({
        type: FETCH_USER,
        payload: res
      })
    );
  };
};

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Header from './Header';
const Dashboard = () => <h2>Dashboard</h2>;
const SurveyNew = () => <h2>SurveyNew</h2>;
const Landing = () => <h2>Landing</h2>;

class App extends Component {
    componentDidMount() {
        
    }
  
    render() {
        return (
            <div className="container">
                <BrowserRouter>
                    <div>
                        <Header />
                        <Route exact path="/" component={Landing} />
                        <Route exact path="/surveys" component={Dashboard} />
                        <Route path="/surveys/new" component={SurveyNew} />
                    </div>
                </BrowserRouter>
            </div>
        )
    };
    
}

export default App;

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// Agregarmos estas importaciones para conectar la App con redux
import { connect } from 'react-redux';
import * as actions from '../actions';

// ...
    componentDidMount() {
	// Llamada al action
        this.props.fetchUser();
    }

// ...

// Pasamos los argumentos a App
export default connect(null, actions) (App);

export default function(state = {}, action) {
    console.log(action);
    switch(action.type) {
        default:
            return state;
    }
}

// Para hacer peticiones ajax
import axios from "axios";
import { FETCH_USER } from "./types";

export const fetchUser = () => async dispatch => {
  const res = await axios.get("/api/current_user");

  dispatch({ type: FETCH_USER, payload: res.data });
};

import { FETCH_USER } from '../actions/types';
export default function(state = null, action) {
    switch(action.type) {
        case FETCH_USER:
            return action.payload || false;
        default:
            return state;
    }
}

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Header extends Component {
    renderContent() {
        switch(this.props.auth) {
            case null:
                return 'Todavía decidiendo';
            case false:
                return 'Sessión cerrada';
            default: 
                return 'Sesión iniciada';
        }
    }
    render(){
        // console.log(this.props);
        return (
            <nav>
                <div className="nav-wrapper">
                <a href="#" className="brand-logo">mb-feedback</a>
                <ul id="nav-mobile" className="right hide-on-med-and-down">
                    { this.renderContent() }
                </ul>
                </div>
            </nav>
        );
    }
}

// function mapStateToProps(state) {
//     return { auth: state.auth };
// }
function mapStateToProps({ auth }) {
    return { auth };
}
export default connect(mapStateToProps)(Header);

// ...
renderContent() {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/auth/google">Acceso con Google</a></li>;
      default:
        return <li><a href="">Salir</a></li>;
    }
  }

// ...

// ...
app.get(
  '/auth/google/callback', 
  passport.authenticate('google'),
  (req, res) => {
    res.redirect('/surveys');
  }
);

// ...

// ...
renderContent() {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/auth/google">Acceso con Google</a></li>;
      default:
        return <li><a href="/api/logout">Salir</a></li>;
    }
}

// ...

// ...
app.get('/api/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});
// ...

import React from 'react';

const Landing = () => {
    return(
        <div style={{textAlign: 'center'}}>
            <h1>mb-feedback</h1>
            Obtener feedback de sus usuarios
        </div>
    );
};

export default Landing;

// Reemplazar
const Landing = () => <h2>Landing</h2>;

// Por
import Landing from './Landing';
// Poner esto anter de las otras declaraciones para evitar error

// ...
import { Link } from "react-router-dom";

// ...

render() {
    return (
      <nav>
        <div className="nav-wrapper">
          <Link 
            to={this.props.auth ? '/surveys' : '/'} 
            className="brand-logo"
          >
            mb-feedback
          </Link>
          <ul id="nav-mobile" className="right hide-on-med-and-down">
            {this.renderContent()}
          </ul>
        </div>
      </nav>
    );
  }

// Desde la terminal
cd client
npm install --save react-stripe-checkout

module.exports = {
    // ...
    stripePublishableKey: 'pk_test_maDckee4adUSBdCCQSefD3v100lI4N0eXi',
    stripeSecretKey: 'sk_test_NFUt0kfcFB0f8IMD39dG79FB00mqd8iN89'
}

module.exports = {
    // ...
    stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    stripeSecretKey: process.env.STRIPE_SECRET_KEY
}

REACT_APP_STRIPE_KEY=pk_test_maDckee4adUSBdCCQSefD3v100lI4N0eXi

REACT_APP_STRIPE_KEY=pk_test_maDckee4adUSBdCCQSefD3v100lI4N0eXi

// ...
console.log('STRIPE KEY ES', process.env.REACT_APP_STRIPE_KEY);
console.log('Eviroment es', process.env.NODE_ENV);

import React, { Component } from 'react';
import StripeCheckout from 'react-stripe-checkout';

class Payments extends Component {
    render() {
        debugger;
        return (
            <StripeCheckout 
                amount={500}
                token={token => console.log(token)}
                stripeKey={process.env.REACT_APP_STRIPE_KEY}
            />
        );
    }
} 

export default Payments;

// ...
import Payments from './Payments';

// ...

class Header extends Component {
  renderContent() {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/auth/google">Acceso con Google</a></li>;
      default:
        return [
          <li key="1"><Payments /></li>,
          <li key="2"><a href="/api/logout">Salir</a></li>
        ];
    }
  }

// ...  

import React, { Component } from 'react';
import StripeCheckout from 'react-stripe-checkout';

class Payments extends Component {
    render() {
        return (
            <StripeCheckout 
                name="mb-feeback"
                description="$5 para 5 créditos emails"
                amount={500}
                token={token => console.log(token)}
                stripeKey={process.env.REACT_APP_STRIPE_KEY}
            >
                <button className="btn">
                    Agregar Créditos
                </button>
            </StripeCheckout>
        );
    }
} 

export default Payments;

// ...

export const handleToken = (token) => async dispatch => {
  const res = await axios.post("/api/stripe", token);

  dispatch({ type: FETCH_USER, payload: res.data });
};

// ...
import { connect } from 'react-redux';
import * as actions from '../actions';

class Payments extends Component {
    render() {
        return (
            <StripeCheckout 
                name="mb-feeback"
                description="$5 para 5 créditos emails"
                amount={500}
                token={token => this.props.handleToken(token)}
                stripeKey={process.env.REACT_APP_STRIPE_KEY}
            >
                <button className="btn">
                    Agregar Créditos
                </button>
            </StripeCheckout>
        );
    }
} 

export default connect(null, actions)(Payments);

// ...
require('./routes/authRoutes')(app);
require('./routes/billingRoutes')(app);
// ...

module.exports = app => {
    app.post('/api/stripe', (req, res) => {
        
    });
}

// Desde el servidor
npm install --save stripe
npm install --save body-parser

// ...
const passport = require('passport');
const bodyParser = require('body-parser');
// ...

app.use(bodyParser.json());
app.use(
// ...

const keys = require('../config/keys');
const stripe = require('stripe')(keys.stripeSecretKey);

module.exports = app => {
    app.post('/api/stripe', (req, res) => {
      console.log(req.body);
    });
}

const keys = require('../config/keys');
const stripe = require('stripe')(keys.stripeSecretKey);

module.exports = app => {
    app.post('/api/stripe', (req, res) => {
        stripe.charges.create({
            amount: 500,
            currency: 'usd',
            description: '$5 para 5 créditos emails',
            source: req.body.id
        });
    });
}

const keys = require('../config/keys');
const stripe = require('stripe')(keys.stripeSecretKey);

module.exports = app => {
    app.post('/api/stripe', async (req, res) => {
        const charge = await stripe.charges.create({
            amount: 500,
            currency: 'usd',
            description: '$5 para 5 créditos emails',
            source: req.body.id
        });

        console.log(charge);
    });
}

// ...
const userSchema = new Schema({
    googleId: String,
    credits: { type: Number, default: 0 }
});

// ...

// ...
module.exports = app => {
    app.post('/api/stripe', async (req, res) => {
        const charge = await stripe.charges.create({
            amount: 500,
            currency: 'usd',
            description: '$5 para 5 créditos emails',
            source: req.body.id
        });

        req.user.credits += 5;
        const user = await req.user.save();

        res.send(user);
    });
}

// ...
module.exports = app => {
    app.post('/api/stripe', async (req, res) => {
        if(!req.user){
            return res.status(401).send({ error: 'Debes hacer login' });
        }
    // ....

module.exports = (req, res, next) => {
    if(!req.user){
        return res.status(401).send({ error: 'Debes hacer login' });
    }
    // Si no hay problemas puede continuar
    next();
}

module.exports = (req, res, next) => {
    if(!req.user){
        return res.status(401).send({ error: 'Debes hacer login' });
    }
    // Si no hay problemas puede continuar
    next();
}

const keys = require('../config/keys');
const stripe = require('stripe')(keys.stripeSecretKey);
const requireLogin = require('../middlewares/requireLogin');

module.exports = app => {
  // Observe que no hay llamada, express lo hará cuando haya una 
  // solicitud/request, puede haber tantos middleware como sea
  // necesario según la ruta
    app.post('/api/stripe', requireLogin, async (req, res) => {
        const charge = await stripe.charges.create({
            amount: 500,
            currency: 'usd',
            description: '$5 para 5 créditos emails',
            source: req.body.id
        });

        req.user.credits += 5;
        const user = await req.user.save();

        res.send(user);
    });
}

// ...
class Header extends Component {
  renderContent() {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/auth/google">Acceso con Google</a></li>;
      default:
        return [
          <li key="1"><Payments /></li>,
          <li key='3' style={{ margin: '0 10px'}}>
            Credits: { this.props.auth.credits }
          </li>,
          <li key="2"><a href="/api/logout">Salir</a></li>
        ];
    }
  }
  
  // ...

// ...
class Header extends Component {
  renderContent() {
    switch (this.props.auth) {
      case null:
        return;
      case false:
        return <li><a href="/auth/google">Acceso con Google</a></li>;
      default:
        return [
          <li key="1"><Payments /></li>,
          <li key='3' style={{ margin: '0 10px'}}>
            Credits: { this.props.auth.credits }
          </li>,
          <li key="2"><a href="/api/logout">Salir</a></li>
        ];
    }
  }
  
  // ...