feat: smart composer edit mode

Author: rebelchris

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { useLogContext } from '../../../contexts/LogContext';
 import { useViewSize, ViewSize } from '../../../hooks';
@@ -71,6 +72,15 @@ jest.mock('../common/Modal', () => ({
   Modal: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
 }));
 
+const renderWithClient = (ui: React.ReactElement) => {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={client}>{ui}</QueryClientProvider>,
+  );
+};
+
 describe('SmartComposerModal', () => {
   const logEvent = jest.fn();
   const showPrompt = jest.fn();
@@ -123,7 +133,7 @@ describe('SmartComposerModal', () => {
   });
 
   it('keeps the production notification CTA visible in the composer', () => {
-    render(
+    renderWithClient(
       <SmartComposerModal
         isOpen
         initialUrl="https://daily.dev"
@@ -139,7 +149,7 @@ describe('SmartComposerModal', () => {
   });
 
   it('runs notification submit handling before closing after a successful post', async () => {
-    render(
+    renderWithClient(
       <SmartComposerModal
         isOpen
         initialUrl="https://daily.dev"

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

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
+import { useQueryClient } from '@tanstack/react-query';
 import type { LazyModalCommonProps } from '../common/Modal';
 import { Modal } from '../common/Modal';
 import { ModalKind, ModalSize } from '../common/types';
@@ -30,7 +31,8 @@ import { useLogContext } from '../../../contexts/LogContext';
 import { LogEvent } from '../../../lib/log';
 import { useViewSize, ViewSize } from '../../../hooks';
 import { usePrompt } from '../../../hooks/usePrompt';
-import type { ExternalLinkPreview } from '../../../graphql/posts';
+import type { ExternalLinkPreview, Post } from '../../../graphql/posts';
+import { getPostByIdKey } from '../../../lib/query';
 import { AudienceChip } from '../../post/composer/AudienceChip';
 import { KindModePicker } from '../../post/composer/KindModePicker';
 import {
@@ -64,36 +66,66 @@ export interface SmartComposerModalProps extends LazyModalCommonProps {
   initialUrl?: string;
   initialSquadHandle?: string;
   preview?: ExternalLinkPreview;
+  editPost?: Post;
 }
 
 export function SmartComposerModal({
   onRequestClose,
   initialUrl,
   initialSquadHandle,
   preview: initialPreview,
+  editPost,
   ...props
 }: SmartComposerModalProps): ReactElement {
   const { user } = useAuthContext();
   const { logEvent } = useLogContext();
   const isLaptop = useViewSize(ViewSize.Laptop);
+  const queryClient = useQueryClient();
   const { showPrompt } = usePrompt();
   const { shouldShowCta, isEnabled, onToggle, onSubmitted } =
     useNotificationToggle();
   const isStandupEnabled = useStandupCreation();
-  const [kind, setKind] = useState<ComposerKind>(initialUrl ? 'link' : 'text');
-  const [text, setText] = useState<TextFormState>(DEFAULT_TEXT);
+  const isEditing = !!editPost;
+  const [kind, setKind] = useState<ComposerKind>(() => {
+    if (isEditing) {
+      return 'text';
+    }
+    return initialUrl ? 'link' : 'text';
+  });
+  const [text, setText] = useState<TextFormState>(() =>
+    editPost
+      ? { title: editPost.title ?? '', body: editPost.content ?? '' }
+      : DEFAULT_TEXT,
+  );
   const [link, setLink] = useState<LinkFormState>({
     ...DEFAULT_LINK,
     url: initialUrl ?? '',
   });
   const [poll, setPoll] = useState<PollFormState>(DEFAULT_POLL);
   const [standup, setStandup] = useState<StandupFormState>(DEFAULT_STANDUP);
-  const [cover, setCover] = useState<TextFormCover | null>(null);
+  const [cover, setCover] = useState<TextFormCover | null>(() =>
+    editPost?.image ? { preview: editPost.image } : null,
+  );
   const [isExpanded, setIsExpanded] = useState(false);
   const [isMarkdownMode, setIsMarkdownMode] = useState(false);
   const textFormRef = useRef<TextFormHandle>(null);
 
   const isDirty = useMemo(() => {
+    if (editPost) {
+      if (text.title !== (editPost.title ?? '')) {
+        return true;
+      }
+      if (text.body !== (editPost.content ?? '')) {
+        return true;
+      }
+      if (cover?.file) {
+        return true;
+      }
+      if (!cover && editPost.image) {
+        return true;
+      }
+      return false;
+    }
     if (cover) {
       return true;
     }
@@ -110,7 +142,7 @@ export function SmartComposerModal({
       return true;
     }
     return false;
-  }, [cover, text, link, poll, standup]);
+  }, [cover, text, link, poll, standup, editPost]);
 
   const handleClose = useCallback(
     async (event?: React.MouseEvent | React.KeyboardEvent) => {
@@ -126,7 +158,7 @@ export function SmartComposerModal({
         return;
       }
       const confirmed = await showPrompt({
-        title: 'Discard draft?',
+        title: isEditing ? 'Discard changes?' : 'Discard draft?',
         description:
           'You have unsaved changes. Are you sure you want to discard them?',
         okButton: {
@@ -140,7 +172,7 @@ export function SmartComposerModal({
         closeAndLog();
       }
     },
-    [isDirty, kind, logEvent, onRequestClose, showPrompt],
+    [isDirty, kind, logEvent, onRequestClose, showPrompt, isEditing],
   );
 
   useEffect(() => {
@@ -206,7 +238,7 @@ export function SmartComposerModal({
   );
 
   const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
-    useComposerAudience(initialSquadHandle);
+    useComposerAudience(initialSquadHandle, editPost?.source?.id);
   const primary = selected[0];
   const isMulti = selected.length > 1;
 
@@ -229,7 +261,13 @@ export function SmartComposerModal({
     selectedIds,
     isMulti,
     initialPreview,
+    editPostId: editPost?.id,
     onComplete: () => {
+      if (editPost?.id) {
+        queryClient.invalidateQueries({
+          queryKey: getPostByIdKey(editPost.id),
+        });
+      }
       onSubmitted();
       onRequestClose?.();
     },
@@ -241,15 +279,17 @@ export function SmartComposerModal({
     selected.filter((audience) => !isUserAudience(audience)).length > 1;
   const isStandupScheduled = standup.scheduleChoice === 'later';
   let submitLabel: string;
-  if (isStandup) {
+  if (isEditing) {
+    submitLabel = 'Save changes';
+  } else if (isStandup) {
     submitLabel = isStandupScheduled ? 'Schedule standup' : 'Create standup';
   } else if (kind === 'poll') {
     submitLabel = 'Post poll';
   } else {
     submitLabel = 'Post';
   }
 
-  const kindPickerNode = (
+  const kindPickerNode = isEditing ? null : (
     <KindModePicker
       value={kind}
       onChange={onKindChange}
@@ -276,7 +316,7 @@ export function SmartComposerModal({
       type="submit"
       variant={ButtonVariant.Primary}
       size={ButtonSize.Small}
-      disabled={isSubmitDisabled || isCoverUploading}
+      disabled={isSubmitDisabled || isCoverUploading || (isEditing && !isDirty)}
       loading={isInFlight || isCoverUploading}
       className="ml-2 px-5"
     >
@@ -322,7 +362,7 @@ export function SmartComposerModal({
               selectedIds={selectedIds}
               onChange={setSelectedIds}
               userAudienceId={userAudienceId}
-              disabled={isInFlight}
+              disabled={isInFlight || isEditing}
             />
           )}
         </div>

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

@@ -25,7 +25,7 @@ import { TITLE_MAX_LENGTH, type TextFormState } from './types';
 
 export interface TextFormCover {
   preview: string;
-  file: File;
+  file?: File;
   isUploading?: boolean;
 }
 
@@ -154,12 +154,12 @@ export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
             className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
           />
           {cover ? (
-            <div className="group relative">
+            <div className="group relative w-fit max-w-full">
               <img
                 src={cover.preview}
                 alt="Post cover"
                 className={classNames(
-                  'block h-44 w-full rounded-16 object-cover transition-opacity',
+                  'block h-auto max-h-44 w-auto max-w-full rounded-16 object-contain transition-opacity',
                   'group-hover:brightness-95',
                   cover.isUploading && 'opacity-50',
                 )}

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

@@ -21,6 +21,7 @@ interface UseComposerAudience {
 
 export const useComposerAudience = (
   initialSquadHandle?: string,
+  initialSquadId?: string,
 ): UseComposerAudience => {
   const { user, squads } = useAuthContext();
 
@@ -42,6 +43,14 @@ export const useComposerAudience = (
   );
 
   const defaultId = useMemo(() => {
+    if (initialSquadId) {
+      const match = audiences.find(
+        (audience) => audience.id === initialSquadId,
+      );
+      if (match?.id) {
+        return match.id;
+      }
+    }
     if (initialSquadHandle) {
       const match = audiences.find(
         (audience) => audience.handle === initialSquadHandle,
@@ -51,7 +60,7 @@ export const useComposerAudience = (
       }
     }
     return userAudienceId;
-  }, [audiences, initialSquadHandle, userAudienceId]);
+  }, [audiences, initialSquadHandle, initialSquadId, userAudienceId]);
 
   const [selectedIds, setSelectedIds] = useState<string[]>(() =>
     defaultId ? [defaultId] : [],

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

@@ -69,6 +69,7 @@ interface UseComposerSubmitProps {
   isMulti: boolean;
   initialPreview?: ExternalLinkPreview;
   onComplete: () => void;
+  editPostId?: string;
 }
 
 interface UseComposerSubmit {
@@ -93,6 +94,7 @@ export const useComposerSubmit = ({
   isMulti,
   initialPreview,
   onComplete,
+  editPostId,
 }: UseComposerSubmitProps): UseComposerSubmit => {
   const { displayToast } = useToastNotification();
   const router = useRouter();
@@ -106,6 +108,7 @@ export const useComposerSubmit = ({
     isPosting,
     onSubmitPost,
     onSubmitFreeformPost,
+    onEditFreeformPost,
     onSubmitPollPost,
   } = usePostToSquad({
     initialPreview,
@@ -157,6 +160,18 @@ export const useComposerSubmit = ({
       content: text.body,
       ...(cover?.file ? { image: cover.file } : {}),
     };
+    if (editPostId) {
+      await onEditFreeformPost(
+        { ...payload, id: editPostId },
+        primary as Squad,
+      );
+      displayToast(
+        moderationRequired(primary as Squad)
+          ? '✅ Your edit has been submitted for moderation'
+          : '✅ Your post has been updated!',
+      );
+      return;
+    }
     if (isMulti) {
       await createMulti({
         sourceIds: selectedIds,
@@ -265,6 +280,7 @@ export const useComposerSubmit = ({
       cover,
       selectedIds,
       isInFlight,
+      editPostId,
     ],
   );
 

packages/shared/src/components/squads/SquadPageHeader.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../lib/config';
 import { useViewSize, ViewSize } from '../../hooks';
 import { useLazyModal } from '../../hooks/useLazyModal';
+import { useSmartComposer } from '../../hooks/post/useSmartComposer';
 import { LazyModal } from '../modals/common/types';
 import { SquadStat } from './common/SquadStat';
 import { SquadPrivacyState } from './common/SquadPrivacyState';
@@ -48,7 +49,11 @@ export function SquadPageHeader({
   shouldUseListMode,
 }: SquadPageHeaderProps): ReactElement {
   const { openModal } = useLazyModal();
+  const isSmartComposerEnabled = useSmartComposer();
+  const isLaptop = useViewSize(ViewSize.Laptop);
   const allowedToPost = verifyPermission(squad, SourcePermissions.Post);
+  const shouldUseSmartComposer =
+    isSmartComposerEnabled && isLaptop && allowedToPost;
   const { category } = squad;
   const squadId = squad.id ?? '';
   const isSquadMember = !!squad.currentMember;
@@ -245,15 +250,32 @@ export function SquadPageHeader({
                 <span className="absolute -left-6 flex h-px w-[calc(100%+3rem)] bg-border-subtlest-tertiary tablet:hidden" />
                 <span className="z-0 bg-background-default px-4">or</span>
               </FlexCentered>
-              <Button
-                tag="a"
-                href={`${link.post.create}?sid=${squad.handle}`}
-                variant={ButtonVariant.Primary}
-                color={ButtonColor.Cabbage}
-                className="w-full tablet:w-auto"
-              >
-                New post
-              </Button>
+              {shouldUseSmartComposer ? (
+                <Button
+                  type="button"
+                  onClick={() =>
+                    openModal({
+                      type: LazyModal.SmartComposer,
+                      props: { initialSquadHandle: squad.handle },
+                    })
+                  }
+                  variant={ButtonVariant.Primary}
+                  color={ButtonColor.Cabbage}
+                  className="w-full tablet:w-auto"
+                >
+                  New post
+                </Button>
+              ) : (
+                <Button
+                  tag="a"
+                  href={`${link.post.create}?sid=${squad.handle}`}
+                  variant={ButtonVariant.Primary}
+                  color={ButtonColor.Cabbage}
+                  className="w-full tablet:w-auto"
+                >
+                  New post
+                </Button>
+              )}
               <Divider />
             </>
           )}