Merge pull request #16 from codezoned/dashboard-skeleton

Added dashboard base

Author: bhargavpaturu06

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -36,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ant-design": "^1.0.0"
   }
 }

src/components/styled/SearchInputWrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+const SearchWrapper = styled(Input)`
+  padding-right: 20px;
+`;
+
+export default SearchWrapper;

src/containers/DashboardContainer.js

@@ -1,14 +1,15 @@
 import * as React from 'react';
+import SearchWrapper from '../components/styled/SearchInputWrapper'
 import { Auth } from 'aws-amplify';
-import { RouteComponentProps, withRouter } from 'react-router';
-import { Layout, Menu, Icon, notification } from 'antd';
+import { withRouter } from 'react-router';
+import { Layout, Menu, Icon, notification, Button, List, Card } from 'antd';
+import {PlusOutlined, SearchOutlined, PlusCircleFilled} from '@ant-design/icons'
 
 /** App Theme */
 import { colors } from '../themes/Colors';
 
 /** App Constatns */
 import { AUTH_USER_TOKEN_KEY } from '../utils/constants';
-import { ClickParam } from 'antd/lib/menu';
 
 const DashBoardContainer = props => {
     const [collapsed, setCollapsed] = React.useState(false);
@@ -24,9 +25,46 @@ const DashBoardContainer = props => {
     }
   };
 
+//Adding this temporary data till we fetch from backend
+    const data = [
+        {
+            domain: 'google.co.in',
+            email: ['[email protected]', "[email protected]"]
+        },
+        {
+            domain: 'facebook.com',
+            email: ['[email protected]', "[email protected]"]
+        },
+        {
+            domain: 'twitter.com',
+            email: ['[email protected]', "[email protected]"]
+        },
+        {
+            domain: 'instagram.com',
+            email: ['[email protected]', "[email protected]"]
+        },
+        {
+            domain: 'amazon.in',
+            email: ['[email protected]', "[email protected]"]
+        },
+        {
+            domain: 'flipkart.com',
+            email: ['[email protected]', "[email protected]"]
+        },
+    ];
+
   return (
-    <Layout className="cover" id="app-header">
-      <Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed}>
+    <Layout className="cover" id="app-header" style={{ minHeight: '100vh' }}>
+      <Layout.Sider className="cover" trigger={null} collapsible collapsed={collapsed} width={250} >
+          <div style={{display:"flex", marginTop:20, marginBottom: 20}}>
+              <Icon
+                  style={{color:colors.white, marginTop:10, marginLeft:25, marginRight:10}}
+                  className="trigger"
+                  onClick={() => setCollapsed(!collapsed)}
+                  type={collapsed ? 'menu-unfold' : 'menu-fold'}
+              />
+                  <SearchWrapper prefix={<SearchOutlined/>}/>
+          </div>
         <div className="logo" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
           <Menu.Item key="1">
@@ -43,26 +81,37 @@ const DashBoardContainer = props => {
           </Menu.Item>
         </Menu>
       </Layout.Sider>
-      <Layout>
+      <Layout style={{background: colors.white}}>
         <Layout.Header style={{ background: colors.white, padding: 0 }}>
-          <Icon
-            className="trigger"
-            onClick={() => setCollapsed(!collapsed)}
-            type={collapsed ? 'menu-unfold' : 'menu-fold'}
-          />
+
+          <span style={{paddingRight: 50}}> </span>
+            <Button type="primary" >
+                <PlusOutlined />
+                Add New
+            </Button>
         </Layout.Header>
-        <Layout.Content
-          style={{
-            margin: '24px 16px',
-            padding: 24,
-            background: colors.white,
-            minHeight: 280
-          }}
-        >
-          <div className="text-center">
-            <h1>Hello world</h1>
-          </div>
-        </Layout.Content>
+          <List
+              grid={{
+                  gutter: 16,
+                  xs: 1,
+                  sm: 2,
+                  md: 4,
+                  lg: 4,
+                  xl: 6,
+                  xxl: 3,
+              }}
+              dataSource={data}
+              renderItem={item => (
+                  <List.Item>
+                      <Card title={item.domain} actions={[<PlusCircleFilled />]}>{<List dataSource={item.email}
+                                                                                       renderItem={emails => (
+                                                                                           <List.Item>
+                                                                                               {emails}
+                                                                                           </List.Item>)}/>}
+                      </Card>
+                  </List.Item>
+              )}
+          />
       </Layout>
     </Layout>
   );

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@ant-design/colors@^3.1.0":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
+  integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
+  dependencies:
+    tinycolor2 "^1.4.1"
+
 "@ant-design/css-animation@^1.7.2":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@ant-design/css-animation/-/css-animation-1.7.2.tgz#4ee5d2ec0fb7cc0a78b44e1c82628bd4621ac7e3"
@@ -15,6 +22,23 @@
     ant-design-palettes "^1.1.3"
     babel-runtime "^6.26.0"
 
+"@ant-design/icons-svg@^4.0.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
+  integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
+
+"@ant-design/icons@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.2.2.tgz#6533c5a02aec49238ec4748074845ad7d85a4f5e"
+  integrity sha512-DrVV+wcupnHS7PehJ6KiTcJtAR5c25UMgjGECCc6pUT9rsvw0AuYG+a4HDjfxEQuDqKTHwW+oX/nIvCymyLE8Q==
+  dependencies:
+    "@ant-design/colors" "^3.1.0"
+    "@ant-design/icons-svg" "^4.0.0"
+    "@babel/runtime" "^7.10.4"
+    classnames "^2.2.6"
+    insert-css "^2.0.0"
+    rc-util "^5.0.1"
+
 "@ant-design/icons@~1.1.15":
   version "1.1.16"
   resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-1.1.16.tgz#ac6426216934e3f4bc108f2f48f92ed66789235e"
@@ -2383,6 +2407,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.4":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.10.3", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8"
@@ -3423,6 +3454,11 @@ ant-design-palettes@^1.1.3:
   dependencies:
     tinycolor2 "^1.4.1"
 
+ant-design@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ant-design/-/ant-design-1.0.0.tgz#53ea0a397da976358e88bf06224fb3de756b87b4"
+  integrity sha1-U+oKOX2pdjWOiL8GIk+z3nVrh7Q=
+
 [email protected]:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/antd/-/antd-3.10.0.tgz#fb555efca416e9a1c931bb17234ae608dc41f9d1"
@@ -7159,6 +7195,11 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+insert-css@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
+  integrity sha1-610Ql7dUL0x56jBg067gfQU4gPQ=
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"