updated some useful stuff

.gitignore

@@ -0,0 +1,2 @@
+
+photo/public/backend_test/

photo/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/photo/public/
 
 # misc
 .DS_Store

photo/public/backend_production/config.js

@@ -0,0 +1,5 @@
+var results = {};
+results["username"] = USERNAME;
+results["usericon"] = USERICON;
+
+sendJSONResp(JSON.stringify(results));

photo/src/FolderList.js

@@ -62,11 +62,13 @@ export default function TitlebarGridList(props) {
     }
 
     useEffect(() => {
-        //fetch("http://localhost:3000/listFolder")
+        fetch("/backend_test/listFolder", {})
+        /*
         fetch("/system/ajgi/interface?script=/Photo/backend/listFolder.js", {
             method: 'post',
             body: JSON.stringify({ folder: folderName })
         })
+        */
             .then(res => res.json())
             .then(
                 (result) => {

photo/src/ImageList.js

@@ -19,6 +19,8 @@ class imageList extends React.Component {
     }
 
     componentDidMount() {
+        fetch("/backend_test/listFile", {})
+        /*
         fetch("/system/ajgi/interface?script=/Photo/backend/listFile.js", {
                 method: 'post',
                 headers: {
@@ -27,6 +29,7 @@ class imageList extends React.Component {
                 },
                 body: JSON.stringify({ folder: this.props.path })
             })
+            */
             .then(res => res.json())
             .then(
                 (result) => {

photo/src/SearchAppMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
+import { useEffect } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -71,6 +72,7 @@ const BorderLinearProgress = withStyles((theme) => ({
     },
 }))(LinearProgress);
 
+
 const useStyles = makeStyles((theme) => ({
     root: {
         flexGrow: 1,
@@ -172,14 +174,14 @@ const useStyles = makeStyles((theme) => ({
         //right: theme.spacing(2),
         right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
         Mcontainer: {
-                display: "flex",
-                flexWrap: "wrap",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                height: "100%",
-                width: "100%",
-                alignItems: "center"
+            display: "flex",
+            flexWrap: "wrap",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: "100%",
+            width: "100%",
+            alignItems: "center"
         },
     },
 }));
@@ -188,8 +190,15 @@ function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
 
-export default function ButtonAppBar() {
+export default function Main(props) {
+//FOR AJAX
     const classes = useStyles();
+
+    const [error, setError] = React.useState(null);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+
+//END
     const theme = useTheme();
     const [open, setOpen] = React.useState(false);
 
@@ -230,7 +239,7 @@ export default function ButtonAppBar() {
 
     const [folderName, setFolderName] = React.useState('user:/Photo/Photo/uploads/');
 
-    
+
     const setFolderNameF = (folderN) => {
         setFolderName(folderN);
         console.log("3" + folderName);
@@ -255,54 +264,82 @@ export default function ButtonAppBar() {
                 setAlertOpen(true);
         }
     }
-    //1
-    return (
-       
-    
-        <div className={classes.root}>
-            <AppBar position="fixed" style={{ background: '#2196f3' }} className={
-                clsx(classes.appBar, {
-                    [classes.appBarShift]: open,
-                })
-            }>
-                <Toolbar >
-                    <IconButton edge="start" onClick={handleDrawerOpen} className={
-                        clsx(classes.menuButton, {
-                            [classes.hide]: open,
-                        })
-                    } className={classes.menuButton} color="inherit" aria-label="menu">
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" className={classes.title}>
-                        ArOZ Photo
-                    </Typography>
-                    <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleAlertClick}>Upload</Button>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="help" onClick={handleAlertClick}>
-                        <HelpOutlineIcon />
-                    </IconButton>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleSettingOpen}>
-                        <SettingsIcon />
-                    </IconButton>
-                    <Avatar alt="ArOZ Admin" src="/static/images/avatar/1.jpg" />
-                </Toolbar>
-            </AppBar>
-            <Drawer
-                variant="permanent"
-                className={
-                    clsx(classes.drawer, {
-                        [classes.drawerOpen]: open,
-                        [classes.drawerClose]: !open,
-                    })
+
+    useEffect(() => {
+        fetch("/backend_test/config", {})
+            /*
+            fetch("/system/ajgi/interface?script=/Photo/backend/listFolder.js", {
+                method: 'post',
+                body: JSON.stringify({ folder: folderName })
+            })
+            */
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItems(result);
+                },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
                 }
-                classes={
-                    {
-                        paper: clsx({
+            )
+    }, [])
+
+
+    if (error) {
+        return <div>Error: {error.message} (Config.js)</div>;
+    } else if (!isLoaded) {
+        return <div><LinearProgress /></div>;
+    } else {
+        return (
+            <div className={classes.root}>
+                <AppBar position="fixed" style={{ background: '#2196f3' }} className={
+                    clsx(classes.appBar, {
+                        [classes.appBarShift]: open,
+                    })
+                }>
+                    <Toolbar >
+                        <IconButton edge="start" onClick={handleDrawerOpen} className={
+                            clsx(classes.menuButton, {
+                                [classes.hide]: open,
+                            })
+                        } className={classes.menuButton} color="inherit" aria-label="menu">
+                            <MenuIcon />
+                        </IconButton>
+                        <Typography variant="h6" className={classes.title}>
+                            ArOZ Photo
+                    </Typography>
+                        <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleAlertClick}>Upload</Button>
+                        <IconButton style={{ color: '#ffffff' }} aria-label="help" onClick={handleAlertClick}>
+                            <HelpOutlineIcon />
+                        </IconButton>
+                        <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleSettingOpen}>
+                            <SettingsIcon />
+                        </IconButton>
+                        <Avatar alt={items.username} src={items.usericon} />
+                    </Toolbar>
+                </AppBar>
+                <Drawer
+                    variant="permanent"
+                    className={
+                        clsx(classes.drawer, {
                             [classes.drawerOpen]: open,
                             [classes.drawerClose]: !open,
-                        }),
+                        })
                     }
-                }>
-                <div className={classes.toolbar}>
+                    classes={
+                        {
+                            paper: clsx({
+                                [classes.drawerOpen]: open,
+                                [classes.drawerClose]: !open,
+                            }),
+                        }
+                    }>
+                    <div className={classes.toolbar}>
                         <IconButton onClick={handleDrawerClose}>
                             {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
                         </IconButton>
@@ -318,24 +355,22 @@ export default function ButtonAppBar() {
                     </List>
                     <Divider />
                     <List>
-                        {['Storage'].map((text, index) => (
-                            <ListItem button key={text}>
-                                <ListItemIcon>{< CloudIcon />}</ListItemIcon>
-                                <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={0} />} />
+                            <ListItem button key="Storage">
+                                <ListItemIcon>< CloudIcon /></ListItemIcon>
+                                <ListItemText primary="Storage" secondary={<BorderLinearProgress variant="determinate" value={items.quota} />} />
                             </ListItem>
-                        ))}
                     </List>
-            </Drawer>
-            <main className={classes.content}>
-                <div className={classes.toolbar} />
-                {Imagelistopen && <ImageList path={folderName}/>}
-                {Folderlistopen && <FolderList onChange={setFolderNameF} folderName={setFolderNameF}/>}
-            </main>
-            <Snackbar open={Alertopen} autoHideDuration={6000} onClose={handleAlertClose}>
-                <Alert onClose={handleAlertClose} severity="error">
-                    This function has not been implemented on this platform (aCloud 0x0)
+                </Drawer>
+                <main className={classes.content}>
+                    <div className={classes.toolbar} />
+                    {Imagelistopen && <ImageList path={folderName} />}
+                    {Folderlistopen && <FolderList onChange={setFolderNameF} folderName={setFolderNameF} />}
+                </main>
+                <Snackbar open={Alertopen} autoHideDuration={6000} onClose={handleAlertClose}>
+                    <Alert onClose={handleAlertClose} severity="error">
+                        This function has not been implemented on this platform (aCloud 0x0)
         </Alert>
-            </Snackbar>
+                </Snackbar>
 
                 <Modal
                     aria-labelledby="transition-modal-title"
@@ -350,33 +385,34 @@ export default function ButtonAppBar() {
                     }}
                 >
                     <Fade in={Settingopen}>
-                    <div className={classes.paper}>
-                        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
-                            <IconButton color="primary" aria-label="close" onClick={handleSettingClose}>
-                                <CloseIcon />
-                            </IconButton>
-                        </Grid>
-                        <List>
-                            <ListItem button>
-                                <ListItemAvatar>
-                                    <Avatar>
-                                        <InfoIcon />
-                                    </Avatar>
-                                </ListItemAvatar>
-                                <ListItemText primary="Version" secondary="v1.0.0-alpha" />
-                            </ListItem>
-                            <ListItem button>
-                                <ListItemAvatar>
-                                    <Avatar>
-                                        <InfoIcon />
-                                    </Avatar>
-                                </ListItemAvatar>
-                                <ListItemText primary="Developer" secondary="Alanyeung.co" />
-                            </ListItem>
-                        </List>
+                        <div className={classes.paper}>
+                            <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+                                <IconButton color="primary" aria-label="close" onClick={handleSettingClose}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </Grid>
+                            <List>
+                                <ListItem button>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <InfoIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <ListItemText primary="Version" secondary="v1.0.0-alpha" />
+                                </ListItem>
+                                <ListItem button>
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <InfoIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <ListItemText primary="Developer" secondary="Alanyeung.co" />
+                                </ListItem>
+                            </List>
                         </div>
                     </Fade>
                 </Modal>
-        </div>
-    );
+            </div>
+        );
+    }
 }

photo/src/SearchAppMenu.js_bk

@@ -0,0 +1,382 @@
+import React from 'react';
+import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import clsx from 'clsx';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Divider from '@material-ui/core/Divider';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InfoIcon from '@material-ui/icons/Info';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+import ImageList from './imageList';
+import PhotoIcon from '@material-ui/icons/Photo';
+import ShareIcon from '@material-ui/icons/Share';
+import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
+import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
+import Grid from '@material-ui/core/Grid';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+import SettingsIcon from '@material-ui/icons/Settings';
+import Avatar from '@material-ui/core/Avatar';
+import Icon from '@material-ui/core/Icon';
+import AddCircle from '@material-ui/icons/AddCircle';
+import CloudIcon from '@material-ui/icons/Cloud';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ImageIcon from '@material-ui/icons/Image';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Paper from '@material-ui/core/Paper';
+import TodayIcon from '@material-ui/icons/Today';
+import CropOriginalIcon from '@material-ui/icons/CropOriginal';
+import CameraIcon from '@material-ui/icons/Camera';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import CloseIcon from '@material-ui/icons/Close';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import MiddlePanel from './MiddlePanel';
+import FolderList from './FolderList';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+const drawerWidth = 240;
+
+const BorderLinearProgress = withStyles((theme) => ({
+    colorPrimary: {
+        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+    },
+    bar: {
+        borderRadius: 5,
+        backgroundColor: '#1a90ff',
+    },
+}))(LinearProgress);
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        flexGrow: 1,
+    },
+    menuButton: {
+        marginRight: theme.spacing(2),
+    },
+    title: {
+        flexGrow: 1,
+    },
+    toolbar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+    },
+    root: {
+        display: 'flex',
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    appBarShift: {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    menuButton: {
+        marginRight: 36,
+    },
+    hide: {
+        display: 'none',
+    },
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: 'nowrap',
+    },
+    drawerOpen: {
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: 'hidden',
+        width: theme.spacing(7) + 1,
+        [theme.breakpoints.up('sm')]: {
+            width: theme.spacing(9) + 1,
+        },
+    },
+    toolbar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(3),
+    },
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paper: {
+        backgroundColor: theme.palette.background.paper,
+        width: '100%',
+        height: '100%',
+        //boxShadow: theme.shadows[5],
+        //padding: theme.spacing(2, 4, 3),
+    },
+    fabL: {
+        position: 'absolute',
+        bottom: '50%',
+        left: theme.spacing(2),
+    },
+    fabR: {
+        position: 'absolute',
+        bottom: '50%',
+        //left: `calc(95% - ${theme.spacing(2)}px)`,
+        //right: theme.spacing(2),
+        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
+        Mcontainer: {
+                display: "flex",
+                flexWrap: "wrap",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                height: "100%",
+                width: "100%",
+                alignItems: "center"
+        },
+    },
+}));
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export default function ButtonAppBar() {
+    const classes = useStyles();
+    const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+
+    const handleDrawerOpen = () => {
+        setOpen(true);
+    };
+
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
+
+    const [Settingopen, setSettingOpen] = React.useState(false);
+
+    const handleSettingOpen = () => {
+        setSettingOpen(true);
+    };
+
+    const handleSettingClose = () => {
+        setSettingOpen(false);
+    };
+
+    const [Alertopen, setAlertOpen] = React.useState(false);
+
+    const handleAlertClick = () => {
+        setAlertOpen(true);
+    };
+
+    const handleAlertClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        setAlertOpen(false);
+    };
+
+    const [Imagelistopen, setImagelistOpen] = React.useState(true);
+    const [Folderlistopen, setFolderlistOpen] = React.useState(false);
+
+    const [folderName, setFolderName] = React.useState('user:/Photo/Photo/uploads/');
+
+    
+    const setFolderNameF = (folderN) => {
+        setFolderName(folderN);
+        console.log("3" + folderName);
+        setImagelistOpen(true);
+        setFolderlistOpen(false);
+    }
+
+    const handleClick = value => () => {
+        console.log(value);
+        switch (value) {
+            case "Photos":
+                setImagelistOpen(true);
+                setFolderlistOpen(false);
+                break;
+            case "Albums":
+                setFolderlistOpen(true);
+                setImagelistOpen(false);
+                break;
+            case "Sharing":
+                setAlertOpen(true);
+            case "Utilities":
+                setAlertOpen(true);
+        }
+    }
+    //1
+    return (
+       
+    
+        <div className={classes.root}>
+            <AppBar position="fixed" style={{ background: '#2196f3' }} className={
+                clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })
+            }>
+                <Toolbar >
+                    <IconButton edge="start" onClick={handleDrawerOpen} className={
+                        clsx(classes.menuButton, {
+                            [classes.hide]: open,
+                        })
+                    } className={classes.menuButton} color="inherit" aria-label="menu">
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" className={classes.title}>
+                        ArOZ Photo
+                    </Typography>
+                    <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleAlertClick}>Upload</Button>
+                    <IconButton style={{ color: '#ffffff' }} aria-label="help" onClick={handleAlertClick}>
+                        <HelpOutlineIcon />
+                    </IconButton>
+                    <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleSettingOpen}>
+                        <SettingsIcon />
+                    </IconButton>
+                    <Avatar alt="ArOZ Admin" src="/static/images/avatar/1.jpg" />
+                </Toolbar>
+            </AppBar>
+            <Drawer
+                variant="permanent"
+                className={
+                    clsx(classes.drawer, {
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    })
+                }
+                classes={
+                    {
+                        paper: clsx({
+                            [classes.drawerOpen]: open,
+                            [classes.drawerClose]: !open,
+                        }),
+                    }
+                }>
+                <div className={classes.toolbar}>
+                        <IconButton onClick={handleDrawerClose}>
+                            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                        </IconButton>
+                    </div>
+                    <Divider />
+                    <List>
+                        {['Photos', 'Sharing', 'Albums', 'Utilities'].map((text, index) => (
+                            <ListItem button key={text} onClick={handleClick(text)}>
+                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
+                                <ListItemText primary={text} />
+                            </ListItem>
+                        ))}
+                    </List>
+                    <Divider />
+                    <List>
+                        {['Storage'].map((text, index) => (
+                            <ListItem button key={text}>
+                                <ListItemIcon>{< CloudIcon />}</ListItemIcon>
+                                <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={0} />} />
+                            </ListItem>
+                        ))}
+                    </List>
+            </Drawer>
+            <main className={classes.content}>
+                <div className={classes.toolbar} />
+                {Imagelistopen && <ImageList path={folderName}/>}
+                {Folderlistopen && <FolderList onChange={setFolderNameF} folderName={setFolderNameF}/>}
+            </main>
+            <Snackbar open={Alertopen} autoHideDuration={6000} onClose={handleAlertClose}>
+                <Alert onClose={handleAlertClose} severity="error">
+                    This function has not been implemented on this platform (aCloud 0x0)
+        </Alert>
+            </Snackbar>
+
+                <Modal
+                    aria-labelledby="transition-modal-title"
+                    aria-describedby="transition-modal-description"
+                    className={classes.modal}
+                    open={Settingopen}
+                    onClose={handleSettingClose}
+                    closeAfterTransition
+                    BackdropComponent={Backdrop}
+                    BackdropProps={{
+                        timeout: 500,
+                    }}
+                >
+                    <Fade in={Settingopen}>
+                    <div className={classes.paper}>
+                        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+                            <IconButton color="primary" aria-label="close" onClick={handleSettingClose}>
+                                <CloseIcon />
+                            </IconButton>
+                        </Grid>
+                        <List>
+                            <ListItem button>
+                                <ListItemAvatar>
+                                    <Avatar>
+                                        <InfoIcon />
+                                    </Avatar>
+                                </ListItemAvatar>
+                                <ListItemText primary="Version" secondary="v1.0.0-alpha" />
+                            </ListItem>
+                            <ListItem button>
+                                <ListItemAvatar>
+                                    <Avatar>
+                                        <InfoIcon />
+                                    </Avatar>
+                                </ListItemAvatar>
+                                <ListItemText primary="Developer" secondary="Alanyeung.co" />
+                            </ListItem>
+                        </List>
+                        </div>
+                    </Fade>
+                </Modal>
+        </div>
+    );
+}