feat: add loading states and refactor to TSX (#40)

* add loading states and refactor to TSX

* format

* copilot

* copilot

* copilot

Author: dnywh

messages/de.json

@@ -111,5 +111,27 @@
         "answer": "<p>We only send emails that are necessary to keep Peels working. That includes one or two account-related emails, and emails to notify you whenever a fellow Peels member has sent you message.</p><p>Email notifications are required for listing hosts, as it means a prospective donor has enquired about dropping off scraps (or picking something up). Hosts who longer wish to receive emails can either hide their listing from the map (making it impossible for new donors to reach out) or delete their listing entirely (meaning previous donors can no longer message, either).</p><p>People without listings cannot be messaged (and thus emailed) unless they initiate contact with a host first.</p><p>Anyone can report or block individual Peels members via our messaging system. Blocking someone means they can no longer message or email you.</p>"
       }
     }
+  },
+  "Contact": {
+    "title": "Kontakt",
+    "subtitle": "So erreichst du das Peels-Team.",
+    "via": {
+      "therot": "Hallo, Leser von The Rot. Danke fürs Vorbeischauen. Hier ist ein direkter Draht zu Danny.",
+      "general": "Hallo. Hier sind einige E-Mail-Adressen, unter denen du uns erreichen kannst."
+    },
+    "contactLabel": "Wenn du",
+    "contactOptions": {
+      "general": "Eine allgemeine Anfrage stellen möchtest",
+      "support": "Hilfe bei etwas brauchst",
+      "dw": "Mit Danny sprechen möchtest",
+      "newsletter": "Über den Newsletter sprechen möchtest"
+    },
+    "emailLabel": "Am besten schreibst du an",
+    "copyButton": {
+      "copied": "Kopiert",
+      "copying": "Wird kopiert...",
+      "copyFailed": "Kopieren fehlgeschlagen",
+      "copyAddress": "Adresse kopieren"
+    }
   }
 }

messages/en.json

@@ -129,6 +129,8 @@
     "emailLabel": "You’re best off emailing",
     "copyButton": {
       "copied": "Copied!",
+      "copying": "Copying...",
+      "copyFailed": "Copy failed",
       "copyAddress": "Copy address"
     }
   }

messages/es.json

@@ -111,5 +111,27 @@
         "answer": "<p>We only send emails that are necessary to keep Peels working. That includes one or two account-related emails, and emails to notify you whenever a fellow Peels member has sent you message.</p><p>Email notifications are required for listing hosts, as it means a prospective donor has enquired about dropping off scraps (or picking something up). Hosts who longer wish to receive emails can either hide their listing from the map (making it impossible for new donors to reach out) or delete their listing entirely (meaning previous donors can no longer message, either).</p><p>People without listings cannot be messaged (and thus emailed) unless they initiate contact with a host first.</p><p>Anyone can report or block individual Peels members via our messaging system. Blocking someone means they can no longer message or email you.</p>"
       }
     }
+  },
+  "Contact": {
+    "title": "Contacto",
+    "subtitle": "Así puedes contactar con el equipo de Peels.",
+    "via": {
+      "therot": "Hola, lector de The Rot. Gracias por pasar por aquí. Esta es una línea directa con Danny.",
+      "general": "Hola. Aquí tienes algunas direcciones de correo para contactarnos."
+    },
+    "contactLabel": "Si quieres",
+    "contactOptions": {
+      "general": "Hacer una consulta general",
+      "support": "Obtener ayuda con algo",
+      "dw": "Hablar con Danny",
+      "newsletter": "Hablar sobre el boletín"
+    },
+    "emailLabel": "Lo mejor es escribir a",
+    "copyButton": {
+      "copied": "Copiado",
+      "copying": "Copiando...",
+      "copyFailed": "No se pudo copiar",
+      "copyAddress": "Copiar dirección"
+    }
   }
 }

scripts/seed-local-media.mjs

@@ -79,7 +79,10 @@ function walkFiles(sourceDir, currentDir = sourceDir) {
 
     return {
       absolutePath,
-      objectPath: path.relative(sourceDir, absolutePath).split(path.sep).join("/"),
+      objectPath: path
+        .relative(sourceDir, absolutePath)
+        .split(path.sep)
+        .join("/"),
     };
   });
 }
@@ -105,7 +108,8 @@ async function ensureBucket(supabase, bucketName, bucketConfig) {
     allowedMimeTypes: bucketConfig.allowedMimeTypes,
   };
 
