From bb3a5c93dfc394c3186587fde0c9c834c12da06f Mon Sep 17 00:00:00 2001
From: Jari Vetoniemi <jari.vetoniemi@indooratlas.com>
Date: Fri, 6 Nov 2020 10:10:38 +0900
Subject: Add some basic routing

---
 src/App.js | 197 +++++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 132 insertions(+), 65 deletions(-)

(limited to 'src/App.js')

diff --git a/src/App.js b/src/App.js
index 2225ac5..69ff38e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -48,6 +48,15 @@ import { useWindowDimensions } from './utils.js';
 import 'pure-react-carousel/dist/react-carousel.es.css';
 import 'fontsource-roboto';
 
+import {
+   BrowserRouter as Router,
+   Switch,
+   Route,
+   Redirect,
+   Link,
+   useLocation
+} from "react-router-dom";
+
 const StyledBadge = withStyles((theme) => ({
    badge: {
       right: -3,
@@ -231,6 +240,74 @@ function StoreList(props) {
    );
 }
 
+function StoreView(props) {
+   const [state, setState] = useState({data: [], loaded: false});
+   useEffect(() => {
+         async function fetchData() {
+            function getRandomInt(max) {
+               return Math.floor(Math.random() * Math.floor(max));
+            }
+            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
+            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
+               id: 'no-id',
+               author: he.decode(item.title),
+               title: he.decode(item.title),
+               shortdesc: 'foobar',
+               desc: 'foobar',
+               img: 'https:' + item.ssl_path,
+               cat: 'Misc',
+               price: getRandomInt(3000) + '円',
+               rating: getRandomInt(5),
+            }})
+            setState({data: result, loaded: true});
+         }
+         fetchData();
+   }, []);
+
+   return (
+     <>
+        <StoreCarousel name='Featured' data={state.data} loading={!state.loaded}/>
+        <StoreCarousel name='Popular' data={state.data} loading={!state.loaded}/>
+        <StoreList name='Latest' data={state.data} loading={!state.loaded}/>
+     </>
+   );
+}
+
+function LibraryView(props) {
+   const [state, setState] = useState({data: [], loaded: false});
+   useEffect(() => {
+         async function fetchData() {
+            function getRandomInt(max) {
+               return Math.floor(Math.random() * Math.floor(max));
+            }
+            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
+            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
+               id: 'no-id',
+               author: he.decode(item.title),
+               title: he.decode(item.title),
+               shortdesc: 'foobar',
+               desc: 'foobar',
+               img: 'https:' + item.ssl_path,
+               cat: 'Misc',
+               price: getRandomInt(3000) + '円',
+               rating: getRandomInt(5),
+            }})
+            setState({data: result, loaded: true});
+         }
+         fetchData();
+   }, []);
+
+   return (
+     <>
+        <StoreList name='Available' data={state.data} loading={!state.loaded}/>
+     </>
+   );
+}
+
+function AccountView(props) {
+   return <></>;
+}
+
 function ItemSearch(props) {
    const { t } = useTranslation();
 
@@ -317,82 +394,73 @@ function ItemSearch(props) {
    );
 }
 
