delete stuff again

photo/backup/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

photo/backup/App.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-    return ( <
-        button > 大家好 < /button>
-    );
-}
-export default App;

photo/backup/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

photo/backup/ImageList.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
-import tileData from './tileData';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-around',
-        overflow: 'hidden',
-    },
-    gridList: {
-        width: '100%',
-        height: '100%',
-    },
-    icon: {
-        color: 'rgba(255, 255, 255, 0.54)',
-    },
-}));
-
-/**
- * The example data is structured as follows:
- *
- * import image from 'path/to/image.jpg';
- * [etc...]
- *
- * const tileData = [
- *   {
- *     img: image,
- *     title: 'Image',
- *     author: 'author',
- *     cols: 2,
- *   },
- *   {
- *     [etc...]
- *   },
- * ];
- */
-export default function ImageGridList() {
-    const classes = useStyles();
-    return ( <
-        div className = { classes.root } >
-        <
-        GridList cellHeight = { 140 }
-        className = { classes.gridList }
-        /* newadd */
-
-        /* end */
-        cols = { 6 } > {
-            tileData.map((tile) => ( <
-                GridListTile key = { tile.img }
-                cols = { tile.cols || 1 } >
-                <
-                img src = { tile.img }
-                alt = { tile.title }
-                /> < /
-                GridListTile >
-            ))
-        } <
-        /GridList> < /
-        div >
-    );
-    /*
-        return ( <
-            div className = { classes.root } >
-            <
-            GridList cellHeight = { 160 }
-            className = { classes.gridList } >
-            <
-            GridListTile key = "Subheader"
-            cols = { 2 }
-            style = {
-                { height: 'auto' }
-            } >
-            <
-            ListSubheader component = "div" > December < /ListSubheader> < /
-            GridListTile > {
-                tileData.map((tile) => ( < GridListTile key = { tile.img }
-                    cols = { tile.cols || 1 } >
-                    <
-                    img src = { tile.img }
-                    alt = { tile.title }
-                    /> < /
-                    GridListTile >
-                ))
-            } <
-            /GridList> < /
-            div >
-        );
-        */
-    /*
-    return ( <
-        div className = { classes.root } >
-        <
-        GridList cellHeight = { 140 }
-        className = { classes.gridList }
-        cols = { 4 } > {
-            tileData.map((tile) => ( <
-                GridListTile key = { tile.img }
-                cols = { tile.cols || 1 } >
-                <
-                img src = { tile.img }
-                alt = { tile.title }
-                /> < /
-                GridListTile >
-            ))
-        } <
-        /GridList> < /
-        div >
-    );
-    */
-}

photo/backup/SearchBar.js

@@ -1,179 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import List from '@material-ui/core/List';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-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 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 Button from '@material-ui/core/Button';
-const drawerWidth = 240;
-
-const useStyles = makeStyles((theme) => ({
-    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),
-    },
-}));
-
-export default function MiniDrawer() {
-    const classes = useStyles();
-    const theme = useTheme();
-    const [open, setOpen] = React.useState(false);
-
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-
-    return ( <
-        div className = { classes.root } >
-        <
-        CssBaseline / >
-        <
-        AppBar position = "fixed"
-        className = {
-            clsx(classes.appBar, {
-                [classes.appBarShift]: open,
-            })
-        } >
-        <
-        Toolbar >
-        <
-        IconButton color = "inherit"
-        onClick = { handleDrawerOpen }
-        edge = "start"
-        className = {
-            clsx(classes.menuButton, {
-                [classes.hide]: open,
-            })
-        } >
-        <
-        MenuIcon / >
-        <
-        /IconButton> <
-        Typography variant = "h6"
-        noWrap >
-        谷狗相薄 <
-        /Typography> < /
-        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 === 'rtl' ? < ChevronRightIcon / > : < ChevronLeftIcon / > } <
-        /IconButton> < /
-        div > <
-        Divider / >
-        <
-        List > {
-            ['相片', '共享', '相簿', '實用工具'].map((text, index) => ( <
-                ListItem button key = { text } >
-                <
-                ListItemIcon > { index == 0 ? < PhotoIcon / > : index == 1 ? < ShareIcon / > : index == 2 ? < PhotoAlbumIcon / > : < LibraryAddCheckIcon / > } < /ListItemIcon> <
-                ListItemText primary = { text }
-                /> < /
-                ListItem >
-            ))
-        } <
-        /List> < /
-        Drawer > <
-        main className = { classes.content } >
-        <
-        div className = { classes.toolbar }
-        /> <
-        ImageList / > < /
-        main > <
-        /div>
-    );
-}

