From eee0039add11ab3b34cc64f15c3f27f1327d36b2 Mon Sep 17 00:00:00 2001
From: Dan Albert <dan@gingerhq.net>
Date: Sun, 9 Oct 2022 16:11:26 -0700
Subject: [PATCH] Key the PrimaryMarker with destination presence.

This is how React recommend dealing with derived state that needs to be
reset:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

The problem is that the new turn will give the component new props, but
new props will not cause the state to be reset. We can either do that
manually (which React recommends only for the cases where it is
absolutely necessary:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops),
or by forcing the component to be replaced by using a key.

Fixes https://github.com/dcs-liberation/dcs_liberation/issues/2388.
---
 client/src/components/controlpoints/MobileControlPoint.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/controlpoints/MobileControlPoint.tsx b/client/src/components/controlpoints/MobileControlPoint.tsx
index 5cd92be1..dcbaaade 100644
--- a/client/src/components/controlpoints/MobileControlPoint.tsx
+++ b/client/src/components/controlpoints/MobileControlPoint.tsx
@@ -215,7 +215,10 @@ interface MobileControlPointProps {
 export const MobileControlPoint = (props: MobileControlPointProps) => {
   return (
     <>
-      <PrimaryMarker controlPoint={props.controlPoint} />
+      <PrimaryMarker
+        controlPoint={props.controlPoint}
+        key={props.controlPoint.destination ? 0 : 1}
+      />
       <SecondaryMarker
         controlPoint={props.controlPoint}
         destination={props.controlPoint.destination}