From 514cbfc88f73d277bc3d3a1cff910c3701345f77 Mon Sep 17 00:00:00 2001
From: Raj <theraj@umich.edu>
Date: Fri, 4 Dec 2020 18:04:08 -0500
Subject: [PATCH] moved IG raw data and charts to import page

---
 src/containers/Instagram/Import.js | 49 ++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/containers/Instagram/Import.js b/src/containers/Instagram/Import.js
index e038959..733c250 100644
--- a/src/containers/Instagram/Import.js
+++ b/src/containers/Instagram/Import.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Row, Col } from 'antd';
+import moment from 'moment'
 
 import Dropzone from '@imd/components/uielements/dropzone';
 import { notification } from '@imd/components';
@@ -13,10 +14,15 @@ import basicStyle from '@imd/assets/styles/constants';
 import FrappeChart from 'frappe-charts/dist/frappe-charts.min.esm';
 import * as configs from './config';
 import 'frappe-charts/dist/frappe-charts.min.css';
+import Tabs, { TabPane } from '@imd/components/uielements/tabs';
 import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
 
 import CardWidget from '@imd/containers/Widgets/Card/CardWidget';
 import IntlMessages from '@imd/components/utility/intlMessages';
+import UserData from './Data/connections.json';
+import ConnectionsByDayLine from './Components/ConnectionsByDayLine/ConnectionsByDayLine';
+
+function callback(key) {}
 
 export default class extends Component {
 
@@ -100,6 +106,49 @@ export default class extends Component {
             </DropzoneWrapper>
           </ContentHolder>
         </Box>
+
+        <PageHeader>Data & Analytics</PageHeader>
+        <Box>
+          <Tabs defaultActiveKey="1" onChange={callback}>
+            <TabPane tab="Raw Data" key="1">
+              <Tabs defaultActiveKey="1" onChange={callback}>
+              <TabPane tab="Followers" key="1">
+              {Object.entries(UserData.followers).map(([name, date]) => (
+                  <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
+                      <Box>
+                          <h1>{name}</h1>
+                          <div>{moment(date).format('YYYY-MM-DD')}</div>
+                      </Box>
+                  </Col>
+              ))}
+              </TabPane>
+              <TabPane tab="Following" key="2">
+              {Object.entries(UserData.following).map(([name, date]) => (
+                  <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
+                      <Box>
+                          <h1>{name}</h1>
+                          <div>{moment(date).format('YYYY-MM-DD')}</div>
+                      </Box>
+                  </Col>
+              ))}
+              </TabPane>
+              </Tabs>
+            </TabPane>
+            <TabPane tab="Graphs" key="2">
+            <Row style={rowStyle} gutter={0} justify="start">
+              <Col lg={24} md={12} sm={12} xs={24} style={colStyle}>
+                <IsoWidgetsWrapper>
+                  <Box title="Connections By Day">
+                    <ContentHolder>
+                      <ConnectionsByDayLine />
+                    </ContentHolder>
+                  </Box>
+                </IsoWidgetsWrapper>
+              </Col>
+            </Row>
+            </TabPane>
+          </Tabs>
+        </Box>
       </LayoutWrapper>
     );
   };
-- 
GitLab