Add recent file view

@@ -6,7 +6,7 @@ import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
 
 import {
   Dashboard as DashboardView,
-  ProductList as ProductListView,
+  RecentFileList as RecentFileListView,
   MyDrive as MyDriveView,
   SharedFileList as SharedFileView,
   Typography as TypographyView,
@@ -39,7 +39,7 @@ const Routes = () => {
         path="/share"
       />
       <RouteWithLayout
-        component={ProductListView}
+        component={RecentFileListView}
         exact
         layout={MainLayout}
         path="/recent"

-export { default } from './ProductCard';

-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 ProductsToolbar = props => {
-  const { className, ...rest } = props;
-
-  const classes = useStyles();
-
-  return (
-    <div
-      {...rest}
-      className={clsx(classes.root, className)}
-    >
-      <div className={classes.row}>
-        <span className={classes.spacer} />
-        <Button className={classes.importButton}>Import</Button>
-        <Button className={classes.exportButton}>Export</Button>
-        <Button
-          color="primary"
-          variant="contained"
-        >
-          Add product
-        </Button>
-      </div>
-      <div className={classes.row}>
-        <SearchInput
-          className={classes.searchInput}
-          placeholder="Search product"
-        />
-      </div>
-    </div>
-  );
-};
-
-ProductsToolbar.propTypes = {
-  className: PropTypes.string
-};
-
-export default ProductsToolbar;

-export { default } from './ProductsToolbar';

-export { default as ProductCard } from './ProductCard';
-export { default as ProductsToolbar } from './ProductsToolbar';

-import uuid from 'uuid/v1';
-
-export default [
-  {
-    id: uuid(),
-    title: 'Dropbox',
-    description:
-      'Dropbox is a file hosting service that offers cloud storage, file synchronization, a personal cloud.',
-    imageUrl: '/images/products/product_1.png',
-    totalDownloads: '594',
-    updatedAt: '27/03/2019'
-  },
-  {
-    id: uuid(),
-    title: 'Medium Corporation',
-    description:
-      'Medium is an online publishing platform developed by Evan Williams, and launched in August 2012.',
-    imageUrl: '/images/products/product_2.png',
-    totalDownloads: '625',
-    createdAt: '31/03/2019'
-  },
-  {
-    id: uuid(),
-    title: 'Slack',
-    description:
-      'Slack is a cloud-based set of team collaboration tools and services, founded by Stewart Butterfield.',
-    imageUrl: '/images/products/product_3.png',
-    totalDownloads: '857',
-    createdAt: '03/04/2019'
-  },
-  {
-    id: uuid(),
-    title: 'Lyft',
-    description:
-      'Lyft is an on-demand transportation company based in San Francisco, California.',
-    imageUrl: '/images/products/product_4.png',
-    totalDownloads: '406',
-    createdAt: '04/04/2019'
-  },
-  {
-    id: uuid(),
-    title: 'GitHub',
-    description:
-      'GitHub is a web-based hosting service for version control of code using Git.',
-    imageUrl: '/images/products/product_5.png',
-    totalDownloads: '835',
-    createdAt: '04/04/2019'
-  },
-  {
-    id: uuid(),
-    title: 'Squarespace',
-    description:
-      'Squarespace provides software as a service for website building and hosting. Headquartered in NYC.',
-    imageUrl: '/images/products/product_6.png',
-    totalDownloads: '835',
-    createdAt: '04/04/2019'
-  }
-];

-export { default } from './ProductList';

@@ -4,7 +4,7 @@ import { IconButton, Grid, Typography } from '@material-ui/core';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 
-import { ProductsToolbar, ProductCard } from './components';
+import { FileCard } from './components';
 import mockData from './data';
 
 const useStyles = makeStyles(theme => ({
@@ -22,28 +22,27 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const ProductList = () => {
+const RecentFileList = () => {
   const classes = useStyles();
 
-  const [products] = useState(mockData);
+  const [files] = useState(mockData);
 
   return (
     <div className={classes.root}>
-      <ProductsToolbar />
       <div className={classes.content}>
         <Grid
           container
           spacing={3}
         >
-          {products.map(product => (
+          {files.map(file => (
             <Grid
               item
-              key={product.id}
+              key={file.id}
               lg={4}
               md={6}
               xs={12}
             >
-              <ProductCard product={product} />
+              <FileCard file={file} />
             </Grid>
           ))}
         </Grid>
@@ -61,4 +60,4 @@ const ProductList = () => {
   );
 };
 
-export default ProductList;
+export default RecentFileList;

@@ -39,8 +39,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const ProductCard = props => {
-  const { className, product, ...rest } = props;
+const FileCard = props => {
+  const { className, file, ...rest } = props;
 
   const classes = useStyles();
 
@@ -51,10 +51,11 @@ const ProductCard = props => {
     >
       <CardContent>
         <div className={classes.imageContainer}>
+          {/* TODO: file.modifiedAt과 연동 */}
           <img
-            alt="Product"
+            alt="FileIcon"
             className={classes.image}
-            src={product.imageUrl}
+            src={file.imageUrl}
           />
         </div>
         <Typography
@@ -62,13 +63,7 @@ const ProductCard = props => {
           gutterBottom
           variant="h4"
         >
-          {product.title}
-        </Typography>
-        <Typography
-          align="center"
-          variant="body1"
-        >
-          {product.description}
+          {file.name}
         </Typography>
       </CardContent>
       <Divider />
@@ -86,6 +81,7 @@ const ProductCard = props => {
               display="inline"
               variant="body2"
             >
+              {/* TODO: file.modifiedAt과 연동 */}
               Updated 2hr ago
             </Typography>
           </Grid>
@@ -93,13 +89,6 @@ const ProductCard = props => {
             className={classes.statsItem}
             item
           >
-            <GetAppIcon className={classes.statsIcon} />
-            <Typography
-              display="inline"
-              variant="body2"
-            >
-              {product.totalDownloads} Downloads
-            </Typography>
           </Grid>
         </Grid>
       </CardActions>
@@ -107,9 +96,9 @@ const ProductCard = props => {
   );
 };
 
-ProductCard.propTypes = {
+FileCard.propTypes = {
   className: PropTypes.string,
-  product: PropTypes.object.isRequired
+  file: PropTypes.object.isRequired
 };
 
-export default ProductCard;
+export default FileCard;

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

+export { default as FileCard } from './FileCard';
+export { default as RecentFileToolbar } from './RecentFileToolbar';

+import uuid from 'uuid/v1';
+import data from 'mock_file_data.json'
+
+export default data;

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

@@ -2,7 +2,7 @@ export { default as Account } from './Account';
 export { default as Dashboard } from './Dashboard';
 export { default as Icons } from './Icons';
 export { default as NotFound } from './NotFound';
-export { default as ProductList } from './ProductList';
+export { default as RecentFileList } from './RecentFileList';
 export { default as Settings } from './Settings';
 export { default as SignIn } from './SignIn';
 export { default as SignUp } from './SignUp';