-  const { data: buckets, error: listError } = await supabase.storage.listBuckets();
+  const { data: buckets, error: listError } =
+    await supabase.storage.listBuckets();
 
   if (listError) {
     throw listError;
@@ -147,14 +151,12 @@ async function uploadBucketObjects(supabase, bucketName, bucketConfig) {
     const body = readFileSync(file.absolutePath);
     const contentType = getContentType(file.absolutePath);
 
-    const { error } = await supabase.storage.from(bucketName).upload(
-      file.objectPath,
-      body,
-      {
+    const { error } = await supabase.storage
+      .from(bucketName)
+      .upload(file.objectPath, body, {
         contentType,
         upsert: true,
-      }
-    );
+      });
 
     if (error) {
       throw new Error(

src/app/(forms)/auth/complete/page.tsx

@@ -9,8 +9,7 @@ export default function AuthCompletePage() {
       </FormHeader>
       <Form as="container">
         <p>
-          We’re securely confirming your link. You’ll be redirected in a
-          moment.
+          We’re securely confirming your link. You’ll be redirected in a moment.
         </p>
       </Form>
     </>

src/app/(forms)/forgot-password/page.tsx

@@ -50,7 +50,10 @@ export default async function ForgotPassword(props: {
         {searchParams.error && (
           <FormMessage message={{ error: searchParams.error }} />
         )}
-        <SubmitButton formAction={forgotPasswordAction}>
+        <SubmitButton
+          formAction={forgotPasswordAction}
+          pendingText="Emailing..."
+        >
           Email me the link
         </SubmitButton>
       </Form>

src/app/(forms)/profile/reset-password/page.tsx

@@ -67,7 +67,10 @@ export default async function ResetPassword(props: {
         {searchParams.error && (
           <FormMessage message={{ error: searchParams.error }} />
         )}
-        <SubmitButton formAction={resetPasswordAction}>
+        <SubmitButton
+          formAction={resetPasswordAction}
+          pendingText="Resetting..."
+        >
           Reset password
         </SubmitButton>
       </Form>

…ts/AvatarUploadView/AvatarUploadView.jsx …ts/AvatarUploadView/AvatarUploadView.tsxsrc/components/AvatarUploadView/AvatarUploadView.jsx renamed to src/components/AvatarUploadView/AvatarUploadView.tsx src/components/AvatarUploadView/AvatarUploadView.jsx renamed to src/components/AvatarUploadView/AvatarUploadView.tsx

@@ -30,7 +30,6 @@ const LoadingSpinner = styled("div")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  color: "white",
   fontSize: "20px",
 
   position: "absolute",
@@ -42,6 +41,20 @@ const LoadingSpinner = styled("div")(({ theme }) => ({
   borderRadius: theme.corners.avatar,
 }));
 
+const AvatarComponent = Avatar as React.ComponentType<any>;
+
+type AvatarUploadViewProps = {
+  avatar?: string;
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void | Promise<void>;
+  onDelete: () => void | Promise<void>;
+  getAvatarUrl?: (filename: string) => string;
+  bucket: string;
+  inputHintShown?: boolean;
+  listingType?: string;
+};
+
 function AvatarUploadView({
   avatar,
   onChange,
@@ -50,19 +63,36 @@ function AvatarUploadView({
   bucket,
   inputHintShown = false,
   listingType,
-}) {
+}: AvatarUploadViewProps) {
   // Hidden file input that we'll trigger programmatically
-  const fileInputRef = useRef(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [loading, setLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const isBusy = loading || isDeleting;
 
   const handleFileSelect = () => {
+    if (isBusy) return;
     fileInputRef.current?.click();
   };
 
-  const handleUpload = async (event) => {
+  const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
     setLoading(true);
-    await onChange(event);
-    setLoading(false);
+    try {
+      await onChange(event);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (isBusy) return;
+
+    setIsDeleting(true);
+    try {
+      await onDelete();
+    } finally {
+      setIsDeleting(false);
+    }
   };
 
   return (
@@ -75,11 +105,12 @@ function AvatarUploadView({
           accept="image/*"
           multiple={false}
           onChange={handleUpload}
+          disabled={isBusy}
           style={{ display: "none" }}
         />
 
         <StyledImgContainer>
-          <Avatar
+          <AvatarComponent
             bucket={bucket}
             filename={avatar}
             alt="Your avatar"
@@ -96,6 +127,9 @@ function AvatarUploadView({
             variant="secondary"
             size="small"
             onClick={handleFileSelect}
+            loading={loading}
+            loadingText="Uploading..."
+            disabled={isBusy}
           >
             Add
           </AvatarButton>
@@ -106,6 +140,9 @@ function AvatarUploadView({
               as={AvatarButton}
               variant="secondary"
               size="small"
+              loading={loading || isDeleting}
+              loadingText={loading ? "Uploading..." : "Deleting..."}
+              disabled={isBusy}
             >
               Edit
             </DropdownMenu.Button>
@@ -119,12 +156,20 @@ function AvatarUploadView({
                   onClick={handleFileSelect}
                   variant="secondary"
                   size="small"
+                  disabled={isBusy}
                 >
                   Replace
                 </Button>
               </DropdownMenu.Item>
               <DropdownMenu.Item>
-                <Button onClick={onDelete} variant="danger" size="small">
+                <Button
+                  onClick={handleDelete}
+                  variant="danger"
+                  size="small"
+                  loading={isDeleting}
+                  loadingText="Deleting..."
+                  disabled={isBusy}
+                >
                   Delete
                 </Button>
               </DropdownMenu.Item>