fix: use debounce while generating shortcode based on org name (#605)

Author: BlankParticle

apps/platform/trpc/routers/orgRouter/orgCrudRouter.ts

@@ -56,7 +56,7 @@ export const crudRouter = router({
           .string()
           .min(5)
           .max(64)
-          .regex(/^[a-z0-9\-]*$/, {
+          .regex(/^[a-z0-9]*$/, {
             message: 'Only lowercase letters and numbers'
           })
       })
@@ -74,25 +74,28 @@ export const crudRouter = router({
     .query(async ({ ctx, input }) => {
       const autoShortcode = input.orgName
         .toLowerCase()
-        .replace(/[^a-z0-9\-]/g, '');
+        .replace(/[^a-z0-9]/g, '');
       const existingOrgs = await ctx.db.query.orgs.findMany({
         where: like(orgs.shortcode, `${autoShortcode}%`),
         columns: {
           shortcode: true
         }
       });
 
-      if (existingOrgs.length === 0) {
+      const existingShortcodeList = existingOrgs.map((org) => org.shortcode);
+      if (
+        existingShortcodeList.length === 0 ||
+        !existingShortcodeList.includes(autoShortcode)
+      ) {
         return { shortcode: autoShortcode.substring(0, 32) };
       }
-      const existingShortcodeList = existingOrgs.map((org) => org.shortcode);
       let currentSuffix = existingShortcodeList.length;
       let retries = 0;
-      let newShortcode = `${autoShortcode.substring(0, 28)}-${currentSuffix}`;
+      let newShortcode = `${autoShortcode.substring(0, 28)}${currentSuffix}`;
 
       while (existingShortcodeList.includes(newShortcode)) {
         currentSuffix++;
-        newShortcode = `${autoShortcode.substring(0, 28)}-${currentSuffix}`;
+        newShortcode = `${autoShortcode.substring(0, 28)}${currentSuffix}`;
         retries++;
         if (retries > 30) {
           throw new TRPCError({

apps/web/src/app/join/org/_components/create-org.tsx

@@ -3,7 +3,7 @@
 import { platform } from '@/src/lib/trpc';
 import { Button } from '@/src/components/shadcn-ui/button';
 import { IdentificationCard } from '@phosphor-icons/react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { z } from 'zod';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
@@ -16,19 +16,21 @@ import {
   TooltipContent,
   TooltipTrigger
 } from '@/src/components/shadcn-ui/tooltip';
+import { useDebounce } from '@uidotdev/usehooks';
 
 export function CreateOrg() {
   const [orgName, setOrgName] = useState('');
   const [orgShortcode, setOrgShortcode] = useState('');
   const [customShortcode, setCustomShortcode] = useState(false);
   const router = useRouter();
+  const debouncedOrgName = useDebounce(orgName, 750);
 
   const [shortcodeValid, shortcodeError] = useMemo(() => {
     const { success, error } = z
       .string()
       .min(5)
       .max(64)
-      .regex(/^[a-z0-9\-]*$/, {
+      .regex(/^[a-z0-9]*$/, {
         message: 'Only lowercase letters and numbers'
       })
       .safeParse(orgShortcode);
@@ -48,16 +50,48 @@ export function CreateOrg() {
       }
     );
 
-  const { refetch: generateShortcode } =
+  const { data: generateShortcodeData, error: generateShortcodeError } =
     platform.org.crud.generateOrgShortcode.useQuery(
       {
-        orgName
+        orgName: debouncedOrgName
       },
       {
-        enabled: false
+        enabled: !customShortcode && debouncedOrgName.trim().length >= 5
       }
     );
 
+  const generateOrgShortcodeUtils =
+    platform.useUtils().org.crud.generateOrgShortcode;
+
+  // Update the shortcode if the org name changes
+  useEffect(() => {
+    if (generateShortcodeData) setOrgShortcode(generateShortcodeData.shortcode);
+  }, [generateShortcodeData]);
+
+  // If org name is less than 5 characters, clear the shortcode as min length is 5
+  useEffect(() => {
+    if (debouncedOrgName.trim().length < 5 && !customShortcode) {
+      void generateOrgShortcodeUtils.invalidate();
+      setOrgShortcode('');
+    }
+  }, [
+    debouncedOrgName,
+    customShortcode,
+    orgShortcode,
+    generateOrgShortcodeUtils
+  ]);
+
+  // handle shortcode generation error
+  useEffect(() => {
+    if (generateShortcodeError) {
+      toast.error('An Error Occurred while generating the Org Shortcode', {
+        description: generateShortcodeError.message
+      });
+      setOrgShortcode(debouncedOrgName.toLowerCase().replace(/[^a-z0-9]/g, ''));
+      setCustomShortcode(true);
+    }
+  }, [debouncedOrgName, generateShortcodeError]);
+
   const { mutateAsync: createOrg, isPending } =
     platform.org.crud.createNewOrg.useMutation({
       onError: (e) => {
@@ -74,33 +108,6 @@ export function CreateOrg() {
         fullWidth
         inputSize="lg"
         value={orgName}
-        onBlur={async () => {
-          // If the org name is empty, clear the shortcode
-          if (orgName.trim().length === 0 && !customShortcode) {
-            if (orgShortcode) {
-              setOrgShortcode('');
-            }
-          }
-          // If the org name is less than 5 characters, do not generate a shortcode
-          if (customShortcode || orgName.trim().length < 5) return;
-          const { data, error } = await generateShortcode();
-
-          if (error) {
-            toast.error(
-              'An Error Occurred while generating the Org Shortcode',
-              {
-                description: error.message
-              }
-            );
-            setOrgShortcode(orgName.toLowerCase().replace(/[^a-z0-9]/g, ''));
-            setCustomShortcode(true);
-            return;
-          }
-
-          if (data) {
-            setOrgShortcode(data.shortcode);
-          }
-        }}
         onChange={(e) => setOrgName(e.target.value)}
         leadingSlot={IdentificationCard}
       />