Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Data on page view not auto reloading on firestore change?

See original GitHub issue

Hey guys, I am currently having a problem when updating data on a page. I want to be able to update some data which then calls a function in my action controller that updates data in firestore. I am able to update the data and call the method and the firestore data is updated, but my client does not show the change? How do I make it so whenever something changes in my firestore database the view for my client is refreshed if they are the page containing that data?

I am currently using firestoreConnect to try and tie the data to my view but the only way I can see updates I have made is to refresh the page manually.

My code is as follows:

BudgetDashboard.jsx

import { connect } from "react-redux";
import { firestoreConnect, isLoaded } from "react-redux-firebase";
import { compose } from "redux";
import { Grid } from "semantic-ui-react";
import BudgetHeader from "../BudgetHeader/BudgetHeader";
import BudgetList from "../BudgetList/BudgetList";
import BudgetNav from "../BudgetNav/BudgetNav";
import { updateData, updateBudgetData, loadBudget, compareChooser } from "../budgetActions";
import LoadingComponent from "../../../app/layout/LoadingComponent";

const mapState = state => ({
  users: state.firestore.ordered.users
});

const actions = {
  updateData,
  updateBudgetData,
  loadBudget,
  compareChooser
};

class BudgetDashboard extends Component {
  updateBudgetData = (newData, fieldToUpdate) => {
    this.props.updateBudgetData(newData, fieldToUpdate);
  };

  onCompareChange = (event, data) => {
    if (data.checked) {
      this.props.compareChooser("net");
    } else {
      this.props.compareChooser("gross");
    }
  };

  render() {
    const { users } = this.props;
    if (!isLoaded(users)) return <LoadingComponent inverted={true} />;
    return (
      <Grid>
        <Grid.Column width={16}>
          <BudgetNav />
          <BudgetHeader
            general={users[0].budget[1]}
            onCompareChange={this.onCompareChange}
          />
          <BudgetList
            className="standardSeparation"
            data={users[0].budget[0]}
            unallocatedBudget={users[0].budget[1].unallocatedBudget}
            unallocatedSpending={users[0].budget[1].unallocatedSpending}
            updateData={this.updateBudgetData}
          />
        </Grid.Column>
      </Grid>
    );
  }
}

