minor fixes

src/components/note/content/index.tsx

@@ -10,9 +10,9 @@ export const Content = memo(function Content({ data }: { data: any }) {
   const content = useMemo(() => {
     let parsedContent;
     // get data tags
-    const tags = JSON.parse(data.tags);
+    const tags = data.tags ? JSON.parse(data.tags) : null;
     // remove all image urls
-    parsedContent = data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp)((\?.*)$|$))/gim, '');
+    parsedContent = data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp|mp4|webm)((\?.*)$|$))/gim, '');
     // handle urls
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => (
       <a key={match + i} href={match} target="_blank" rel="noreferrer">
@@ -21,12 +21,21 @@ export const Content = memo(function Content({ data }: { data: any }) {
     ));
     // handle hashtags
     parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-      <span className="text-fuchsia-500">#{match}</span>
+      <span key={match + i} className="text-fuchsia-500">
+        #{match}
+      </span>
     ));
     // handle mentions
-    parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => (
-      <UserMention pubkey={tags[match][1]} key={i} />
-    ));
+    if (tags) {
+      parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
+        if (tags[match][0] === 'p') {
+          return <UserMention key={match + i} pubkey={tags[match][1]} />;
+        } else {
+          // #TODO: handle mention other note
+          console.log(tags[match]);
+        }
+      });
+    }
 
     return parsedContent;
   }, [data.content, data.tags]);

src/components/note/root.tsx

@@ -3,7 +3,7 @@ import { RelayContext } from '@components/contexts/relay';
 import { Content } from '@components/note/content';
 
 import useLocalStorage from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 
 export const RootNote = memo(function RootNote({ id }: { id: string }) {
   const { db }: any = useContext(DatabaseContext);
@@ -53,7 +53,7 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
     );
   }, [id, insertDB, relayPool, relays]);
 
-  useEffect(() => {
+  useMemo(() => {
     getData()
       .then((res) => {
         if (res) {

src/components/user/base.tsx

@@ -4,7 +4,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { truncate } from '@utils/truncate';
 
 import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 
 export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
@@ -20,7 +20,7 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
     [db, pubkey]
   );
 
-  useEffect(() => {
+  useMemo(() => {
     fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
       .then((response) => {
         if (response.ok) {

src/components/user/extend.tsx

@@ -7,7 +7,7 @@ import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
@@ -30,7 +30,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
     return result[0];
   }, [db, pubkey]);
 
-  useEffect(() => {
+  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {

src/components/user/mention.tsx

@@ -2,7 +2,7 @@ import { DatabaseContext } from '@components/contexts/database';
 
 import { truncate } from '@utils/truncate';
 
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 
 export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
@@ -23,7 +23,7 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
     return result[0];
   }, [db, pubkey]);
 
-  useEffect(() => {
+  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {

src/components/user/mini.tsx

@@ -4,7 +4,7 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { truncate } from '@utils/truncate';
 
 import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 
 export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
@@ -25,7 +25,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
     return result[0];
   }, [db, pubkey]);
 
-  useEffect(() => {
+  useMemo(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {