Showing
14 changed files
with
28 additions
and
161 deletions
... | @@ -6,7 +6,7 @@ import { Main as MainLayout, Minimal as MinimalLayout } from './layouts'; | ... | @@ -6,7 +6,7 @@ import { Main as MainLayout, Minimal as MinimalLayout } from './layouts'; |
6 | 6 | ||
7 | import { | 7 | import { |
8 | Dashboard as DashboardView, | 8 | Dashboard as DashboardView, |
9 | - ProductList as ProductListView, | 9 | + RecentFileList as RecentFileListView, |
10 | MyDrive as MyDriveView, | 10 | MyDrive as MyDriveView, |
11 | SharedFileList as SharedFileView, | 11 | SharedFileList as SharedFileView, |
12 | Typography as TypographyView, | 12 | Typography as TypographyView, |
... | @@ -39,7 +39,7 @@ const Routes = () => { | ... | @@ -39,7 +39,7 @@ const Routes = () => { |
39 | path="/share" | 39 | path="/share" |
40 | /> | 40 | /> |
41 | <RouteWithLayout | 41 | <RouteWithLayout |
42 | - component={ProductListView} | 42 | + component={RecentFileListView} |
43 | exact | 43 | exact |
44 | layout={MainLayout} | 44 | layout={MainLayout} |
45 | path="/recent" | 45 | path="/recent" | ... | ... |
1 | -export { default } from './ProductCard'; |
1 | -import React from 'react'; | ||
2 | -import PropTypes from 'prop-types'; | ||
3 | -import clsx from 'clsx'; | ||
4 | -import { makeStyles } from '@material-ui/styles'; | ||
5 | -import { Button } from '@material-ui/core'; | ||
6 | - | ||
7 | -import { SearchInput } from 'components'; | ||
8 | - | ||
9 | -const useStyles = makeStyles(theme => ({ | ||
10 | - root: {}, | ||
11 | - row: { | ||
12 | - height: '42px', | ||
13 | - display: 'flex', | ||
14 | - alignItems: 'center', | ||
15 | - marginTop: theme.spacing(1) | ||
16 | - }, | ||
17 | - spacer: { | ||
18 | - flexGrow: 1 | ||
19 | - }, | ||
20 | - importButton: { | ||
21 | - marginRight: theme.spacing(1) | ||
22 | - }, | ||
23 | - exportButton: { | ||
24 | - marginRight: theme.spacing(1) | ||
25 | - }, | ||
26 | - searchInput: { | ||
27 | - marginRight: theme.spacing(1) | ||
28 | - } | ||
29 | -})); | ||
30 | - | ||
31 | -const ProductsToolbar = props => { | ||
32 | - const { className, ...rest } = props; | ||
33 | - | ||
34 | - const classes = useStyles(); | ||
35 | - | ||
36 | - return ( | ||
37 | - <div | ||
38 | - {...rest} | ||
39 | - className={clsx(classes.root, className)} | ||
40 | - > | ||
41 | - <div className={classes.row}> | ||
42 | - <span className={classes.spacer} /> | ||
43 | - <Button className={classes.importButton}>Import</Button> | ||
44 | - <Button className={classes.exportButton}>Export</Button> | ||
45 | - <Button | ||
46 | - color="primary" | ||
47 | - variant="contained" | ||
48 | - > | ||
49 | - Add product | ||
50 | - </Button> | ||
51 | - </div> | ||
52 | - <div className={classes.row}> | ||
53 | - <SearchInput | ||
54 | - className={classes.searchInput} | ||
55 | - placeholder="Search product" | ||
56 | - /> | ||
57 | - </div> | ||
58 | - </div> | ||
59 | - ); | ||
60 | -}; | ||
61 | - | ||
62 | -ProductsToolbar.propTypes = { | ||
63 | - className: PropTypes.string | ||
64 | -}; | ||
65 | - | ||
66 | -export default ProductsToolbar; |
1 | -export { default } from './ProductsToolbar'; |
1 | -import uuid from 'uuid/v1'; | ||
2 | - | ||
3 | -export default [ | ||
4 | - { | ||
5 | - id: uuid(), | ||
6 | - title: 'Dropbox', | ||
7 | - description: | ||
8 | - 'Dropbox is a file hosting service that offers cloud storage, file synchronization, a personal cloud.', | ||
9 | - imageUrl: '/images/products/product_1.png', | ||
10 | - totalDownloads: '594', | ||
11 | - updatedAt: '27/03/2019' | ||
12 | - }, | ||
13 | - { | ||
14 | - id: uuid(), | ||
15 | - title: 'Medium Corporation', | ||
16 | - description: | ||
17 | - 'Medium is an online publishing platform developed by Evan Williams, and launched in August 2012.', | ||
18 | - imageUrl: '/images/products/product_2.png', | ||
19 | - totalDownloads: '625', | ||
20 | - createdAt: '31/03/2019' | ||
21 | - }, | ||
22 | - { | ||
23 | - id: uuid(), | ||
24 | - title: 'Slack', | ||
25 | - description: | ||
26 | - 'Slack is a cloud-based set of team collaboration tools and services, founded by Stewart Butterfield.', | ||
27 | - imageUrl: '/images/products/product_3.png', | ||
28 | - totalDownloads: '857', | ||
29 | - createdAt: '03/04/2019' | ||
30 | - }, | ||
31 | - { | ||
32 | - id: uuid(), | ||
33 | - title: 'Lyft', | ||
34 | - description: | ||
35 | - 'Lyft is an on-demand transportation company based in San Francisco, California.', | ||
36 | - imageUrl: '/images/products/product_4.png', | ||
37 | - totalDownloads: '406', | ||
38 | - createdAt: '04/04/2019' | ||
39 | - }, | ||
40 | - { | ||
41 | - id: uuid(), | ||
42 | - title: 'GitHub', | ||
43 | - description: | ||
44 | - 'GitHub is a web-based hosting service for version control of code using Git.', | ||
45 | - imageUrl: '/images/products/product_5.png', | ||
46 | - totalDownloads: '835', | ||
47 | - createdAt: '04/04/2019' | ||
48 | - }, | ||
49 | - { | ||
50 | - id: uuid(), | ||
51 | - title: 'Squarespace', | ||
52 | - description: | ||
53 | - 'Squarespace provides software as a service for website building and hosting. Headquartered in NYC.', | ||
54 | - imageUrl: '/images/products/product_6.png', | ||
55 | - totalDownloads: '835', | ||
56 | - createdAt: '04/04/2019' | ||
57 | - } | ||
58 | -]; |
1 | -export { default } from './ProductList'; |
... | @@ -4,7 +4,7 @@ import { IconButton, Grid, Typography } from '@material-ui/core'; | ... | @@ -4,7 +4,7 @@ import { IconButton, Grid, Typography } from '@material-ui/core'; |
4 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; | 4 | import ChevronRightIcon from '@material-ui/icons/ChevronRight'; |
5 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; | 5 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; |
6 | 6 | ||
7 | -import { ProductsToolbar, ProductCard } from './components'; | 7 | +import { FileCard } from './components'; |
8 | import mockData from './data'; | 8 | import mockData from './data'; |
9 | 9 | ||
10 | const useStyles = makeStyles(theme => ({ | 10 | const useStyles = makeStyles(theme => ({ |
... | @@ -22,28 +22,27 @@ const useStyles = makeStyles(theme => ({ | ... | @@ -22,28 +22,27 @@ const useStyles = makeStyles(theme => ({ |
22 | } | 22 | } |
23 | })); | 23 | })); |
24 | 24 | ||
25 | -const ProductList = () => { | 25 | +const RecentFileList = () => { |
26 | const classes = useStyles(); | 26 | const classes = useStyles(); |
27 | 27 | ||
28 | - const [products] = useState(mockData); | 28 | + const [files] = useState(mockData); |
29 | 29 | ||
30 | return ( | 30 | return ( |
31 | <div className={classes.root}> | 31 | <div className={classes.root}> |
32 | - <ProductsToolbar /> | ||
33 | <div className={classes.content}> | 32 | <div className={classes.content}> |
34 | <Grid | 33 | <Grid |
35 | container | 34 | container |
36 | spacing={3} | 35 | spacing={3} |
37 | > | 36 | > |
38 | - {products.map(product => ( | 37 | + {files.map(file => ( |
39 | <Grid | 38 | <Grid |
40 | item | 39 | item |
41 | - key={product.id} | 40 | + key={file.id} |
42 | lg={4} | 41 | lg={4} |
43 | md={6} | 42 | md={6} |
44 | xs={12} | 43 | xs={12} |
45 | > | 44 | > |
46 | - <ProductCard product={product} /> | 45 | + <FileCard file={file} /> |
47 | </Grid> | 46 | </Grid> |
48 | ))} | 47 | ))} |
49 | </Grid> | 48 | </Grid> |
... | @@ -61,4 +60,4 @@ const ProductList = () => { | ... | @@ -61,4 +60,4 @@ const ProductList = () => { |
61 | ); | 60 | ); |
62 | }; | 61 | }; |
63 | 62 | ||
64 | -export default ProductList; | 63 | +export default RecentFileList; | ... | ... |
... | @@ -39,8 +39,8 @@ const useStyles = makeStyles(theme => ({ | ... | @@ -39,8 +39,8 @@ const useStyles = makeStyles(theme => ({ |
39 | } | 39 | } |
40 | })); | 40 | })); |
41 | 41 | ||
42 | -const ProductCard = props => { | 42 | +const FileCard = props => { |
43 | - const { className, product, ...rest } = props; | 43 | + const { className, file, ...rest } = props; |
44 | 44 | ||
45 | const classes = useStyles(); | 45 | const classes = useStyles(); |
46 | 46 | ||
... | @@ -51,10 +51,11 @@ const ProductCard = props => { | ... | @@ -51,10 +51,11 @@ const ProductCard = props => { |
51 | > | 51 | > |
52 | <CardContent> | 52 | <CardContent> |
53 | <div className={classes.imageContainer}> | 53 | <div className={classes.imageContainer}> |
54 | + {/* TODO: file.modifiedAt과 연동 */} | ||
54 | <img | 55 | <img |
55 | - alt="Product" | 56 | + alt="FileIcon" |
56 | className={classes.image} | 57 | className={classes.image} |
57 | - src={product.imageUrl} | 58 | + src={file.imageUrl} |
58 | /> | 59 | /> |
59 | </div> | 60 | </div> |
60 | <Typography | 61 | <Typography |
... | @@ -62,13 +63,7 @@ const ProductCard = props => { | ... | @@ -62,13 +63,7 @@ const ProductCard = props => { |
62 | gutterBottom | 63 | gutterBottom |
63 | variant="h4" | 64 | variant="h4" |
64 | > | 65 | > |
65 | - {product.title} | 66 | + {file.name} |
66 | - </Typography> | ||
67 | - <Typography | ||
68 | - align="center" | ||
69 | - variant="body1" | ||
70 | - > | ||
71 | - {product.description} | ||
72 | </Typography> | 67 | </Typography> |
73 | </CardContent> | 68 | </CardContent> |
74 | <Divider /> | 69 | <Divider /> |
... | @@ -86,6 +81,7 @@ const ProductCard = props => { | ... | @@ -86,6 +81,7 @@ const ProductCard = props => { |
86 | display="inline" | 81 | display="inline" |
87 | variant="body2" | 82 | variant="body2" |
88 | > | 83 | > |
84 | + {/* TODO: file.modifiedAt과 연동 */} | ||
89 | Updated 2hr ago | 85 | Updated 2hr ago |
90 | </Typography> | 86 | </Typography> |
91 | </Grid> | 87 | </Grid> |
... | @@ -93,13 +89,6 @@ const ProductCard = props => { | ... | @@ -93,13 +89,6 @@ const ProductCard = props => { |
93 | className={classes.statsItem} | 89 | className={classes.statsItem} |
94 | item | 90 | item |
95 | > | 91 | > |
96 | - <GetAppIcon className={classes.statsIcon} /> | ||
97 | - <Typography | ||
98 | - display="inline" | ||
99 | - variant="body2" | ||
100 | - > | ||
101 | - {product.totalDownloads} Downloads | ||
102 | - </Typography> | ||
103 | </Grid> | 92 | </Grid> |
104 | </Grid> | 93 | </Grid> |
105 | </CardActions> | 94 | </CardActions> |
... | @@ -107,9 +96,9 @@ const ProductCard = props => { | ... | @@ -107,9 +96,9 @@ const ProductCard = props => { |
107 | ); | 96 | ); |
108 | }; | 97 | }; |
109 | 98 | ||
110 | -ProductCard.propTypes = { | 99 | +FileCard.propTypes = { |
111 | className: PropTypes.string, | 100 | className: PropTypes.string, |
112 | - product: PropTypes.object.isRequired | 101 | + file: PropTypes.object.isRequired |
113 | }; | 102 | }; |
114 | 103 | ||
115 | -export default ProductCard; | 104 | +export default FileCard; | ... | ... |
1 | +export { default } from './FileCard'; |
1 | +export { default } from './RecentFileList'; |
... | @@ -2,7 +2,7 @@ export { default as Account } from './Account'; | ... | @@ -2,7 +2,7 @@ export { default as Account } from './Account'; |
2 | export { default as Dashboard } from './Dashboard'; | 2 | export { default as Dashboard } from './Dashboard'; |
3 | export { default as Icons } from './Icons'; | 3 | export { default as Icons } from './Icons'; |
4 | export { default as NotFound } from './NotFound'; | 4 | export { default as NotFound } from './NotFound'; |
5 | -export { default as ProductList } from './ProductList'; | 5 | +export { default as RecentFileList } from './RecentFileList'; |
6 | export { default as Settings } from './Settings'; | 6 | export { default as Settings } from './Settings'; |
7 | export { default as SignIn } from './SignIn'; | 7 | export { default as SignIn } from './SignIn'; |
8 | export { default as SignUp } from './SignUp'; | 8 | export { default as SignUp } from './SignUp'; | ... | ... |
-
Please register or login to post a comment