Merge pull request #357 from dappforce/deploy/fixes

Minor Fixes
dappforce · Aug 28, 2023 · c7db413 · c7db413
2 parents e4538db + 951c201
commit c7db413
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 35 deletions.
diff --git a/src/components/captcha/CaptchaInvisible.tsx b/src/components/captcha/CaptchaInvisible.tsx
@@ -1,5 +1,6 @@
 import { getCaptchaSiteKey } from '@/utils/env/client'
 import React, { useRef } from 'react'
+import { createPortal } from 'react-dom'
 import ReCAPTCHA from 'react-google-recaptcha'
 import { toast } from 'react-hot-toast'
 import Toast from '../Toast'
@@ -38,13 +39,16 @@ export default function CaptchaInvisible({ children }: CaptchaInvisibleProps) {
       {children(runCaptcha, (className) => (
         <CaptchaTermsAndService className={className} />
       ))}
-      <ReCAPTCHA
-        sitekey={getCaptchaSiteKey()}
-        theme='dark'
-        ref={captchaRef}
-        size='invisible'
-        badge='inline'
-      />
+      {createPortal(
+        <ReCAPTCHA
+          sitekey={getCaptchaSiteKey()}
+          theme='dark'
+          ref={captchaRef}
+          size='invisible'
+          badge='inline'
+        />,
+        document.body
+      )}
     </>
   )
 }
diff --git a/src/components/chats/ChatItem/Embed.module.css b/src/components/chats/ChatItem/Embed.module.css
@@ -1,3 +1,4 @@
 .Embed :global(.react-tweet-theme) {
   --tweet-body-font-size: 1rem;
+  min-width: auto;
 }
diff --git a/src/components/chats/ChatItem/Embed.tsx b/src/components/chats/ChatItem/Embed.tsx
@@ -17,7 +17,7 @@ export default function Embed({ link: url, ...props }: EmbedProps) {
 
   return (
     Component && (
-      <div {...props} className={cx('w-full', props.className)}>
+      <div {...props} className={cx('w-full overflow-hidden', props.className)}>
         <Component link={url} />
       </div>
     )
@@ -55,7 +55,8 @@ const urlMapper: {
       )
     },
     checker: (link: string) =>
-      /(?:https?:\/\/)?(?:www\.)?(?:twitter\.com)\/(.+)/.test(link),
+      /(?:https?:\/\/)?(?:www\.)?(?:twitter\.com)\/(.+)/.test(link) &&
+      /\/status\/\d+/.test(link),
   },
   {
     name: 'tiktok',

diff --git a/src/components/chats/ChatItem/LinkPreview.tsx b/src/components/chats/ChatItem/LinkPreview.tsx
@@ -39,6 +39,8 @@ export default function LinkPreview({
     length: 300,
   })
 
+  const isValidImage = linkMetadata.image?.startsWith('https://')
+
   return (
     <div {...props} className={cx('w-full', props.className)}>
       <div
@@ -67,7 +69,7 @@ export default function LinkPreview({
         >
           {truncatedDesc}
         </p>
-        {linkMetadata.image && (
+        {linkMetadata.image && isValidImage && (
           <MediaLoader
             src={linkMetadata.image ?? ''}
             alt=''

diff --git a/src/components/inputs/TextArea.tsx b/src/components/inputs/TextArea.tsx
@@ -52,6 +52,13 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       replicated.textContent = (props.value ?? '') + ' '
     }, [props.value])
 
+    useEffect(() => {
+      const textArea = textAreaRef.current
+      const replicated = replicatedRef.current
+      if (!replicated || !textArea) return
+      replicated.textContent = textArea.value + ' '
+    }, [])
+
     const onKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
       if (!isTouchDevice() && e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault()

diff --git a/src/components/modals/MessageModal.tsx b/src/components/modals/MessageModal.tsx
@@ -78,29 +78,34 @@ export default function MessageModal({
       >
         <div
           className={cx(
-            'flex max-h-96 flex-col gap-4 overflow-y-auto rounded-2xl bg-background p-4',
+            'relative flex max-h-96 flex-col overflow-y-auto rounded-2xl bg-background p-2 pb-0 md:p-4 md:pb-0',
             !message && 'h-28 animate-pulse'
           )}
         >
           {message && (
-            <ChatItem
-              enableChatMenu={false}
-              isMyMessage={false}
-              message={message}
-              chatId={chatId}
-              hubId={hubId}
-            />
+            <div className='flex flex-col pb-2'>
+              <ChatItem
+                enableChatMenu={false}
+                isMyMessage={false}
+                message={message}
+                chatId={chatId}
+                hubId={hubId}
+              />
+            </div>
           )}
           {scrollToMessage && (
-            <Button
-              ref={buttonRef}
-              isLoading={isScrolling}
-              onClick={handleScrollToMessage}
-              size='lg'
-              variant='primaryOutline'
-            >
-              Scroll to message
-            </Button>
+            <div className='sticky -bottom-px left-0 bg-background pb-4 pt-2'>
+              <Button
+                ref={buttonRef}
+                isLoading={isScrolling}
+                onClick={handleScrollToMessage}
+                size='lg'
+                variant='primaryOutline'
+                className='w-full'
+              >
+                Scroll to message
+              </Button>
+            </div>
           )}
         </div>
         {isDifferentRecipient && recipient && (

diff --git a/src/pages/api/posts.ts b/src/pages/api/posts.ts
@@ -134,6 +134,7 @@ export async function getPostsServer(postIds: string[]): Promise<PostData[]> {
 
 const getMetadataRedisKey = (url: string) => 'metadata:' + url
 const METADATA_MAX_AGE = 60 * 60 * 24 * 30 // 1 month
+const METADATA_ERROR_MAX_AGE = 60 * 60 * 24 // 1 day
 async function getLinkMetadata(link: string): Promise<LinkMetadata | null> {
   const cachedData = await redisCallWrapper((redis) =>
     redis?.get(getMetadataRedisKey(link))
@@ -164,6 +165,14 @@ async function getLinkMetadata(link: string): Promise<LinkMetadata | null> {
     return parsedMetadata
   } catch (err) {
     console.error('Error fetching page metadata for link: ', link)
+    redisCallWrapper((redis) =>
+      redis?.set(
+        getMetadataRedisKey(link),
+        JSON.stringify(null),
+        'EX',
+        METADATA_ERROR_MAX_AGE
+      )
+    )
     return null
   }
 }
diff --git a/src/utils/ipfs.ts b/src/utils/ipfs.ts
@@ -21,14 +21,18 @@ export function getIpfsContentUrl(
 
   if (uri.startsWith('http')) return uri
 
-  const ipfsCid = CID.parse(uri)
-  if (!ipfsCid) return uri
-
-  const isCbor = ipfsCid.code === CID_KIND.CBOR
-  if (isCbor) {
-    return urlJoin(SUBSOCIAL_IPFS_GATEWAY, `/api/v0/dag/get?arg=${uri}`)
-  }
-  return urlJoin(SUBSOCIAL_IPFS_GATEWAY, `/ipfs/${uri}`)
+  try {
+    const ipfsCid = CID.parse(uri)
+    if (!ipfsCid) return uri
+
+    const isCbor = ipfsCid.code === CID_KIND.CBOR
+    if (isCbor) {
+      return urlJoin(SUBSOCIAL_IPFS_GATEWAY, `/api/v0/dag/get?arg=${uri}`)
+    }
+    return urlJoin(SUBSOCIAL_IPFS_GATEWAY, `/ipfs/${uri}`)
+  } catch {}
+
+  return uri
 }
 
 export function getCidFromMetadataLink(link: string) {