Merge pull request #11 from lynklody/master

misc changes on UI since last pr
OI-wiki · Oct 29, 2020 · 3467aa9 · 3467aa9
2 parents 0bd4aba + ad7fec1
commit 3467aa9
Show file tree

Hide file tree

Showing 21 changed files with 1,184 additions and 518 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "test-case-generator",
+  "homepage": "https://OI-wiki.github.io/test-data-generator",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,19 +10,22 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "notistack": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "3.4.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -37,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^3.1.0"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,28 +1,14 @@
 import React from 'react'
-import { Container, Typography, Grid, Button } from '@material-ui/core'
+import { Container, Typography, Grid } from '@material-ui/core'
 import Header from './Components/Header'
 import NavBar from './Components/NavigationBar'
 import InputArea from './Components/InputArea'
 import OutputArea from './Components/OutputArea'
 import Footer from './Components/Footer'
 import ButtonUtil from './Components/ButtonUtil'
-import { makeStyles } from '@material-ui/core/styles'
-import { grey } from '@material-ui/core/colors'
-import StartGenerator from './Store/Actions'
-import { useSelector } from 'react-redux'
-
-const useStyles = makeStyles({
-  button: {
-    marginTop: 100,
-    marginBottom: 20,
-    marginLeft: 80,
-    background: grey[300]
-  }
-})
+import { SnackbarProvider } from 'notistack'
 
 const App = () => {
-  const classes = useStyles()
-  const dataType = useSelector(state => state.dataType)
   return (
     <Container>
         <Typography component={"span"}>
@@ -41,7 +27,13 @@ const App = () => {
                         <Grid item>
                             <ButtonUtil />
                         </Grid>
-                        <Grid item><OutputArea/></Grid>
+
+                        <Grid item>
+                            <SnackbarProvider maxSnack={2}>
+                                <OutputArea />
+                            </SnackbarProvider>
+                        </Grid>
+
                     </Grid>
                 </Grid>
             </Grid>

diff --git a/src/Components/ButtonUtil.js b/src/Components/ButtonUtil.js
@@ -19,7 +19,7 @@ const useStyles = makeStyles({
 const ButtonUtil = () => {
     const classes = useStyles()
     const dispatch = useDispatch()
-    const dataType = useSelector(state => state.dataType)
+    const dataType = useSelector(state => state.rootReducer.dataType)
     const allState = useSelector(state => state)
 
     const StartGenerator = () => {
@@ -29,7 +29,7 @@ const ButtonUtil = () => {
                     startStringGen(allState, dispatch)
                     break
                 case 'Vector':
-                    startVectorGen(allState)
+                    startVectorGen(allState, dispatch)
                     break
                 default:
                     console.log('Please select data type')

diff --git a/src/Components/Footer.js b/src/Components/Footer.js
@@ -1,20 +1,26 @@
 import React from 'react'
 import { Container, Typography, CardContent } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import Favorite from '@material-ui/icons/Favorite'
+import red from '@material-ui/core/colors/red'
 
 const useStyles = makeStyles( (theme) => ({
     content: {
         color: theme.palette.footer.text
+    },
+    position: {
+        marginTop: 50
     }
 }));
 
 const Footer = () => {
     const classes = useStyles()
     return(
-        <Container>
+        <Container className={classes.position}>
             <Typography className={classes.content} component={"span"}>
                 <CardContent>
-                    footer
+                    Test Case Generator by OI Wiki, made with
+                    <Favorite style={{ color: red.A400 }} />
                 </CardContent>
             </Typography>
         </Container>

diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Container, Typography, AppBar, Box, Toolbar, IconButton,
     Button, Tooltip } from '@material-ui/core'
-import { Settings, GitHub, Menu, HighlightOff } from '@material-ui/icons'
+import { Settings, GitHub, Menu, HighlightOff, Palette } from '@material-ui/icons'
 import { makeStyles } from '@material-ui/core/styles'
 import { grey } from '@material-ui/core/colors'
 import { useDispatch, useSelector } from 'react-redux'
@@ -13,11 +13,11 @@ const useStyles = makeStyles((theme) => ({
     drawer: {
       width: drawerWidth,
     },
-    hiddenDrawer: {
-      [theme.breakpoints.down('md')]: {
-        display: 'none',
-      },
-    },
+    // hiddenDrawer: {
+    //   [theme.breakpoints.down('md')]: {
+    //     display: 'none',
+    //   },
+    // },
     appBar: {
       background: grey[50],
       color: grey[700]
@@ -27,21 +27,18 @@ const useStyles = makeStyles((theme) => ({
     },
     menuButton: {
       marginRight: theme.spacing(2),
-      [theme.breakpoints.up('lg')]: {
-        display: 'none',
-      },
+      // [theme.breakpoints.up('lg')]: {
+      //   display: 'none',
+      // },
     },
     // necessary for content to be below app bar
-    placeholder: {
-      [theme.breakpoints.down('md')]: {
-        minHeight: 64,
-      },
-      minHeight: 48 + 64,
-      alignItems: 'flex-start',
-    },
-    drawerPaper: {
-      width: drawerWidth,
-    },
+    // placeholder: {
+    //   [theme.breakpoints.down('md')]: {
+    //     minHeight: 64,
+    //   },
+    //   minHeight: 48 + 64,
+    //   alignItems: 'flex-start',
+    // },
     content: {
       flexGrow: 1,
       padding: theme.spacing(3),
@@ -50,10 +47,19 @@ const useStyles = makeStyles((theme) => ({
 
 const Header = () => {
     const dispatch = useDispatch();
-    const open = useSelector(state => state.open)
+    const open = useSelector(state => state.rootReducer.open)
     const classes = useStyles()
     const OIWikiGithub = 'https://github.com/OI-wiki/test-data-generator'
 
+    const [mode, setMode] = useState('light')
+    const changeMode = () => {
+        if (mode === 'light')
+          setMode('dark')
+        else
+          setMode('light')
+        console.log('switched MODE to', mode)
+    }
+
     return(
         <Container>
             <AppBar position="fixed" className={classes.appBar}>
@@ -63,7 +69,7 @@ const Header = () => {
                       display="flex"
                       flexGrow={1}
                     >
-                      {
+                      { 
                         open ?
                               <Tooltip title="关闭菜单">
                                     <IconButton
@@ -88,7 +94,7 @@ const Header = () => {
                               </Tooltip>
                       }
 
-                      <Button href="/" 
+                      <Button
                         // color="inherit"
                       >
                           <Typography component="span"
@@ -99,6 +105,11 @@ const Header = () => {
                     </Box>
                     {/* Right half */}
                     <Box>
+                        <Tooltip title="切换模式" placement="bottom" arrow>
+                          <IconButton onClick={changeMode}>
+                            <Palette />
+                          </IconButton>
+                        </Tooltip>
                         <Tooltip title="设置" placement="bottom" arrow>
                             <IconButton component="a" href="/settings" color="inherit">
                             <Settings />

diff --git a/src/Components/InputArea.js b/src/Components/InputArea.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles({
 
 const InputArea = () => {
     const classes = useStyles()
-    const dataType = useSelector(state => state.dataType)
+    const dataType = useSelector(state => state.rootReducer.dataType)
     const renderInputAreaByType = (type) => {
       console.log("current data type", type)
         if (type === 'String')