fix: send correct id when quoting tweet

Author: habibayman

app/components/tweet/TweetActionButtons.vue

@@ -177,6 +177,6 @@ const handleShare = async () => {
     </Button>
 
     <!-- Place dialog outside dropdown structure -->
-    <QuoteTweetDialog v-model:open="showQuoteDialog" :reply-to-tweet="props.tweet" />
+    <QuoteTweetDialog v-model:open="showQuoteDialog" :quote-to-tweet="props.tweet" />
   </div>
 </template>

app/components/tweet/composer/QuoteTweetDialog.vue

@@ -5,7 +5,7 @@ import type { Tweet } from '~~/shared/types/tweets';
 
 const props = defineProps<{
   open?: boolean;
-  replyToTweet: Tweet;
+  quoteToTweet: Tweet;
 }>();
 
 const emit = defineEmits<{
@@ -22,14 +22,14 @@ const localOpen = computed({
   <UiDialog v-model:open="localOpen">
     <UiDialogContent class="h-auto max-w-lg" content-height="h-auto max-h-[95vh]">
       <TweetComposer
-        :reply-to-tweet-id="replyToTweet.id"
+        :quote-to-tweet-id="quoteToTweet.id"
         type="quote"
         @posted="emit('update:open', false)"
       >
         <template #reposted-tweet>
           <div class="border-foreground/15 rounded-lg border-1">
             <TweetDefaultCard
-              :tweet="replyToTweet"
+              :tweet="quoteToTweet"
               :is-preview="true"
               size-class="rounded-md h-60"
             />

app/components/tweet/composer/TweetComposer.vue

@@ -11,12 +11,14 @@ import { useTweetComposer } from '~/composables/useTweetComposer';
 
 interface Props {
   replyToTweetId?: string | null;
+  quoteToTweetId?: string | null;
   type?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'default',
   replyToTweetId: null,
+  quoteToTweetId: null,
 });
 
 const tweetContent = ref('');
@@ -25,6 +27,7 @@ const userStore = useUserStore();
 const media = ref<MediaItem[]>([]);
 
 const replyToRef = toRef(props, 'replyToTweetId');
+const quoteToRef = toRef(props, 'quoteToTweetId');
 const {
   isPosting,
   MAX_LENGTH,
@@ -35,7 +38,7 @@ const {
   handlePost,
   handleAddMedia,
   handleRemoveMedia,
-} = useTweetComposer(tweetContent, media, replyToRef);
+} = useTweetComposer(tweetContent, media, replyToRef, quoteToRef);
 
 const emit = defineEmits<{
   (e: 'posted', tweet: Tweet): void;

app/composables/useTweetComposer.ts

@@ -11,6 +11,7 @@ export const useTweetComposer = (
   tweetContent: Ref<string>,
   media: Ref<MediaItem[]>,
   replyToTweetId?: Ref<string | null>,
+  quoteTweetId?: Ref<string | null>,
 ) => {
   const { t } = useI18n();
 
@@ -70,6 +71,7 @@ export const useTweetComposer = (
         content: tweetContent.value,
         media: mediaIds,
         replyToTweetId: replyToTweetId?.value ?? null,
+        quoteToTweetId: quoteTweetId?.value ?? null,
       });
 
       showToaster('success', t('tweet.composer.post_success') || 'Tweet posted successfully!');

test/nuxt/components/tweet/composer/QuoteTweetDialog.spec.ts

@@ -23,7 +23,7 @@ describe('QuoteDialog', () => {
     avatarUrl: 'https://example.com/avatar.jpg',
   };
 
-  const mockReplyToTweet = {
+  const mockquoteToTweet = {
     id: 'tweet-123',
     content: 'Original tweet content',
     author: {
@@ -45,7 +45,7 @@ describe('QuoteDialog', () => {
     const wrapper = await mountSuspended(QuoteDialog, {
       props: {
         open: true,
-        replyToTweet: mockReplyToTweet,
+        quoteToTweet: mockquoteToTweet,
       },
       global: {
         plugins: [i18n],
@@ -54,15 +54,15 @@ describe('QuoteDialog', () => {
 
     const composer = wrapper.findComponent(TweetComposer);
     expect(composer.exists()).toBe(true);
-    expect(composer.props('replyToTweetId')).toBe('tweet-123');
+    expect(composer.props('quoteToTweetId')).toBe('tweet-123');
     expect(composer.props('type')).toBe('quote');
   });
 
   it('renders TweetDefaultCard in reposted-tweet slot', async () => {
     const wrapper = await mountSuspended(QuoteDialog, {
       props: {
         open: true,
-        replyToTweet: mockReplyToTweet,
+        quoteToTweet: mockquoteToTweet,
       },
       global: {
         plugins: [i18n],
@@ -71,15 +71,15 @@ describe('QuoteDialog', () => {
 
     const card = wrapper.findComponent(TweetDefaultCard);
     expect(card.exists()).toBe(true);
-    expect(card.props('tweet')).toEqual(mockReplyToTweet);
+    expect(card.props('tweet')).toEqual(mockquoteToTweet);
     expect(card.props('isPreview')).toBe(true);
   });
 
   it('emits update:open with false when tweet is posted', async () => {
     const wrapper = await mountSuspended(QuoteDialog, {
       props: {
         open: true,
-        replyToTweet: mockReplyToTweet,
+        quoteToTweet: mockquoteToTweet,
       },
       global: {
         plugins: [i18n],
@@ -97,7 +97,7 @@ describe('QuoteDialog', () => {
     const wrapper = await mountSuspended(QuoteDialog, {
       props: {
         open: false,
-        replyToTweet: mockReplyToTweet,
+        quoteToTweet: mockquoteToTweet,
       },
       global: {
         plugins: [i18n],

test/nuxt/composables/useTwetComposer.spec.ts

@@ -32,7 +32,7 @@ vi.mock('vue-i18n', async () => {
 describe('useTweetComposer', () => {
   let tweetContent: ReturnType<typeof ref<string>>;
   let media: ReturnType<typeof ref<MediaItem[]>>;
-  let replyToTweetId: ReturnType<typeof ref<string | null>>;
+  let quoteToTweetId: ReturnType<typeof ref<string | null>>;
 
   const mockUploadImage = vi.fn();
   const mockUploadVideo = vi.fn();
@@ -44,7 +44,7 @@ describe('useTweetComposer', () => {
 
     tweetContent = ref('');
     media = ref([]);
-    replyToTweetId = ref(null);
+    quoteToTweetId = ref(null);
 
     (uploadMediaService as ReturnType<typeof vi.fn>).mockReturnValue({
       uploadImage: mockUploadImage,
@@ -94,6 +94,7 @@ describe('useTweetComposer', () => {
       expect(mockCreateTweetService).toHaveBeenCalledWith({
         content: 'Test tweet',
         media: [],
+        quoteToTweetId: null,
         replyToTweetId: null,
       });
       expect(result).toEqual(mockTweet);
@@ -116,6 +117,7 @@ describe('useTweetComposer', () => {
       expect(mockCreateTweetService).toHaveBeenCalledWith({
         content: 'Tweet with image',
         media: ['media-id-1'],
+        quoteToTweetId: null,
         replyToTweetId: null,
       });
       expect(result).toEqual(mockTweet);
@@ -137,20 +139,21 @@ describe('useTweetComposer', () => {
       expect(result).toEqual(mockTweet);
     });
 
-    it('includes replyToTweetId when provided', async () => {
-      replyToTweetId.value = 'parent-tweet-id';
-      const composer = useTweetComposer(tweetContent, media, replyToTweetId);
+    it('includes quoteToTweetId when provided', async () => {
+      quoteToTweetId.value = 'parent-tweet-id';
+      const composer = useTweetComposer(tweetContent, media, null, quoteToTweetId);
       tweetContent.value = 'Reply tweet';
 
-      const mockTweet = { id: '2', content: 'Reply tweet', replyTo: 'parent-tweet-id' };
+      const mockTweet = { id: '2', content: 'Reply tweet', quoteTo: 'parent-tweet-id' };
       mockCreateTweetService.mockResolvedValue(mockTweet);
 
       const result = await composer.handlePost();
 
       expect(mockCreateTweetService).toHaveBeenCalledWith({
         content: 'Reply tweet',
         media: [],
-        replyToTweetId: 'parent-tweet-id',
+        quoteToTweetId: 'parent-tweet-id',
+        replyToTweetId: null,
       });
       expect(result).toEqual(mockTweet);
     });