Import.js

import React, { Component } from 'react';
import { Row, Col } from 'antd';

import Dropzone from '@imd/components/uielements/dropzone';
import { notification } from '@imd/components';
import PageHeader from '@imd/components/utility/pageHeader';
import Box from '@imd/components/utility/box';
import LayoutWrapper from '@imd/components/utility/layoutWrapper';
import ContentHolder from '@imd/components/utility/contentHolder';
import DropzoneWrapper from './Import.styles';

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 TotalSongsByDayLine from './Components/TotalSongsByDayLine/TotalSongsByDayLine';
import UserData from './Data/StreamingHistory0.json';

function callback(key) {}

export default class extends Component {

  componentDidMount() {
    new FrappeChart(configs.impressionsLineChart);
  }

  render() {

    let totalSongs = UserData.length;

    const CARD_WIDGET = [
      {
        icon: 'ion-music-note',
        iconcolor: '#1db954',
        number: totalSongs.toString(),
        text: 'Total Listens',
      },
    ];

    //##########
    //Dropzone
    //##########
    const componentConfig = {
      iconFiletypes: ['.json'],
      method: true,
      showFiletypeIcon: false,
      uploadMultiple: false,
      maxFilesize: 2, // MB
      maxFiles: 1,
      dictRemoveFile: 'Delete',
      dictCancelUploadConfirmation: 'Are you sure to cancel upload?',
      postUrl: '/upload',
    };
    const djsConfig = {
      acceptedFiles: '.json',
      params: {
        account: "tinder"
      }
    };
    const eventHandlers = {
      addedfile: file => notification('success', `${file.name} added`),
      success: file =>
        notification('success', `${file.name} successfully uploaded`),
      error: error => notification('error', 'Server is not set in the demo')
    };

    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <LayoutWrapper>
        <PageHeader>Import</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
            <Col span={24} style={colStyle}>
            <Box>
              <u>How To Download Your Spotify Data:</u> <br></br>
              1. Log in to <a href="https://www.spotify.com/us/">spotify.com</a> <br></br>
              2. Click <b>Log In</b> and enter your credentials <br></br>
              3. Select <b>Privacy Settings</b> from the left-hand navigation<br></br>
              4. Scroll down to <b>Download Your Data</b> and select <b>Request</b><br></br>
              5. Go to your email to confirm your request<br></br>
              6. Upload your data in the dropbox below<br></br>
            </Box>
            </Col>
        </Row>
        <Box>
          <ContentHolder>
            <DropzoneWrapper>
              <Dropzone
                config={componentConfig}
                eventHandlers={eventHandlers}
                djsConfig={djsConfig}
              />
            </DropzoneWrapper>
          </ContentHolder>
        </Box>

        <PageHeader>Data & Analytics</PageHeader>
        <Box>
          <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="Raw Data" key="1">
              {UserData.map((song, idx) => (
                <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
                  <Box>
                    <h1>{song.trackName}</h1>
                    <div>Artist: {song.artistName}</div>
                    <div>{song.endTime}</div>
                  </Box>
                </Col>
              ))}
            </TabPane>
            <TabPane tab="Graphs" key="2">
            <Row style={rowStyle} gutter={0} justify="start">
              <Col lg={6} md={12} sm={12} xs={24} style={colStyle}>
                {CARD_WIDGET.map((widget, idx) => (
                  <IsoWidgetsWrapper key={idx} gutterBottom={20}>
                    {/* Card Widget */}
                    <CardWidget
                      icon={widget.icon}
                      iconcolor={widget.iconcolor}
                      number={widget.number}
                      text={widget.text}
                    />
                  </IsoWidgetsWrapper>
                ))}
              </Col>
              <Col lg={18} md={12} sm={12} xs={24} style={colStyle}>
              <IsoWidgetsWrapper>
                  <Box title="Total Songs By Day">
                    <ContentHolder>
                      <TotalSongsByDayLine />
                    </ContentHolder>
                  </Box>
                </IsoWidgetsWrapper>
              </Col>
            </Row>
            </TabPane>
          </Tabs>
        </Box>
      </LayoutWrapper>
    );
  };
}