filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 17:12:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

switched to id based carousel routing

Browse Source
This commit is contained in:
Martina 2021-12-13 13:27:03 -08:00
parent 07ab8caa2a
commit 2ad80f2811
10 changed files with 80 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
common/navigation-data.js
View File

@ -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 };

9
components/core/ActivityGroup/components/ViewMoreContent.js
View File

@ -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} />
)}

6
components/core/CollectionPreviewBlock/components/Preview.js
View File

@ -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
? Strings.getURLfromCID(coverImage?.cid)
: Strings.getURLfromCID(file.cid);
const previewImage = Utilities.getImageUrlIfExists(file);
return (
<div ref={previewerRef} css={[STYLES_PREVIEW, css]} {...props}>

4
components/core/DataView.js
View File

@ -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}>

3
components/core/ObjectPreview/ImageObjectPreview.js
View File

@ -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

4
components/core/SearchModal.js
View File

@ -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);
}

78
components/system/components/GlobalCarousel/index.js
View File

@ -65,10 +65,10 @@ export const useSaveHandler = ({ file, viewer, onAction }) => {
return { isSaving: selectedFile?.status === "uploading", saveCopy: store.handlers.saveCopy };
});
const isSaved = React.useMemo(
() => viewer?.libraryCids[file.cid],
[viewer?.libraryCids, file.cid]
);
const isSaved = React.useMemo(() => viewer?.libraryCids[file.cid], [
viewer?.libraryCids,
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 }] =
useCarouselJumperControls();
const [
isMoreInfoVisible,
{ showControl: showMoreInfo, hideControl: hideMoreInfo },
] = useCarouselJumperControls();
const [isEditInfoVisible, { showControl: showEditInfo, hideControl: hideEditInfo }] =
useCarouselJumperControls();
const [
isEditInfoVisible,
{ showControl: showEditInfo, hideControl: hideEditInfo },
] = useCarouselJumperControls();
const [isShareFileVisible, { showControl: showShareFile, hideControl: hideShareFile }] =
useCarouselJumperControls();
const [
isShareFileVisible,
{ showControl: showShareFile, hideControl: hideShareFile },
] = useCarouselJumperControls();
const [isEditChannelsVisible, { showControl: showEditChannels, hideControl: hideEditChannels }] =
useCarouselJumperControls();
const [
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 }] =
useCarouselJumperControls();
const [
isEditInfoVisible,
{ showControl: showEditInfo, hideControl: hideEditInfo },
] = useCarouselJumperControls();
const [isShareFileVisible, { showControl: showShareFile, hideControl: hideShareFile }] =
useCarouselJumperControls();
const [
isShareFileVisible,
{ showControl: showShareFile, hideControl: hideShareFile },
] = useCarouselJumperControls();
const [isMoreInfoVisible, { showControl: showMoreInfo, hideControl: hideMoreInfo }] =
useCarouselJumperControls();
const [
isMoreInfoVisible,
{ showControl: showMoreInfo, hideControl: hideMoreInfo },
] = useCarouselJumperControls();
const [isEditChannelsVisible, { showControl: showEditChannels, hideControl: hideEditChannels }] =
useCarouselJumperControls();
const [
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;
if (!cid) return -1;
const id = params?.id;
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);
};

10
node_common/monitor.js
View File

@ -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}`;
}

28
pages/_/file.js
View File

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

10
scenes/SceneSlate.js
View File

@ -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) {
file = slate.objects.find((file) => file.cid === this.props.page.params.cid);
if (this.props.page.params?.id) {
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",