added start request to game reducer

Co-authored-by: Ida Utterström <[email protected]>

code/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.6",
     "react-scripts": "^3.3.0",
+    "styled-components": "^5.3.3",
     "uniqid": "^5.4.0"
   },
   "scripts": {

code/src/App.js

@@ -1,35 +1,38 @@
 import React from 'react'
 import { Provider } from 'react-redux'
-import { combineReducers, createStore } from '@reduxjs/toolkit'
+import { combineReducers, configureStore } from '@reduxjs/toolkit' //createStore
 
 import { game } from './reducers/game'
+import { ui } from './reducers/ui'
+import { StartPage } from './components/StartPage'
 
-const reducer = combineReducers({ game: game.reducer })
+const reducer = combineReducers({ game: game.reducer, ui: ui.reducer })
+const store = configureStore({ reducer })
 
 // Retrieve localstorage as initial state
-const persistedStateJSON = localStorage.getItem('gameReduxState')
-let persistedState = {}
+// const persistedStateJSON = localStorage.getItem('gameReduxState')
+// let persistedState = {}
 
-if (persistedStateJSON) {
-  persistedState = JSON.parse(persistedStateJSON)
-}
+// if (persistedStateJSON) {
+//   persistedState = JSON.parse(persistedStateJSON)
+// }
 
 // Create store with initial state
-const store = createStore(
-  reducer,
-  persistedState,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-)
+// const store = createStore(
+//   reducer,
+//   persistedState,
+//   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+// )
 
 // Store the state in localstorage when Redux state change
-store.subscribe(() => {
-  localStorage.setItem('gameduxState', JSON.stringify(store.getState()))
-})
+// store.subscribe(() => {
+//   localStorage.setItem('gameReduxState', JSON.stringify(store.getState()))
+// })
 
 export const App = () => {
   return (
     <Provider store={store}>
-      <div>Find me in src/app.js!</div>
+      <StartPage />
     </Provider>
   )
 }

code/src/components/StartPage.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { game, startGame } from 'reducers/game'
+import styled from 'styled-components'
+
+export const StartPage = () => {
+  const dispatch = useDispatch()
+  const username = useSelector(store => store.game.username)
+
+  const [input, setInput] = useState('')
+
+  const onStartGame = () => {
+    // dispatch(game.actions.createUser(input))
+    dispatch(startGame(input))
+  }
+
+  return (
+    <div>
+      <h1>What's your name?</h1>
+      <input type='text' value={input} onChange={e => setInput(e.target.value)} />
+      <button disabled={input === ''} onClick={onStartGame}>
+        Start game!
+      </button>
+    </div>
+  )
+}

code/src/index.css

@@ -1,13 +1,11 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  margin: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

code/src/reducers/game.js

@@ -1,15 +1,46 @@
 import { createSlice } from '@reduxjs/toolkit'
 import uniqid from 'uniqid'
 
+import { ui } from './ui'
+
 export const game = createSlice({
   name: 'game',
   initialState: {
     username: '',
+    currentStep: {},
   },
   reducers: {
     createUser: (store, action) => {
       const newUser = action.payload + uniqid()
       store.username = newUser
     },
+    setCurrentStep: (store, action) => {
+      store.currentStep = { ...action.payload }
+    },
   },
 })
+
+export const startGame = input => {
+  return dispatch => {
+    dispatch(ui.actions.setLoading(true))
+    dispatch(game.actions.createUser(input))
+    console.log('[startGame]', game.username)
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username: `${input}`,
+      }),
+    }
+
+    fetch('https://wk16-backend.herokuapp.com/start', options)
+      .then(res => res.json())
+      .then(json => {
+        console.log('[startGame: from fetch]', json)
+        dispatch(game.actions.setCurrentStep(json))
+        dispatch(ui.actions.setLoading(false))
+      })
+  }
+}

code/src/reducers/ui.js

@@ -0,0 +1,13 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const ui = createSlice({
+  name: 'ui',
+  initialState: {
+    loading: false,
+  },
+  reducers: {
+    setLoading: (state, action) => {
+      state.loading = action.payload
+    },
+  },
+})