Add some basic routing

3 files changed, 221 insertions, 65 deletions

diff --git a/package-lock.json b/package-lock.json
index e4a4c47..446cfc6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6899,6 +6899,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -9368,6 +9381,15 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -11911,6 +11933,57 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz",
@@ -12377,6 +12450,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14274,6 +14352,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -14727,6 +14810,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 7a6869a..079d0f5 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^17.0.1",
     "react-i18next": "^11.7.3",
     "react-lazyload": "^3.1.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "web-vitals": "^0.2.4"
   },
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>
       </>
    );