Skip to content

Commit 82d0c27

Browse files
vmonakhovvmonakhov
authored
Rows are disabled after Remove or Connect clicking -- rartly resolves #1014 (#1018)
* cache.evict * Moved update(cache) * Fix * useState * getEntity * getEntity * Fix * withApollo * async * reRender * reFetching * queryLexicalEntries * Fix * reRender * console.log * Minor * refetch * Cleanup * Cleanup * TableComponent * TableComponent2 * Fix * Next step * Next step * Cleanup * is_connectable * Refetched 'queryPerspective' * reRenderWrapper * Fix * Cleanup
1 parent 9cec3e3 commit 82d0c27

File tree

9 files changed

+188
-78
lines changed

9 files changed

+188
-78
lines changed

‎src/components/GroupingTagModal/search.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,14 @@ class SearchLexicalEntries extends React.Component {
6969

7070
render() {
7171
const { joinGroup } = this.props;
72-
const actions = [{ title: this.context("Connect"), className: "lingvo-button-greenest", action: entry => joinGroup(entry) }];
72+
73+
const actions = [
74+
{
75+
title: this.context("Connect"),
76+
className: "lingvo-button-greenest",
77+
action: entry => joinGroup(entry)
78+
}
79+
];
7380
return (
7481
<div>
7582
<Segment className="lingvo-segment-grouptag-search">

‎src/components/LexicalEntry/Link.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import LinkModal from "components/LinkModal";
1111
import { openModal } from "ducks/modals";
1212

1313
const DirectedLink = props => {
14-
const { entry, column, mode, entitiesMode, as: Component = "div", openModal, disabled } = props;
14+
const { reRender, entry, column, mode, entitiesMode, as: Component = "div", openModal, disabled } = props;
1515

1616
const count = entry.entities.filter(e => isEqual(e.field_id, column.id)).length;
1717
const content = `${T(column.translations)} (${count})`;
@@ -32,7 +32,8 @@ const DirectedLink = props => {
3232
lexicalEntry: entry,
3333
fieldId: column.id,
3434
mode,
35-
entitiesMode
35+
entitiesMode,
36+
reRender
3637
})
3738
}
3839
/>
@@ -46,7 +47,8 @@ DirectedLink.propTypes = {
4647
mode: PropTypes.string.isRequired,
4748
entitiesMode: PropTypes.string.isRequired,
4849
as: PropTypes.string,
49-
openModal: PropTypes.func.isRequired
50+
openModal: PropTypes.func.isRequired,
51+
reRender: PropTypes.func
5052
};
5153

5254
DirectedLink.defaultProps = {

‎src/components/LexicalEntry/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,8 @@ Entities.propTypes = {
480480
updateEntity: PropTypes.func.isRequired,
481481
resetCheckedRow: PropTypes.func,
482482
resetCheckedColumn: PropTypes.func,
483-
resetCheckedAll: PropTypes.func
483+
resetCheckedAll: PropTypes.func,
484+
reRender: PropTypes.func
484485
};
485486

486487
Entities.defaultProps = {

‎src/components/LinkModal/graphql.js

+8
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,11 @@ export const languageTreeSourceQuery = gql`
7575
}
7676
}
7777
`;
78+
79+
export const entityQuery = gql`
80+
query getEntity($id: LingvodocID!) {
81+
entity(id: $id) {
82+
marked_for_deletion
83+
}
84+
}
85+
`;

‎src/components/LinkModal/index.js

+49-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext } from "react";
2+
import { InMemoryCache } from '@apollo/client';
23
import { Button, Checkbox, Dimmer, Header, Icon, Message, Modal, Segment, Tab } from "semantic-ui-react";
3-
import { graphql } from "@apollo/client/react/hoc";
4+
import { graphql, withApollo } from "@apollo/client/react/hoc";
45
import { isEqual } from "lodash";
56
import PropTypes from "prop-types";
67
import { compose } from "recompose";
@@ -12,7 +13,7 @@ import Tree from "components/GroupingTagModal/Tree";
1213
import { LexicalEntryByIds, queryLexicalEntries, queryPerspective } from "components/PerspectiveView";
1314
import TranslationContext from "Layout/TranslationContext";
1415

15-
import { acceptMutation, createMutation, languageTreeSourceQuery, publishMutation, removeMutation } from "./graphql";
16+
import { acceptMutation, createMutation, languageTreeSourceQuery, publishMutation, removeMutation, entityQuery } from "./graphql";
1617

1718
const ModalContentWrapper = styled("div")`
1819
min-height: 60vh;
@@ -67,23 +68,46 @@ ViewLink.propTypes = {
6768
};
6869

6970
const EditLink = props => {
70-
const { lexicalEntry, column, allLanguages, allDictionaries, allPerspectives, create, remove } = props;
71+
const { client, lexicalEntry, column, allLanguages, allDictionaries, allPerspectives, create, remove } = props;
7172

7273
const getTranslation = useContext(TranslationContext);
7374

7475
const tree = buildTree(lexicalEntry, column, allLanguages, allDictionaries, allPerspectives);
7576

77+
const get_link = async entry => {
78+
const entity = lexicalEntry.entities.find(
79+
e => isEqual(e.link_id, entry.id) && isEqual(e.field_id, column.field_id)
80+
);
81+
82+
if (!entity) return null;
83+
84+
//Checking in db
85+
const result = await client.query({
86+
query: entityQuery,
87+
variables: { id: entity.id },
88+
fetchPolicy: 'network-only'
89+
});
90+
91+
if (!result.errors &&
92+
result.data.entity &&
93+
result.data.entity.marked_for_deletion === false) {
94+
return entity;
95+
}
96+
return null;
97+
}
98+
7699
const actions = [
77100
{
78101
title: getTranslation("Remove"),
79102
action: entry => {
80-
const entity = lexicalEntry.entities.find(
81-
e => isEqual(e.link_id, entry.id) && isEqual(e.field_id, column.field_id)
82-
);
83-
if (entity) {
84-
remove(entity);
85-
}
103+
get_link(entry).then(entity => {
104+
if (entity) {
105+
remove(entity);
106+
console.log("Query result: ", lexicalEntry.entities);
107+
}
108+
});
86109
},
110+
enabled: entry => get_link(entry),
87111
className: "lingvo-button-redder"
88112
}
89113
];
@@ -323,9 +347,14 @@ class LinkModalContent extends React.PureComponent {
323347
}
324348

325349
removeEntity(entity) {
326-
const { remove, lexicalEntry, entitiesMode } = this.props;
350+
const { reRender, remove, lexicalEntry, entitiesMode } = this.props;
351+
327352
remove({
328353
variables: { id: entity.id },
354+
update(cache) {
355+
cache.evict({ id: cache.identify(entity) });
356+
cache.gc();
357+
},
329358
refetchQueries: [
330359
{
331360
// XXX: Expensive operation!
@@ -337,6 +366,9 @@ class LinkModalContent extends React.PureComponent {
337366
}
338367
]
339368
});
369+
370+
// Refetching queryPerspective directly in PerspectiveView component
371+
// reRender();
340372
}
341373

342374
render() {
@@ -392,6 +424,7 @@ class LinkModalContent extends React.PureComponent {
392424
remove={this.removeEntity}
393425
publish={this.changePublished}
394426
accept={this.changeAccepted}
427+
client={this.props.client}
395428
/>
396429
</ModalContentWrapper>
397430
);
@@ -414,15 +447,17 @@ LinkModalContent.propTypes = {
414447
create: PropTypes.func.isRequired,
415448
publish: PropTypes.func.isRequired,
416449
accept: PropTypes.func.isRequired,
417-
remove: PropTypes.func.isRequired
450+
remove: PropTypes.func.isRequired,
451+
reRender: PropTypes.func
418452
};
419453

420454
const Content = compose(
421455
graphql(languageTreeSourceQuery),
422456
graphql(createMutation, { name: "create" }),
423457
graphql(publishMutation, { name: "publish" }),
424458
graphql(acceptMutation, { name: "accept" }),
425-
graphql(removeMutation, { name: "remove" })
459+
graphql(removeMutation, { name: "remove" }),
460+
withApollo
426461
)(LinkModalContent);
427462

428463
const LinkModal = props => {
@@ -453,7 +488,8 @@ LinkModal.propTypes = {
453488
fieldId: PropTypes.array,
454489
mode: PropTypes.string.isRequired,
455490
entitiesMode: PropTypes.string.isRequired,
456-
onClose: PropTypes.func.isRequired
491+
onClose: PropTypes.func.isRequired,
492+
reRender: PropTypes.func
457493
};
458494

459495
LinkModal.defaultProps = {

‎src/components/PerspectiveView/Cell.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ const Cell = ({
2323
resetCheckedAll,
2424
mode,
2525
entitiesMode,
26-
disabled
26+
disabled,
27+
reRender
2728
// eslint-disable-next-line arrow-body-style
2829
}) => {
2930
return (
@@ -44,6 +45,7 @@ const Cell = ({
4445
mode={mode}
4546
entitiesMode={entitiesMode}
4647
disabled={disabled}
48+
reRender={reRender}
4749
/>
4850
</Table.Cell>
4951
);
@@ -63,7 +65,8 @@ Cell.propTypes = {
6365
disabled: PropTypes.bool,
6466
resetCheckedRow: PropTypes.func,
6567
resetCheckedColumn: PropTypes.func,
66-
resetCheckedAll: PropTypes.func
68+
resetCheckedAll: PropTypes.func,
69+
reRender: PropTypes.func
6770
};
6871

6972
Cell.defaultProps = {

‎src/components/PerspectiveView/Row.js

+32-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { Button, Checkbox, Table } from "semantic-ui-react";
33
import { isEmpty, isEqual, sortBy } from "lodash";
44
import PropTypes from "prop-types";
@@ -28,6 +28,7 @@ const Row = ({
2828
resetCheckedRow,
2929
resetCheckedColumn,
3030
resetCheckedAll,
31+
reRender,
3132
/* eslint-disable react/prop-types */
3233
showEntryId,
3334
selectDisabled,
@@ -38,7 +39,9 @@ const Row = ({
3839
}) => {
3940
const entry_id_str = id2str(entry.id);
4041

41-
const disabled_flag = disabledEntrySet && disabledEntrySet.hasOwnProperty(entry_id_str);
42+
const [ disabled, setDisabled ] = useState(false);
43+
44+
const disabled_flag = disabledEntrySet && disabledEntrySet.hasOwnProperty(entry_id_str) || disabled;
4245

4346
const remove_selection_flag = removeSelectionEntrySet && removeSelectionEntrySet.hasOwnProperty(entry_id_str);
4447

@@ -93,20 +96,34 @@ const Row = ({
9396
mode={mode}
9497
entitiesMode={entitiesMode}
9598
disabled={disabled_flag}
99+
reRender={reRender}
96100
/>
97101
))}
98102

99103
{!isEmpty(actions) && (
100104
<Table.Cell>
101-
{actions.map(action => (
102-
<Button
103-
disabled={disabled_flag}
104-
key={action.title}
105-
content={action.title}
106-
onClick={() => action.action(entry)}
107-
className={action.className}
108-
/>
109-
))}
105+
{actions.map(action => {
106+
let reRenderWrapper;
107+
if (action.enabled) {
108+
action.enabled(entry).then(value => setDisabled(!value));
109+
reRenderWrapper = reRender;
110+
} else {
111+
reRenderWrapper = () => setDisabled(true);
112+
}
113+
114+
return(
115+
<Button
116+
disabled={disabled_flag}
117+
key={action.title}
118+
content={action.title}
119+
onClick={() => {
120+
action.action(entry);
121+
reRenderWrapper();
122+
}}
123+
className={action.className}
124+
/>
125+
);
126+
})}
110127
</Table.Cell>
111128
)}
112129
</Table.Row>
@@ -131,7 +148,8 @@ Row.propTypes = {
131148
onCheckRow: PropTypes.func,
132149
resetCheckedRow: PropTypes.func,
133150
resetCheckedColumn: PropTypes.func,
134-
resetCheckedAll: PropTypes.func
151+
resetCheckedAll: PropTypes.func,
152+
reRender: PropTypes.func
135153
};
136154

137155
Row.defaultProps = {
@@ -147,7 +165,8 @@ Row.defaultProps = {
147165
onCheckRow: () => {},
148166
resetCheckedRow: () => {},
149167
resetCheckedColumn: () => {},
150-
resetCheckedAll: () => {}
168+
resetCheckedAll: () => {},
169+
reRender: () => console.debug('Fake refetch')
151170
};
152171

153172
export default onlyUpdateForKeys([

‎src/components/PerspectiveView/TableBody.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ TableBody.propTypes = {
3131
onCheckRow: PropTypes.func,
3232
resetCheckedRow: PropTypes.func,
3333
resetCheckedColumn: PropTypes.func,
34-
resetCheckedAll: PropTypes.func
34+
resetCheckedAll: PropTypes.func,
35+
reRender: PropTypes.func
3536
};
3637

3738
TableBody.defaultProps = {
@@ -47,7 +48,8 @@ TableBody.defaultProps = {
4748
onCheckRow: () => {},
4849
resetCheckedRow: () => {},
4950
resetCheckedColumn: () => {},
50-
resetCheckedAll: () => {}
51+
resetCheckedAll: () => {},
52+
reRender: () => console.log('Fake refetch')
5153
};
5254

5355
export default onlyUpdateForKeys([

0 commit comments

Comments
 (0)