Events Table - Filter source

[daisycrego]

• [ ] Add a filter button for the Source column of the EventsTable which toggles:
  • a list of checkboxes with the different sources, extracted from the data (Zillow, Zillow Flex, apartments.com, etc).
  • options to select all and select none. The default selection is "Zillow Flex".
  • save button to apply these changes to the UI - this should update the activeRows, which we need to move into state, it's not defined as state now.

[daisycrego]

Minor issue

• Trying to move activeRows from being an instance variable defined on the EventsTable component to being state, because it's going to have to start changing in response to difference Source filters. Currently activeRows is defined within EventsTable like this:

  export default function EventsTable({ rows }) {
  // ...
  
  const activeRows = stableSort(rows, getComparator(order, orderBy)).slice(
  page * rowsPerPage,
  page * rowsPerPage + rowsPerPage
  );

• I tried to implement something more along the lines of this, but now the issue is that activeRows isn't being loaded correctly at all, and ends up being set to an empty array. This is likely due to the order of events during mounting/rendering and fetching of the data:

  export default function EventsTable({ rows }) {
  // ...
  const [activeRows, setActiveRows] = useState([]);
  
  // Doesn't work, only seems to be called when `rows` is an empty array? 
  // And then at some point after that, `rows` is populated with the events, 
  // but we don't call the `useEffect` hook after the initial call. 
  useEffect(() => {
  const activeRows = stableSort(rows, getComparator(order, orderBy)).slice(
    page * rowsPerPage,
    page * rowsPerPage + rowsPerPage
  );
  setActiveRows(activeRows);
  }, [])

[daisycrego]

• Ah, I was able to add rows (props) to the dependency array of the useEffect hook:

  React.useEffect(() => {
  const activeRows = stableSort(rows, getComparator(order, orderBy)).slice(
    page * rowsPerPage,
    page * rowsPerPage + rowsPerPage
  );
  setActiveRows(activeRows);
  }, [rows]);

[daisycrego]

Issue

Reproduce the Issue

• Homepage events table (/) displaying 1-10 of 26 results (Zillow Flex only by default) --> Source filter dropdown --> Add Ylopo
• The results on the page do update to show a mix of Ylopo and Zillow Flex events (good). And the pagination shows 1-10 of 1403.
• Click the right arrow button to go to the next page of results

What should happen

• Pagination shows 11-20 of 1403

What does happen

• Pagination shows 11-10 of 10
• Also, if you then go back to the last page using the back arrow, both arrows become disabled and you lose all ability to change between pages.

[daisycrego]

Problem

• The issue is happening at the TablePagination component:

  <TablePagination
  rowsPerPageOptions={[5, 10, 25, 50, 100]}
  component="div"
  count={activeRows.length}
  rowsPerPage={rowsPerPage}
  page={page}
  onChangePage={handleChangePage}
  onChangeRowsPerPage={handleChangeRowsPerPage}
  />

• How is activeRows being set? Is it being updated correctly when source is updated?

  
  const [activeRows, setActiveRows] = React.useState([]);

// ...

React.useEffect(() => { // Extract property.street from property object (for sorting) const rowsWithPropertyStreet = rows.map((event) => { if (event.property && event.property.street) { event.propertyStreet = event.property.street; } else { event.propertyStreet = ""; } return event; }); const rowsWithActiveSource = rowsWithPropertyStreet.filter((row) => activeSources.includes(row.source) );

const active = stableSort( rowsWithActiveSource, getComparator(order, orderBy) ).slice(page rowsPerPage, page rowsPerPage + rowsPerPage); const allSources = rows.map((row) => row.source).filter((x) => x); const uniqueSources = _.uniq(allSources); setSources(uniqueSources); setActiveRows(rowsWithActiveSource); setCurrentRows(active); }, [rows, order]);

// ...

const handleChangePage = (event, newPage) => { setPage(newPage); const newActiveRows = activeRows.slice( newPage rowsPerPage, newPage rowsPerPage + rowsPerPage ); setActiveRows(newActiveRows); };

## Found it
- Needed to change `handleChangePage` to this:
```js
 const handleChangePage = (event, newPage) => {
    setPage(newPage);
    const newActiveRows = activeRows.slice(
      newPage * rowsPerPage,
      newPage * rowsPerPage + rowsPerPage
    );
    setCurrentRows(newActiveRows);
  };

[daisycrego]

New issue with the table

Reproduce the issue

Change the source to include a bunch of events by adding a large lead source (e.g. Ylopo) to the default (Zillow Flex). Page through the results many pages (the error in my case occured at page 23->24). Now that you're at this advanced page, change the sources again -> Remove the large lead source (eg Ylopo))

What should happen

List of activeEvents and currentEvents should be updated correctly so that we see the first page of the revised set of sources! This means when we update source, we need to update pagination! This is the fix, need to implement it.

What does happen

When source is changed, pagination isn't updated appropriately.

[daisycrego]

Solution

Whenever we update the source by clicking a checkbox, make sure to reset the page to 0:

const handleCheckboxClick = (source) => {
  let newActiveSources;
  if (activeSources.includes(source)) {
    newActiveSources = activeSources.filter(
      (activeSource) => activeSource != source
    );
  } else {
    newActiveSources = [...activeSources, source];
  }
  setActiveSources(newActiveSources);
  const rowsWithActiveSource = rows.filter((row) =>
    newActiveSources.includes(row.source)
  );
  const newActiveRows = stableSort(
    rowsWithActiveSource,
    getComparator(order, orderBy)
  );
  const newPage = 0;
  setActiveRows(newActiveRows);
  setCurrentRows(
    newActiveRows.slice(
      newPage * rowsPerPage,
      newPage * rowsPerPage + rowsPerPage
    )
  );
  setPage(0);
};

[daisycrego]

More features

3 new buttons:

• 2 new checkboxes (icons checked and unchecked): display all sources and display no sources (clear all selections)
• Reset icon (which resets to the default source, Zillow Flex, being checked

[daisycrego]

Options:

import DoneAllIcon from '@material-ui/icons/DoneAll';

• 

  import ClearIcon from '@material-ui/icons/Clear';

  

  import ClearAllIcon from '@material-ui/icons/ClearAll';

  

[daisycrego]

Refactor - Allow similar filtering by Status