fix: state switches

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 }),

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}
           />
         ) : (

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];
+}