From d4418a1dc211ff110f692a1a821e748068ae3d3f Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Fri, 9 Jun 2023 02:06:41 +1000
Subject: [PATCH] Reset selected people if the amount changes

---
 .../components/AvailabilityViewer/AvailabilityViewer.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index 3a7e5f9..94702e2 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Fragment, useMemo, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
 import { Temporal } from '@js-temporal/polyfill'
 
 import Content from '/src/components/Content/Content'
@@ -51,6 +51,11 @@ const AvailabilityViewer = ({ times, timezone, people }: AvailabilityViewerProps
   // Create the colour palette
   const palette = usePalette(Math.max((max - min) + 1, 2))
 
+  // Reselect everyone if the amount of people changes
+  useEffect(() => {
+    setFilteredPeople(people.map(p => p.name))
+  }, [people.length])
+
   const heatmap = useMemo(() => columns.map((column, x) => <Fragment key={x}>
     {column ? <div className={styles.dateColumn}>
       {column.header.dateLabel && <label className={styles.dateLabel}>{column.header.dateLabel}</label>}