From cb5dbb8ab60fdfa9949fb4349777ef6399686485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 29 Aug 2024 00:55:30 +0200
Subject: [PATCH] Attempts to fix stuff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-api/lib/entities/media-attachment.ts   | 14 ++++--
 .../dropdown-menu/dropdown-menu.tsx           | 50 ++++++++++---------
 .../compose/components/privacy-dropdown.tsx   |  8 ++-
 packages/pl-fe/src/queries/chats.ts           |  9 ++--
 4 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/packages/pl-api/lib/entities/media-attachment.ts b/packages/pl-api/lib/entities/media-attachment.ts
index c3aa87a5c..2017f129e 100644
--- a/packages/pl-api/lib/entities/media-attachment.ts
+++ b/packages/pl-api/lib/entities/media-attachment.ts
@@ -88,11 +88,15 @@ const unknownAttachmentSchema = baseAttachmentSchema.extend({
 });
 
 /** @see {@link https://docs.joinmastodon.org/entities/MediaAttachment} */
-const mediaAttachmentSchema = z.preprocess((data: any) => ({
-  mime_type: data.pleroma?.mime_type,
-  preview_url: data.url,
-  ...data,
-}), z.discriminatedUnion('type', [
+const mediaAttachmentSchema = z.preprocess((data: any) => {
+  if (!data) return null;
+
+  return {
+    mime_type: data.pleroma?.mime_type,
+    preview_url: data.url,
+    ...data,
+  };
+}, z.discriminatedUnion('type', [
   imageAttachmentSchema,
   videoAttachmentSchema,
   gifvAttachmentSchema,
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 2fd6fa076..d03f334da 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -140,14 +140,14 @@ const DropdownMenu = (props: IDropdownMenu) => {
     }
   };
 
-  const handleDocumentClick = (event: Event) => {
+  const handleDocumentClick = useMemo(() => (event: Event) => {
     if (refs.floating.current && !refs.floating.current.contains(event.target as Node)) {
       handleClose();
       event.stopPropagation();
     }
-  };
+  }, [refs.floating.current]);
 
-  const handleKeyDown = (e: KeyboardEvent) => {
+  const handleKeyDown = useMemo(() => (e: KeyboardEvent) => {
     if (!refs.floating.current) return;
 
     const items = Array.from(refs.floating.current.querySelectorAll('a, button'));
@@ -185,7 +185,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
       e.preventDefault();
       e.stopPropagation();
     }
-  };
+  }, [refs.floating.current]);
 
   const arrowProps: React.CSSProperties = useMemo(() => {
     if (middlewareData.arrow) {
@@ -325,27 +325,29 @@ const DropdownMenu = (props: IDropdownMenu) => {
             }}
           >
             {Component && <Component handleClose={handleClose} />}
-            <ul>
-              {items?.map((item, idx) => (
-                <DropdownMenuItem
-                  key={idx}
-                  item={item}
-                  index={idx}
-                  onClick={handleClose}
-                  autoFocus={autoFocus}
-                />
-              ))}
-              {touching && (
-                <li className='p-2 px-3'>
-                  <button
-                    className='flex w-full appearance-none place-content-center items-center justify-center rounded-full border border-gray-700 bg-transparent p-2 text-sm font-medium text-gray-700 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-500 dark:text-gray-500'
+            {(items?.length || touching) && (
+              <ul>
+                {items?.map((item, idx) => (
+                  <DropdownMenuItem
+                    key={idx}
+                    item={item}
+                    index={idx}
                     onClick={handleClose}
-                  >
-                    <FormattedMessage id='lightbox.close' defaultMessage='Close' />
-                  </button>
-                </li>
-              )}
-            </ul>
+                    autoFocus={autoFocus}
+                  />
+                ))}
+                {touching && (
+                  <li className='p-2 px-3'>
+                    <button
+                      className='flex w-full appearance-none place-content-center items-center justify-center rounded-full border border-gray-700 bg-transparent p-2 text-sm font-medium text-gray-700 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-500 dark:text-gray-500'
+                      onClick={handleClose}
+                    >
+                      <FormattedMessage id='lightbox.close' defaultMessage='Close' />
+                    </button>
+                  </li>
+                )}
+              </ul>
+            )}
 
             {/* Arrow */}
             {!touching && (
diff --git a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
index c4938c822..46811f5c0 100644
--- a/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/privacy-dropdown.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { changeComposeFederated, changeComposeVisibility } from 'pl-fe/actions/compose';
@@ -103,6 +103,12 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({
     }
   };
 
+  useEffect(() => {
+    if (node.current) {
+      (node.current?.querySelector('li[aria-selected=true]') as HTMLDivElement)?.focus();
+    }
+  }, [node.current]);
+
   return (
     <ul ref={node}>
       {items.map(item => {
diff --git a/packages/pl-fe/src/queries/chats.ts b/packages/pl-fe/src/queries/chats.ts
index 54155f099..1285720da 100644
--- a/packages/pl-fe/src/queries/chats.ts
+++ b/packages/pl-fe/src/queries/chats.ts
@@ -146,8 +146,9 @@ const useChatActions = (chatId: string) => {
       .catch(() => null);
 
   const createChatMessage = useMutation({
-    mutationFn: ({ chatId, content, mediaId }: { chatId: string; content: string; mediaId?: string }) =>
-      client.chats.createChatMessage(chatId, { content, media_id: mediaId }),
+    mutationFn: ({ chatId, content, mediaId }: { chatId: string; content: string; mediaId?: string }) => {
+      return client.chats.createChatMessage(chatId, { content, media_id: mediaId });
+    },
     retry: false,
     onMutate: async (variables) => {
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
@@ -167,7 +168,7 @@ const useChatActions = (chatId: string) => {
           if (idx === 0) {
             return {
               ...page,
-              result: [
+              items: [
                 normalizeChatMessage({
                   ...chatMessageSchema.parse({
                     content: variables.content,
@@ -178,7 +179,7 @@ const useChatActions = (chatId: string) => {
                   }),
                   pending: true,
                 }),
-                ...page.result,
+                ...page.items,
               ],
             };
           }