"use client";
// ..... imports left out for brevity
export default function AssociateDetails({
params,
}: { params: { id: string } }) {
const cookies = useCookies();
const router = useRouter();
const pathname = usePathname();
const queryClient = useQueryClient();
const { mutate } = useMutation(
UpdateAssociate(queryClient, cookies),
);
const { data } = useQuery(
AssociateConnection(
{
after: "",
query: "",
filters: [{ field: "id", value: [params.id] }],
limit: 1,
sortBy: "id",
direction: "DESC",
},
cookies,
),
);
const associate = data?.edges[0]?.node;
const [dailyLimit, setDailyLimit] = useState(associate?.dailyLimit || 100);
const [sendingDelay, setSendingDelay] = useState(associate?.sendDelaySeconds || 20);
useEffect(() => {
if (!associate) return;
setDailyLimit(associate.dailyLimit);
setSendingDelay(associate.sendDelaySeconds);
}, [associate]);
return (
<Sheet
open={pathname === `/associates/${params.id}`}
onOpenChange={() => {
router.push("/associates");
}}
>
<SheetContent>
<SheetHeader>
<SheetTitle>Details</SheetTitle>
</SheetHeader>
<div>
<Label htmlFor="width">
Daily Limit
</Label>
<Input
id="width"
value={dailyLimit}
onChange={(e) => setDailyLimit(Number(e.target.value))}
/>
<Label htmlFor="maxWidth">
Sending Delay
</Label>
<Input
id="maxWidth"
value={sendingDelay}
onChange={(e) => setSendingDelay(Number(e.target.value))}
/>
</div>
<SheetFooter>
<Button
onClick={() => {
if (!associate) return;
mutate({
associateID: associate.id,
dailyLimit: dailyLimit,
sendDelay: sendingDelay,
});
}}
>
Save Changes
</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
}
"use client";
// ..... imports left out for brevity
export default function AssociateDetails({
params,
}: { params: { id: string } }) {
const cookies = useCookies();
const router = useRouter();
const pathname = usePathname();
const queryClient = useQueryClient();
const { mutate } = useMutation(
UpdateAssociate(queryClient, cookies),
);
const { data } = useQuery(
AssociateConnection(
{
after: "",
query: "",
filters: [{ field: "id", value: [params.id] }],
limit: 1,
sortBy: "id",
direction: "DESC",
},
cookies,
),
);
const associate = data?.edges[0]?.node;
const [dailyLimit, setDailyLimit] = useState(associate?.dailyLimit || 100);
const [sendingDelay, setSendingDelay] = useState(associate?.sendDelaySeconds || 20);
useEffect(() => {
if (!associate) return;
setDailyLimit(associate.dailyLimit);
setSendingDelay(associate.sendDelaySeconds);
}, [associate]);
return (
<Sheet
open={pathname === `/associates/${params.id}`}
onOpenChange={() => {
router.push("/associates");
}}
>
<SheetContent>
<SheetHeader>
<SheetTitle>Details</SheetTitle>
</SheetHeader>
<div>
<Label htmlFor="width">
Daily Limit
</Label>
<Input
id="width"
value={dailyLimit}
onChange={(e) => setDailyLimit(Number(e.target.value))}
/>
<Label htmlFor="maxWidth">
Sending Delay
</Label>
<Input
id="maxWidth"
value={sendingDelay}
onChange={(e) => setSendingDelay(Number(e.target.value))}
/>
</div>
<SheetFooter>
<Button
onClick={() => {
if (!associate) return;
mutate({
associateID: associate.id,
dailyLimit: dailyLimit,
sendDelay: sendingDelay,
});
}}
>
Save Changes
</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
}