-function StoreView(props) {
+function BottomBar(props) {
    const { t } = useTranslation();
-
-   const [data, setData] = useState([]);
-   const [loaded, setLoaded] = useState(false);
-   useEffect(() => {
-         async function fetchData() {
-            function getRandomInt(max) {
-               return Math.floor(Math.random() * Math.floor(max));
-            }
-            var result = await fetch('https://cors-anywhere.herokuapp.com/https://www.eisys-bcs.jp/data.json?key[]=dlsite-doujin_home_center2').then(result => result.json());
-            console.log(result)
-            result = result.data.['dlsite-doujin_home_center2'].banners.map(item => { return {
-               id: 'no-id',
-               author: he.decode(item.title),
-               title: he.decode(item.title),
-               shortdesc: 'foobar',
-               desc: 'foobar',
-               img: 'https:' + item.ssl_path,
-               cat: 'Misc',
-               price: getRandomInt(3000) + '円',
-               rating: getRandomInt(5),
-            }})
-            setData(result);
-            setLoaded(true)
-         }
-         fetchData();
-   }, []);
-
    const classes = makeStyles((theme) => ({
-      root: {
-         paddingTop: 105,
-         paddingBottom: 65,
-      },
       stickyBottom: {
          position: 'fixed',
          width: '100%',
          bottom: 0,
       },
+   }))();
+   return (
+      <BottomNavigation className={classes.stickyBottom} value={props.path} showLabels>
+         <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} component={Link} to='/store'/>
+         <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} component={Link} to='/library'/>
+         <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} component={Link} to='/account'/>
+      </BottomNavigation>
+   );
+}
+
+function TopBar(props) {
+   const { t } = useTranslation();
+   const classes = makeStyles((theme) => ({
       title: { flexGrow: 1 },
    }))();
+   return (
+      <AppBar position="fixed">
+         <Toolbar variant="dense">
+            <Typography variant="h6" className={classes.title}>
+               {t('DoujinSea')}
+            </Typography>
+            <IconButton aria-label="help">
+                <HelpOutlineIcon />
+            </IconButton>
+            <IconButton aria-label="cart">
+               <StyledBadge badgeContent={4} color="secondary">
+                  <ShoppingCartIcon />
+               </StyledBadge>
+            </IconButton>
+         </Toolbar>
+         {props.search ? <ItemSearch/> : null}
+      </AppBar>
+   );
+}
 
+function Routing() {
+   const classes = makeStyles((theme) => ({
+      content: {
+         paddingTop: 105,
+         paddingBottom: 65,
+         minHeight: '100vh',
+      },
+   }))();
+   var location = useLocation();
+   const path = location.pathname.split('/')[1];
    return (
       <>
-        <AppBar position="fixed">
-           <Toolbar variant="dense">
-              <Typography variant="h6" className={classes.title}>
-                 {t('DoujinSea')}
-              </Typography>
-              <IconButton aria-label="help">
-                  <HelpOutlineIcon />
-              </IconButton>
-              <IconButton aria-label="cart">
-                 <StyledBadge badgeContent={4} color="secondary">
-                    <ShoppingCartIcon />
-                 </StyledBadge>
-              </IconButton>
-           </Toolbar>
-           <ItemSearch/>
-        </AppBar>
-        <Paper className={classes.root} elevation={0} square>
-           <StoreCarousel name='Featured' data={data} loading={!loaded}/>
-           <StoreCarousel name='Popular' data={data} loading={!loaded}/>
-           <StoreList name='Latest' data={data} loading={!loaded}/>
-        </Paper>
-        <BottomNavigation className={classes.stickyBottom}
-           value='store'
-           onChange={(event, newValue) => {}}
-           showLabels
-        >
-           <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} />
-           <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} />
-           <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} />
-        </BottomNavigation>
+         <TopBar search={path !== 'account'}/>
+         <Paper className={classes.content} elevation={0} square>
+            <Switch>
+               <Route path='/store' component={StoreView}/>
+               <Route path='/library' component={LibraryView}/>
+               <Route path='/account' component={AccountView}/>
+               <Route path='/'><Redirect to='/store'/></Route>
+            </Switch>
+         </Paper>
+         <BottomBar path={path}/>
       </>
-   )
+   );
 }
 
 export default function Main() {
@@ -403,12 +471,11 @@ export default function Main() {
          primary: red,
       },
    }), [prefersDarkMode]);
-
    return (
       <>
          <CssBaseline/>
          <ThemeProvider theme={theme}>
-            <StoreView/>
+            <Router><Routing/></Router>
          </ThemeProvider>
       </>
    );
-- 
cgit v1.2.3