fix: update tag suggestions on tag state update

components/core/CarouselSidebarData.js

@@ -18,6 +18,8 @@ import { Boundary } from "~/components/system/components/fragments/Boundary";
 import { Toggle } from "~/components/system/components/Toggle";
 import { Tag } from "~/components/system/components/Tag";
 
+import isEqual from "lodash/isEqual";
+
 const DEFAULT_BOOK =
   "https://slate.textile.io/ipfs/bafkreibk32sw7arspy5kw3p5gkuidfcwjbwqyjdktd5wkqqxahvkm2qlyi";
 const DEFAULT_DATA =
@@ -287,6 +289,17 @@ class CarouselSidebarData extends React.Component {
     }
   };
 
+  componentDidUpdate = (prevProps, prevState) => {
+    if (!isEqual(prevState.tags, this.state.tags)) {
+      this.updateSuggestions();
+    }
+  };
+
+  updateSuggestions = () => {
+    let newSuggestions = new Set([...this.props.viewer.tags, ...this.state.tags]);
+    this.setState({ suggestions: Array.from(newSuggestions) });
+  };
+
   _handleDarkMode = async (e) => {
     Events.dispatchCustomEvent({
       name: "set-slate-theme",

components/core/CarouselSidebarSlate.js

@@ -14,6 +14,7 @@ import { Input } from "~/components/system/components/Input";
 import { Textarea } from "~/components/system/components/Textarea";
 import { Tag } from "~/components/system/components/Tag";
 
+import isEqual from "lodash/isEqual";
 import ProcessedText from "~/components/core/ProcessedText";
 
 const STYLES_NO_VISIBLE_SCROLL = css`
@@ -221,6 +222,17 @@ export default class CarouselSidebarSlate extends React.Component {
     }
   };
 
+  componentDidUpdate = (prevProps, prevState) => {
+    if (!isEqual(prevState.tags, this.state.tags)) {
+      this.updateSuggestions();
+    }
+  };
+
+  updateSuggestions = () => {
+    let newSuggestions = new Set([...this.props.viewer.tags, ...this.state.tags]);
+    this.setState({ suggestions: Array.from(newSuggestions) });
+  };
+
   _handleClose = () => {
     if (this.state.unsavedChanges) {
       this._handleSave();

components/sidebars/SidebarSingleSlateSettings.js

@@ -10,6 +10,8 @@ import * as SVG from "~/common/svg";
 import { RadioGroup } from "~/components/system/components/RadioGroup";
 import { css } from "@emotion/react";
 
+import isEqual from "lodash/isEqual";
+
 const SIZE_LIMIT = 1000000;
 const DEFAULT_IMAGE =
   "https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re";
@@ -53,6 +55,15 @@ export default class SidebarSingleSlateSettings extends React.Component {
     suggestions: this.props.viewer.tags,
   };
 
+  componentDidMount = () => {
+    this.updateSuggestions();
+  };
+
+  updateSuggestions = () => {
+    let newSuggestions = new Set([...this.props.viewer.tags, ...this.state.tags]);
+    this.setState({ suggestions: Array.from(newSuggestions) });
+  };
+
   _handleSubmit = async () => {
     let slates = this.props.viewer.slates;
     for (let slate of slates) {

package-lock.json

@@ -5742,9 +5742,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",

package.json

@@ -52,6 +52,7 @@
     "jsonwebtoken": "^8.5.1",
     "jszip": "^3.6.0",
     "knex": "^0.95.1",
+    "lodash": "^4.17.21",
     "minisearch": "^3.0.2",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",