From 504a37545dead0b1e39cc6fa05e3830ba2966fbc Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Mon, 22 Jun 2020 19:47:09 -0400 Subject: [PATCH 1/5] Creacion de contexto base --- src/index.jsx | 42 ++++++++++++++++++++++++++++++------------ src/services/State.jsx | 11 +++++++++++ 2 files changed, 41 insertions(+), 12 deletions(-) create mode 100644 src/services/State.jsx diff --git a/src/index.jsx b/src/index.jsx index cc17ff4..f8297f3 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -6,6 +6,8 @@ import './styles/reset.css'; import './styles/main.scss'; import './styles/tabs.scss'; +import {StateProvider} from "./services/State"; + import {Nav} from "./components/Nav"; import {SearchBar} from "./components/SearchBar"; import {ScrollToTopRouter} from "./components/ScrollToTop"; @@ -22,22 +24,22 @@ const Main = (props) => { const navigate = (query) => props.history.push(`/search?query=${query}`); return ( - -

Busca la musica que te gusta!

 - - - + +

Busca la musica que te gusta!

 + + + ) } const NoRoute = (props) => { return ( - -

Esa pagina no existe

 - - - - + +

Esa pagina no existe

 + + + + ); } @@ -59,7 +61,23 @@ const App = () => ( ); +const AppWithState = () => { + const initialState = {theme: {primary: 'green'}}; + + const reducer = (state, action) => { + switch (action.type) { + default: return state; + } + }; + + return ( + + + + ); +} + ReactDOM.render( - , + , document.getElementById('root') ); diff --git a/src/services/State.jsx b/src/services/State.jsx new file mode 100644 index 0000000..76febae --- /dev/null +++ b/src/services/State.jsx @@ -0,0 +1,11 @@ +import React, {createContext, useContext, useReducer} from 'react'; + +export const StateContext = createContext(null); + +export const StateProvider = ({reducer, initialState, children}) => ( + + {children} + +); + +export const useStateValue = () => useContext(StateContext); From db3d0ce4d3525359dee091d6013c391c796a14f5 Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Tue, 23 Jun 2020 02:07:01 -0400 Subject: [PATCH 2/5] Stupid basic auth --- src/components/Nav.jsx | 49 ++++++++++++++++++++++++++++++++++-------- src/index.jsx | 10 +-------- src/services/State.jsx | 33 +++++++++++++++++++++++----- 3 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 283b0e0..58f63cb 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -1,13 +1,44 @@ import React from "react"; import {Link} from "react-router-dom"; import './Nav.scss'; +import {useStateValue} from '../services/State' -export const Nav = () => ( - -) +export const Nav = () => { + const [context, dispatch] = useStateValue(); + + const handleLogin = () => dispatch({type: 'login', user: {auth: true}}) + const handleLogout = () => dispatch({type: 'logout', user: {auth: false}}) + + const showLogin = () => { + return context.user.auth === false; + } + + const buttons = () => { + if (showLogin()) { + return
    +
  • + +
    • +
  • + Registrate +
    • +
+ }else { + return
    +
  • + Bienvenido +
    • +
  • + +
    • +
+ } + } + + return ( + + ) +} diff --git a/src/index.jsx b/src/index.jsx index f8297f3..2d8d1ef 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -62,16 +62,8 @@ const App = () => ( ); const AppWithState = () => { - const initialState = {theme: {primary: 'green'}}; - - const reducer = (state, action) => { - switch (action.type) { - default: return state; - } - }; - return ( - + ); diff --git a/src/services/State.jsx b/src/services/State.jsx index 76febae..7a6b60b 100644 --- a/src/services/State.jsx +++ b/src/services/State.jsx @@ -1,11 +1,34 @@ import React, {createContext, useContext, useReducer} from 'react'; +const initialState = {user: {auth: false}}; + +const reducer = (state, action) => { + console.log(state, action); + + switch (action.type) { + case 'login': + return { + ...state, + user: action.user + } + case 'logout': + return { + ...state, + user: action.user + } + default: return state; + } +}; + export const StateContext = createContext(null); -export const StateProvider = ({reducer, initialState, children}) => ( - - {children} - -); +export const StateProvider = ({children}) => { + + return ( + + {children} + + ); +} export const useStateValue = () => useContext(StateContext); From 72107bbc91f71e60cb4d0ffc49a0ec568ee36d84 Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Tue, 23 Jun 2020 05:04:51 -0400 Subject: [PATCH 3/5] Comenzado el flujo oauth hay que separar un poco todo --- src/components/Auth.jsx | 64 ++++++++++++++++++++++++++++++++++++ src/components/Nav.jsx | 11 +++---- src/index.jsx | 7 ++++ src/services/State.jsx | 5 --- src/services/auth_service.js | 45 +++++++++++++++++++++++++ 5 files changed, 120 insertions(+), 12 deletions(-) create mode 100644 src/components/Auth.jsx create mode 100644 src/services/auth_service.js diff --git a/src/components/Auth.jsx b/src/components/Auth.jsx new file mode 100644 index 0000000..1dc3ebf --- /dev/null +++ b/src/components/Auth.jsx @@ -0,0 +1,64 @@ +import React, {useState} from 'react'; +import {Redirect} from "react-router-dom"; +import queryString from "query-string"; + +import {get_auth, obtain_code} from "../services/auth_service"; +import {useStateValue} from "../services/State"; + +export const AuthCallback = (props) => { + return null; +} + +export const AuthLogin = (props) => { + const [response, setResponse] = useState(null); + const [context, dispatch] = useStateValue(); + + if (window.localStorage.getItem('refresh_token')) { + } + + if (!response) { + if (context.user.auth) { + return + } + + if (!window.localStorage.getItem('code_verifier')) { + const {redirect, code_verifier} = obtain_code(); + window.localStorage.setItem('code_verifier', code_verifier); + window.location.href = redirect; + return null; + } + + const parsedParams = queryString.parse(props.location.search); + if (parsedParams.error) { + console.log(parsedParams.error); + window.localStorage.removeItem('code_verifier'); + return + } + + const code = parsedParams.code; + const code_verifier = window.localStorage.getItem('code_verifier'); + get_auth(code, code_verifier).then((response) => setResponse(response)); + + return null; + } else { + console.log(response); + + window.localStorage.removeItem('code_verifier'); + + const refresh = response.refresh_token; + const expires = new Date(new Date().getTime() + ((response.expires_in) * 1000)) + + window.localStorage.setItem('refresh_token', refresh); + window.localStorage.setItem('expires', expires); + + dispatch({type: 'login', user: {auth: true, access_token: response.access_token}}); + + return + } +} + +export const AuthLogout = (props) => { + const [context, dispatch] = useStateValue(); + dispatch({action: 'logout', user: {auth: false}}) + return +} diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 58f63cb..67afdbd 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -3,12 +3,9 @@ import {Link} from "react-router-dom"; import './Nav.scss'; import {useStateValue} from '../services/State' -export const Nav = () => { +export const Nav = (props) => { const [context, dispatch] = useStateValue(); - const handleLogin = () => dispatch({type: 'login', user: {auth: true}}) - const handleLogout = () => dispatch({type: 'logout', user: {auth: false}}) - const showLogin = () => { return context.user.auth === false; } @@ -17,7 +14,7 @@ export const Nav = () => { if (showLogin()) { return
  • - + Iniciar Sesión
  • Registrate @@ -26,10 +23,10 @@ export const Nav = () => { }else { return
    • - Bienvenido + Bienvenido {context.user.access_token}
    • - + Cerrar Sesión
    } diff --git a/src/index.jsx b/src/index.jsx index 2d8d1ef..9870bb3 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -19,6 +19,7 @@ import {ReleaseView} from "./views/Release"; import {Recomended} from "./views/Recomended"; import {SongView} from "./views/Song"; import {Grid, RowCol} from './components/Grid'; +import {AuthCallback, AuthLogin, AuthLogout} from "./components/Auth"; const Main = (props) => { const navigate = (query) => props.history.push(`/search?query=${query}`); @@ -50,10 +51,16 @@ const App = () => (