fix: more cleanup

Author: rebelchris

packages/shared/src/components/modals/post/SmartComposerModal.tsx

@@ -72,6 +72,7 @@ export function SmartComposerModal({
   const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
     useComposerAudience(initialSquadHandle);
   const primary = selected[0];
+  const isMulti = selected.length > 1;
 
   const {
     handleSubmit,
@@ -87,8 +88,8 @@ export function SmartComposerModal({
     poll,
     cover,
     primary,
-    selected,
     selectedIds,
+    isMulti,
     initialPreview,
     onComplete: () => onRequestClose?.(),
   });

packages/shared/src/components/post/composer/LinkForm.tsx

@@ -7,18 +7,6 @@ import type { ExternalLinkPreview } from '../../../graphql/posts';
 import { TITLE_MAX_LENGTH, type LinkFormState } from './types';
 import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
 
-const looksLikeRealUrl = (value: string): boolean => {
-  try {
-    const url = new URL(value);
-    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
-      return false;
-    }
-    return url.hostname === 'localhost' || url.hostname.includes('.');
-  } catch {
-    return false;
-  }
-};
-
 interface LinkFormProps {
   value: LinkFormState;
   onChange: (next: LinkFormState) => void;
@@ -41,12 +29,8 @@ export const LinkForm = ({
   }, []);
 
   const hasPreviewForUrl = useCallback(
-    (next?: string): boolean => {
-      if (!next || !looksLikeRealUrl(next)) {
-        return false;
-      }
-      return !isPreviewForComposerUrl(preview, next);
-    },
+    (next?: string): boolean =>
+      !!next && !isPreviewForComposerUrl(preview, next),
     [preview],
   );
 

packages/shared/src/components/post/composer/useComposerSubmit.ts

@@ -1,14 +1,12 @@
 import type { FormEvent } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { usePostToSquad } from '../../../hooks';
 import { useMultipleSourcePost } from '../../../features/squads/hooks/useMultipleSourcePost';
 import { useToastNotification } from '../../../hooks/useToastNotification';
 import type {
   CreatePostInMultipleSourcesArgs,
   ExternalLinkPreview,
 } from '../../../graphql/posts';
-import type { ApiErrorResult } from '../../../graphql/common';
-import { DEFAULT_ERROR } from '../../../graphql/common';
 import type { Squad } from '../../../graphql/sources';
 import {
   POLL_OPTIONS_MIN,
@@ -20,25 +18,22 @@ import {
 import type { TextFormCover } from './TextForm';
 import { isPreviewForComposerUrl } from './utils';
 
-const isApiErrorResult = (error: unknown): error is ApiErrorResult =>
-  !!(error as ApiErrorResult)?.response?.errors;
+const trimmedOptions = (state: PollFormState): string[] =>
+  state.options.map((option) => option.trim()).filter(Boolean);
 
 const isTextValid = (state: TextFormState): boolean =>
-  state.title.trim().length > 0 && state.body.trim().length > 0;
-
-const isLinkValid = (preview?: ExternalLinkPreview): boolean =>
-  Boolean(preview?.title && (preview.url || preview.permalink));
+  !!state.title.trim() && !!state.body.trim();
 
-const isPollValid = (state: PollFormState): boolean => {
-  if (!state.question.trim()) {
-    return false;
-  }
-  const filled = state.options.map((option) => option.trim()).filter(Boolean);
-  return filled.length >= POLL_OPTIONS_MIN;
-};
+const isLinkValid = (
+  state: LinkFormState,
+  preview: ExternalLinkPreview | undefined,
+): boolean =>
+  !!preview?.title &&
+  !!(preview.url || preview.permalink) &&
+  isPreviewForComposerUrl(preview, state.url);
 
-const filledPollOptions = (state: PollFormState): string[] =>
-  state.options.map((option) => option.trim()).filter(Boolean);
+const isPollValid = (state: PollFormState): boolean =>
+  !!state.question.trim() && trimmedOptions(state).length >= POLL_OPTIONS_MIN;
 
 interface UseComposerSubmitProps {
   kind: ComposerKind;
@@ -47,8 +42,8 @@ interface UseComposerSubmitProps {
   poll: PollFormState;
   cover: TextFormCover | null;
   primary: Squad | undefined;
-  selected: Squad[];
   selectedIds: string[];
+  isMulti: boolean;
   initialPreview?: ExternalLinkPreview;
   onComplete: () => void;
 }
@@ -69,18 +64,12 @@ export const useComposerSubmit = ({
   poll,
   cover,
   primary,
-  selected,
   selectedIds,
+  isMulti,
   initialPreview,
   onComplete,
 }: UseComposerSubmitProps): UseComposerSubmit => {
   const { displayToast } = useToastNotification();
-  const handleError = useCallback(
-    (error: ApiErrorResult) => {
-      displayToast(error.response?.errors?.[0]?.message ?? DEFAULT_ERROR);
-    },
-    [displayToast],
-  );
   const {
     getLinkPreview,
     isLoadingPreview,
@@ -94,176 +83,135 @@ export const useComposerSubmit = ({
     onComplete,
     displayMutationErrors: true,
   });
-
   const { onCreate: createMulti, isPending: isMultiPending } =
-    useMultipleSourcePost({ onSuccess: onComplete, onError: handleError });
+    useMultipleSourcePost({
+      onSuccess: onComplete,
+      onError: (error) =>
+        displayToast(error.response?.errors?.[0]?.message ?? 'Failed to post'),
+    });
 
   const fetchPreview = useCallback(
     (url?: string) => {
       if (!url) {
         return;
       }
-      getLinkPreview(url).catch(() => {
-        // surfaced via usePostToSquad toast
-      });
+      // surfaced via usePostToSquad toast
+      getLinkPreview(url).catch(() => undefined);
     },
     [getLinkPreview],
   );
 
-  const isMulti = selected.length > 1;
   const isInFlight = isPosting || isMultiPending;
 
-  const isSubmitDisabled = useMemo(() => {
+  const getIsSubmitDisabled = (): boolean => {
     if (isInFlight || !primary) {
       return true;
     }
     if (kind === 'text') {
       return !isTextValid(text);
     }
     if (kind === 'link') {
-      return (
-        !isLinkValid(preview) || !isPreviewForComposerUrl(preview, link.url)
-      );
+      return !isLinkValid(link, preview);
     }
     return !isPollValid(poll);
-  }, [isInFlight, kind, link.url, poll, preview, primary, text]);
+  };
 
-  const submitMulti = useCallback(async () => {
-    if (kind === 'text') {
+  const submitText = async () => {
+    const payload = {
+      title: text.title.trim(),
+      content: text.body,
+      ...(cover?.file ? { image: cover.file } : {}),
+    };
+    if (isMulti) {
       await createMulti({
         sourceIds: selectedIds,
-        title: text.title.trim(),
-        content: text.body,
-        ...(cover?.file ? { image: cover.file } : {}),
+        ...payload,
       } as unknown as CreatePostInMultipleSourcesArgs);
       return;
     }
-    if (kind === 'poll') {
+    await onSubmitFreeformPost(payload, primary as Squad);
+  };
+
+  const submitPoll = async () => {
+    const options = trimmedOptions(poll);
+    const duration = poll.durationDays;
+    if (isMulti) {
       await createMulti({
         sourceIds: selectedIds,
         title: poll.question.trim(),
-        options: filledPollOptions(poll).map((value, order) => ({
-          text: value,
-          order,
-        })),
-        ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
+        options: options.map((value, order) => ({ text: value, order })),
+        ...(duration != null ? { duration } : {}),
       } as unknown as CreatePostInMultipleSourcesArgs);
       return;
     }
+    await onSubmitPollPost(
+      {
+        title: poll.question.trim(),
+        options,
+        ...(duration != null ? { duration } : {}),
+      },
+      primary as Squad,
+    );
+  };
+
+  const submitLink = async (event: FormEvent<HTMLFormElement>) => {
     if (!isPreviewForComposerUrl(preview, link.url)) {
       displayToast('Invalid link');
       return;
     }
-
-    const url = preview?.finalUrl ?? preview?.url;
-    if (!url || !preview?.title) {
+    const commentary = link.commentary.trim();
+    if (!isMulti) {
+      await onSubmitPost(event, primary as Squad, commentary);
       return;
     }
-    const commentary = link.commentary.trim();
-    if (preview.id) {
-      await createMulti({
-        sourceIds: selectedIds,
-        sharedPostId: preview.id,
-        commentary,
-      } as unknown as CreatePostInMultipleSourcesArgs);
+    const url = preview?.finalUrl ?? preview?.url;
+    if (!url || !preview?.title) {
       return;
     }
+    const sharedArgs = preview.id
+      ? { sharedPostId: preview.id }
+      : { externalLink: url, title: preview.title, imageUrl: preview.image };
     await createMulti({
       sourceIds: selectedIds,
-      externalLink: url,
-      title: preview.title,
-      imageUrl: preview.image,
       commentary,
+      ...sharedArgs,
     } as unknown as CreatePostInMultipleSourcesArgs);
-  }, [
-    createMulti,
-    cover?.file,
-    displayToast,
-    kind,
-    link.commentary,
-    link.url,
-    poll,
-    preview,
-    selectedIds,
-    text,
-  ]);
+  };
 
-  const submitSingle = useCallback(
+  const handleSubmit = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
-      if (!primary) {
+      event.preventDefault();
+      if (getIsSubmitDisabled()) {
         return;
       }
       if (kind === 'text') {
-        await onSubmitFreeformPost(
-          {
-            title: text.title.trim(),
-            content: text.body,
-            ...(cover?.file ? { image: cover.file } : {}),
-          },
-          primary,
-        );
+        await submitText();
         return;
       }
-      if (kind === 'link') {
-        if (!isPreviewForComposerUrl(preview, link.url)) {
-          displayToast('Invalid link');
-          return;
-        }
-
-        await onSubmitPost(event, primary, link.commentary.trim());
+      if (kind === 'poll') {
+        await submitPoll();
         return;
       }
-      await onSubmitPollPost(
-        {
-          title: poll.question.trim(),
-          options: filledPollOptions(poll),
-          ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
-        },
-        primary,
-      );
+      await submitLink(event);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      cover?.file,
-      displayToast,
       kind,
-      link.commentary,
-      link.url,
-      onSubmitFreeformPost,
-      onSubmitPollPost,
-      onSubmitPost,
-      poll,
-      preview,
+      isMulti,
       primary,
+      preview,
       text,
+      link,
+      poll,
+      cover,
+      selectedIds,
+      isInFlight,
     ],
   );
 
-  const handleSubmit = useCallback(
-    async (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-      if (isSubmitDisabled) {
-        return;
-      }
-      try {
-        if (isMulti) {
-          await submitMulti();
-          return;
-        }
-        await submitSingle(event);
-      } catch (error) {
-        if (isApiErrorResult(error)) {
-          return;
-        }
-
-        throw error;
-      }
-    },
-    [isMulti, isSubmitDisabled, submitMulti, submitSingle],
-  );
-
   return {
     handleSubmit,
-    isSubmitDisabled,
+    isSubmitDisabled: getIsSubmitDisabled(),
     isInFlight,
     preview,
     isLoadingPreview,

packages/shared/src/components/post/composer/utils.spec.ts

@@ -2,7 +2,12 @@ import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
 
 describe('composer utils', () => {
   it('normalizes URLs without a protocol', () => {
-    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev');
+    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev/');
+  });
+
+  it('rejects values that are not real URLs', () => {
+    expect(normalizeComposerUrl('aaaaa')).toBe('');
+    expect(normalizeComposerUrl('https://aaaaa')).toBe('');
   });
 
   it('matches previews against the current composer URL', () => {