removed collection level tags

This commit is contained in:
Martina 2021-08-24 14:04:10 -07:00
parent 70b95110e7
commit 9110cdc313
11 changed files with 16 additions and 172 deletions

View File

@ -15,7 +15,6 @@ const EXAMPLE_CODE_JS = (key, slateId) => {
name: "My Dog Fido",
isPublic: true,
body: "This is an album of my dog, Fido, a golden retriever",
tags: ["dogs", "retrievers", "golden retriever"]
},
}),
});`;
@ -34,7 +33,6 @@ postJson = {
name: "My Dog Fido",
isPublic: true,
body: "This is an album of my dog, Fido, a golden retriever",
tags: ["dogs", "retrievers", "golden retriever"]
}
}

View File

@ -47,18 +47,6 @@ const STYLES_HEADER = css`
}
`;
const STYLES_ACCESS = css`
box-sizing: border-box;
font-family: ${Constants.font.text};
font-size: ${Constants.typescale.lvl1};
color: ${Constants.system.black};
margin: 12px 0;
line-height: 1.5;
display: block;
width: 100%;
max-width: 800px;
`;
const STYLES_DESCRIPTION = css`
box-sizing: border-box;
font-family: ${Constants.font.text};
@ -77,40 +65,6 @@ const STYLES_DESCRIPTION = css`
}
`;
const STYLES_TAGS_WRAPPER = css`
box-sizing: border-box;
display: block;
width: 100%;
max-width: 800px;
`;
const STYLES_LIST = css`
display: inline-flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 100%;
`;
const STYLES_TAG = css`
list-style-type: none;
border-radius: 4px;
background: ${Constants.semantic.bgLight};
color: ${Constants.system.black};
font-family: ${Constants.font.text};
padding: 2px 8px;
margin: 8px 8px 0 0;
span {
line-height: 1.5;
font-size: 14px;
}
&:hover {
background: ${Constants.system.grayLight4};
}
`;
export const ScenePageHeader = (props) => {
return (
<header css={STYLES_ROOT} style={props.style}>
@ -119,17 +73,6 @@ export const ScenePageHeader = (props) => {
<div css={STYLES_DESCRIPTION}>
<ProcessedText text={props.children} />
</div>
{props.tags && (
<div css={STYLES_TAGS_WRAPPER}>
<ul css={STYLES_LIST}>
{props.tags.map((tag, i) => (
<li key={tag} css={STYLES_TAG}>
<span>{tag}</span>
</li>
))}
</ul>
</div>
)}
</div>
{props.actions ? <div css={STYLES_RIGHT}>{props.actions}</div> : null}
</header>

View File

@ -157,16 +157,6 @@ const STYLES_COPY_INPUT = css`
opacity: 0;
`;
const STYLES_TAG = css`
margin-right: 16px;
padding: 4px 8px;
border-radius: 2px;
border: 1px solid ${Constants.system.black};
color: ${Constants.system.black};
font-family: ${Constants.font.semiBold};
font-size: 0.9rem;
`;
const STYLES_BODY = css`
font-family: ${Constants.font.text};
font-size: ${Constants.typescale.lvl0};

View File

@ -35,20 +35,9 @@ export default class SidebarCreateSlate extends React.Component {
name: "",
isPublic: true,
body: "",
tags: [],
suggestions: this.props.viewer?.tags || [],
loading: false,
};
componentDidMount = () => {
this.updateSuggestions();
};
updateSuggestions = () => {
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
this.setState({ suggestions: Array.from(newSuggestions) });
};
_handleSubmit = async () => {
this.setState({ loading: true });
@ -62,7 +51,6 @@ export default class SidebarCreateSlate extends React.Component {
name: this.state.name,
isPublic: this.state.isPublic,
body: this.state.body,
tags: this.state.tags,
});
console.log(response);
@ -105,11 +93,7 @@ export default class SidebarCreateSlate extends React.Component {
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (e.target.name === "tags") {
this.updateSuggestions();
}
});
this.setState({ [e.target.name]: e.target.value });
};
render() {
@ -129,14 +113,14 @@ export default class SidebarCreateSlate extends React.Component {
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Name</System.P1>
<System.P1
{/* <System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Give your collection a name so you and others can find it on Slate and on the web.
</System.P1>
</System.P1> */}
<System.Input
autoFocus
@ -162,14 +146,14 @@ export default class SidebarCreateSlate extends React.Component {
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Description</System.P1>
<System.P1
{/* <System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Give your collection a description, add links, and connect it to other collections.
</System.P1>
</System.P1> */}
<System.Textarea
style={{ marginTop: 12 }}
@ -181,26 +165,6 @@ export default class SidebarCreateSlate extends React.Component {
/>
</div>
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Tags</System.P1>
<System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Add tags to a collection to categorize it.
</System.P1>
<System.Tag
name="tags"
placeholder={`Edit tags for ${this.state.name ? this.state.name : "this collection"}`}
tags={this.state.tags}
suggestions={this.state.suggestions}
style={{ marginTop: 12 }}
onChange={this._handleChange}
/>
</div>
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>
Privacy

View File

@ -51,20 +51,9 @@ export default class SidebarSingleSlateSettings extends React.Component {
isPublic: this.props.data.isPublic,
body: this.props.data.data.body,
name: this.props.data.data.name,
tags: this.props.data.data?.tags || [],
suggestions: this.props.viewer?.tags || [],
modalShow: false,
};
componentDidMount = () => {
this.updateSuggestions();
};
updateSuggestions = () => {
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
this.setState({ suggestions: Array.from(newSuggestions) });
};
_handleSubmit = async () => {
let slates = this.props.viewer.slates;
for (let slate of slates) {
@ -72,12 +61,10 @@ export default class SidebarSingleSlateSettings extends React.Component {
slate.data.name = this.state.name;
slate.isPublic = this.state.isPublic;
slate.data.body = this.state.body;
slate.data.tags = this.state.tags;
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
this.props.onAction({
type: "UPDATE_VIEWER",
viewer: { slates, tags: Array.from(newSuggestions) },
viewer: { slates },
});
break;
@ -91,7 +78,6 @@ export default class SidebarSingleSlateSettings extends React.Component {
data: {
name: this.state.name,
body: this.state.body,
tags: this.state.tags,
},
});
@ -105,11 +91,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (e.target.name === "tags") {
this.updateSuggestions();
}
});
this.setState({ [e.target.name]: e.target.value });
};
_handleDelete = async (res) => {
@ -172,14 +154,14 @@ export default class SidebarSingleSlateSettings extends React.Component {
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Name</System.P1>
<System.P1
{/* <System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Give your collection a name so you and others can find it on Slate and on the web.
</System.P1>
</System.P1> */}
<System.Input
placeholder="Collection name..."
@ -204,14 +186,14 @@ export default class SidebarSingleSlateSettings extends React.Component {
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Description</System.P1>
<System.P1
{/* <System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Give your collection a description, add links, and connect it to other collections.
</System.P1>
</System.P1> */}
<System.Textarea
style={{ marginTop: 12 }}
@ -223,26 +205,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
/>
</div>
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Tags</System.P1>
<System.P1
css={STYLES_TEXT}
style={{
marginTop: 12,
}}
>
Add tags to a collection to categorize it.
</System.P1>
<System.Tag
name="tags"
tags={this.state.tags}
suggestions={this.state.suggestions}
style={{ marginTop: 12 }}
onChange={this._handleChange}
/>
</div>
<div css={STYLES_GROUPING}>
{/* <div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER}>Cover image</System.P1>
<System.P1
@ -256,9 +219,9 @@ export default class SidebarSingleSlateSettings extends React.Component {
</System.P1>
<div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
<img src={preview} alt="" style={{ maxWidth: "368px", maxHeight: "368px" }} />
<img src={preview} alt="" style={{ maxWidth: "240px", maxHeight: "240px" }} />
</div>
</div>
</div> */}
<div css={STYLES_GROUPING}>
<System.P1 css={STYLES_HEADER} style={{ marginBottom: 12 }}>

View File

@ -201,7 +201,7 @@ export const getById = async ({ id }) => {
}
}
const tags = Utilities.getUserTags({ library: user.library, slates });
const tags = Utilities.getUserTags({ library: user.library });
let viewer = {
id: user.id,

View File

@ -34,7 +34,6 @@ export const sanitizeSlate = (entity) => {
name: entity.data?.name,
body: entity.data?.body,
preview: entity.data?.preview,
tags: entity.data?.tags,
},
fileCount: entity.fileCount,
subscriberCount: entity.subscriberCount,
@ -109,7 +108,6 @@ export const cleanSlate = (entity) => {
// name: entity.data?.name,
// body: entity.data?.body,
// preview: entity.data?.preview,
// tags: entity.data?.tags,
// },
};
};

View File

@ -233,7 +233,7 @@ export const generateRandomNumberInRange = (min, max) =>
Math.floor(Math.random() * (max - min)) + min;
// NOTE(daniel): get all tags on slates and files
export const getUserTags = ({ library, slates }) => {
export const getUserTags = ({ library }) => {
let tags = new Set();
const isNotEmptyArray = (arr) => Array.isArray(arr) && arr?.length > 0;
@ -246,14 +246,6 @@ export const getUserTags = ({ library, slates }) => {
}
});
slates.forEach((slate) => {
if (isNotEmptyArray(slate.data.tags)) {
for (let tag of slate.data.tags) {
tags.add(tag);
}
}
});
return Array.from(tags);
};

View File

@ -31,7 +31,6 @@ export default async (req, res) => {
data: {
name: req.body.data.name,
body: req.body.data.body,
tags: req.body.data.tags,
},
});

View File

@ -36,7 +36,6 @@ export default async (req, res) => {
data: {
name: req.body.data.name,
body: req.body.data.body,
tags: req.body.data.tags,
},
});

View File

@ -407,7 +407,6 @@ class SlatePage extends React.Component {
let objects = this.props.data.objects;
const isPublic = this.props.data.isPublic;
const isOwner = this.props.viewer ? this.props.data.ownerId === this.props.viewer.id : false;
const tags = data.tags;
let actions = isOwner ? (
<span>
@ -471,7 +470,6 @@ class SlatePage extends React.Component {
)
}
actions={<span css={STYLES_MOBILE_HIDDEN}>{actions}</span>}
tags={tags}
>
{body}
</ScenePageHeader>