From f2f1457fbb8286de877a37c5a02ce87b6537b6fd Mon Sep 17 00:00:00 2001
From: Ian Krieger <iandkrieger@gmail.com>
Date: Thu, 12 Oct 2023 15:59:13 -0400
Subject: [PATCH] fix: state switches

---
 src/components/Creatives/CreativeStatusSwitch.tsx |  3 ++-
 src/components/Switch/OnOff.tsx                   | 10 +++++-----
 src/hooks/useGetEntityState.tsx                   | 13 +++++++++++++
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks/useGetEntityState.tsx

diff --git a/src/components/Creatives/CreativeStatusSwitch.tsx b/src/components/Creatives/CreativeStatusSwitch.tsx
index f9747fe8..f441579a 100644
--- a/src/components/Creatives/CreativeStatusSwitch.tsx
+++ b/src/components/Creatives/CreativeStatusSwitch.tsx
@@ -22,6 +22,7 @@ import { useState } from "react";
 import _ from "lodash";
 import { validCreativeFields } from "user/library";
 import { isReviewableState } from "util/displayState";
+import { useGetEntityState } from "hooks/useGetEntityState";
 
 interface Props {
   creative: CreativeFragment;
@@ -38,7 +39,7 @@ export function CreativeStatusSwitch({ creative }: Props) {
   const [relatedCampaigns, setRelatedCampaigns] = useState<RelatedCampaign[]>(
     [],
   );
-  const [creativeState, setCreativeState] = useState(input.state);
+  const [creativeState, setCreativeState] = useGetEntityState(input.state);
   const [update, { loading: updateLoading }] = useUpdateCreativeMutation({
     refetchQueries: [
       refetchAdvertiserCreativesQuery({ advertiserId: advertiser.id }),
diff --git a/src/components/Switch/OnOff.tsx b/src/components/Switch/OnOff.tsx
index 34cc9b20..6591af7e 100644
--- a/src/components/Switch/OnOff.tsx
+++ b/src/components/Switch/OnOff.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
 import { isPast, parseISO } from "date-fns";
 import { Switch, Tooltip, Typography } from "@mui/material";
 import { CampaignSource } from "graphql/types";
+import { useGetEntityState } from "hooks/useGetEntityState";
 
 interface Props {
   onChange: (s: string) => void;
@@ -22,7 +22,7 @@ export function OnOff({
   source,
   isInline,
 }: Props) {
-  const [checked, setChecked] = useState(state === "active");
+  const [entityState, setEntityState] = useGetEntityState(state);
   const isAfterEnd = isPast(parseISO(end));
   const enabled =
     source === CampaignSource.SelfServe &&
@@ -33,7 +33,7 @@ export function OnOff({
     isInline ? null : (
       <Typography sx={{ textAlign: "center", p: 0 }}>-</Typography>
     );
-  const tooltip = checked ? "Pause" : "Activate";
+  const tooltip = entityState === "paused" ? "Pause" : "Activate";
 
   return (
     <Tooltip
@@ -46,10 +46,10 @@ export function OnOff({
           <Switch
             onChange={(e) => {
               const theState = e.target.checked ? "active" : "paused";
-              setChecked(e.target.checked);
+              setEntityState(theState);
               onChange(theState);
             }}
-            checked={checked}
+            checked={entityState === "active"}
             disabled={loading}
           />
         ) : (
diff --git a/src/hooks/useGetEntityState.tsx b/src/hooks/useGetEntityState.tsx
new file mode 100644
index 00000000..6ab2919f
--- /dev/null
+++ b/src/hooks/useGetEntityState.tsx
@@ -0,0 +1,13 @@
+import { Dispatch, useEffect, useState } from "react";
+
+export function useGetEntityState(
+  ephemeralState: string,
+): [string, Dispatch<string>] {
+  const [state, setState] = useState(ephemeralState);
+
+  useEffect(() => {
+    setState(ephemeralState);
+  }, [ephemeralState]);
+
+  return [state, setState];
+}