mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 17:44:50 +03:00
comment out tagging
This commit is contained in:
parent
c1d4aec9cb
commit
c53f7a42af
@ -285,8 +285,8 @@ class CarouselSidebar extends React.Component {
|
||||
body: this.props.file.body || "",
|
||||
source: this.props.file.source || "",
|
||||
author: this.props.file.author || "",
|
||||
tags: this.props.file.data.tags || [],
|
||||
suggestions: this.props.viewer?.tags || [],
|
||||
// tags: this.props.file.data.tags || [],
|
||||
// suggestions: this.props.viewer?.tags || [],
|
||||
selected: {},
|
||||
isUploading: false,
|
||||
isDownloading: false,
|
||||
@ -304,16 +304,16 @@ class CarouselSidebar extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
componentDidUpdate = (prevProps, prevState) => {
|
||||
if (!isEqual(prevState.tags, this.state.tags)) {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
};
|
||||
// componentDidUpdate = (prevProps, prevState) => {
|
||||
// if (!isEqual(prevState.tags, this.state.tags)) {
|
||||
// this.updateSuggestions();
|
||||
// }
|
||||
// };
|
||||
|
||||
updateSuggestions = () => {
|
||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
||||
this.setState({ suggestions: Array.from(newSuggestions) });
|
||||
};
|
||||
// updateSuggestions = () => {
|
||||
// let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
||||
// this.setState({ suggestions: Array.from(newSuggestions) });
|
||||
// };
|
||||
|
||||
calculateSelected = () => {
|
||||
if (!this.props.viewer) {
|
||||
@ -348,12 +348,12 @@ class CarouselSidebar extends React.Component {
|
||||
{
|
||||
[e.target.name]: e.target.value,
|
||||
showSavedMessage: false,
|
||||
},
|
||||
() => {
|
||||
if (e.target.name === "Tags") {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
}
|
||||
// () => {
|
||||
// if (e.target.name === "Tags") {
|
||||
// this.updateSuggestions();
|
||||
// }
|
||||
// }
|
||||
);
|
||||
};
|
||||
|
||||
@ -363,7 +363,7 @@ class CarouselSidebar extends React.Component {
|
||||
|
||||
_handleSave = async () => {
|
||||
if (this.props.external || !this.props.isOwner) return;
|
||||
this.props.onAction({ type: "UPDATE_VIEWER", viewer: { tags: this.state.suggestions } });
|
||||
// this.props.onAction({ type: "UPDATE_VIEWER", viewer: { tags: this.state.suggestions } });
|
||||
const response = await Actions.updateFile({
|
||||
id: this.props.file.id,
|
||||
name: this.state.name,
|
||||
@ -581,7 +581,7 @@ class CarouselSidebar extends React.Component {
|
||||
style={{ ...STYLES_INPUT, marginBottom: 12 }}
|
||||
textStyle={{ color: Constants.system.white }}
|
||||
/>
|
||||
<div css={STYLES_OPTIONS_SECTION}>
|
||||
{/* <div css={STYLES_OPTIONS_SECTION}>
|
||||
<Tag
|
||||
type="dark"
|
||||
tags={this.state.tags}
|
||||
@ -591,7 +591,7 @@ class CarouselSidebar extends React.Component {
|
||||
// dropdownStyles={{ top: "50px" }}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
@ -223,69 +223,69 @@ const STYLES_TAG = css`
|
||||
}
|
||||
`;
|
||||
|
||||
class Tags extends React.Component {
|
||||
state = {
|
||||
isTruncated: false,
|
||||
truncateIndex: 0,
|
||||
};
|
||||
// class Tags extends React.Component {
|
||||
// state = {
|
||||
// isTruncated: false,
|
||||
// truncateIndex: 0,
|
||||
// };
|
||||
|
||||
listWrapper = React.createRef();
|
||||
listEl = React.createRef();
|
||||
// listWrapper = React.createRef();
|
||||
// listEl = React.createRef();
|
||||
|
||||
componentDidMount() {
|
||||
this._handleTruncate();
|
||||
}
|
||||
// componentDidMount() {
|
||||
// this._handleTruncate();
|
||||
// }
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (!isEqual(prevProps.tags, this.props.tags)) {
|
||||
this._handleTruncate();
|
||||
}
|
||||
}
|
||||
// componentDidUpdate(prevProps, prevState) {
|
||||
// if (!isEqual(prevProps.tags, this.props.tags)) {
|
||||
// this._handleTruncate();
|
||||
// }
|
||||
// }
|
||||
|
||||
_handleTruncate = () => {
|
||||
const listWrapper = this.listWrapper.current?.getBoundingClientRect();
|
||||
const tagNodes = this.listEl.current?.querySelectorAll("li");
|
||||
const tagElems = Array.from(tagNodes);
|
||||
// _handleTruncate = () => {
|
||||
// const listWrapper = this.listWrapper.current?.getBoundingClientRect();
|
||||
// const tagNodes = this.listEl.current?.querySelectorAll("li");
|
||||
// const tagElems = Array.from(tagNodes);
|
||||
|
||||
let total = 0;
|
||||
const truncateIndex = tagElems.findIndex((tagElem) => {
|
||||
const { width } = tagElem?.getBoundingClientRect();
|
||||
total += width;
|
||||
// let total = 0;
|
||||
// const truncateIndex = tagElems.findIndex((tagElem) => {
|
||||
// const { width } = tagElem?.getBoundingClientRect();
|
||||
// total += width;
|
||||
|
||||
if (total >= listWrapper.width - 50) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
// if (total >= listWrapper.width - 50) {
|
||||
// return true;
|
||||
// }
|
||||
// });
|
||||
|
||||
if (truncateIndex > 0) {
|
||||
this.setState({ isTruncated: true, truncateIndex });
|
||||
return;
|
||||
}
|
||||
// if (truncateIndex > 0) {
|
||||
// this.setState({ isTruncated: true, truncateIndex });
|
||||
// return;
|
||||
// }
|
||||
|
||||
this.setState({ isTruncated: false, truncateIndex: tagElems.length });
|
||||
};
|
||||
// this.setState({ isTruncated: false, truncateIndex: tagElems.length });
|
||||
// };
|
||||
|
||||
render() {
|
||||
const { tags } = this.props;
|
||||
// render() {
|
||||
// const { tags } = this.props;
|
||||
|
||||
return (
|
||||
<div css={STYLES_TAGS_WRAPPER}>
|
||||
<div ref={this.listWrapper} style={{ width: 340 }}>
|
||||
<ul css={STYLES_LIST} ref={this.listEl}>
|
||||
{(this.state.isTruncated ? tags.slice(0, this.state.truncateIndex) : tags).map(
|
||||
(tag) => (
|
||||
<li key={tag} css={STYLES_TAG}>
|
||||
<span>{tag}</span>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
{this.state.isTruncated && <span>...</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// return (
|
||||
// <div css={STYLES_TAGS_WRAPPER}>
|
||||
// <div ref={this.listWrapper} style={{ width: 340 }}>
|
||||
// <ul css={STYLES_LIST} ref={this.listEl}>
|
||||
// {(this.state.isTruncated ? tags.slice(0, this.state.truncateIndex) : tags).map(
|
||||
// (tag) => (
|
||||
// <li key={tag} css={STYLES_TAG}>
|
||||
// <span>{tag}</span>
|
||||
// </li>
|
||||
// )
|
||||
// )}
|
||||
// </ul>
|
||||
// {this.state.isTruncated && <span>...</span>}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
function Footer({
|
||||
type = "myslate",
|
||||
@ -296,7 +296,7 @@ function Footer({
|
||||
downloadFiles,
|
||||
deleteFiles,
|
||||
//NOTE(amine): Myslate actions
|
||||
editTags,
|
||||
// editTags,
|
||||
//NOTE(amine): Collection actions
|
||||
removeFromCollection,
|
||||
saveCopy,
|
||||
@ -322,7 +322,7 @@ function Footer({
|
||||
>
|
||||
Add to collection
|
||||
</ButtonPrimary>
|
||||
{isOwner && !isCollectionType && (
|
||||
{/* {isOwner && !isCollectionType && (
|
||||
<ButtonPrimary
|
||||
transparent
|
||||
style={{ color: Constants.system.white }}
|
||||
@ -330,7 +330,7 @@ function Footer({
|
||||
>
|
||||
Edit tags
|
||||
</ButtonPrimary>
|
||||
)}
|
||||
)} */}
|
||||
{!isOwner && isCollectionType && (
|
||||
<ButtonPrimary
|
||||
transparent
|
||||
@ -715,33 +715,34 @@ export default class DataView extends React.Component {
|
||||
UserBehaviors.saveCopy({ files: items });
|
||||
};
|
||||
|
||||
getCommonTagFromSelectedItems = () => {
|
||||
const { items } = this.props;
|
||||
const { checked } = this.state;
|
||||
// getCommonTagFromSelectedItems = () => {
|
||||
// const { items } = this.props;
|
||||
// const { checked } = this.state;
|
||||
|
||||
if (!Object.keys(checked).length) {
|
||||
return;
|
||||
}
|
||||
// if (!Object.keys(checked).length) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
let allTagsFromSelectedItems = Object.keys(checked).map((index) =>
|
||||
items[index].data.tags ? items[index].data.tags : []
|
||||
);
|
||||
// let allTagsFromSelectedItems = Object.keys(checked).map((index) =>
|
||||
// items[index].data.tags ? items[index].data.tags : []
|
||||
// );
|
||||
|
||||
let sortedItems = allTagsFromSelectedItems.sort((a, b) => a.length - b.length);
|
||||
if (sortedItems.length === 0) {
|
||||
return [];
|
||||
}
|
||||
// let sortedItems = allTagsFromSelectedItems.sort((a, b) => a.length - b.length);
|
||||
// if (sortedItems.length === 0) {
|
||||
// return [];
|
||||
// }
|
||||
|
||||
let commonTags = sortedItems.shift().reduce((acc, cur) => {
|
||||
if (acc.indexOf(cur) === -1 && sortedItems.every((item) => item.indexOf(cur) !== -1)) {
|
||||
acc.push(cur);
|
||||
}
|
||||
// let commonTags = sortedItems.shift().reduce((acc, cur) => {
|
||||
// if (acc.indexOf(cur) === -1 && sortedItems.every((item) => item.indexOf(cur) !== -1)) {
|
||||
// acc.push(cur);
|
||||
// }
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
// return acc;
|
||||
// }, []);
|
||||
|
||||
// return commonTags;
|
||||
// };
|
||||
|
||||
return commonTags;
|
||||
};
|
||||
render() {
|
||||
let numChecked = Object.keys(this.state.checked).length || 0;
|
||||
// const header = (
|
||||
@ -778,18 +779,20 @@ export default class DataView extends React.Component {
|
||||
// </span>
|
||||
// </div>
|
||||
// );
|
||||
const handleEditTags = () => {
|
||||
this.props.onAction({
|
||||
type: "SIDEBAR",
|
||||
value: "SIDEBAR_EDIT_TAGS",
|
||||
data: {
|
||||
numChecked,
|
||||
commonTags: this.getCommonTagFromSelectedItems(),
|
||||
objects: this.props.items,
|
||||
checked: this.state.checked,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// const handleEditTags = () => {
|
||||
// this.props.onAction({
|
||||
// type: "SIDEBAR",
|
||||
// value: "SIDEBAR_EDIT_TAGS",
|
||||
// data: {
|
||||
// numChecked,
|
||||
// commonTags: this.getCommonTagFromSelectedItems(),
|
||||
// objects: this.props.items,
|
||||
// checked: this.state.checked,
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
const footer = (
|
||||
<React.Fragment>
|
||||
{numChecked ? (
|
||||
@ -803,7 +806,7 @@ export default class DataView extends React.Component {
|
||||
deleteFiles={() => this.setState({ modalShow: true })}
|
||||
close={this._handleCloseFooter}
|
||||
//NOTE(amine): Myslate actions
|
||||
editTags={handleEditTags}
|
||||
// editTags={handleEditTags}
|
||||
//NOTE(amine): Collection actions
|
||||
removeFromCollection={this._handleRemoveFromCollection}
|
||||
saveCopy={this._handleSaveCopy}
|
||||
@ -928,11 +931,11 @@ export default class DataView extends React.Component {
|
||||
name: <div style={{ fontSize: "0.9rem", padding: "18px 0" }}>Name</div>,
|
||||
width: "100%",
|
||||
},
|
||||
{
|
||||
key: "tags",
|
||||
name: <div style={{ fontSize: "0.9rem", padding: "18px 0" }}>Tags</div>,
|
||||
width: "360px",
|
||||
},
|
||||
// {
|
||||
// key: "tags",
|
||||
// name: <div style={{ fontSize: "0.9rem", padding: "18px 0" }}>Tags</div>,
|
||||
// width: "360px",
|
||||
// },
|
||||
{
|
||||
key: "size",
|
||||
name: <div style={{ fontSize: "0.9rem", padding: "18px 0" }}>Size</div>,
|
||||
@ -992,7 +995,7 @@ export default class DataView extends React.Component {
|
||||
</FilePreviewBubble>
|
||||
</Selectable>
|
||||
),
|
||||
tags: <>{each.data.tags?.length ? <Tags tags={each.data.tags} /> : null}</>,
|
||||
// tags: <>{each.data.tags?.length ? <Tags tags={each.data.tags} /> : null}</>,
|
||||
size: <div css={STYLES_VALUE}>{Strings.bytesToSize(each.size)}</div>,
|
||||
more: this.props.isOwner ? (
|
||||
<div
|
||||
|
@ -1069,9 +1069,7 @@ export class SearchModal extends React.Component {
|
||||
? "Collections:"
|
||||
: this.state.typeFilter === "USER"
|
||||
? "Users:"
|
||||
: this.state.typeFilter === "FILE"
|
||||
? "Files:"
|
||||
: "Tags:"}
|
||||
: "Files:"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
@ -1087,9 +1085,7 @@ export class SearchModal extends React.Component {
|
||||
? "collections..."
|
||||
: this.state.typeFilter === "USER"
|
||||
? "users..."
|
||||
: this.state.typeFilter === "FILE"
|
||||
? "files..."
|
||||
: "tags..."
|
||||
: "files..."
|
||||
}`}
|
||||
onChange={this._handleChange}
|
||||
ref={(c) => {
|
||||
|
@ -204,7 +204,7 @@ export const getById = async ({ id }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const tags = Utilities.getUserTags({ library: user.library });
|
||||
// const tags = Utilities.getUserTags({ library: user.library });
|
||||
|
||||
let viewer = {
|
||||
id: user.id,
|
||||
@ -226,7 +226,7 @@ export const getById = async ({ id }) => {
|
||||
epubBytes,
|
||||
pdfBytes,
|
||||
},
|
||||
tags,
|
||||
// tags,
|
||||
userBucketCID: bucketRoot?.path || null,
|
||||
keys,
|
||||
slates,
|
||||
|
@ -63,8 +63,8 @@ export const sanitizeFile = (entity) => {
|
||||
linkFavicon: entity.linkFavicon,
|
||||
linkHtml: entity.linkHtml,
|
||||
linkIFrameAllowed: entity.linkIFrameAllowed,
|
||||
tags: entity.tags,
|
||||
data: {
|
||||
tags: entity.data?.tags, //NOTE(martina): newly added
|
||||
unity: entity.data?.unity, //NOTE(martina): newly added
|
||||
},
|
||||
downloadCount: entity.downloadCount,
|
||||
@ -147,7 +147,6 @@ export const cleanFile = (entity) => {
|
||||
linkHtml: entity.linkHtml,
|
||||
linkIFrameAllowed: entity.linkIFrameAllowed,
|
||||
// data: {
|
||||
// tags: entity.data?.tags,
|
||||
// unity: entity.data?.unity,
|
||||
// },
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user