Add trash view

@@ -9,7 +9,7 @@ import {
   RecentFileList as RecentFileListView,
   RecentFileList as RecentFileListView,
   MyDrive as MyDriveView,
   MyDrive as MyDriveView,
   SharedFileList as SharedFileView,
   SharedFileList as SharedFileView,
-  Typography as TypographyView,
+  Trash as TrashView,
   Icons as IconsView,
   Icons as IconsView,
   Account as AccountView,
   Account as AccountView,
   Settings as SettingsView,
   Settings as SettingsView,
@@ -45,7 +45,7 @@ const Routes = () => {
         path="/recent"
         path="/recent"
       />
       />
       <RouteWithLayout
       <RouteWithLayout
-        component={TypographyView}
+        component={TrashView}
         exact
         exact
         layout={MainLayout}
         layout={MainLayout}
         path="/trash"
         path="/trash"

+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  Avatar,
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+  TablePagination
+} from '@material-ui/core';
+
+import { getInitials } from '../../../Trash/components/RemovedFileTable/node_modules/helpers';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  content: {
+    padding: 0
+  },
+  inner: {
+    minWidth: 1050
+  },
+  nameContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  avatar: {
+    marginRight: theme.spacing(2)
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const FileTable = props => {
+  const { className, files: files, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [selectedUsers, setSelectedUsers] = useState([]);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [page, setPage] = useState(0);
+
+  const handleSelectAll = event => {
+    const { files } = props;
+
+    let selectedUsers;
+
+    if (event.target.checked) {
+      selectedUsers = files.map(user => user.id);
+    } else {
+      selectedUsers = [];
+    }
+
+    setSelectedUsers(selectedUsers);
+  };
+
+  const handleSelectOne = (event, id) => {
+    const selectedIndex = selectedUsers.indexOf(id);
+    let newSelectedUsers = [];
+
+    if (selectedIndex === -1) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
+    } else if (selectedIndex === 0) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
+    } else if (selectedIndex === selectedUsers.length - 1) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelectedUsers = newSelectedUsers.concat(
+        selectedUsers.slice(0, selectedIndex),
+        selectedUsers.slice(selectedIndex + 1)
+      );
+    }
+
+    setSelectedUsers(newSelectedUsers);
+  };
+
+  const handlePageChange = (event, page) => {
+    setPage(page);
+  };
+
+  const handleRowsPerPageChange = event => {
+    setRowsPerPage(event.target.value);
+  };
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardContent className={classes.content}>
+        <PerfectScrollbar>
+          <div className={classes.inner}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={selectedUsers.length === files.length}
+                      color="primary"
+                      indeterminate={
+                        selectedUsers.length > 0 &&
+                        selectedUsers.length < files.length
+                      }
+                      onChange={handleSelectAll}
+                    />
+                  </TableCell>
+                  <TableCell>이름</TableCell>
+                  <TableCell>마지막으로 수정한 날짜</TableCell>
+                  <TableCell>크기</TableCell>
+                  <TableCell>공유</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {files.slice(0, rowsPerPage).map(file => (
+                  <TableRow
+                    className={classes.tableRow}
+                    hover
+                    key={file.id}
+                    selected={selectedUsers.indexOf(file.id) !== -1}
+                  >
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={selectedUsers.indexOf(file.id) !== -1}
+                        color="primary"
+                        onChange={event => handleSelectOne(event, file.id)}
+                        value="true"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className={classes.nameContainer}>
+                        {/* 파일 아이콘 */}
+                        <Typography variant="body1">{file.name}</Typography>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {moment(file.modifiedAt).format('DD/MM/YYYY')}
+                    </TableCell>
+                    <TableCell>{file.size}</TableCell>
+                    <TableCell>
+                      {file.share}
+                    </TableCell>
+                    
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </PerfectScrollbar>
+      </CardContent>
+      <CardActions className={classes.actions}>
+        <TablePagination
+          component="div"
+          count={files.length}
+          onChangePage={handlePageChange}
+          onChangeRowsPerPage={handleRowsPerPageChange}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[5, 10, 25]}
+        />
+      </CardActions>
+    </Card>
+  );
+};
+
+FileTable.propTypes = {
+  className: PropTypes.string,
+  files: PropTypes.array.isRequired
+};
+
+export default FileTable;

+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+import { TrashToolbar, RemovedFileTable } from './components';
+import mockData from './data';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(3)
+  },
+  content: {
+    marginTop: theme.spacing(2)
+  }
+}));
+
+const Trash = () => {
+  const classes = useStyles();
+
+  const [files] = useState(mockData);
+
+  return (
+    <div className={classes.root}>
+      <TrashToolbar />
+      <div className={classes.content}>
+        <RemovedFileTable files={files} />
+      </div>
+    </div>
+  );
+};
+
+export default Trash;

