diff --git a/src/components/PerspectiveView/index.js b/src/components/PerspectiveView/index.js index 9c66217c..6dbfb55c 100644 --- a/src/components/PerspectiveView/index.js +++ b/src/components/PerspectiveView/index.js @@ -3,7 +3,7 @@ import { connect } from "react-redux"; import { Button, Dimmer, Header, Icon, Table } from "semantic-ui-react"; import { gql } from "@apollo/client"; import { graphql, withApollo } from "@apollo/client/react/hoc"; -import { drop, flow, isEqual, reverse, take } from "lodash"; +import { drop, flow, isEqual, reverse, take, cloneDeep } from "lodash"; import PropTypes from "prop-types"; import { branch, compose, renderComponent } from "recompose"; import { bindActionCreators } from "redux"; @@ -98,7 +98,6 @@ export const queryLexicalEntries = gql` id parent_id created_at - marked_for_deletion entities(mode: $entitiesMode) { id parent_id @@ -246,7 +245,7 @@ TableComponent.defaultProps = { actions: [], selectEntries: false, selectedEntries: [], - onEntrySelect: () => {}, + onEntrySelect: () => { }, reRender: () => console.log("Fake refetch") }; @@ -280,10 +279,10 @@ class P extends React.Component { } } - //reRender() { - // this.props.data.refetch(); - // console.log("Refetched 'queryLexicalEntries'"); - //} + reRender() { + //this.props.data.refetch(); + console.log("Refetched 'queryLexicalEntries'"); + } resetCheckedRow() { this.setState({ @@ -400,60 +399,88 @@ class P extends React.Component { const { entriesTotal } = this.state; const addEntry = () => { + createLexicalEntry({ - variables: { - id, - entitiesMode - }, - refetchQueries: [ - { - query: queryLexicalEntries, - variables: query_args + variables: {id, entitiesMode}, + + update: (cache, { data: d }) => { + if (!d.loading && !d.error) { + const { + create_lexicalentry: { lexicalentry } + } = d; + + cache.updateQuery( + { + query: queryLexicalEntries, + variables: query_args + }, + + (data) => { + if (!loading && !error) { + const result = cloneDeep(data); + result.perspective.perspective_page.lexical_entries.unshift(lexicalentry); + return result; + } + return undefined; + } + ); + addCreatedEntry(lexicalentry); + this.setState({ entriesTotal: entriesTotal + 1 }); } - ] - }).then(({ data: d }) => { - if (!d.loading || !d.error) { - const { - create_lexicalentry: { lexicalentry } - } = d; - addCreatedEntry(lexicalentry); - this.setState({entriesTotal: entriesTotal + 1}); } }); }; const mergeEntries = () => { const groupList = [selectedEntries]; + mergeLexicalEntries({ - variables: { - groupList - }, + variables: { groupList }, + refetchQueries: [ { query: queryLexicalEntries, variables: query_args } ] + }).then(() => { resetSelection(); - this.setState({entriesTotal: entriesTotal - selectedEntries.length + 1}); + this.setState({ entriesTotal: entriesTotal - selectedEntries.length + 1 }); }); }; const removeEntries = () => { + removeLexicalEntries({ - variables: { - ids: selectedEntries - }, - refetchQueries: [ - { - query: queryLexicalEntries, - variables: query_args + variables: { ids: selectedEntries }, + + update: (cache, { data: d }) => { + if (!d.loading && !d.error) { + + cache.updateQuery( + { + query: queryLexicalEntries, + variables: query_args + }, + (data) => { + if (!loading && !error) { + const result = cloneDeep(data); + const current_entries = result.perspective.perspective_page.lexical_entries; + const selectedEntriesStr = selectedEntries.map(id => id.toString()); + + result.perspective.perspective_page.lexical_entries = ( + current_entries.filter(({id}) => !selectedEntriesStr.includes(id.toString()))); + + return result; + } + return undefined; + } + ); + resetSelection(); + this.setState({ entriesTotal: entriesTotal - 1 }); } - ] - }).then(() => { - resetSelection(); - this.setState({entriesTotal: entriesTotal - 1}); + } }); }; @@ -592,53 +619,53 @@ class P extends React.Component { {(mode === "edit" || (mode === "publish" && isAuthenticated) || (mode === "contributions" && isAuthenticated)) && ( -