import React from 'react';
import { Heading, Button } from '@chakra-ui/core';

export default class Sources extends React.Component {
    constructor(props) {
        super(props);
        this.state = { loading: false,
                       fetched: false }
    }

    refresh = () => {
        this.setState({ loading: true });
        fetch('/api/refresh-sources', { method: 'POST' })
            .then(x => this.setState({ loading: false, fetched: true }));
    }

    clearTide = () => {
        this.setState({ loading: true });
        fetch('/api/clear-tide', { method: 'POST' })
            .then(x => this.setState({ loading: false }));
    }

    render() {
        return (
            <>
              <Heading>Sources</Heading>
              <Button onClick={this.refresh}>Refresh Sources</Button>
              <br /><br />
              <Button onClick={this.clearTide}>Clear Tide Data</Button>
              <br /><br />
              {this.state.loading ? 'Refreshing...' : <></>}
              {this.state.fetched ? 'Finished refreshing' : <></>}
            </>
        );
    }
}