switched to id based carousel routing

common/navigation-data.js

@@ -80,9 +80,6 @@ export const getByHref = (href, viewer) => {
   //NOTE(martina): to transform query params into more easily usable key value pairs in page
   if (!redirected) {
     let params = Strings.getParamsFromUrl(href);
-    if (page.id === "NAV_PROFILE" && page.cid) {
-      params.tab = "FILES";
-    }
     page.params = params;
   }
   return { page, details, redirected };

components/core/ActivityGroup/components/ViewMoreContent.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as Strings from "~/common/strings";
 import * as Validations from "~/common/validations";
+import * as Utilities from "~/common/utilities";
 
 import { css } from "@emotion/react";
 import { H5 } from "~/components/system/components/Typography";
@@ -28,12 +29,6 @@ const STYLES_SHOW_MORE_PREVIEWS = (theme) => css`
   }
 `;
 
-const getImageCover = (item) => {
-  const coverImage = item?.coverImage;
-  const imageUrl = Strings.getURLfromCID(coverImage ? coverImage?.cid : item.cid);
-  return imageUrl;
-};
-
 export default function ViewMoreContent({ items, children, ...props }) {
   return (
     <button css={[Styles.HOVERABLE, STYLES_VIEW_MORE_CONTAINER]} {...props}>
@@ -49,7 +44,7 @@ export default function ViewMoreContent({ items, children, ...props }) {
                   css={[STYLES_SHOW_MORE_PREVIEWS, Styles.CONTAINER_CENTERED]}
                 >
                   {isImageFile ? (
-                    <img src={getImageCover(file)} alt="File Preview" />
+                    <img src={Utilities.getImageUrlIfExists(file)} alt="File Preview" />
                   ) : (
                     <ObjectPlaceholder ratio={0.9} file={file} />
                   )}

components/core/CollectionPreviewBlock/components/Preview.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as Typography from "~/components/system/components/Typography";
 import * as Strings from "~/common/strings";
 import * as Constants from "~/common/constants";
+import * as Utilities from "~/common/utilities";
 
 import { Logo } from "~/common/logo";
 import { useInView } from "~/common/hooks";
@@ -70,11 +71,8 @@ export default function Preview({
   }
 
   if (type === "IMAGE") {
-    const { coverImage } = file;
     const blurhash = getFileBlurHash(file);
-    const previewImage = coverImage
+    const previewImage = Utilities.getImageUrlIfExists(file);
-      ? Strings.getURLfromCID(coverImage?.cid)
-      : Strings.getURLfromCID(file.cid);
 
     return (
       <div ref={previewerRef} css={[STYLES_PREVIEW, css]} {...props}>

components/core/DataView.js

@@ -836,7 +836,7 @@ export default class DataView extends React.Component {
                   <Link
                     key={each.id}
                     redirect
-                    params={{ ...this.props.page?.params, cid: each.cid }}
+                    params={{ ...this.props.page?.params, id: each.id }}
                     onAction={this.props.onAction}
                   >
                     <Selectable
@@ -982,7 +982,7 @@ export default class DataView extends React.Component {
             <FilePreviewBubble cid={cid} type={each.type}>
               <Link
                 redirect
-                params={{ ...this.props.page.params, cid: each.cid }}
+                params={{ ...this.props.page.params, id: each.id }}
                 onAction={this.props.onAction}
               >
                 <div css={STYLES_CONTAINER_HOVER}>

components/core/ObjectPreview/ImageObjectPreview.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
+import * as Utilities from "~/common/utilities";
 import * as Strings from "~/common/strings";
 
 import { AspectRatio } from "~/components/system";
@@ -70,7 +71,7 @@ export default function ImageObjectPreview({
 
   const { type, coverImage } = file;
   const imgTag = type.split("/")[1];
-  const imageUrl = coverImage ? coverImage?.url || Strings.getURLfromCID(coverImage?.cid) : url;
+  const imageUrl = Utilities.getImageUrlIfExists(file);
   const blurhash = React.useMemo(() => {
     return file.blurhash && isBlurhashValid(file.blurhash).result
       ? file.blurhash

components/core/SearchModal.js

@@ -429,9 +429,9 @@ const getHref = (result) => {
   } else if (result.type === "USER") {
     return `/$/user/${result.data.user.id}`;
   } else if (result.type === "FILE") {
-    return `/$/user/${result.data.user.id}?cid=${result.data.file.cid}`;
+    return `/$/user/${result.data.user.id}?id=${result.data.file.id}`;
   } else if (result.type === "DATA_FILE") {
-    return `/_/data?cid=${result.data.file.cid}`;
+    return `/_/data?cid=${result.data.file.id}`;
   } else {
     Logging.error("Get href failed because result was:", result);
   }

components/system/components/GlobalCarousel/index.js

@@ -65,10 +65,10 @@ export const useSaveHandler = ({ file, viewer, onAction }) => {
     return { isSaving: selectedFile?.status === "uploading", saveCopy: store.handlers.saveCopy };
   });
 
-  const isSaved = React.useMemo(
+  const isSaved = React.useMemo(() => viewer?.libraryCids[file.cid], [
-    () => viewer?.libraryCids[file.cid],
+    viewer?.libraryCids,
-    [viewer?.libraryCids, file.cid]
+    file.cid,
-  );
+  ]);
 
   const handleSave = async () => {
     if (!viewer) {
@@ -77,7 +77,7 @@ export const useSaveHandler = ({ file, viewer, onAction }) => {
     }
 
     if (isSaved) {
-      const fileLibraryURL = `/_/data?cid=${file.cid}`;
+      const fileLibraryURL = `/_/data?id=${file.id}`;
       onAction({
         type: "NAVIGATE",
         href: fileLibraryURL,
@@ -173,17 +173,25 @@ function CarouselHeader({
     { showControl: showFileDescription, hideControl: hideFileDescription },
   ] = useCarouselJumperControls();
 
-  const [isMoreInfoVisible, { showControl: showMoreInfo, hideControl: hideMoreInfo }] =
+  const [
-    useCarouselJumperControls();
+    isMoreInfoVisible,
+    { showControl: showMoreInfo, hideControl: hideMoreInfo },
+  ] = useCarouselJumperControls();
 
-  const [isEditInfoVisible, { showControl: showEditInfo, hideControl: hideEditInfo }] =
+  const [
-    useCarouselJumperControls();
+    isEditInfoVisible,
+    { showControl: showEditInfo, hideControl: hideEditInfo },
+  ] = useCarouselJumperControls();
 
-  const [isShareFileVisible, { showControl: showShareFile, hideControl: hideShareFile }] =
+  const [
-    useCarouselJumperControls();
+    isShareFileVisible,
+    { showControl: showShareFile, hideControl: hideShareFile },
+  ] = useCarouselJumperControls();
 
-  const [isEditChannelsVisible, { showControl: showEditChannels, hideControl: hideEditChannels }] =
+  const [
-    useCarouselJumperControls();
+    isEditChannelsVisible,
+    { showControl: showEditChannels, hideControl: hideEditChannels },
+  ] = useCarouselJumperControls();
 
   const isJumperOpen =
     isFileDescriptionVisible ||
@@ -501,17 +509,25 @@ function CarouselHeaderMobile({
 }
 
 function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer }) {
-  const [isEditInfoVisible, { showControl: showEditInfo, hideControl: hideEditInfo }] =
+  const [
-    useCarouselJumperControls();
+    isEditInfoVisible,
+    { showControl: showEditInfo, hideControl: hideEditInfo },
+  ] = useCarouselJumperControls();
 
-  const [isShareFileVisible, { showControl: showShareFile, hideControl: hideShareFile }] =
+  const [
-    useCarouselJumperControls();
+    isShareFileVisible,
+    { showControl: showShareFile, hideControl: hideShareFile },
+  ] = useCarouselJumperControls();
 
-  const [isMoreInfoVisible, { showControl: showMoreInfo, hideControl: hideMoreInfo }] =
+  const [
-    useCarouselJumperControls();
+    isMoreInfoVisible,
+    { showControl: showMoreInfo, hideControl: hideMoreInfo },
+  ] = useCarouselJumperControls();
 
-  const [isEditChannelsVisible, { showControl: showEditChannels, hideControl: hideEditChannels }] =
+  const [
-    useCarouselJumperControls();
+    isEditChannelsVisible,
+    { showControl: showEditChannels, hideControl: hideEditChannels },
+  ] = useCarouselJumperControls();
   return (
     <>
       <ModalPortal>
@@ -823,10 +839,10 @@ export function CarouselContent({
  * -----------------------------------------------------------------------------------------------*/
 const useCarouselViaParams = ({ index, params, objects, onChange }) => {
   const findSelectedIndex = () => {
-    const cid = params?.cid;
+    const id = params?.id;
-    if (!cid) return -1;
+    if (!id) return -1;
 
-    let index = objects.findIndex((elem) => elem.cid === cid);
+    let index = objects.findIndex((elem) => elem.id === id);
     return index;
   };
 
@@ -835,10 +851,10 @@ const useCarouselViaParams = ({ index, params, objects, onChange }) => {
 
     const selectedIndex = findSelectedIndex();
     if (selectedIndex !== index) onChange(index);
-  }, [params?.cid]);
+  }, [params?.id]);
 
   React.useEffect(() => {
-    if (params?.cid) {
+    if (params?.id) {
       const index = findSelectedIndex();
       onChange(index);
     }
@@ -852,9 +868,9 @@ const getCarouselHandlers = ({ index, objects, params, onChange, onAction }) =>
     let nextIndex = index + 1;
     if (nextIndex >= objects.length) return;
 
-    let { cid } = objects[nextIndex];
+    let { id } = objects[nextIndex];
     onChange(nextIndex);
-    onAction({ type: "UPDATE_PARAMS", params: { ...params, cid }, redirect: true });
+    onAction({ type: "UPDATE_PARAMS", params: { ...params, id }, redirect: true });
   };
 
   const handlePrevious = (e) => {
@@ -863,16 +879,16 @@ const getCarouselHandlers = ({ index, objects, params, onChange, onAction }) =>
     let prevIndex = index - 1;
     if (prevIndex < 0) return;
 
-    let { cid } = objects[prevIndex];
+    let { id } = objects[prevIndex];
     onChange(prevIndex);
-    onAction({ type: "UPDATE_PARAMS", params: { ...params, cid }, redirect: true });
+    onAction({ type: "UPDATE_PARAMS", params: { ...params, id }, redirect: true });
   };
 
   const handleClose = (e) => {
     if (e) e.stopPropagation(), e.preventDefault();
 
     let params = { ...params };
-    delete params.cid;
+    delete params.id;
     onAction({ type: "UPDATE_PARAMS", params, redirect: true });
     onChange(-1);
   };

node_common/monitor.js

@@ -40,11 +40,11 @@ export const upload = ({ user, slate, files: targetFiles }) => {
         : "";
     let message;
     if (slate) {
-      const objectURL = `<https://slate.host/${user.username}/${slate.slatename}?cid=${files[0].cid}|${files[0].filename}>`;
+      const objectURL = `<https://slate.host/${user.username}/${slate.slatename}?id=${files[0].id}|${files[0].filename}>`;
       const slateURL = `<https://slate.host/${user.username}/${slate.slatename}|${slate.name}>`;
       message = `*${userURL}* uploaded ${objectURL}${extra} to ${slateURL}`;
     } else {
-      const objectURL = `<https://slate.host/${user.username}?cid=${files[0].cid}|${files[0].filename}>`;
+      const objectURL = `<https://slate.host/${user.username}?id=${files[0].id}|${files[0].filename}>`;
       message = `*${userURL}* uploaded ${objectURL}${extra}`;
     }
 
@@ -61,7 +61,7 @@ export const download = ({ user, files: targetFiles }) => {
   }
   try {
     const userURL = getUserURL(user);
-    const objectURL = `<https://slate.host/${user.username}?cid=${files[0].cid}|${files[0].filename}>`;
+    const objectURL = `<https://slate.host/${user.username}?id=${files[0].id}|${files[0].filename}>`;
     const extra =
       files.length > 1
         ? ` and ${files.length - 1} other file${files.length - 1 > 1 ? "s" : ""}`
@@ -87,11 +87,11 @@ export const saveCopy = ({ slate, user, files: targetFiles }) => {
         : "";
     let message;
     if (slate) {
-      const objectURL = `<https://slate.host/${user.username}/${slate.slatename}?cid=${files[0].cid}|${files[0].filename}>`;
+      const objectURL = `<https://slate.host/${user.username}/${slate.slatename}?id=${files[0].id}|${files[0].filename}>`;
       const slateURL = `<https://slate.host/${user.username}/${slate.slatename}|${slate.name}>`;
       message = `*${userURL}* saved ${objectURL}${extra} to ${slateURL}`;
     } else {
-      const objectURL = `<https://slate.host/${user.username}?cid=${files[0].cid}|${files[0].filename}>`;
+      const objectURL = `<https://slate.host/${user.username}?id=${files[0].id}|${files[0].filename}>`;
       message = `*${userURL}* saved ${objectURL}${extra}`;
     }
 

pages/_/file.js

@@ -35,21 +35,19 @@ export default class ProfilePage extends React.Component {
     page: null,
   };
 
-  componentDidMount = () => {
+  // componentDidMount = () => {
-    console.log(this.props.data);
+  // window.onpopstate = this._handleBackForward;
-    // window.onpopstate = this._handleBackForward;
+  // if (!Strings.isEmpty(this.props.cid)) {
-
+  //   let files = this.props.creator.library || [];
-    // if (!Strings.isEmpty(this.props.cid)) {
+  //   let index = files.findIndex((object) => object.cid === this.props.cid);
-    //   let files = this.props.creator.library || [];
+  //   if (index !== -1) {
-    //   let index = files.findIndex((object) => object.cid === this.props.cid);
+  //     Events.dispatchCustomEvent({
-    //   if (index !== -1) {
+  //       name: "slate-global-open-carousel",
-    //     Events.dispatchCustomEvent({
+  //       detail: { index },
-    //       name: "slate-global-open-carousel",
+  //     });
-    //       detail: { index },
+  //   }
-    //     });
+  // }
-    //   }
+  // };
-    // }
-  };
 
   //   _handleBackForward = (e) => {
   //     let page = window.history.state;

scenes/SceneSlate.js

@@ -216,8 +216,8 @@ export default class SceneSlate extends React.Component {
     } else {
       let title, description, file, image;
       let name = slate.name;
-      if (this.props.page.params?.cid) {
+      if (this.props.page.params?.id) {
-        file = slate.objects.find((file) => file.cid === this.props.page.params.cid);
+        file = slate.objects.find((file) => file.id === this.props.page.params.id);
       }
       if (file) {
         title = `${file.name || file.filename}`;
@@ -288,16 +288,16 @@ class SlatePage extends React.Component {
 
   componentDidMount() {
     const {
-      page: { cid },
+      page: { id },
     } = this.props;
 
     /* NOTE(daniel): If user was redirected to this page, the cid of the slate object will exist in the page props.
     We'll use the cid to open the global carousel */
-    if (Strings.isEmpty(cid)) {
+    if (Strings.isEmpty(id)) {
       return;
     }
 
-    const index = this.props.data.objects.findIndex((object) => object.cid === cid);
+    const index = this.props.data.objects.findIndex((object) => object.id === id);
     // if (index !== -1) {
     //   Events.dispatchCustomEvent({
     //     name: "slate-global-open-carousel",