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
ispras · Aug 24, 2023 · 82d0c27 · 82d0c27
1 parent 9cec3e3
commit 82d0c27
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 78 deletions.
diff --git a/src/components/GroupingTagModal/search.js b/src/components/GroupingTagModal/search.js
@@ -69,7 +69,14 @@ class SearchLexicalEntries extends React.Component {
 
   render() {
     const { joinGroup } = this.props;
-    const actions = [{ title: this.context("Connect"), className: "lingvo-button-greenest", action: entry => joinGroup(entry) }];
+
+    const actions = [
+      {
+        title: this.context("Connect"),
+        className: "lingvo-button-greenest",
+        action: entry => joinGroup(entry)
+      }
+    ];
     return (
       <div>
         <Segment className="lingvo-segment-grouptag-search">

diff --git a/src/components/LexicalEntry/Link.js b/src/components/LexicalEntry/Link.js
@@ -11,7 +11,7 @@ import LinkModal from "components/LinkModal";
 import { openModal } from "ducks/modals";
 
 const DirectedLink = props => {
-  const { entry, column, mode, entitiesMode, as: Component = "div", openModal, disabled } = props;
+  const { reRender, entry, column, mode, entitiesMode, as: Component = "div", openModal, disabled } = props;
 
   const count = entry.entities.filter(e => isEqual(e.field_id, column.id)).length;
   const content = `${T(column.translations)} (${count})`;
@@ -32,7 +32,8 @@ const DirectedLink = props => {
             lexicalEntry: entry,
             fieldId: column.id,
             mode,
-            entitiesMode
+            entitiesMode,
+            reRender
           })
         }
       />
@@ -46,7 +47,8 @@ DirectedLink.propTypes = {
   mode: PropTypes.string.isRequired,
   entitiesMode: PropTypes.string.isRequired,
   as: PropTypes.string,
-  openModal: PropTypes.func.isRequired
+  openModal: PropTypes.func.isRequired,
+  reRender: PropTypes.func
 };
 
 DirectedLink.defaultProps = {

diff --git a/src/components/LexicalEntry/index.js b/src/components/LexicalEntry/index.js
@@ -480,7 +480,8 @@ Entities.propTypes = {
   updateEntity: PropTypes.func.isRequired,
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
-  resetCheckedAll: PropTypes.func
+  resetCheckedAll: PropTypes.func,
+  reRender: PropTypes.func
 };
 
 Entities.defaultProps = {

diff --git a/src/components/LinkModal/graphql.js b/src/components/LinkModal/graphql.js
@@ -75,3 +75,11 @@ export const languageTreeSourceQuery = gql`
     }
   }
 `;
+
+export const entityQuery = gql`
+  query getEntity($id: LingvodocID!) {
+    entity(id: $id) {
+      marked_for_deletion
+    }
+  }
+`;
diff --git a/src/components/LinkModal/index.js b/src/components/LinkModal/index.js
@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
+import { InMemoryCache } from '@apollo/client';
 import { Button, Checkbox, Dimmer, Header, Icon, Message, Modal, Segment, Tab } from "semantic-ui-react";
-import { graphql } from "@apollo/client/react/hoc";
+import { graphql, withApollo } from "@apollo/client/react/hoc";
 import { isEqual } from "lodash";
 import PropTypes from "prop-types";
 import { compose } from "recompose";
@@ -12,7 +13,7 @@ import Tree from "components/GroupingTagModal/Tree";
 import { LexicalEntryByIds, queryLexicalEntries, queryPerspective } from "components/PerspectiveView";
 import TranslationContext from "Layout/TranslationContext";
 
-import { acceptMutation, createMutation, languageTreeSourceQuery, publishMutation, removeMutation } from "./graphql";
+import { acceptMutation, createMutation, languageTreeSourceQuery, publishMutation, removeMutation, entityQuery } from "./graphql";
 
 const ModalContentWrapper = styled("div")`
   min-height: 60vh;
@@ -67,23 +68,46 @@ ViewLink.propTypes = {
 };
 
 const EditLink = props => {
-  const { lexicalEntry, column, allLanguages, allDictionaries, allPerspectives, create, remove } = props;
+  const { client, lexicalEntry, column, allLanguages, allDictionaries, allPerspectives, create, remove } = props;
 
   const getTranslation = useContext(TranslationContext);
 
   const tree = buildTree(lexicalEntry, column, allLanguages, allDictionaries, allPerspectives);
 
+  const get_link = async entry => {
+    const entity = lexicalEntry.entities.find(
+      e => isEqual(e.link_id, entry.id) && isEqual(e.field_id, column.field_id)
+    );
+
+    if (!entity) return null;
+
+    //Checking in db
+    const result = await client.query({
+      query: entityQuery,
+      variables: { id: entity.id },
+      fetchPolicy: 'network-only'
+    });
+
+    if (!result.errors &&
+        result.data.entity &&
+        result.data.entity.marked_for_deletion === false) {
+      return entity;
+    }
+    return null;
+  }
+
   const actions = [
     {
       title: getTranslation("Remove"),
       action: entry => {
-        const entity = lexicalEntry.entities.find(
-          e => isEqual(e.link_id, entry.id) && isEqual(e.field_id, column.field_id)
-        );
-        if (entity) {
-          remove(entity);
-        }
+        get_link(entry).then(entity => {
+          if (entity) {
+            remove(entity);
+            console.log("Query result: ", lexicalEntry.entities);
+          }
+        });
       },
+      enabled: entry => get_link(entry),
       className: "lingvo-button-redder"
     }
   ];
@@ -323,9 +347,14 @@ class LinkModalContent extends React.PureComponent {
   }
 
   removeEntity(entity) {
-    const { remove, lexicalEntry, entitiesMode } = this.props;
+    const { reRender, remove, lexicalEntry, entitiesMode } = this.props;
+
     remove({
       variables: { id: entity.id },
+      update(cache) {
+        cache.evict({ id: cache.identify(entity) });
+        cache.gc();
+      },
       refetchQueries: [
         {
           // XXX: Expensive operation!
@@ -337,6 +366,9 @@ class LinkModalContent extends React.PureComponent {
         }
       ]
     });
+
+    // Refetching queryPerspective directly in PerspectiveView component
+    // reRender();
   }
 
   render() {
@@ -392,6 +424,7 @@ class LinkModalContent extends React.PureComponent {
           remove={this.removeEntity}
           publish={this.changePublished}
           accept={this.changeAccepted}
+          client={this.props.client}
         />
       </ModalContentWrapper>
     );
@@ -414,15 +447,17 @@ LinkModalContent.propTypes = {
   create: PropTypes.func.isRequired,
   publish: PropTypes.func.isRequired,
   accept: PropTypes.func.isRequired,
-  remove: PropTypes.func.isRequired
+  remove: PropTypes.func.isRequired,
+  reRender: PropTypes.func
 };
 
 const Content = compose(
   graphql(languageTreeSourceQuery),
   graphql(createMutation, { name: "create" }),
   graphql(publishMutation, { name: "publish" }),
   graphql(acceptMutation, { name: "accept" }),
-  graphql(removeMutation, { name: "remove" })
+  graphql(removeMutation, { name: "remove" }),
+  withApollo
 )(LinkModalContent);
 
 const LinkModal = props => {
@@ -453,7 +488,8 @@ LinkModal.propTypes = {
   fieldId: PropTypes.array,
   mode: PropTypes.string.isRequired,
   entitiesMode: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  reRender: PropTypes.func
 };
 
 LinkModal.defaultProps = {

diff --git a/src/components/PerspectiveView/Cell.js b/src/components/PerspectiveView/Cell.js
@@ -23,7 +23,8 @@ const Cell = ({
   resetCheckedAll,
   mode,
   entitiesMode,
-  disabled
+  disabled,
+  reRender
   // eslint-disable-next-line arrow-body-style
 }) => {
   return (
@@ -44,6 +45,7 @@ const Cell = ({
         mode={mode}
         entitiesMode={entitiesMode}
         disabled={disabled}
+        reRender={reRender}
       />
     </Table.Cell>
   );
@@ -63,7 +65,8 @@ Cell.propTypes = {
   disabled: PropTypes.bool,
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
-  resetCheckedAll: PropTypes.func
+  resetCheckedAll: PropTypes.func,
+  reRender: PropTypes.func
 };
 
 Cell.defaultProps = {

diff --git a/src/components/PerspectiveView/Row.js b/src/components/PerspectiveView/Row.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button, Checkbox, Table } from "semantic-ui-react";
 import { isEmpty, isEqual, sortBy } from "lodash";
 import PropTypes from "prop-types";
@@ -28,6 +28,7 @@ const Row = ({
   resetCheckedRow,
   resetCheckedColumn,
   resetCheckedAll,
+  reRender,
   /* eslint-disable react/prop-types */
   showEntryId,
   selectDisabled,
@@ -38,7 +39,9 @@ const Row = ({
 }) => {
   const entry_id_str = id2str(entry.id);
 
-  const disabled_flag = disabledEntrySet && disabledEntrySet.hasOwnProperty(entry_id_str);
+  const [ disabled, setDisabled ] = useState(false);
+
+  const disabled_flag = disabledEntrySet && disabledEntrySet.hasOwnProperty(entry_id_str) || disabled;
 
   const remove_selection_flag = removeSelectionEntrySet && removeSelectionEntrySet.hasOwnProperty(entry_id_str);
 
@@ -93,20 +96,34 @@ const Row = ({
           mode={mode}
           entitiesMode={entitiesMode}
           disabled={disabled_flag}
+          reRender={reRender}
         />
       ))}
 
       {!isEmpty(actions) && (
         <Table.Cell>
-          {actions.map(action => (
-            <Button
-              disabled={disabled_flag}
-              key={action.title} 
-              content={action.title}
-              onClick={() => action.action(entry)}
-              className={action.className}
-            />
-          ))}
+          {actions.map(action => {
+            let reRenderWrapper;
+            if (action.enabled) {
+              action.enabled(entry).then(value => setDisabled(!value));
+              reRenderWrapper = reRender;
+            } else {
+              reRenderWrapper = () => setDisabled(true);
+            }
+
+            return(
+              <Button
+                disabled={disabled_flag}
+                key={action.title}
+                content={action.title}
+                onClick={() => {
+                  action.action(entry);
+                  reRenderWrapper();
+                }}
+                className={action.className}
+              />
+            );
+          })}
         </Table.Cell>
       )}
     </Table.Row>
@@ -131,7 +148,8 @@ Row.propTypes = {
   onCheckRow: PropTypes.func,
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
-  resetCheckedAll: PropTypes.func
+  resetCheckedAll: PropTypes.func,
+  reRender: PropTypes.func
 };
 
 Row.defaultProps = {
@@ -147,7 +165,8 @@ Row.defaultProps = {
   onCheckRow: () => {},
   resetCheckedRow: () => {},
   resetCheckedColumn: () => {},
-  resetCheckedAll: () => {}
+  resetCheckedAll: () => {},
+  reRender: () => console.debug('Fake refetch')
 };
 
 export default onlyUpdateForKeys([

diff --git a/src/components/PerspectiveView/TableBody.js b/src/components/PerspectiveView/TableBody.js
@@ -31,7 +31,8 @@ TableBody.propTypes = {
   onCheckRow: PropTypes.func,
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
-  resetCheckedAll: PropTypes.func
+  resetCheckedAll: PropTypes.func,
+  reRender: PropTypes.func
 };
 
 TableBody.defaultProps = {
@@ -47,7 +48,8 @@ TableBody.defaultProps = {
   onCheckRow: () => {},
   resetCheckedRow: () => {},
   resetCheckedColumn: () => {},
-  resetCheckedAll: () => {}
+  resetCheckedAll: () => {},
+  reRender: () => console.log('Fake refetch')
 };
 
 export default onlyUpdateForKeys([