fix for preveiw image not showing in sidebar

components/core/CarouselSidebarData.js

@@ -83,14 +83,6 @@ const STYLES_DISMISS_BOX = css`
 const STYLES_CONTAINER = css`
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  padding-bottom: 88px;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
 `;
 
 const STYLES_META = css`
@@ -331,9 +323,8 @@ export default class CarouselSidebarData extends React.Component {
   };
 
   render() {
-    const { cid, file, type, size, url } = this.props.data;
+    const { cid, file, name, previewImage, type, size, url, blurhash } = this.props.data;
     const elements = [];
-
     if (this.props.onClose) {
       elements.push(
         <div key="s-1" css={STYLES_DISMISS_BOX} onClick={this.props.onClose}>
@@ -398,16 +389,7 @@ export default class CarouselSidebarData extends React.Component {
               This is the preview image of your file.
             </System.P>
             <div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
-              <div>
-                <SlateMediaObjectPreview
-                  style={{ color: `${Constants.system.black}`, height: "240px" }}
-                  blurhash={this.props.previewImage ? false : true}
-                  url={url}
-                  title={file}
-                  type={type}
-                  previewImage={this.props.data.previewImage}
-                />
-              </div>
+              <img src={previewImage} alt="" style={{ maxWidth: "368px", maxHeight: "368px" }} />
             </div>
             <div style={{ marginTop: 16 }}>
               <input
@@ -430,7 +412,7 @@ export default class CarouselSidebarData extends React.Component {
         <div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
           Privacy
         </div>
-        <div style={{ color: Constants.system.darkGray, lineHeight: "1.5" }}>
+        <div style={{ color: Constants.system.darkGray, lineHeight: "1.5", marginBottom: 104 }}>
           {this.state.isPublic
             ? "Public. This file is currently visible to others and searchable within Slate through public slates."
             : "Private. This file is currently not visible to others unless they have the link."}

components/core/DataView.js

@@ -427,7 +427,7 @@ export default class DataView extends React.Component {
                     blurhash={each.blurhash}
                     url={Strings.getCIDGatewayURL(each.cid || each.ipfs.replace("/ipfs/", ""))}
                     title={each.file || each.name}
-                    type={each.type || each.icon}
+                    type={each.type}
                     previewImage={each.previewImage}
                     dataView={true}
                   />

components/core/SlateMediaObjectPreview.js

@@ -186,32 +186,31 @@ export default class SlateMediaObjectPreview extends React.Component {
         style={this.props.previewPanel ? { color: "#bfbfbf" } : null}
       />
     );
-    console.log(this.props.previewImage);
-    return (
-      <React.Fragment>
-        {this.props.previewImage ? (
-          <div
-            css={STYLES_IMAGE_CONTAINER}
-            style={{
-              backgroundImage: `url(${this.props.previewImage})`,
-              ...this.props.imageStyle,
-            }}
-          />
-        ) : (
-          <article
-            css={STYLES_ENTITY}
-            style={{
-              ...this.props.style,
-              border: this.props.previewPanel ? `1px solid ${Constants.system.bgGray}` : "auto",
-            }}
-          >
-            <div>{element}</div>
-            {this.props.title && !this.props.iconOnly && !this.props.previewPanel ? (
-              <div css={STYLES_TITLE}>{title}</div>
-            ) : null}
-          </article>
-        )}
-      </React.Fragment>
-    );
+    if (this.props.previewImage) {
+      return (
+        <div
+          css={STYLES_IMAGE_CONTAINER}
+          style={{
+            backgroundImage: `url(${this.props.previewImage})`,
+            ...this.props.imageStyle,
+          }}
+        />
+      );
+    } else {
+      return (
+        <article
+          css={STYLES_ENTITY}
+          style={{
+            ...this.props.style,
+            border: this.props.previewPanel ? `1px solid ${Constants.system.bgGray}` : "auto",
+          }}
+        >
+          <div>{element}</div>
+          {this.props.title && !this.props.iconOnly && !this.props.previewPanel ? (
+            <div css={STYLES_TITLE}>{title}</div>
+          ) : null}
+        </article>
+      );
+    }
   }
 }

pages/api/data/update.js

@@ -2,6 +2,7 @@ import * as Data from "~/node_common/data";
 import * as Utilities from "~/node_common/utilities";
 import * as LibraryManager from "~/node_common/managers/library";
 import * as ViewerManager from "~/node_common/managers/viewer";
+import * as SearchManager from "~/node_common/managers/search";
 
 export default async (req, res) => {
   const id = Utilities.getIdFromCookie(req);
@@ -28,11 +29,13 @@ export default async (req, res) => {
     return res.status(500).send({ decorator: "SERVER_SLATES_NOT_FOUND", error: true });
   }
 
+  let slatesChanged = false;
   for (let slate of slates) {
     let edited = false;
     let objects = slate.data.objects.map((obj) => {
       if (obj.id === req.body.data.id) {
         edited = true;
+        slatesChanged = true;
         obj = { ...obj, ...req.body.data };
       }
       return obj;
@@ -47,16 +50,18 @@ export default async (req, res) => {
           objects,
         },
       });
+      SearchManager.updateSlate(slate, "EDIT");
     }
   }
 
-  slates = await Data.getSlatesByUserId({ userId: id });
-  if (!slates || slates.error) {
-    return res.status(500).send({ decorator: "SERVER_SLATES_NOT_FOUND", error: true });
+  if (slatesChanged) {
+    let userSlates = await Data.getSlatesByUserId({ userId: id });
+    if (!userSlates || userSlates.error) {
+      return res.status(500).send({ decorator: "SERVER_SLATES_NOT_FOUND", error: true });
+    }
+    ViewerManager.hydratePartialSlates(userSlates, id);
   }
 
-  ViewerManager.hydratePartialSlates(slates, id);
-
   if (newUserData && newUserData.library) {
     ViewerManager.hydratePartialLibrary(newUserData.library, id);
   }