Adjustments to lock page and refactor

Official-MoonDao · Aug 16, 2023 · 0727b1d · 0727b1d
1 parent c6a4f76
commit 0727b1d
Show file tree

Hide file tree

Showing 14 changed files with 461 additions and 341 deletions.
diff --git a/ui/components/dashboard/announcements/Announcement.tsx b/ui/components/dashboard/announcements/Announcement.tsx
@@ -76,7 +76,7 @@ const Announcement = React.forwardRef(
               attachments.map((attachment: any, i: number) => (
                 <img
                   className="h-auto max-w-[300px] lg:max-w-[400px] 2xl:max-w-[450px]"
-                  key={i}
+                  key={'announcement-attachment' + i}
                   src={attachment.url}
                 />
               ))}
@@ -87,7 +87,7 @@ const Announcement = React.forwardRef(
             {reactions &&
               reactions.map((reaction: any, i: number) => (
                 <Reaction
-                  key={i}
+                  key={'announcement-reaction' + i}
                   reaction={reaction}
                   index={i}
                   loading={loading}

diff --git a/ui/components/dashboard/announcements/AnnouncementContent.tsx b/ui/components/dashboard/announcements/AnnouncementContent.tsx
@@ -11,7 +11,7 @@ const AnnouncementContent = ({ text, mentions, loading }: any) => {
   const textSeparatedFromLinks = parseAnnouncementText(text, linkRegex)
 
   return (
-    <p
+    <div
       className={`whitespace-pre-wrap break-words font-mono leading-relaxed text-light-text dark:text-dark-text lg:text-lg 2xl:text-xl ${
         loading && 'loading-line'
       }`}
@@ -33,7 +33,7 @@ const AnnouncementContent = ({ text, mentions, loading }: any) => {
           >{`${str} `}</a>
         )
       )}
-    </p>
+    </div>
   )
 }
 
@@ -48,21 +48,24 @@ const TextContent = ({ sentence, mentions }: any) => {
     <>
       {sentenceSeparatedFromMentions.map((e, i) =>
         e.startsWith('<@&') ? (
-          <ReplaceIdWithRoleName key={'role-name' + i} word={e} />
+          <ReplaceIdWithRoleName key={'sentence-role-name' + i} word={e} />
         ) : e.startsWith('<#') ? (
-          <ReplaceIdWithChannelName key={'role-name' + i} word={e} />
+          <ReplaceIdWithChannelName
+            key={'sentence-channel-name' + i}
+            word={e}
+          />
         ) : e.startsWith('<@') ? (
           <ReplaceIdWithMention
-            key={'role-name' + i}
+            key={'sentence-mention' + i}
             word={e}
             mentions={mentions}
           />
         ) : e.includes('<:MoonDAO:1047902000601383013>') ? (
-          <>
+          <div key={'sentence-logo' + i}>
             {e.slice(0, e.indexOf('<:MoonDAO:1047902000601383013>'))}{' '}
-            <LogoSmall key={'role-name' + i} size={{ height: 28, width: 28 }} />
+            <LogoSmall size={{ height: 28, width: 28 }} />
             {e.slice(e.indexOf('<:MoonDAO:1047902000601383013>') + 30)}
-          </>
+          </div>
         ) : (
           e
         )

diff --git a/ui/components/dashboard/announcements/AnnouncementSkeletons.tsx b/ui/components/dashboard/announcements/AnnouncementSkeletons.tsx
@@ -1,19 +1,37 @@
-import Announcement from "./Announcement"
+import Announcement from './Announcement'
 
 const AnnouncementSkeletons = () => {
   const skeletonData = {
-    content : Array(8).fill("Loading, if this takes too long contact MoonDao Discord ").join(" "),
+    content: Array(8)
+      .fill('Loading, if this takes too long contact MoonDao Discord ')
+      .join(' '),
     mentions: [],
-    author: {username:"MoonDAO"},
-    timestamp: new Date() ,
-    reactions: [{emoji:{name:"🚀"}, count:"10"},{emoji:{name:"🚀"}, count:"10"},{emoji:{name:"🚀"}, count:"10"}]
+    author: { username: 'MoonDAO' },
+    timestamp: new Date(),
+    reactions: [
+      { emoji: { name: '🚀' }, count: '10' },
+      { emoji: { name: '🚀' }, count: '10' },
+      { emoji: { name: '🚀' }, count: '10' },
+    ],
   }
-  
-    return (
+
+  return (
     <>
-{Array(10).fill(skeletonData).map((e,i) => <Announcement loading key={i} content={e.content} mentions={e.mentions} author={e.author} timestamp={e.timestamp} reactions={e.reactions} />)}
+      {Array(10)
+        .fill(skeletonData)
+        .map((e, i) => (
+          <Announcement
+            loading
+            key={'announcement-skeleton' + i}
+            content={e.content}
+            mentions={e.mentions}
+            author={e.author}
+            timestamp={e.timestamp}
+            reactions={e.reactions}
+          />
+        ))}
     </>
   )
 }
 
-export default AnnouncementSkeletons
+export default AnnouncementSkeletons