Clear up rubbish

photo/src/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/src/App.js

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

photo/src/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/src/FolderList.js

@@ -6,7 +6,6 @@ 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 { useEffect } from 'react';
 import imageList from './imageList.js';
 import LinearProgress from '@material-ui/core/LinearProgress';

photo/src/MiddlePanel.js

@@ -1,55 +0,0 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
-import ImageList from './imageList';
-
-class MiddlePanel extends Component {
-    constructor() {
-        super();
-        this.state = {
-            name: "React",
-            showHideDemo1: false,
-            showHideDemo2: false,
-            showHideDemo3: false
-        };
-        this.hideComponent = this.hideComponent.bind(this);
-    }
-
-    hideComponent(name) {
-        console.log(name);
-        switch (name) {
-            case "showHideDemo1":
-                this.setState({ showHideDemo1: !this.state.showHideDemo1 });
-                break;
-            case "showHideDemo2":
-                this.setState({ showHideDemo2: !this.state.showHideDemo2 });
-                break;
-            case "showHideDemo3":
-                this.setState({ showHideDemo3: !this.state.showHideDemo3 });
-                break;
-        }
-    }
-
-    render() {
-        const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;
-        return (
-            <div>
-                {showHideDemo1 && <ImageList />}
-                {showHideDemo2 && <ImageList />}
-                {showHideDemo3 && <ImageList />}
-                <div>
-                    <button onClick={() => this.hideComponent("showHideDemo1")}>
-                        Click to hide Demo1 component
-          </button>
-                    <button onClick={() => this.hideComponent("showHideDemo2")}>
-                        Click to hide Demo2 component
-          </button>
-                    <button onClick={() => this.hideComponent("showHideDemo3")}>
-                        Click to hide Demo3 component
-          </button>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default MiddlePanel;

photo/src/SearchAppMenu.js

@@ -55,7 +55,6 @@ 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';

photo/src/gp.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import './react-google-photo/styles.css';
-import GooglePhoto from 'react-google-photo';
-import Gallery from "react-photo-gallery";
-
-function GP() {
-    // https://unsplash.com/collections/589374/textures
-    const images = [
-        {
-            src:
-                'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
-            width: 1500,
-            height: 1000,
-        },
-        {
-            src:
-                'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
-            width: 666,
-            height: 1000,
-        },
-        {
-            src:
-                'https://images.unsplash.com/photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
-            width: 1500,
-            height: 844,
-        },
-    ]
-    const [open, setOpen] = React.useState(false)
-    const galleryImages = images
-    return (
-        <>
-            <Gallery photos={galleryImages} onClick={() => setOpen(true)} />
-            <GooglePhoto open={open} src={images} onClose={() => setOpen(false)} />
-        </>
-    )
-}
-export default GP;

photo/src/index.js

@@ -2,18 +2,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
 import SearchAppMenu from './SearchAppMenu';
-//import ButtonAppBar from './testM';
-//import preview from './modal';
-import GP from './gp';
-//import MainPanel from './MainPanel';
+
 
 ReactDOM.render(
     <div>
         <SearchAppMenu />
-        <App />
         <preview />
     </div>,
     document.getElementById('root')

photo/src/react-google-photo/styles.css

@@ -1,98 +0,0 @@
-.react-google-photo-overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: black;
-  overflow: hidden;
-  z-index: 1;
-}
-
-.react-google-photo-column {
-  position: absolute;
-  width: 30%;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-  transition: opacity 200ms ease;
-  opacity: 0;
-}
-.react-google-photo-column:hover {
-  opacity: 1;
-}
-.react-google-photo-left-column {
-  left: 0;
-}
-.react-google-photo-right-column {
-  right: 0;
-}
-
-.react-google-photo-arrow-button-return {
-  height: 48px;
-  width: 48px;
-  position: absolute;
-  top: 8;
-  left: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: opacity 200ms ease;
-  opacity: 1;
-}
-
-.react-google-photo-arrow-button {
-  background-color: rgba(66, 66, 66, 0.54);
-  border-radius: 28px;
-  position: absolute;
-  top: 50%;
-  margin-top: -28px;
-  height: 56px;
-  width: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 200ms ease;
-  opacity: 1;
-}
-.react-google-photo-arrow-button-hide {
-  opacity: 0;
-}
-.react-google-photo-arrow-button-left {
-  left: 28px;
-}
-.react-google-photo-arrow-button-right {
-  right: 28px;
-}
-
-.react-google-photo-overlay-image {
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  transform: translateX(50px);
-  transition: opacity 500ms ease, transform 500ms ease;
-}
-.react-google-photo-overlay-image-open {
-  visibility: initial;
-  opacity: 1;
-  transform: translateX(0px);
-}
-
-@keyframes react-google-photo-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes react-google-photo-fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

photo/src/showImage.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/src/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;