Woojin Lee

Create drive view(working)

......@@ -7,7 +7,7 @@ import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
import {
Dashboard as DashboardView,
ProductList as ProductListView,
UserList as UserListView,
FileList as FileListView,
Typography as TypographyView,
Icons as IconsView,
Account as AccountView,
......@@ -26,13 +26,13 @@ const Routes = () => {
to="/my-drive"
/>
<RouteWithLayout
component={DashboardView}
component={FileListView}
exact
layout={MainLayout}
path="/my-drive"
/>
<RouteWithLayout
component={UserListView}
component={FileListView}
exact
layout={MainLayout}
path="/share"
......
......@@ -28,7 +28,7 @@ const Profile = props => {
const user = {
name: '엄준식',
avatar: '/images/avatars/avatar_11.png',
avatar: '/images/avatars/avatar_1.png',
membership: 'Basic Plan'
};
......
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/styles';
import { UsersToolbar, UsersTable } from './components';
import { DriveToolbar, FileTable } from './components';
import mockData from './data';
const useStyles = makeStyles(theme => ({
......@@ -13,19 +13,19 @@ const useStyles = makeStyles(theme => ({
}
}));
const UserList = () => {
const FileList = () => {
const classes = useStyles();
const [users] = useState(mockData);
return (
<div className={classes.root}>
<UsersToolbar />
<DriveToolbar />
<div className={classes.content}>
<UsersTable users={users} />
<FileTable users={users} />
</div>
</div>
);
};
export default UserList;
export default FileList;
......
......@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
}
}));
const UsersToolbar = props => {
const DriveToolbar = props => {
const { className, ...rest } = props;
const classes = useStyles();
......@@ -40,27 +40,27 @@ const UsersToolbar = props => {
>
<div className={classes.row}>
<span className={classes.spacer} />
<Button className={classes.importButton}>Import</Button>
<Button className={classes.exportButton}>Export</Button>
<Button className={classes.importButton}> 폴더</Button>
<Button className={classes.exportButton}>폴더 업로드</Button>
<Button
color="primary"
variant="contained"
>
Add user
파일 업로드
</Button>
</div>
<div className={classes.row}>
<SearchInput
className={classes.searchInput}
placeholder="Search user"
placeholder="파일, 폴더 검색"
/>
</div>
</div>
);
};
UsersToolbar.propTypes = {
DriveToolbar.propTypes = {
className: PropTypes.string
};
export default UsersToolbar;
export default DriveToolbar;
......
......@@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({
}
}));
const UsersTable = props => {
const FileTable = props => {
const { className, users, ...rest } = props;
const classes = useStyles();
......@@ -179,9 +179,9 @@ const UsersTable = props => {
);
};
UsersTable.propTypes = {
FileTable.propTypes = {
className: PropTypes.string,
users: PropTypes.array.isRequired
};
export default UsersTable;
export default FileTable;
......
export { default as FileTable } from './FileTable';
export { default as DriveToolbar } from './DriveToolbar';
export { default } from './FileList';
export { default as UsersTable } from './UsersTable';
export { default as UsersToolbar } from './UsersToolbar';
export { default } from './UserList';
......@@ -7,4 +7,4 @@ export { default as Settings } from './Settings';
export { default as SignIn } from './SignIn';
export { default as SignUp } from './SignUp';
export { default as Typography } from './Typography';
export { default as UserList } from './UserList';
export { default as FileList } from './FileList';
......