create theme service and context

src/contexts/data.js

@@ -0,0 +1,134 @@
+import React, {useReducer} from 'react'
+
+const INITIAL_STATE = {
+    cart: {},
+    pokemons: {},
+    // search: {},
+    endpoints: {},
+    theme: 'meupiru'
+}
+
+const DataContext = React.createContext()
+
+function dataReducer(state, { type, payload }) {
+    switch (type) {
+      case 'UPDATE_CART': {
+        const {
+          quantity,
+          pokemon: {
+            name,
+            weight
+          }
+        } = payload
+
+        return {
+            ...state,
+            cart: {
+              ...state.cart,
+              [name]: {
+                quantity: state.cart[name]
+                  ? state.cart[name].quantity + quantity 
+                  : quantity,
+                price: weight,
+              }
+            }
+        }
+      }
+      case 'REMOVE_FROM_CART': {
+        const newState = {...state}
+        delete newState.cart[payload.name]
+        return newState
+      }
+      case 'SAVE_ENDPOINT_RESULT': {
+        const {url, result} = payload
+        return {
+          ...state,
+          endpoints: {
+            ...state.endpoints,
+            [url]: result
+          }
+        }
+      }
+      case 'SAVE_POKEMON_DATA': {
+        return {
+            ...state,
+            pokemons: {
+              ...state.pokemons,
+              ...payload
+            }
+        }
+      }
+      case 'BUY_POKEMON': {
+        const { name, weight } = state.pokemons[payload]
+
+        return {
+          ...state,
+          cart: {
+            ...state.cart,
+            [name]: {
+              quantity: state.cart[name]
+                ? state.cart[name].quantity + 1 
+                : 1,
+              price: weight,
+            }
+          }
+        }
+      }
+      case 'CHANGE_THEME': {
+        return {
+            ...state,
+            theme: payload
+        }
+      }
+      default: {
+        throw new Error(`Unhandled action type: ${type}`)
+      }
+    }
+}
+
+export function DataProvider ({ children, value }) {
+    const [state, dispatch] = useReducer(dataReducer, INITIAL_STATE)
+
+    const updateCart = payload => dispatch({
+        type: 'UPDATE_CART',
+        payload
+    })
+
+    const savePokemonData = payload => dispatch({
+      type: 'SAVE_POKEMON_DATA',
+      payload
+    })
+
+    const removePokemon = payload => dispatch({
+      type: 'REMOVE_FROM_CART',
+      payload
+    })
+
+    const saveEndpointResult = payload => dispatch({
+      type: 'SAVE_ENDPOINT_RESULT',
+      payload
+    })
+
+    const changeTheme = payload => dispatch({
+      type: 'CHANGE_THEME',
+      payload
+    })
+
+    const buyPokemon = payload => dispatch({
+      type: 'BUY_POKEMON',
+      payload
+    })
+
+    return <DataContext.Provider value={{
+      ...state,
+      updateCart,
+      savePokemonData,
+      removePokemon,
+      saveEndpointResult,
+      changeTheme,
+      buyPokemon,
+      ...value
+  }}>{children}</DataContext.Provider>
+  }
+
+export default DataContext

src/service/index.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+
+// axios.defaults.headers.common = { 
+//     'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+// }
+
+// export default {
+//     get: url => axios.get(url).then(d => d.data).catch(e => {
+//         if (e.response.status === 401) {
+//             window.location.href = process.env.REACT_APP_LOGIN_URL
+//         }
+//     }),
+// }
+
+export default {
+    get: url => axios
+        .get(url)
+        .then(d => d.data)
+        .catch(e => {}) 
+}

src/themes/index.js

@@ -0,0 +1,59 @@
+const types = {
+    normal: {
+      colors: {
+        primary: "white",
+      },
+    },
+    fire: {
+      colors: {
+        primary: "#de5239",
+      },
+    },
+    water: {
+      colors: {
+        primary: "#8bc5cd",
+      },
+    },
+    grass: {
+      colors: {
+        primary: "#62d5b4",
+      },
+    },
+    electric: {
+      colors: {
+        primary: "#f6bd20",
+      },
+    },
+    bug: {
+      colors: {
+        primary: "#A8B820",
+      },
+    },
+    dragon: {
+      colors: {
+        primary: "#705848",
+      },
+    },
+    ghost: {
+      colors: {
+        primary: "#705898",
+      },
+    },
+  };
+
+const global = {
+  colors: {
+    fire: '#de5239',
+    water: '#8bc5cd',
+    grass: '#62d5b4',
+    electric: '#f6bd20',
+    bug: '#A8B820',
+    dragon: '#705848',
+    ghost: '#705898'
+  }
+}
+
+export default type => ({
+  ...global,
+  ...types[type]
+})