readme.md

Certainly. Here are the relevant code segments responsible for filtering in the MetrcTags component:

Filter state and initialization:

const [selectedFilter, setSelectedFilter] = useState('All');

Fetch data with filter:

const fetchData = async (page = 1) => {
  setLoading(true);
  setError(null);
  try {
    let url = `metrc-tag/?limit=${limit}&page=${page}`;
    if (selectedFilter !== 'All') {
      url += `&farm_id=${selectedFilter}`;
    }
    const metrcResponse = await APIService.fetchInstance(url);
    // ... rest of the function
  } catch (err) {
    // ... error handling
  } finally {
    setLoading(false);
  }
};

Handle filter change:

const handleFilterChange = (farmId) => {
  if (farmId === 'All' || farmId === selectedFilter) {
    setSelectedFilter('All');
  } else {
    setSelectedFilter(farmId);
  }
};

Filter chips rendering:

const sChipsProps = (farm) => ({
  key: farm.id,
  label: farm.name,
  variant: selectedFilter === farm.id ? 'filled' : 'outlined',
  onClick: () => handleFilterChange(farm.id),
  clickable: true,
  className: `${roomDetailClasses.chip} ${currDarkThemeClass}`
});

const metrcTagFarmChipsList = (
  <Stack direction='row' spacing={1}>
    <Chip
      key="All"
      label="All"
      variant={selectedFilter === 'All' ? 'filled' : 'outlined'}
      onClick={() => handleFilterChange('All')}
      clickable
      className={`${roomDetailClasses.chip} ${currDarkThemeClass}`}
    />
    {farms.map(farm => (
      <Chip key={farm.id} {...sChipsProps(farm)} />
    ))}
  </Stack>
);

Filter section in the JSX:

<Stack {...metrcTagFilterProps}>
  <Typography {...metrcTagFilterTypoProps}>Show by Farm:</Typography>
  {metrcTagFarmChipsList}
</Stack>

These code segments work together to implement the filtering functionality in the MetrcTags component. The filter allows users to select a specific farm or view all tags, updating the displayed data accordingly.

Smnthjm08/readme.md