From 5c8387ac7e7b268a7257ad6671b5dc9eb34cc90b Mon Sep 17 00:00:00 2001
From: Jari Vetoniemi <jari.vetoniemi@indooratlas.com>
Date: Fri, 6 Nov 2020 12:31:18 +0900
Subject: Wip

---
 src/App.js | 79 +++++++++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index b89a532..ef78070 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import he from 'he';
 import { useTranslation } from "react-i18next";
 import { makeStyles, withStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
@@ -42,6 +42,8 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import Grow from '@material-ui/core/Grow';
+import Link from '@material-ui/core/Link';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import LazyLoad from 'react-lazyload';
 import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
 import useTimeout from 'use-timeout'
@@ -54,7 +56,7 @@ import {
    Switch,
    Route,
    Redirect,
-   Link,
+   Link as RouteLink,
    useLocation
 } from "react-router-dom";
 
@@ -70,18 +72,49 @@ const StyledBadge = withStyles((theme) => ({
 function StoreItemDetails(props) {
    const { t } = useTranslation();
 
+   const { height, width } = useWindowDimensions();
+   const cols = Math.floor(width / 240);
    const classes = makeStyles((theme) => ({
+      root: { paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 },
+      controls: { position: 'relative', width: '100%', maxWidth: 640, margin: (cols > 1 ? 20 : 0) },
+      prev: { position: 'absolute', left: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' },
+      next: { position: 'absolute', right: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' },
+      img: { width: '100%', height: (height > 1024 ? 480 : 240), objectFit: 'contain' }
    }))();
 
    return (
-      <>
-         <Typography variant="h6" gutterBottom>
-            {props.data.title}
-         </Typography>
-         <Typography variant="body2" color="textSecondary" component="p">
-            {props.data.desc}
-         </Typography>
-      </>
+      <div className={classes.root}>
+         <Breadcrumbs aria-label="breadcrumb">
+            <Link component={RouteLink} to='/store'>{t('Store')}</Link>
+            <Typography>author</Typography>
+            <Typography>id</Typography>
+         </Breadcrumbs>
+         <StoreSeparator title='Some Title'/>
+         <CarouselProvider
+            infinite
+            isPlaying
+            lockOnWindowScroll
+            isIntrinsicHeight
+            naturalSlideWidth={640}
+            naturalSlideHeight={480}
+            visibleSlides={1}
+            totalSlides={4}>
+            <div className={classes.controls}>
+               <Slider>
+                  <Slide index={1}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_main.jpg' className={classes.img}/></Slide>
+                  <Slide index={2}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp1.jpg' className={classes.img}/></Slide>
+                  <Slide index={3}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp2.jpg' className={classes.img}/></Slide>
+                  <Slide index={4}><img src='https://img.dlsite.jp/modpub/images2/work/doujin/RJ299000/RJ298293_img_smp3.jpg' className={classes.img}/></Slide>
+               </Slider>
+               <IconButton size='small' aria-label='previous' component={ButtonBack} className={classes.prev}>
+                  <NavigateBeforeIcon/>
+               </IconButton>
+               <IconButton size='small' aria-label='next' component={ButtonNext} className={classes.next}>
+                  <NavigateNextIcon/>
+               </IconButton>
+            </div>
+         </CarouselProvider>
+      </div>
    );
 }
 
@@ -127,7 +160,7 @@ function StoreItem(props) {
       <LazyLoad resize once placeholder={<StoreItemSkeleton className={props.className}/>}>
          <Grow in={true}>
             <Card className={props.className} variant="outlined">
-               <CardActionArea>
+               <CardActionArea component={RouteLink} to={'/store/' + props.data.id}>
                   <CardHeader
                      avatar={
                         <Avatar aria-label={props.data.author} className={classes.avatar}>
@@ -406,9 +439,9 @@ function BottomBar(props) {
    }))();
    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'/>
+         <BottomNavigationAction label={t('Store')} value='store' icon={<StoreIcon/>} component={RouteLink} to='/store'/>
+         <BottomNavigationAction label={t('Library')} value='library' icon={<LibraryBooksIcon/>} component={RouteLink} to='/library'/>
+         <BottomNavigationAction label={t('Account')} value='account' icon={<AccountCircleIcon/>} component={RouteLink} to='/account'/>
       </BottomNavigation>
    );
 }
@@ -417,10 +450,17 @@ function TopBar(props) {
    const { t } = useTranslation();
    const classes = makeStyles((theme) => ({
       title: { flexGrow: 1 },
+      backButton: { marginRight: theme.spacing(1) },
    }))();
+   const search = (props.components[1] !== 'account');
    return (
       <AppBar position="fixed">
          <Toolbar variant="dense">
+            <Grow in={props.components.length > 2} unmountOnExit>
+               <IconButton edge="start" color="inherit" aria-label="back" className={classes.backButton} onClick={() => window.history.back()}>
+                  <NavigateBeforeIcon/>
+               </IconButton>
+            </Grow>
             <Typography variant="h6" className={classes.title}>
                {t('DoujinSea')}
             </Typography>
@@ -433,12 +473,14 @@ function TopBar(props) {
                </StyledBadge>
             </IconButton>
          </Toolbar>
-         <Collapse in={props.search} timeout='auto' unmountOnExit><ItemSearch/></Collapse>
+         <Collapse in={search} timeout='auto' unmountOnExit><ItemSearch/></Collapse>
       </AppBar>
    );
 }
 
 function Routing() {
+   var location = useLocation();
+   const components = location.pathname.split('/');
    const classes = makeStyles((theme) => ({
       content: {
          paddingTop: 105,
@@ -446,20 +488,19 @@ function Routing() {
          minHeight: '100vh',
       },
    }))();
-   var location = useLocation();
-   const path = location.pathname.split('/')[1];
    return (
       <>
-         <TopBar search={path !== 'account'}/>
+         <TopBar components={components}/>
          <Paper className={classes.content} elevation={0} square>
             <Switch>
+               <Route path='/store/:id' component={StoreItemDetails}/>
                <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}/>
+         <BottomBar path={components[1]}/>
       </>
    );
 }
-- 
cgit v1.2.3