Merge pull request #5 from DevShruti/dev-shruti

context

src/App.js

@@ -3,11 +3,13 @@ import './App.css';
 import Login from "./Login";
 import { getTokenFromResponse } from "./spotify";
 import SpotifyWebApi from "spotify-web-api-js"
-
+import Player from "./Player";
+import { useStateValue } from "./StateProvider";
 const s = new SpotifyWebApi();
 
 function App() {
  const [ token , setToken] = useState(null);
+ const [{ user }, dispatch] = useStateValue();
  useEffect(() => {
  const hash = getTokenFromResponse();
 
@@ -17,21 +19,29 @@ function App() {
  if (_token) {
  setToken(_token)
 
+
+
  s.setAccessToken(_token);
- }
+
 
  s.getMe().then((user) => {
- console.log(user)
+ dispatch({
+ type: "SET_USER",
+ user: user,
  });
-
+ });
+ }
 
- console.log("i have a token", hash) 
+ console.log("i have a token", hash) 
+
  }, []);
 
-
+ console.log("that is the user", user)
+ console.log("token" , token)
 
  return (
  <div className="app">
+ <Player/>
  { token ? (<h1>I am logged in</h1>):
  (<Login/>)}
 

src/Player.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Player() {
+ return (
+ <div>
+ <h1>Welcome to Spotify</h1>
+ </div>
+ )
+}
+
+export default Player

src/StateProvider.js

@@ -0,0 +1,11 @@
+import React, { createContext, useContext, useReducer } from "react";
+
+export const StateContext = createContext();
+
+export const StateProvider = ({ reducer, initialState, children }) => (
+ <StateContext.Provider value={useReducer(reducer, initialState)}>
+ {children}
+ </StateContext.Provider>
+);
+
+export const useStateValue = () => useContext(StateContext);

src/index.js

@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { StateProvider } from "./StateProvider";
+import reducer, { initialState } from "./reducer";
 
 ReactDOM.render(
  <React.StrictMode>
- <App />
+ <StateProvider initialState={initialState} reducer={reducer}>
+ <App />
+ </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
 );

src/reducer.js

@@ -0,0 +1,28 @@
+export const initialState = {
+ user: null,
+ playlists: [],
+ spotify: null,
+ playing: false,
+ item: null,
+ token: " BQD88suew-8mIxZQYSMxkdTCvNo34_qXqzCjjIkly4yxjqehFRqAd3gaamcZ_gru-Cr2cRjBcvAhFVbB1Yiw5q20pFAB-Y4ILbXbi57erKdFgD-BQqzdxRwkbowwrAVuTGLE_MvUFDytfuAE_czu8e9LEPlzPiq6-pUHNYGRjHzR",
+ };
+
+ const reducer = (state, action) => {
+ console.log(action);
+ switch (action.type) {
+ case "SET_USER":
+ return {
+ ...state,
+ user: action.user,
+ };
+
+ case "SET_TOKEN":
+ return {
+ ...state,
+ token: action.token,
+ };
+
+ }
+}
+
+export default reducer;