/
Tags.js
121 lines (111 loc) · 4.31 KB
/
Tags.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// @flow
/* eslint-disable */
import React, { useState } from "react";
import { Chips, Chip, ChipText } from "@webiny/ui/Chips";
import { ButtonSecondary, ButtonPrimary } from "@webiny/ui/Button";
import { Tags as TagsComponent } from "@webiny/ui/Tags";
import { Form } from "@webiny/form";
import { ReactComponent as EditIcon } from "./../icons/round-edit-24px.svg";
import { css } from "emotion";
import { updateFileBySrc, listFiles, listTags } from "./../graphql";
import { compose } from "recompose";
import { withSnackbar } from "@webiny/app-admin/components";
import { graphql } from "react-apollo";
import { get, cloneDeep } from "lodash";
import { useFileManager } from "./../FileManagerContext";
const style = {
editTag: css({
cursor: "pointer",
display: "inline-block"
})
};
function Tags({ gqlUpdateFileBySrc, showSnackbar, file }) {
const [editing, setEdit] = useState(false);
const initialTags = Array.isArray(file.tags) ? [...file.tags] : [];
const { queryParams } = useFileManager();
if (editing) {
return (
<Form
data={{ tags: [...initialTags] }}
onSubmit={async ({ tags }) => {
setEdit(false);
await gqlUpdateFileBySrc({
variables: {
src: file.src,
data: { tags }
},
refetchQueries: [{ query: listTags }],
update: (cache, updated) => {
const newFileData = get(updated, "data.files.updateFileBySrc.data");
// 1. Update files list cache
let data = cloneDeep(
cache.readQuery({
query: listFiles,
variables: queryParams
})
);
data.files.listFiles.data.forEach(item => {
if (item.src === newFileData.src) {
item.tags = newFileData.tags;
}
});
cache.writeQuery({
query: listFiles,
variables: queryParams,
data
});
}
});
showSnackbar("Tags successfully updated.");
}}
>
{({ Bind, submit }) => (
<>
<Bind name={"tags"}>
{({ value, onChange }) => (
<TagsComponent
value={value}
onChange={tags => onChange(tags.map(tag => tag.toLowerCase()))}
autoFocus
placeholder={"Enter a tag and press enter"}
/>
)}
</Bind>
<div style={{ marginTop: "10px" }}>
<ButtonPrimary small onClick={submit}>
Submit
</ButtonPrimary>{" "}
<ButtonSecondary small onClick={() => setEdit(false)}>
Cancel
</ButtonSecondary>
</div>
</>
)}
</Form>
);
}
return (
<>
{initialTags.length > 0 ? (
<Chips>
{initialTags.map((tag, index) => (
<Chip key={tag + index}>
<ChipText>{tag}</ChipText>
</Chip>
))}
</Chips>
) : (
<div>No tags assigned.</div>
)}
<div className={style.editTag}>
<a onClick={() => setEdit(true)}>
<EditIcon /> Edit
</a>
</div>
</>
);
}
export default compose(
graphql(updateFileBySrc, { name: "gqlUpdateFileBySrc" }),
withSnackbar()
)(Tags);