Pixel editing.

src/app/(main)/pixels/PixelEditForm.tsx

@@ -5,7 +5,6 @@ import {
   Row,
   TextField,
   Button,
-  Text,
   Label,
   Column,
   Icon,
@@ -16,6 +15,8 @@ import { useMessages } from '@/components/hooks';
 import { Refresh } from '@/components/icons';
 import { getRandomChars } from '@/lib/crypto';
 import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
+import { useEffect, useState } from 'react';
+import { PIXELS_URL } from '@/lib/constants';
 
 const generateId = () => getRandomChars(9);
 
@@ -31,29 +32,48 @@ export function PixelEditForm({
   onClose?: () => void;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { mutate, error, isPending } = useUpdateQuery('/pixels', { id: pixelId, teamId });
-  const { pixelDomain } = useConfig();
+  const { mutate, error, isPending, touch } = useUpdateQuery(
+    pixelId ? `/pixels/${pixelId}` : '/pixels',
+    {
+      id: pixelId,
+      teamId,
+    },
+  );
+  const { pixelsUrl } = useConfig();
+  const hostUrl = pixelsUrl || PIXELS_URL;
   const { data, isLoading } = usePixelQuery(pixelId);
+  const [slug, setSlug] = useState(generateId());
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
+        touch('pixels');
         onSave?.();
         onClose?.();
       },
     });
   };
 
-  if (pixelId && !isLoading) {
+  const handleSlug = () => {
+    const slug = generateId();
+
+    setSlug(slug);
+
+    return slug;
+  };
+
+  useEffect(() => {
+    if (data) {
+      setSlug(data.slug);
+    }
+  }, [data]);
+
+  if (pixelId && isLoading) {
     return <Loading position="page" />;
   }
 
   return (
-    <Form
-      onSubmit={handleSubmit}
-      error={error?.message}
-      defaultValues={{ slug: generateId(), ...data }}
-    >
+    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={{ slug, ...data }}>
       {({ setValue }) => {
         return (
           <>
@@ -65,22 +85,29 @@ export function PixelEditForm({
               <TextField autoComplete="off" />
             </FormField>
 
+            <FormField
+              name="slug"
+              rules={{
+                required: formatMessage(labels.required),
+              }}
+              style={{ display: 'none' }}
+            >
+              <input type="hidden" />
+            </FormField>
+
             <Column>
-              <Label>{formatMessage(labels.pixel)}</Label>
+              <Label>{formatMessage(labels.link)}</Label>
               <Row alignItems="center" gap>
-                <Text>{pixelDomain || window.location.origin}/</Text>
-                <FormField
-                  name="slug"
-                  rules={{
-                    required: formatMessage(labels.required),
-                  }}
+                <TextField
+                  value={`${hostUrl}/${slug}`}
+                  autoComplete="off"
+                  isReadOnly
+                  allowCopy
                   style={{ width: '100%' }}
-                >
-                  <TextField autoComplete="off" isReadOnly />
-                </FormField>
+                />
                 <Button
                   variant="quiet"
-                  onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
+                  onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
                 >
                   <Icon>
                     <Refresh />