diff options
Diffstat (limited to 'src/App.js')
| -rw-r--r-- | src/App.js | 197 |
1 files changed, 132 insertions, 65 deletions
@@ -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> </> ); |