fix: no need for useEffect

src/components/Creatives/CreativeStatusSwitch.tsx

@@ -22,7 +22,6 @@ 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;
@@ -39,7 +38,7 @@ export function CreativeStatusSwitch({ creative }: Props) {
   const [relatedCampaigns, setRelatedCampaigns] = useState<RelatedCampaign[]>(
     [],
   );
-  const [creativeState, setCreativeState] = useGetEntityState(input.state);
+  const [creativeState, setCreativeState] = useState(input.state);
   const [update, { loading: updateLoading }] = useUpdateCreativeMutation({
     refetchQueries: [
       refetchAdvertiserCreativesQuery({ advertiserId: advertiser.id }),
@@ -51,9 +50,6 @@ export function CreativeStatusSwitch({ creative }: Props) {
     onCompleted() {
       setRelatedCampaigns([]);
     },
-    onError() {
-      setCreativeState(input.state);
-    },
   });
   const [campaigns, { loading }] = useCampaignsForCreativeLazyQuery({
     variables: { creativeId: creative.id, advertiserId: advertiser.id },
@@ -87,13 +83,13 @@ export function CreativeStatusSwitch({ creative }: Props) {
             },
           });
         }}
-        checked={creativeState === "active"}
+        checked={creative.state === "active"}
         disabled={loading || updateLoading}
       />
       <Dialog open={relatedCampaigns.length > 0}>
         <DialogTitle>
           Are you sure you want to{" "}
-          {creativeState === "active" ? "activate" : "pause"}{" "}
+          {creative.state === "active" ? "activate" : "pause"}{" "}
           {`"${input.name}"`}
         </DialogTitle>
         <DialogContent>
@@ -116,7 +112,6 @@ export function CreativeStatusSwitch({ creative }: Props) {
             variant="outlined"
             onClick={() => {
               setRelatedCampaigns([]);
-              setCreativeState(creative.state);
             }}
             disabled={updateLoading}
           >

src/components/Switch/OnOff.tsx

@@ -1,7 +1,6 @@
 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 +21,6 @@ export function OnOff({
   source,
   isInline,
 }: Props) {
-  const [entityState, setEntityState] = useGetEntityState(state);
   const isAfterEnd = isPast(parseISO(end));
   const enabled =
     source === CampaignSource.SelfServe &&
@@ -33,7 +31,7 @@ export function OnOff({
     isInline ? null : (
       <Typography sx={{ textAlign: "center", p: 0 }}>-</Typography>
     );
-  const tooltip = entityState === "paused" ? "Pause" : "Activate";
+  const tooltip = state === "paused" ? "Pause" : "Activate";
 
   return (
     <Tooltip
@@ -46,10 +44,9 @@ export function OnOff({
           <Switch
             onChange={(e) => {
               const theState = e.target.checked ? "active" : "paused";
-              setEntityState(theState);
               onChange(theState);
             }}
-            checked={entityState === "active"}
+            checked={state === "active"}
             disabled={loading}
           />
         ) : (