export default compose(
  connect(
    mapState,
    actions
  ),
  firestoreConnect([
    {
      collection: "users",
      doc: "dafasdfsadfasfasdf",
      subcollections: [{ collection: "budget" }]
    }
  ])
)(BudgetDashboard);```

**budgetActions**
`export const updateBudgetData = (inputData, fieldToUpdate) => {
  return async (dispatch, getState, { getFirebase, getFirestore }) => {
    try {
      const firestore = getFirestore();

      // Get all firestore data nodes that will be used for updating after data change
      const userBudget = firestore
        .collection("users")
        .doc("asdfasdfsadfasfsadfsafd")
        .collection("budget");
      const userGeneralRef = userBudget.doc("general");
      const userDataRef = userBudget.doc("data");

      await userDataRef
        .get()
        .then(function(doc) {
          if (doc.exists) {
            const updatedMap = generateUpdatedMap(doc.data(), inputData, fieldToUpdate);
            userDataRef.set(updatedMap);
          } else {
            console.log("No document data");
          }
        })
        .catch(function(error) {
          console.log("Error: ", error);
        });

      toastr.success("Success!", "Budget data has been updated");
    } catch (error) {
      toastr.error("Oops", "Something went wrong");
    }
  };
};`




**BudgetListComponent**

import React, { Component } from “react”; import { Accordion, Icon, List, Menu, Grid } from “semantic-ui-react”; import ClickToEdit from “…/…/…/app/common/util/ClickToEdit/ClickToEdit”;

class BudgetListContent extends Component { render() { const { data, updateData, unallocatedBudget, unallocatedSpending } = this.props;

const panels =
  data &&
  data.content.map(rec => ({
    key: rec.id,
    title: (
      <Accordion.Title
        className="secondaryBkgTheme rounded"
        style={{ marginBottom: 5 }}
      >
        <Icon name="dropdown" />
        <Icon name={rec.icon} style={{ marginRight: 10 }} />
        <span>{rec.title}</span>
        <span style={{ position: "absolute", left: 218 }}>
          <span>${parseFloat(rec.budgeted).toFixed(2)}</span>
        </span>
        <span style={{ position: "absolute", left: 368 }}>
          ${parseFloat(rec.spent).toFixed(2)}
        </span>
        <span style={{ position: "absolute", left: 518 }}>
          ${parseFloat(rec.leftover).toFixed(2)}
        </span>
        <span style={{ position: "absolute", left: 668 }}>
          <span className="greenBudgetBox" />
          <span>{rec.atlasScore}</span>
        </span>
        <span style={{ float: "right", paddingRight: 10 }}>
          {parseFloat(rec.budgetedPercent).toFixed(1)}%
        </span>
      </Accordion.Title>
    ),
    content:
      rec.sections &&
      rec.sections.map(subRec => (
        <List key={subRec.id} divided relaxed style={{ marginLeft: 10 }}>
          <List.Item>
            <List.Icon name={subRec.icon} />
            <List.Content>
              <span style={{ marginTop: 1 }}>{subRec.title}</span>
              <span
                style={{
                  position: "absolute",
                  left: 218,
                  display: "inline-flex"
                }}
              >
                <span>$</span>
                <ClickToEdit
                  wrapperClass="editableBudgetLabel"
                  inputClass="editableBudgetInput"
                  textClass="editableBudgetText"
                  fieldAffected={{
                    sectionId: data.id,
                    headerId: rec.id,
                    itemId: subRec.id,
                    column: "budgeted"
                  }}
                  value={parseFloat(subRec.budgeted)
                    .toFixed(2)
                    .toString()}
                  endEditing={updateData}
                />
              </span>
              <span
                style={{
                  position: "absolute",
                  left: 368,
                  display: "inline-flex"
                }}
              >
                <span>$</span>
                <ClickToEdit
                  wrapperClass="editableBudgetLabel"
                  inputClass="editableBudgetInput"
                  textClass="editableBudgetText"
                  fieldAffected={{
                    sectionId: data.id,
                    headerId: rec.id,
                    itemId: subRec.id,
                    column: "spent"
                  }}
                  value={parseFloat(subRec.spent)
                    .toFixed(2)
                    .toString()}
                  endEditing={updateData}
                />
              </span>
              <span style={{ position: "absolute", left: 518 }}>
                ${parseFloat(subRec.leftover).toFixed(2)}
              </span>
              <span style={{ position: "absolute", left: 668 }}>
                <span className="redBudgetBox" />
                <span>{subRec.atlasScore}</span>
              </span>
              <span style={{ float: "right", paddingRight: 10 }}>
                <Icon name="minus circle" />
              </span>
              <span
                style={{
                  float: "right",
                  paddingRight: 10,
                  display: "inline-flex"
                }}
              >
                <span>{parseFloat(subRec.budgetedPercent).toFixed(1)}</span>
                <span>%</span>
              </span>
            </List.Content>
          </List.Item>
        </List>
      ))
  }));

return (
  <div>
    <Grid
      columns={2}
      divided
      textAlign="center"
      verticalAlign="middle"
      style={{ marginBottom: 5 }}
    >
      <Grid.Column>
        <span style={{ marginRight: 10 }}>Leftover Budget Funds:</span>
        <span style={{ color: "green" }}>
          ${data && parseFloat(unallocatedBudget).toFixed(2)}
        </span>
      </Grid.Column>
      <Grid.Column>
        <span style={{ marginRight: 10 }}>Leftover Monthly Spending:</span>
        <span style={{ color: "green" }}>
          ${data && parseFloat(unallocatedSpending).toFixed(2)}
        </span>
      </Grid.Column>
    </Grid>
    <Menu secondary style={{ marginBottom: 0, marginTop: 0 }}>
      <Menu.Item
        name="Category"
        className="budgetListHeader"
        style={{ left: 0 }}
      />
      <Menu.Item
        name="Budgeted"
        className="budgetListHeader"
        style={{ left: 200 }}
      />
      <Menu.Item
        name="Spent"
        className="budgetListHeader"
        style={{ left: 350 }}
      />
      <Menu.Item
        name="Leftover"
        className="budgetListHeader"
        style={{ left: 500 }}
      />
      <Menu.Item
        name="AtlasScore"
        className="budgetListHeader"
        style={{ left: 650 }}
      />
    </Menu>
    <Accordion
      defaultActiveIndex={[0, 1, 2, 3]}
      panels={panels}
      exclusive={false}
      fluid
    />
  </div>
);

} }

export default BudgetListContent;