FollowedAppsManager.tsx

import React, { PureComponent, ReactNode } from "react";
import ReactTable from "react-table";
import TableColumnHeader from "@apps/shared/TableColumnHeader";
import FollowedAppSummary from "@apps/models/FollowedAppSummary";
import AppTweakSpinner from "@apps/shared/AppTweakSpinner";
import { listFollowedApps, deleteFollowedApp } from "@apps/Account/services/FollowedAppsService"
import { pluralize } from "@apps/utils/strings";

const totalKeywords = (app: FollowedAppSummary): number => {
  return app.keyword_categories.reduce(
    (totalKeywords, currentCategory) => {
      return totalKeywords + currentCategory.keyword_count
    },
    0
  )
}

interface FollowedAppsManagerState {
  loading: boolean;
  apps: FollowedAppSummary[];
}

interface FollowedAppsManagerProps {
  handleChange: () => any;
}

class FollowedAppsManager extends PureComponent<FollowedAppsManagerProps, FollowedAppsManagerState> {

  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      apps: []
    }

  }

  async componentDidMount() {
    const followedApps = await listFollowedApps();
    this.setState({
      loading: false,
      apps: followedApps
    })
  }

  async deleteFollowedApp(id: number) {
    if (
      confirm('You are about to stop following this application. All associated competitors and keywords will also be deleted. This operation cannot be undone. Are you sure you want to continue?')
    ) {
      //this.setState({loading: true})
      // Remove dleete integration from state
      this.setState((prevState) => {
        return {
          ...prevState,
          apps: prevState.apps.filter((item) => item.id !== id)
        }
      })
      await deleteFollowedApp(id);
      this.props.handleChange();
    }
  }

  getTableColumns = (): any[] => {
    return [
      {
        Header: (
          <TableColumnHeader
            id="store"
            title="Store"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="title"
            title="Title"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="country"
            title="Country"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="language"
            title="Language"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="keywords"
            title="Keywords"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="competitors"
            title="Competitors"
          />
        )
      },
      {
        Header: (
          <TableColumnHeader
            id="actions"
            title="Actions"
          />
        )
      },
    ]
  }

  getTableData = (): any[] => {
    return this.state.apps.map((followedAppItem) => {
      return {
        store: 'ios',
        title: 'foo',
        country: 'be',
        language: 'fr',
        keywords: 12,
        competitors: 45,
        actions: "",
      }
    })
  }

  render(): ReactNode {
    const tableStyle = {
      borderWidth: '0 0 1px 0'
    }
    return (
      this.state.loading
        ? (<AppTweakSpinner />)
        : (
          <div>
            <ReactTable
              data={this.getTableData()}
              columns={this.getTableColumns()}
              noDataText="We didn't find any data to dispay"
            />
          </div>
        )
    )
  }
}

export default FollowedAppsManager;