photo/backup/folder.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
-import tileData from './tileData';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-around',
-        overflow: 'hidden',
-        backgroundColor: theme.palette.background.paper,
-    },
-    gridList: {
-        width: '100%',
-        height: '100%',
-    },
-    icon: {
-        color: 'rgba(255, 255, 255, 0.54)',
-    },
-
-}));
-
-/**
- * The example data is structured as follows:
- *
- * import image from 'path/to/image.jpg';
- * [etc...]
- *
- * const tileData = [
- *   {
- *     img: image,
- *     title: 'Image',
- *     author: 'author',
- *   },
- *   {
- *     [etc...]
- *   },
- * ];
- */
-export default function TitlebarGridList() {
-    const classes = useStyles();
-
-    return ( <
-        div className = { classes.root } >
-        <
-        GridList cellHeight = { 180 }
-        cols = { 5 }
-        className = { classes.gridList } > {
-            tileData.map((tile) => ( <
-                    GridListTile key = { tile.img } >
-                    <
-                    img src = { tile.img }
-                    alt = { tile.title }
-                    /> <
-                    GridListTileBar title = { tile.title }
-                    subtitle = { < span > by: { tile.author } < /span>}
-                        actionIcon = { <
-                            IconButton
-                            className = { classes.icon } >
-                            <
-                            InfoIcon / >
-                            <
-                            /IconButton>
-                        }
-                        /> < /
-                        GridListTile >
-                    ))
-            } <
-            /GridList> < /
-            div >
-        );
-    }

photo/backup/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

photo/backup/index.js

@@ -1,33 +0,0 @@
-/*
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-import SearchAppBar from './SearchBar';
-import ButtonAppBar from './testM';
-import preview from './modal';
-ReactDOM.render( <
-    div >
-    <
-    ButtonAppBar / >
-    <
-    App / >
-    <
-    preview / >
-    <
-    /div>,
-    document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
-*/
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Demo from './modal';
-
-ReactDOM.render( < Demo / > , document.querySelector('#root'));

photo/backup/modal 2.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
-import Fade from '@material-ui/core/Fade';
-
-
-function rand() {
-    return Math.round(Math.random() * 20) - 10;
-}
-
-function getModalStyle() {
-    const top = 50 + rand();
-    const left = 50 + rand();
-
-    return {
-        top: `${top}%`,
-        left: `${left}%`,
-        transform: `translate(-${top}%, -${left}%)`,
-    };
-}
-
-const useStyles = makeStyles((theme) => ({
-    paper: {
-        position: 'absolute',
-        width: 400,
-        backgroundColor: theme.palette.background.paper,
-        border: '2px solid #000',
-        boxShadow: theme.shadows[5],
-        padding: theme.spacing(2, 4, 3),
-    },
-}));
-
-export default function SimpleModal() {
-    const classes = useStyles();
-    // getModalStyle is not a pure function, we roll the style only on the first render
-    const [modalStyle] = React.useState(getModalStyle);
-    const [open, setOpen] = React.useState(false);
-
-    const handleOpen = () => {
-        setOpen(true);
-    };
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
-    /*
-    return ( <
-        div >
-        <
-        button type = "button"
-        onClick = { handleOpen } >
-        Open Modal <
-        /button> <
-        Modal open = { open }
-        onClose = { handleClose } >
-        <
-        div style = { modalStyle }
-        className = { classes.paper } > 123 < /div>< /
-        Modal > < /
-        div >
-    );
-    */
-    return ( <
-        div >
-        <
-        button type = "button"
-        onClick = { handleOpen } >
-        Open Modal <
-        /button> <
-        Modal open = { open }
-        onClose = { handleClose } >
-        <
-        div >
-        <
-        Fade in = { open } >
-        <
-        div > 123 < SimpleModal / > < /div>
-
-        <
-        /Fade> < /
-        div > < /
-        Modal > < /
-        div >
-    );
-}

