From c518b94978677e7a6d63866b68816ffcee36c81f Mon Sep 17 00:00:00 2001
From: Ayush Sharma <ayush.aceit@gmail.com>
Date: Sat, 23 Feb 2019 01:21:09 +0100
Subject: [PATCH] refactor: package list [WIP]

---
 src/webui/components/Package/index.js | 72 +++++++++++++++++++--------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js
index c6c09668c..1cd9e1670 100644
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@@ -3,10 +3,20 @@
  * @flow
  */
 
+/* eslint-disable */
+
 import React from 'react';
 import type { Element } from 'react';
 import { spacing } from '../../utils/styles/mixings';
 
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar2 from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+
 import Tag from '../Tag';
 import { formatDate, formatDateDistance } from '../../utils/package';
 
@@ -79,27 +89,49 @@ const Package = ({ name: label, version, time, author: { name, avatar }, descrip
       </Field>
     );
 
+  // return (
+  //   <WrapperLink className={'package'} to={`/-/web/detail/${label}`}>
+  //     <Header>
+  //       {renderMainInfo()}
+  //       <Overview>
+  //         {renderLicenseInfo()}
+  //         {renderPublishedInfo()}
+  //       </Overview>
+  //     </Header>
+  //     <Content>
+  //       <Field>{renderAuthorInfo()}</Field>
+  //       {renderDescription()}
+  //     </Content>
+  //     {keywords.length > 0 && (
+  //       <Footer>
+  //         {keywords.sort().map((keyword, index) => (
+  //           <Tag key={index}>{keyword}</Tag>
+  //         ))}
+  //       </Footer>
+  //     )}
+  //   </WrapperLink>
+  // );
+
   return (
-    <WrapperLink className={'package'} to={`/-/web/detail/${label}`}>
-      <Header>
-        {renderMainInfo()}
-        <Overview>
-          {renderLicenseInfo()}
-          {renderPublishedInfo()}
-        </Overview>
-      </Header>
-      <Content>
-        <Field>{renderAuthorInfo()}</Field>
-        {renderDescription()}
-      </Content>
-      {keywords.length > 0 && (
-        <Footer>
-          {keywords.sort().map((keyword, index) => (
-            <Tag key={index}>{keyword}</Tag>
-          ))}
-        </Footer>
-      )}
-    </WrapperLink>
+    <List>
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar2 alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        </ListItemAvatar>
+        <ListItemText
+          primary={label}
+          secondary={
+            <React.Fragment>
+              <Typography component="span" color="textPrimary">
+                {name}
+              </Typography>
+              {description}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider></Divider>
+    </List>
   );
 };
 export default Package;