-
-
Let's Make your
- UnInbox
- {children}
-
+
+ {children}
);
}
diff --git a/apps/web/src/app/join/org/_components/create-org.tsx b/apps/web/src/app/join/org/_components/create-org.tsx
index 4c62cf68..74750ce0 100644
--- a/apps/web/src/app/join/org/_components/create-org.tsx
+++ b/apps/web/src/app/join/org/_components/create-org.tsx
@@ -1,189 +1,163 @@
'use client';
-import useLoading from '@/src/hooks/use-loading';
import { platform } from '@/src/lib/trpc';
import { Button } from '@/src/components/shadcn-ui/button';
-import {
- Dialog,
- DialogContent,
- DialogTrigger,
- DialogTitle,
- DialogClose
-} from '@/src/components/shadcn-ui/dialog';
-import { useDebounce } from '@uidotdev/usehooks';
-import { Check, Plus } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { IdentificationCard } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
import { z } from 'zod';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { Input } from '@/src/components/shadcn-ui/input';
import { cn } from '@/src/lib/utils';
+import { env } from '@/src/env';
+import { EditableText } from '@/src/components/shared/editable-text';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger
+} from '@/src/components/shadcn-ui/tooltip';
-export default function CreateOrgButton({
- hasInviteCode
-}: {
- hasInviteCode: boolean;
-}) {
+export function CreateOrg() {
const [orgName, setOrgName] = useState('');
const [orgShortcode, setOrgShortcode] = useState('');
const [customShortcode, setCustomShortcode] = useState(false);
const router = useRouter();
- const debouncedOrgShortcode = useDebounce(orgShortcode, 1000);
- const checkOrgShortcodeApi =
- platform.useUtils().org.crud.checkShortcodeAvailability;
- const createOrgApi = platform.org.crud.createNewOrg.useMutation();
-
- const {
- loading: orgShortcodeDataLoading,
- data: orgShortcodeData,
- error: orgShortcodeError,
- run: checkOrgShortcode
- } = useLoading(async (signal) => {
- if (!debouncedOrgShortcode) return;
- const parsed = z
+ 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(debouncedOrgShortcode);
+ .safeParse(orgShortcode);
+ return [
+ success,
+ error ? new Error(error.issues.map((i) => i.message).join(', ')) : null
+ ];
+ }, [orgShortcode]);
- if (!parsed.success) {
- return {
- error: parsed.error.issues[0]?.message ?? null,
- available: false
- };
- }
- return await checkOrgShortcodeApi.fetch(
- { shortcode: debouncedOrgShortcode },
- { signal }
+ const { data, isLoading, error } =
+ platform.org.crud.checkShortcodeAvailability.useQuery(
+ {
+ shortcode: orgShortcode
+ },
+ {
+ enabled: shortcodeValid && customShortcode
+ }
);
- });
-
- const {
- loading: createOrgLoading,
- error: createOrgError,
- run: createOrg
- } = useLoading(async () => {
- if (!orgShortcodeData?.available) return;
- await createOrgApi.mutateAsync({
- orgName,
- orgShortcode: debouncedOrgShortcode
- });
- toast.success('Organization created successfully.');
- router.push(`/join/profile?org=${debouncedOrgShortcode}`);
- });
- useEffect(() => {
- if (customShortcode) return;
- setOrgShortcode(orgName?.toLowerCase().replace(/[^a-z0-9]/g, '') || '');
- }, [orgName, customShortcode]);
+ const { refetch: generateShortcode } =
+ platform.org.crud.generateOrgShortcode.useQuery(
+ {
+ orgName
+ },
+ {
+ enabled: false
+ }
+ );
- useEffect(() => {
- checkOrgShortcode({ clearData: true, clearError: true });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [debouncedOrgShortcode]);
+ const { mutateAsync: createOrg, isPending } =
+ platform.org.crud.createNewOrg.useMutation({
+ onError: (e) => {
+ toast.error('An Error Occurred while creating the Org', {
+ description: e.message
+ });
+ }
+ });
return (
-
{
- if (!open) {
- setOrgName('');
- setOrgShortcode('');
- setCustomShortcode(false);
- }
- }}>
-
-
- Create a new Organization
-
-
+
+
{
+ // 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();
-
- Create a new organization
-
-
- Organization Name
-
-
- Organization Short Code
-
+
+
+ {env.NEXT_PUBLIC_WEBAPP_URL}/
+
{
- setOrgShortcode(e.target.value);
+ setValue={(value) => {
+ setOrgShortcode(value);
setCustomShortcode(true);
}}
/>
-
- {!orgShortcodeData && orgShortcodeDataLoading && (
-
- Checking...
-
- )}
-
- {orgShortcodeData && !orgShortcodeDataLoading && (
-
- {orgShortcodeData.available ? (
-
- ) : (
-
- )}
-
-
- {orgShortcodeData.available
+
+
+
Click to Edit
+
+
+ {orgShortcode.length > 0 && !shortcodeValid
+ ? shortcodeError?.message
+ : isLoading
+ ? 'Checking availability...'
+ : error
+ ? error.message
+ : data
+ ? data.available
? 'Looks good!'
- : orgShortcodeData.error}
-
-
- {orgShortcodeError.message}
-
- )}
-
- {createOrgError && !createOrgLoading && (
-
- {createOrgError.message}
-
- )}
-
- createOrg()}>
- Create My Organization
-
-
-
- Cancel
-
-
- {
+ if (
+ !orgName ||
+ !shortcodeValid ||
+ (customShortcode && !data?.available) ||
+ isLoading
+ )
+ return;
+ await createOrg({ orgName, orgShortcode });
+ router.push(`/join/profile?org=${orgShortcode}`);
+ }}>
+ Create Organization
+
+
- Join an organization
+ className="flex-1"
+ variant={hasInviteCode ? 'default' : 'ghost'}>
+ Join Existing organization
- Join an Organization
+
+ Join an Organization
+
+ Enter the invite code you received to join an organization
+
+
)}
- {joinError && !joinLoading && (
+ {joinError && !isJoining && (
{joinError.message}
)}
- {
- if (!inviteData) {
- validateInvite({ clearData: true, clearError: true });
- } else {
- joinOrg({ clearData: true, clearError: true });
- }
- }}>
- {inviteData ? 'Join Organization' : 'Validate Invite Code'}
-
-
+
+
+
+ Cancel
+
+
- Cancel
+ loading={inviteLoading || isJoining}
+ disabled={inviteCode.length !== 32}
+ className="flex-1"
+ onClick={async () => {
+ if (!inviteData) return;
+ await joinOrg({ inviteToken: inviteCode });
+ }}>
+ Join Organization
-
+