diff --git a/src/App.js b/src/App.js index 743b1d9..fa90edc 100644 --- a/src/App.js +++ b/src/App.js @@ -2,22 +2,25 @@ import React, { useReducer } from 'react'; import logo from './logo.svg'; import './App.css'; import { reducer, initialState } from './hooks/reducer'; -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { BrowserRouter, Routes, Route, Navigate} from 'react-router-dom'; import Pokemon from './components/pages/pokemon'; import Details from './components/pages/details'; import SignIn from './components/pages/login'; +import {checkLogin} from './utils' function App() { const [state, dispatch] = useReducer(reducer, initialState); + const loggedIn = checkLogin() + return (
- } /> - } /> - } /> + : } /> + :
} /> + : } /> } /> diff --git a/src/components/bottombar.jsx b/src/components/bottombar.jsx index eb2ecd1..1ba66cc 100644 --- a/src/components/bottombar.jsx +++ b/src/components/bottombar.jsx @@ -7,10 +7,12 @@ import Paper from '@mui/material/Paper'; import CatchingPokemonIcon from '@mui/icons-material/CatchingPokemon'; import StarIcon from '@mui/icons-material/Star'; import ExitToAppIcon from '@mui/icons-material/ExitToApp'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; export default function FixedBottomNavigation() { const navigateTo = useNavigate(); + let location = useLocation(); + /* console.log('Location', location) */ return ( @@ -23,14 +25,33 @@ export default function FixedBottomNavigation() { } else if (newValue === '1') { navigateTo('/favorites'); } else if (newValue === '2') { - /* navigateTo('/login') */ - console.log(newValue); + localStorage.removeItem('user') + localStorage.removeItem('pass') + navigateTo('/login') + // console.log(newValue); + } }} > - } /> - } /> - } /> + {(()=>{ + if (location.pathname === '/') { + return ( + } /> + ) + } else { + return (} />) + } + })()} + {(()=>{ + if (location.pathname === '/favorites') { + return ( + } /> + ) + } else { + return (} /> ) + } + })()} + } /> diff --git a/src/components/filterbar.jsx b/src/components/filterbar.jsx index eb8a1bf..c699835 100644 --- a/src/components/filterbar.jsx +++ b/src/components/filterbar.jsx @@ -17,7 +17,7 @@ export default function BasicMenu({ currentType, dispatch }) { }; const handleActionClose = (e) => { - // console.log(e.target.getAttribute("value")) + console.log(e.target.getAttribute("value")) dispatch({ type: "filterType", value: e.target.getAttribute("value") }) return handleClose(e) } @@ -33,6 +33,7 @@ export default function BasicMenu({ currentType, dispatch }) { aria-haspopup="true" aria-expanded={open ? 'true' : undefined} onClick={handleClick} + sx={{color: 'white'}} > diff --git a/src/components/layout.jsx b/src/components/layout.jsx new file mode 100644 index 0000000..0d282d1 --- /dev/null +++ b/src/components/layout.jsx @@ -0,0 +1,13 @@ +import { Outlet } from "react-router-dom"; +import FixedBottomNavigation from "./bottombar"; +import ResponsiveAppBar from "./navbar"; + +function Layout() { + return( + <> + + + + + ) +} \ No newline at end of file diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index 4e6e2cf..db3de46 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -55,15 +55,23 @@ const ResponsiveAppBar = ({currentType, dispatch}) => { }; const handleCloseUserMenu = () => { - navigateTo('/'); + navigateTo('/'); setAnchorElUser(null); }; + const handleCloseUserMenuLogout = () => { + localStorage.removeItem('user') + localStorage.removeItem('pass') + navigateTo('/login'); + setAnchorElUser(null); + }; + + return ( - logo + logo navigateTo('/')}/> { > - {/* - - - - - {pages.map((page, i) => ( - - {page} - - ))} - - - */} {pages.map((page, i) => ( - - +
+ + + + + {upperFirstLetter(pokemon.name)} + + + {pokemon.pokemon_v2_pokemontypes.map((type)=> { + return (upperFirstLetter(type.pokemon_v2_type.name )+ ' ')})} + + + + {(() => { + if (favs.includes(pokemon.id)) { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } else { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } + })()} + + + + + + + + + {upperFirstLetter(pokemon.name)} + + + {pokemon.pokemon_v2_pokemontypes.map((type)=> { + return (upperFirstLetter(type.pokemon_v2_type.name )+ ' ')})} + + + {(() => { + if (favs.includes(pokemon.id)) { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } else { + return dispatch({ type: 'setFav', value: pokemon.id })} /> + } + })()} + + + + + + +
) })}
diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js index 2cebb29..6febae7 100644 --- a/src/hooks/reducer.js +++ b/src/hooks/reducer.js @@ -1,7 +1,12 @@ +import {getLocalStorageObj} from '../utils' + +const [favs,] = getLocalStorageObj('favs',[]) +const [favIds,] = getLocalStorageObj('favIds',[]) + export const initialState = { data: [], - favs: [], - favIds: [], + favs: favs, + favIds: favIds, mainPage: { currentData:[], page: 1, @@ -63,6 +68,8 @@ export const reducer = (state, action) => { newFavs.push(element); } }); + localStorage.setItem('favs', JSON.stringify(newFavs)); + localStorage.setItem('favIds', JSON.stringify(currentFavIds)); return {...state, favs: newFavs, favIds: currentFavIds} case 'filterName': return {...state, filterState: {...state.filterState, name: action.value}} diff --git a/src/img/pokemonTypes/bug.png b/src/img/pokemonTypes/bug.png new file mode 100644 index 0000000..6ed1723 Binary files /dev/null and b/src/img/pokemonTypes/bug.png differ diff --git a/src/img/pokemonTypes/dark.png b/src/img/pokemonTypes/dark.png new file mode 100644 index 0000000..faabc94 Binary files /dev/null and b/src/img/pokemonTypes/dark.png differ diff --git a/src/img/pokemonTypes/dragon.png b/src/img/pokemonTypes/dragon.png new file mode 100644 index 0000000..61d05aa Binary files /dev/null and b/src/img/pokemonTypes/dragon.png differ diff --git a/src/img/pokemonTypes/electric.png b/src/img/pokemonTypes/electric.png new file mode 100644 index 0000000..993f25f Binary files /dev/null and b/src/img/pokemonTypes/electric.png differ diff --git a/src/img/pokemonTypes/fairy.png b/src/img/pokemonTypes/fairy.png new file mode 100644 index 0000000..eaab714 Binary files /dev/null and b/src/img/pokemonTypes/fairy.png differ diff --git a/src/img/pokemonTypes/fighting.png b/src/img/pokemonTypes/fighting.png new file mode 100644 index 0000000..5583be9 Binary files /dev/null and b/src/img/pokemonTypes/fighting.png differ diff --git a/src/img/pokemonTypes/fire.png b/src/img/pokemonTypes/fire.png new file mode 100644 index 0000000..0fcd3b0 Binary files /dev/null and b/src/img/pokemonTypes/fire.png differ diff --git a/src/img/pokemonTypes/flying.png b/src/img/pokemonTypes/flying.png new file mode 100644 index 0000000..ee232f1 Binary files /dev/null and b/src/img/pokemonTypes/flying.png differ diff --git a/src/img/pokemonTypes/ghost.png b/src/img/pokemonTypes/ghost.png new file mode 100644 index 0000000..bee9238 Binary files /dev/null and b/src/img/pokemonTypes/ghost.png differ diff --git a/src/img/pokemonTypes/grass.png b/src/img/pokemonTypes/grass.png new file mode 100644 index 0000000..fe83d4b Binary files /dev/null and b/src/img/pokemonTypes/grass.png differ diff --git a/src/img/pokemonTypes/ground.png b/src/img/pokemonTypes/ground.png new file mode 100644 index 0000000..41e9223 Binary files /dev/null and b/src/img/pokemonTypes/ground.png differ diff --git a/src/img/pokemonTypes/ice.png b/src/img/pokemonTypes/ice.png new file mode 100644 index 0000000..7f2cca3 Binary files /dev/null and b/src/img/pokemonTypes/ice.png differ diff --git a/src/img/pokemonTypes/normal.png b/src/img/pokemonTypes/normal.png new file mode 100644 index 0000000..9a646a0 Binary files /dev/null and b/src/img/pokemonTypes/normal.png differ diff --git a/src/img/pokemonTypes/poison.png b/src/img/pokemonTypes/poison.png new file mode 100644 index 0000000..fcbac60 Binary files /dev/null and b/src/img/pokemonTypes/poison.png differ diff --git a/src/img/pokemonTypes/psychic.png b/src/img/pokemonTypes/psychic.png new file mode 100644 index 0000000..851be18 Binary files /dev/null and b/src/img/pokemonTypes/psychic.png differ diff --git a/src/img/pokemonTypes/rock.png b/src/img/pokemonTypes/rock.png new file mode 100644 index 0000000..5833e96 Binary files /dev/null and b/src/img/pokemonTypes/rock.png differ diff --git a/src/img/pokemonTypes/steel.png b/src/img/pokemonTypes/steel.png new file mode 100644 index 0000000..9a18908 Binary files /dev/null and b/src/img/pokemonTypes/steel.png differ diff --git a/src/img/pokemonTypes/water.png b/src/img/pokemonTypes/water.png new file mode 100644 index 0000000..d343ef6 Binary files /dev/null and b/src/img/pokemonTypes/water.png differ diff --git a/src/index.js b/src/index.js index 4757d20..8c70148 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,45 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import CssBaseline from '@mui/material/CssBaseline'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { checkValue } from './utils' + +const appName = 'pokedata' +const version = '0.1' +const realUser = 'ash_ketchum' +const realPass = 'pikachu123' +checkValue('appName', appName) +checkValue('version', version) +localStorage.setItem('appName', appName) +localStorage.setItem('version', version) +localStorage.setItem('realUser', 'ash_ketchum') +localStorage.setItem('realPass', 'pikachu123') + +let theme = createTheme({ + palette: { + mode: 'light', + primary: { + main: '#FF1C1C' + }, + secondary: { + main: '#f50057', + }, + /* text: { + primary: 'rgba(243,239,239,0.87)', + secondary: 'rgba(212,210,210,0.54)', + disabled: 'rgba(131,131,131,0.38)', + hint: 'rgba(127,127,127,0.38)', + }, */ + }, +} +); ReactDOM.render( - - + + + + , document.getElementById('root') ); diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..8498819 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,65 @@ +export const getLocalStorageObj = (key, defaultVal) => { + try{ + const item = JSON.parse(localStorage.getItem(key)) + if (item===null){ + localStorage.setItem(key, JSON.stringify(defaultVal)) + console.log(`item ${key} is null, setting to ${defaultVal}`) + return [defaultVal, false] + }else{ + console.log(`item ${key} retrieved from localStorage`) + return [item, true] + } + } catch(error) { + localStorage.setItem(key, JSON.stringify(defaultVal)) + console.log(error) + console.log(`error getting item ${key} setting to ${defaultVal}`) + return [defaultVal, false] + } +} + +// export const getLocalStorageStr = (key, defaultVal) => { +// try{ +// const item = localStorage.getItem(key) +// if (item===null){ +// localStorage.setItem(key, defaultVal) +// console.log(`item ${key} is null, setting to ${defaultVal}`) +// return defaultVal +// }else{ +// return item +// } +// } catch(error) { +// localStorage.setItem(key, defaultVal) +// console.log(error) +// console.log(`error getting item ${key} setting to ${defaultVal}`) +// return defaultVal +// } +// } + +export const checkValue = (key, expectedVal) => { + try{ + const item = localStorage.getItem(key) + console.log(item) + if (item===expectedVal){ + console.log(`item ${key} matches the desired ${expectedVal} value`) + }else{ + localStorage.clear(); + console.log(`value ${key} did not match, clearing local storage`) + } + } catch(error) { + localStorage.clear(); + console.log(`value ${key} error, clearing local storage`) + console.log(error) + } +} + +export const checkLogin = () => { + const user = localStorage.getItem('user') + const pass = localStorage.getItem('pass') + const realUser = localStorage.getItem('realUser') + const realPass = localStorage.getItem('realPass') + if (((user===realUser) && (pass===realPass))){ + return true + } else{ + return false + } +} \ No newline at end of file