tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

DSEmptyState.jsx (2445B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
      6 import React from "react";
      7 
      8 export class DSEmptyState extends React.PureComponent {
      9  constructor(props) {
     10    super(props);
     11    this.onReset = this.onReset.bind(this);
     12    this.state = {};
     13  }
     14 
     15  componentWillUnmount() {
     16    if (this.timeout) {
     17      clearTimeout(this.timeout);
     18    }
     19  }
     20 
     21  onReset() {
     22    if (this.props.dispatch && this.props.feed) {
     23      const { feed } = this.props;
     24      const { url } = feed;
     25      this.props.dispatch({
     26        type: at.DISCOVERY_STREAM_FEED_UPDATE,
     27        data: {
     28          feed: {
     29            ...feed,
     30            data: {
     31              ...feed.data,
     32              status: "waiting",
     33            },
     34          },
     35          url,
     36        },
     37      });
     38 
     39      this.setState({ waiting: true });
     40      this.timeout = setTimeout(() => {
     41        this.timeout = null;
     42        this.setState({
     43          waiting: false,
     44        });
     45      }, 300);
     46 
     47      this.props.dispatch(
     48        ac.OnlyToMain({ type: at.DISCOVERY_STREAM_RETRY_FEED, data: { feed } })
     49      );
     50    }
     51  }
     52 
     53  renderButton() {
     54    if (this.props.status === "waiting" || this.state.waiting) {
     55      return (
     56        <button
     57          className="try-again-button waiting"
     58          data-l10n-id="newtab-discovery-empty-section-topstories-loading"
     59        />
     60      );
     61    }
     62 
     63    return (
     64      <button
     65        className="try-again-button"
     66        onClick={this.onReset}
     67        data-l10n-id="newtab-discovery-empty-section-topstories-try-again-button"
     68      />
     69    );
     70  }
     71 
     72  renderState() {
     73    if (this.props.status === "waiting" || this.props.status === "failed") {
     74      return (
     75        <React.Fragment>
     76          <h2 data-l10n-id="newtab-discovery-empty-section-topstories-timed-out" />
     77          {this.renderButton()}
     78        </React.Fragment>
     79      );
     80    }
     81 
     82    return (
     83      <React.Fragment>
     84        <h2 data-l10n-id="newtab-discovery-empty-section-topstories-header" />
     85        <p data-l10n-id="newtab-discovery-empty-section-topstories-content" />
     86      </React.Fragment>
     87    );
     88  }
     89 
     90  render() {
     91    return (
     92      <div className="section-empty-state">
     93        <div className="empty-state-message">{this.renderState()}</div>
     94      </div>
     95    );
     96  }
     97 }