photo/backup/modal.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-
-const useStyles = makeStyles((theme) => ({
-    modal: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    paper: {
-        backgroundColor: theme.palette.background.paper,
-        border: '2px solid #000',
-        boxShadow: theme.shadows[5],
-        padding: theme.spacing(2, 4, 3),
-    },
-}));
-
-export default function TransitionsModal() {
-    const classes = useStyles();
-    const [open, setOpen] = React.useState(false);
-
-    const handleOpen = () => {
-        setOpen(true);
-    };
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
-    return (
-        <div>
-            <button type="button" onClick={handleOpen}>
-                react-transition-group
-      </button>
-            <Modal
-                aria-labelledby="transition-modal-title"
-                aria-describedby="transition-modal-description"
-                className={classes.modal}
-                open={open}
-                onClose={handleClose}
-                closeAfterTransition
-                BackdropComponent={Backdrop}
-                BackdropProps={{
-                    timeout: 500,
-                }}
-            >
-                <Fade in={open}>
-                    <div className={classes.paper}>
-                        <h2 id="transition-modal-title">Transition modal</h2>
-                        <p id="transition-modal-description">react-transition-group animates me.</p>
-                    </div>
-                </Fade>
-            </Modal>
-        </div>
-    );
-}

photo/backup/serviceWorker.js

@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then(registration => {
-        registration.unregister();
-      })
-      .catch(error => {
-        console.error(error.message);
-      });
-  }
-}

photo/backup/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';

photo/backup/testIL.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
-import tileData from './tileData';
-import StarBorderIcon from '@material-ui/icons/StarBorderOutlined';
-import clsx from 'clsx';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-around',
-        overflow: 'hidden',
-        backgroundColor: theme.palette.background.paper,
-    },
-    gridList: {
-        width: '100%',
-        height: '100%',
-    },
-    icon: {
-        color: 'rgba(255, 255, 255, 0.54)',
-    },
-    titleBar: {
-        background: 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
-            'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
-    },
-    titleGrid: {},
-    titleGridOpen: {
-        transition: theme.transitions.create('height', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    },
-    titleGridClose: {
-        transition: theme.transitions.create('height', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-    },
-}));
-
-/**
- * The example data is structured as follows:
- *
- * import image from 'path/to/image.jpg';
- * [etc...]
- *
- * const tileData = [
- *   {
- *     img: image,
- *     title: 'Image',
- *     author: 'author',
- *   },
- *   {
- *     [etc...]
- *   },
- * ];
- */
-
-
-export default function TitlebarGridList() {
-    const classes = useStyles();
-    const [Hovering, isHovering] = React.useState(false);
-
-    const handleMouseHover = value => () => {
-        //isHovering(value);
-        //disable first, not understand how to do easing
-        isHovering(false);
-    }
-
-    return ( <
-        div className = { classes.root } >
-        <
-        GridList cellHeight = { 180 }
-        cols = { 5 }
-        className = { classes.gridList } >
-        <
-        GridListTile key = "Subheader"
-        cols = { 5 }
-        style = {
-            { height: 'auto' }
-        } >
-        <
-        ListSubheader component = "div" > December < /ListSubheader> < /
-        GridListTile > {
-            tileData.map((tile) => ( <
-                GridListTile key = { tile.img } >
-                <
-                img src = { tile.img }
-                alt = { tile.title }
-                onMouseEnter = { handleMouseHover(true) }
-                onMouseLeave = { handleMouseHover(false) }
-                />{Hovering && <GridListTileBar
-                title = { tile.title }
-                titlePosition = "top"
-                onMouseEnter = { handleMouseHover(true) }
-                onMouseLeave = { handleMouseHover(false) }
-                className = {
-                    clsx(classes.titleGrid, {
-                        [classes.titleGridOpen]: Hovering,
-                        [classes.titleGridClose]: !Hovering,
-                    })
-                }
-                actionIcon = { <
-                    IconButton
-                    className = { classes.icon } >
-                    <
-                    StarBorderIcon / >
-                    <
-                    /IconButton>
-                }
-                actionPosition = "left"
-                className = { classes.titleBar }
-                />}< /
-                GridListTile >
-            ))
-        } <
-        /GridList> < /
-        div >
-    );
-}

