-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Closes #54
- Loading branch information
Showing
7 changed files
with
223 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, { useState, useEffect } from 'react' | ||
|
|
||
| import { get as getFromDb } from 'idb-keyval' | ||
| import classNames from 'classnames' | ||
|
|
||
| import { ROUTES } from '../../routes' | ||
| import config from '../../config' | ||
| import { SetConfigurationContext } from '../../globalContexts' | ||
|
|
||
| import Content from '../Content' | ||
|
|
||
| import TopBar from './TopBar' | ||
| import DrawerMenu from './DrawerMenu' | ||
|
|
||
| const MainApp = ({ classes }: { classes: any }) => { | ||
| const [ currentLocation, setCurrentLocation ] = useState(ROUTES.nemeses) | ||
| const moveTo = (route: string) => { | ||
| toggleDrawer() | ||
| setCurrentLocation(route) | ||
| } | ||
|
|
||
| const [ isLoading, setLoading ] = useState<boolean>(true) | ||
|
|
||
| const [ drawerIsOpen, setDrawerIsOpen ] = useState(false) | ||
| const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen) | ||
|
|
||
| const setsAndPromos = config.EXPANSIONS | ||
| const defaultSets = setsAndPromos.reduce( | ||
| (acc, set) => ({ ...acc, [set]: false }) , {} | ||
| ) | ||
| const [ configurationOfSets, setSets ] = useState<{[key: string]: boolean}>(defaultSets) | ||
|
|
||
| // Get sets from indexedDB | ||
| useEffect(() => { | ||
| getFromDb('sets') | ||
| .then(sets => { | ||
| if (sets !== undefined) { | ||
| setSets((sets as {[key: string]: boolean})) | ||
| } | ||
| setLoading(false) | ||
| }).catch(() => { | ||
| setLoading(false) | ||
| }) | ||
|
|
||
| // Effect clean up, used if the component unmounts before the effect is | ||
| // fully resolved. In this case just ignore the incoming promise result. | ||
| return () => { return /* NoOp */ } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <TopBar | ||
| classes={classes} | ||
| drawerIsOpen={drawerIsOpen} | ||
| currentLocation={currentLocation} | ||
| toggleDrawer={toggleDrawer} | ||
| /> | ||
| <DrawerMenu | ||
| drawerIsOpen={drawerIsOpen} | ||
| toggleDrawer={toggleDrawer} | ||
| classes={classes} | ||
| moveTo={moveTo} | ||
| /> | ||
| <SetConfigurationContext.Provider | ||
| value={{ configurationOfSets, setSets, sets: setsAndPromos }} | ||
| > | ||
| <Content | ||
| isLoading={isLoading} | ||
| route={currentLocation} | ||
| classes={classes} | ||
| className={ | ||
| classNames( | ||
| classes.content, | ||
| { [classes.contentShift]: drawerIsOpen }, | ||
| { [classes.loading]: isLoading } | ||
| ) | ||
| } | ||
| /> | ||
| </SetConfigurationContext.Provider> | ||
| </React.Fragment> | ||
| ) | ||
| } | ||
|
|
||
| export default MainApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react' | ||
|
|
||
| import styled from 'styled-components/macro' | ||
|
|
||
| import Button from '@material-ui/core/Button' | ||
| import Typography from '@material-ui/core/Typography' | ||
| import Link from '@material-ui/core/Link' | ||
| import Card from '@material-ui/core/Card' | ||
| import CardContent from '@material-ui/core/CardContent' | ||
|
|
||
| const Wrapper = styled('div')` | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-flow: column nowrap; | ||
| width: 100%; | ||
| ` | ||
|
|
||
| const ButtonWrapper = styled('div')` | ||
| text-align: center; | ||
| width: 100%; | ||
| .update-button { | ||
| margin-top: 24px; | ||
| } | ||
| ` | ||
|
|
||
| const StyledHeadline = styled(Typography)` | ||
| padding-bottom: 16px; | ||
| ` | ||
|
|
||
| const StyledCard = styled(Card)` | ||
| width: auto; | ||
| max-width: 320px; | ||
| margin: 56px auto 0; | ||
| text-align: center; | ||
| ` | ||
|
|
||
| const UpdateScreen = React.memo(({ newVersion }: { | ||
| newVersion: string | ||
| }) => { | ||
| return ( | ||
| <Wrapper> | ||
| <StyledCard> | ||
| <CardContent> | ||
| <StyledHeadline variant="h6" component="h1"> | ||
| New Version: { newVersion } | ||
| </StyledHeadline> | ||
| <Typography paragraph> | ||
| Good news, a new Version of Aeons End Randomizer is available :) | ||
| </Typography> | ||
| <Typography paragraph> | ||
| <Link href="https://github.com/on3iro/aeons-end-randomizer/releases" target="_blank">Changelog</Link> | ||
| </Typography> | ||
| <ButtonWrapper> | ||
| <Button | ||
| onClick={() => window.location.reload(true)} | ||
| variant="contained" | ||
| color="secondary" | ||
| className="update-button" | ||
| > | ||
| Update Now! | ||
| </Button> | ||
| </ButtonWrapper> | ||
| </CardContent> | ||
| </StyledCard> | ||
| </Wrapper> | ||
| ) | ||
| }) | ||
|
|
||
| export default UpdateScreen |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,69 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| import { get as getFromDb } from 'idb-keyval' | ||
|
|
||
| import classNames from 'classnames' | ||
| import 'rpg-awesome/css/rpg-awesome.min.css' | ||
|
|
||
| import axios from 'axios' | ||
|
|
||
| import CssBaseline from '@material-ui/core/CssBaseline' | ||
| import blue from '@material-ui/core/colors/blue' | ||
| import pink from '@material-ui/core/colors/pink' | ||
| import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles' | ||
| import blue from '@material-ui/core/colors/blue'; | ||
| import pink from '@material-ui/core/colors/pink'; | ||
| import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; | ||
| import { withStyles } from '@material-ui/core/styles' | ||
|
|
||
| import { styles } from './appStyles' | ||
| import { ROUTES } from '../../routes' | ||
| import config from '../../config' | ||
| import { SetConfigurationContext } from '../../globalContexts' | ||
|
|
||
| import Content from '../Content' | ||
|
|
||
| import TopBar from './TopBar' | ||
| import DrawerMenu from './DrawerMenu' | ||
|
|
||
| import UpdateScreen from './UpdateScreen' | ||
| import MainApp from './MainApp' | ||
|
|
||
| const App = ({ classes }: { classes: any }) => { | ||
| const [ drawerIsOpen, setDrawerIsOpen ] = useState(false) | ||
| const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen) | ||
|
|
||
| const [ currentLocation, setCurrentLocation ] = useState(ROUTES.nemeses) | ||
| const moveTo = (route: string) => { | ||
| toggleDrawer() | ||
| setCurrentLocation(route) | ||
| } | ||
| const theme = createMuiTheme({ | ||
| palette: { | ||
| primary: blue, | ||
| secondary: pink, | ||
| }, | ||
| typography: { | ||
| useNextVariants: true, | ||
| }, | ||
| }); | ||
|
|
||
| const [ isLoading, setLoading ] = useState<boolean>(true) | ||
|
|
||
| const setsAndPromos = config.EXPANSIONS | ||
| const defaultExpansionConfig = setsAndPromos.reduce( | ||
| (acc, set) => ({ ...acc, [set]: false }) , {} | ||
| ) | ||
| const [ configurationOfSets, setSets ] = useState<{[key: string]: boolean}>(defaultExpansionConfig) | ||
| type UpdateInformation = { | ||
| updateAvailable: boolean, | ||
| newVersion: string | ||
| } | ||
|
|
||
| const theme = createMuiTheme({ | ||
| palette: { | ||
| primary: blue, | ||
| secondary: pink, | ||
| }, | ||
| typography: { | ||
| useNextVariants: true, | ||
| }, | ||
| }); | ||
| const App = React.memo(({ classes }: { classes: any }) => { | ||
| const [ updateInformation, setUpdateAvailable ] = useState<UpdateInformation>({ | ||
| updateAvailable: false, | ||
| newVersion: '' | ||
| }) | ||
|
|
||
| // Get sets from indexedDB | ||
| useEffect(() => { | ||
| getFromDb('sets') | ||
| .then(sets => { | ||
| if (sets !== undefined) { | ||
| setSets((sets as {[key: string]: boolean})) | ||
| axios.get('https://api.github.com/repos/on3iro/aeons-end-randomizer/releases') | ||
| .then(response => { | ||
| const newestRelease = response.data[0] | ||
| const localAppVersion = process.env.REACT_APP_VERSION | ||
| const newVersion = newestRelease['tag_name'] | ||
| if (newVersion !== `v${localAppVersion}`) { | ||
| setUpdateAvailable({ | ||
| updateAvailable: true, | ||
| newVersion | ||
| }) | ||
| } | ||
| setLoading(false) | ||
| }).catch(() => { | ||
| setLoading(false) | ||
| }) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <MuiThemeProvider theme={theme}> | ||
| <div className={classes.root}> | ||
| <CssBaseline /> | ||
| <TopBar | ||
| classes={classes} | ||
| drawerIsOpen={drawerIsOpen} | ||
| currentLocation={currentLocation} | ||
| toggleDrawer={toggleDrawer} | ||
| /> | ||
| <DrawerMenu | ||
| drawerIsOpen={drawerIsOpen} | ||
| toggleDrawer={toggleDrawer} | ||
| classes={classes} | ||
| moveTo={moveTo} | ||
| /> | ||
| <SetConfigurationContext.Provider | ||
| value={{ configurationOfSets, setSets, sets: setsAndPromos }} | ||
| > | ||
| <Content | ||
| isLoading={isLoading} | ||
| route={currentLocation} | ||
| classes={classes} | ||
| className={ | ||
| classNames( | ||
| classes.content, | ||
| { [classes.contentShift]: drawerIsOpen }, | ||
| { [classes.loading]: isLoading } | ||
| ) | ||
| } | ||
| /> | ||
| </SetConfigurationContext.Provider> | ||
| { | ||
| updateInformation.updateAvailable | ||
| ? <UpdateScreen newVersion={updateInformation.newVersion} /> | ||
| : <MainApp classes={classes} /> | ||
| } | ||
| </div> | ||
| </MuiThemeProvider> | ||
| ); | ||
| } | ||
| }) | ||
|
|
||
| export default withStyles(styles, { withTheme: true })(App) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters