Reputation: 96

Empty State doesn't get displayed

I have a child component which gets an array of items passed down from its parent component. Everything gets correctly displayed and deleting items works as well. But once the last item in the table was deleted, the empty state does not show. Only once I reload the page the empty state gets shown.

I'm new to react and probably just don't fully understand the state/props management yet.

Can someone please explain? Thanks in advance.

Parent:

import React from "react";
import { Message } from "semantic-ui-react";
import BasarService from "../../../../services/BasarService";
import BasarTable from "./components/BasarTable/BasarTable";

class Basars extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      basars: []
    };

    this.basarService = new BasarService();
    this.deleteBasar = this.deleteBasar.bind(this);
  }

  deleteBasar(id) {
    this.basarService.delete(id, response => {
      var filteredBasars = this.state.basars.filter(basar => basar.id !== id);
      this.setState({
        basars: filteredBasars
      });

      console.log("Success:", response);
    });
  }

  getBasars() {
    this.basarService.getAll(data => {
      this.setState({
        isLoaded: true,
        basars: data
      });
    });
  }

  componentDidMount() {
    this.getBasars();
  }

  render() {
    const { error, isLoaded, basars } = this.state;

    const ErrorMessage = () => (
      <Message negative>
        <Message.Header>Basars could not be loaded!</Message.Header>
        <p>{error.message}</p>
      </Message>
    );

    if (error) {
      return ErrorMessage();
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <BasarTable basars={basars} deleteBasar={this.deleteBasar} />
      );
    }
  }
}

export default Basars;

Child:

import React from "react";
import { Table, Button, Icon } from "semantic-ui-react";
import { formatDate } from "../../../../../../util/timeFormat";

class BasarTable extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(basarId) {
    this.props.deleteBasar(basarId);
  }

  render() {
    const { basars } = this.props;

    const BasarRows = basars => (
      basars.map(basar => (
        <Table.Row key={basar.id}>
          <Table.Cell>{basar.id}</Table.Cell>
          <Table.Cell>{basar.type}</Table.Cell>
          <Table.Cell>{formatDate(basar.startdate)}</Table.Cell>
          <Table.Cell>{formatDate(basar.enddate)}</Table.Cell>
          <Table.Cell>
            <Button icon color="red" onClick={() => this.handleClick(basar.id)}>
              <Icon name="trash" />
            </Button>
          </Table.Cell>
        </Table.Row>
      ))
    );

    const EmptyState = (
      <Table.Row>
        <Table.Cell colSpan="5" textAlign="center">
          <Icon name="frown" />No basars found!
        </Table.Cell>
      </Table.Row>
    );


    return (
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Type</Table.HeaderCell>
            <Table.HeaderCell>StartDate</Table.HeaderCell>
            <Table.HeaderCell>EndDate</Table.HeaderCell>
            <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {basars ? BasarRows(basars) : EmptyState}
        </Table.Body>
      </Table>
    );
  }
}

export default BasarTable;

Upvotes: 0