photo/backup/testM.js

@@ -1,235 +0,0 @@
-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 InboxIcon from '@material-ui/icons/MoveToInbox';
-import MailIcon from '@material-ui/icons/Mail';
-import ImageList from './testIL';
-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';
-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),
-    },
-}));
-
-export default function ButtonAppBar() {
-    const classes = useStyles();
-    const [open, setOpen] = React.useState(false);
-    const theme = useTheme();
-
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-
-    return ( <
-        div className = { classes.root } >
-        <AppBar position = "fixed"
-        style = {
-            { background: '#2196f3' }
-        }
-        className = {
-            clsx(classes.appBar, {
-                [classes.appBarShift]: open,
-            })
-        } >
-        <
-        Toolbar >
-        <
-        IconButton color = "inherit"
-        onClick = { handleDrawerOpen }
-        edge = "start"
-        className = {
-            clsx(classes.menuButton, {
-                [classes.hide]: open,
-            })
-        } >
-        <
-        MenuIcon / >
-        <
-        /IconButton>  <
-        Typography variant = "h6"
-        className = { classes.title } >
-        谷狗相薄 </Typography>  <Button
-        variant = "contained"
-        startIcon = { < CloudUploadIcon / > } >
-        Upload </Button><IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
-        HelpOutlineIcon / >
-        </IconButton> <IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
-        SettingsIcon / >
-        </IconButton> <Avatar alt="Remy Sharp" 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 === 'rtl' ? < ChevronRightIcon / > : < ChevronLeftIcon / > } <
-        /IconButton> < /
-        div > <
-        Divider / >
-        <
-        List > {
-            ['相片', '共享', '相簿', '實用工具'].map((text, index) => ( <
-                ListItem button key = { text } >
-                <
-                ListItemIcon > { index == 0 ? < PhotoIcon / > : index == 1 ? < ShareIcon / > : index == 2 ? < PhotoAlbumIcon / > : < LibraryAddCheckIcon / > } < /ListItemIcon> <
-                ListItemText primary = { text }
-                /> < /
-                ListItem >
-            ))
-        } <
-        Divider / > {
-            ['儲存空間'].map((text, index) => ( <
-                ListItem button key = { text } >
-                <
-                ListItemIcon > { < CloudIcon / > } < /ListItemIcon> <
-                ListItemText primary = { text }
-                secondary = <
-                BorderLinearProgress variant = "determinate"
-                value = { 50 }
-                /> / >
-                <
-                /
-                ListItem >
-            ))
-        } < /
-        List > < /
-        Drawer > <
-        main className = { classes.content } >
-        <
-        div className = { classes.toolbar }
-        /> <
-        ImageList / > < /
-        main > < /
-        div >
-    );
-}

photo/backup/tileData.js

@@ -1,15 +0,0 @@
-const tileData = [{
-    img: '/images/Q1_PHYS.jpeg',
-    title: 'Tasty burger',
-    author: 'director90',
-}, {
-    img: '/images/Q12.jpeg',
-    title: 'Tasty burger',
-    author: 'director90',
-}, {
-    img: '/images/Q1234.jpeg',
-    title: 'Tasty burger',
-    author: 'director90',
-}, ];
-
-export default tileData;