+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  Avatar,
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+  TablePagination
+} from '@material-ui/core';
+
+import { getInitials } from 'helpers';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  content: {
+    padding: 0
+  },
+  inner: {
+    minWidth: 1050
+  },
+  nameContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  avatar: {
+    marginRight: theme.spacing(2)
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const RemovedFileTable = props => {
+  const { className, files: files, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [selectedUsers, setSelectedUsers] = useState([]);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [page, setPage] = useState(0);
+
+  const handleSelectAll = event => {
+    const { files } = props;
+
+    let selectedUsers;
+
+    if (event.target.checked) {
+      selectedUsers = files.map(user => user.id);
+    } else {
+      selectedUsers = [];
+    }
+
+    setSelectedUsers(selectedUsers);
+  };
+
+  const handleSelectOne = (event, id) => {
+    const selectedIndex = selectedUsers.indexOf(id);
+    let newSelectedUsers = [];
+
+    if (selectedIndex === -1) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
+    } else if (selectedIndex === 0) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
+    } else if (selectedIndex === selectedUsers.length - 1) {
+      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelectedUsers = newSelectedUsers.concat(
+        selectedUsers.slice(0, selectedIndex),
+        selectedUsers.slice(selectedIndex + 1)
+      );
+    }
+
+    setSelectedUsers(newSelectedUsers);
+  };
+
+  const handlePageChange = (event, page) => {
+    setPage(page);
+  };
+
+  const handleRowsPerPageChange = event => {
+    setRowsPerPage(event.target.value);
+  };
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardContent className={classes.content}>
+        <PerfectScrollbar>
+          <div className={classes.inner}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={selectedUsers.length === files.length}
+                      color="primary"
+                      indeterminate={
+                        selectedUsers.length > 0 &&
+                        selectedUsers.length < files.length
+                      }
+                      onChange={handleSelectAll}
+                    />
+                  </TableCell>
+                  <TableCell>이름</TableCell>
+                  <TableCell>마지막으로 수정한 날짜</TableCell>
+                  <TableCell>크기</TableCell>
+                  <TableCell>공유</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {files.slice(0, rowsPerPage).map(file => (
+                  <TableRow
+                    className={classes.tableRow}
+                    hover
+                    key={file.id}
+                    selected={selectedUsers.indexOf(file.id) !== -1}
+                  >
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={selectedUsers.indexOf(file.id) !== -1}
+                        color="primary"
+                        onChange={event => handleSelectOne(event, file.id)}
+                        value="true"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className={classes.nameContainer}>
+                        {/* 파일 아이콘 */}
+                        <Typography variant="body1">{file.name}</Typography>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {moment(file.modifiedAt).format('DD/MM/YYYY')}
+                    </TableCell>
+                    <TableCell>{file.size}</TableCell>
+                    <TableCell>
+                      {file.share}
+                    </TableCell>
+                    
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </PerfectScrollbar>
+      </CardContent>
+      <CardActions className={classes.actions}>
+        <TablePagination
+          component="div"
+          count={files.length}
+          onChangePage={handlePageChange}
+          onChangeRowsPerPage={handleRowsPerPageChange}
+          page={page}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[5, 10, 25]}
+        />
+      </CardActions>
+    </Card>
+  );
+};
+
+RemovedFileTable.propTypes = {
+  className: PropTypes.string,
+  files: PropTypes.array.isRequired
+};
+
+export default RemovedFileTable;

+export { default } from './RemovedFileTable';

+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/styles';
+import { Button } from '@material-ui/core';
+
+import { SearchInput } from 'components';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  row: {
+    height: '42px',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: theme.spacing(1)
+  },
+  spacer: {
+    flexGrow: 1
+  },
+  importButton: {
+    marginRight: theme.spacing(1)
+  },
+  exportButton: {
+    marginRight: theme.spacing(1)
+  },
+  searchInput: {
+    marginRight: theme.spacing(1)
+  }
+}));
+
+const DriveToolbar = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <div className={classes.row}>
+        <SearchInput
+          className={classes.searchInput}
+          placeholder="파일, 폴더 검색"
+        />
+      </div>
+    </div>
+  );
+};
+
+DriveToolbar.propTypes = {
+  className: PropTypes.string
+};
+
+export default DriveToolbar;

+export { default } from './TrashToolbar';

+export { default as RemovedFileTable } from './RemovedFileTable';
+export { default as TrashToolbar } from './TrashToolbar';

+import uuid from 'uuid/v1';
+import data from 'mock_file_data.json'
+
+export default data;
\ No newline at end of file

+export { default } from './Trash';

@@ -9,3 +9,4 @@ export { default as SignUp } from './SignUp';
 export { default as Typography } from './Typography';
 export { default as Typography } from './Typography';
 export { default as MyDrive } from './MyDrive';
 export { default as MyDrive } from './MyDrive';
 export { default as SharedFileList } from './SharedFileList';
 export { default as SharedFileList } from './SharedFileList';
+export { default as Trash } from './Trash';