fix: dont include media wrapper if no media is shown

memori-ai · Jul 24, 2024 · b492706 · b492706
1 parent c30cde5
commit b492706
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 69 deletions.
diff --git a/src/components/MediaWidget/MediaItemWidget.tsx b/src/components/MediaWidget/MediaItemWidget.tsx
@@ -319,23 +319,35 @@ const MediaItemWidget: React.FC<Props> = ({
     if (translateTo) translateMediaCaptions();
   }, [translateTo, translateMediaCaptions]);
 
+  const nonCodeDisplayMedia = media
+    .filter(
+      m =>
+        !m.properties?.executable &&
+        !prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
+    )
+    .sort((a, b) => {
+      return a.creationTimestamp! > b.creationTimestamp!
+        ? 1
+        : a.creationTimestamp! < b.creationTimestamp!
+        ? -1
+        : 0;
+    });
+
+  const codeSnippets = media.filter(
+    m =>
+      !m.properties?.executable &&
+      prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
+  );
+
+  const cssExecutableCode = media.filter(
+    m => m.mimeType === 'text/css' && !!m.properties?.executable
+  );
+
   return (
     <Transition appear show as="div" className="memori-media-items">
-      <div className="memori-media-items--grid">
-        {media
-          .filter(
-            m =>
-              !m.properties?.executable &&
-              !prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
-          )
-          .sort((a, b) => {
-            return a.creationTimestamp! > b.creationTimestamp!
-              ? 1
-              : a.creationTimestamp! < b.creationTimestamp!
-              ? -1
-              : 0;
-          })
-          .map((item: Medium, index: number) => (
+      {!!nonCodeDisplayMedia.length && (
+        <div className="memori-media-items--grid">
+          {nonCodeDisplayMedia.map((item: Medium, index: number) => (
             <Transition.Child
               as="div"
               className="memori-media-item"
@@ -366,36 +378,29 @@ const MediaItemWidget: React.FC<Props> = ({
               />
             </Transition.Child>
           ))}
-      </div>
-      {media
-        .filter(
-          m =>
-            !m.properties?.executable &&
-            prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
-        )
-        .map(medium => (
-          <Transition.Child
-            as="div"
-            className="memori-media-item--snippet"
-            key={medium.mediumID}
-            enter="ease-out duration-500"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-1 translate-y-0"
-            leave="ease-in duration-300"
-            leaveFrom="opacity-1"
-            leaveTo="opacity-0"
-          >
-            <Snippet key={medium.mediumID} medium={medium} />
-          </Transition.Child>
-        ))}
-      {media
-        .filter(m => m.mimeType === 'text/css' && !!m.properties?.executable)
-        .map(medium => (
-          <style
-            key={medium.mediumID}
-            dangerouslySetInnerHTML={{ __html: medium.content || '' }}
-          ></style>
-        ))}
+        </div>
+      )}
+      {codeSnippets.map(medium => (
+        <Transition.Child
+          as="div"
+          className="memori-media-item--snippet"
+          key={medium.mediumID}
+          enter="ease-out duration-500"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-1 translate-y-0"
+          leave="ease-in duration-300"
+          leaveFrom="opacity-1"
+          leaveTo="opacity-0"
+        >
+          <Snippet key={medium.mediumID} medium={medium} />
+        </Transition.Child>
+      ))}
+      {cssExecutableCode.map(medium => (
+        <style
+          key={medium.mediumID}
+          dangerouslySetInnerHTML={{ __html: medium.content || '' }}
+        ></style>
+      ))}
 
       {openModalMedium?.mediumID && (
         <Modal

diff --git a/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap b/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap
@@ -5,9 +5,6 @@ exports[`renders MediaItemWidget unchanged with css snippet to exec 1`] = `
   <div
     class="memori-media-items"
   >
-    <div
-      class="memori-media-items--grid"
-    />
     <style>
       body{
   background-color: #f00;
@@ -22,9 +19,6 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
   <div
     class="memori-media-items"
   >
-    <div
-      class="memori-media-items--grid"
-    />
     <div
       class="memori-media-item--snippet ease-out duration-500 opacity-0 translate-y-1"
     >
@@ -155,11 +149,7 @@ exports[`renders MediaItemWidget unchanged with custom media renderer 1`] = `
 <div>
   <div
     class="memori-media-items"
-  >
-    <div
-      class="memori-media-items--grid"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -321,11 +311,7 @@ exports[`renders MediaItemWidget unchanged with js snippet to exec 1`] = `
 <div>
   <div
     class="memori-media-items"
-  >
-    <div
-      class="memori-media-items--grid"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -334,9 +320,6 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
   <div
     class="memori-media-items"
   >
-    <div
-      class="memori-media-items--grid"
-    />
     <div
       class="memori-media-item--snippet ease-out duration-500 opacity-0 translate-y-1"
     >
@@ -404,11 +387,7 @@ exports[`renders MediaItemWidget unchanged with no media 1`] = `
 <div>
   <div
     class="memori-media-items"
-  >
-    <div
-      class="memori-media-items--grid"
-    />
-  </div>
+  />
 </div>
 `;