Spotify.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 './Spotify.styles';

import basicStyle from '@imd/assets/styles/constants';
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 TotalSongsByDayLine from './Components/TotalSongsByDayLine/TotalSongsByDayLine';
import UserData from './Data/StreamingHistory0.json';

function callback(key) { }

export default class extends Component {

  constructor(props) {
    super(props);
    this.state = {
      jsonData: "",
    };
  }

  hasKey(key) {
    if (this.state.jsonData === "") {
      return false;
    } else if (key in JSON.parse(this.state.jsonData)) {
      return true;
    }
  }

  render() {
    let totalSongs = 0
    if (this.state.jsonData) {
      var myState = JSON.parse(this.state.jsonData)
      if ("StreamingHistory" in myState) {
        totalSongs = myState["StreamingHistory"].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`);
        if (file.name.includes("StreamingHistory")) {
          console.log("Streaming history file")
          const reader = new FileReader();
          reader.addEventListener("load", () => {
            var parsedData = JSON.parse(reader.result)

            if (this.state.jsonData) {
              var myState = JSON.parse(this.state.jsonData)
              if ("StreamingHistory" in myState) {
                console.log("concat to streaminghistory array")
                myState["StreamingHistory"] = myState["StreamingHistory"].concat(parsedData)
                console.log("New length:", myState["StreamingHistory"].length)
                this.setState({
                  jsonData: JSON.stringify(myState)
                })
              } 
              else {
                // myState["StreamingHistory"]
                myState["StreamingHistory"] = parsedData
                this.setState({
                  jsonData: JSON.stringify(myState)
                })
              }
              this.setState({
                jsonData: JSON.stringify(myState),
              })
            } 
            else {
              // No dictionary at all
              console.log("Creating new dictionary with Streaming History")
              var tempDict = {}
              tempDict["StreamingHistory"] = parsedData
              var arrayString = JSON.stringify(tempDict)
              this.setState({
                jsonData: arrayString,
              })
            }
          }, false);
          reader.readAsText(file);
        }
      },
      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>
        <title>Interpret My Spotify Data</title>
        <PageHeader>Import</PageHeader>
        { !this.state.jsonData || true ?
          <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 <b>Streaming History</b> data in the dropbox below<br></br>
              </Box>
            </Col>
          </Row> : <div></div>
        }
        { !this.state.jsonData || true ?
          <Box>
            <ContentHolder>
              <DropzoneWrapper>
                <Dropzone
                  config={componentConfig}
                  eventHandlers={eventHandlers}
                  djsConfig={djsConfig}
                />
              </DropzoneWrapper>
            </ContentHolder>
          </Box> : <div></div>
        }

        <PageHeader>Data & Analytics</PageHeader>
        <Box>
          <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="Raw Data" key="1">
              {this.hasKey("StreamingHistory") ? 
                JSON.parse(this.state.jsonData)["StreamingHistory"].slice(0, 500).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>
                ))
                : 
                <div> Please uploading your streaming history to view this data</div>}
            </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>
                        {this.hasKey("StreamingHistory") ?
                          <TotalSongsByDayLine streamData={JSON.stringify(JSON.parse(this.state.jsonData)["StreamingHistory"])} />
                          :
                          <TotalSongsByDayLine streamData="" />
                        }
                      </ContentHolder>
                    </Box>
                  </IsoWidgetsWrapper>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </Box>
      </LayoutWrapper>
    );
  };
}