Fix type error when saving or deleting canned responses with tags

src/components/CampaignCannedResponseForm.jsx

@@ -186,14 +186,18 @@ export default class CannedResponseForm extends React.Component {
             fullWidth
             ref={this.autocompleteInput}
             options={
-              tags && tags.filter(t => this.state.tagIds.indexOf(t.id) === -1)
+              tags &&
+              tags.filter(t => this.state.tagIds.indexOf(parseInt(t.id)) === -1)
             }
             getOptionLabel={option => option.name}
             value={
-              tags && tags.filter(t => this.state.tagIds.indexOf(t.id) > -1)
+              tags &&
+              tags.filter(t => this.state.tagIds.indexOf(parseInt(t.id)) > -1)
             }
             onChange={(event, selectedTags) => {
-              this.setState({ tagIds: selectedTags.map(tag => tag.id) });
+              this.setState({
+                tagIds: selectedTags.map(tag => parseInt(tag.id))
+              });
             }}
             renderInput={params => {
               return <TextField {...params} label="Tags" />;

src/components/CampaignCannedResponsesForm.jsx

@@ -27,6 +27,7 @@ import loadData from "../containers/hoc/load-data";
 import { gql } from "@apollo/client";
 import TagChips from "./TagChips";
 import { parseCannedResponseCsv } from "../lib/parse_csv";
+import { convertToInt } from "./utils";
 
 const Span = ({ children }) => <span>{children}</span>;
 
@@ -74,7 +75,7 @@ export class CampaignCannedResponsesForm extends React.Component {
         WebkitBoxOrient: "vertical",
         WebkitLineClamp: 2,
         overflow: "hidden",
-        height: 32,
+        minHeight: 32,
         width: "90%"
       },
       redText: {
@@ -106,6 +107,16 @@ export class CampaignCannedResponsesForm extends React.Component {
       .replace(/[^a-zA-Z1-9]+/g, "");
   }
 
+  updateTagIdsToInt(cannedResponses) {
+    return cannedResponses.map(resp => {
+      let tagIds = resp.tagIds;
+      return {
+        ...resp,
+        tagIds: convertToInt(tagIds)
+      };
+    });
+  }
+
   showAddButton(cannedResponses) {
     this.uploadCsvInputRef = React.createRef();
 
@@ -170,7 +181,7 @@ export class CampaignCannedResponsesForm extends React.Component {
     }
   }
 
-  showAddForm() {
+  showAddForm(cannedResponses) {
     const handleCloseAddForm = () => {
       this.setState({ showForm: false });
     };
@@ -181,17 +192,19 @@ export class CampaignCannedResponsesForm extends React.Component {
           <div className={css(this.styles.form)}>
             <CampaignCannedResponseForm
               defaultValue={
-                this.props.formValues.cannedResponses.find(
+                cannedResponses.find(
                   res => res.id === this.state.responseId
                 ) || { text: "", title: "" }
               }
               formButtonText={this.state.formButtonText}
               handleCloseAddForm={handleCloseAddForm}
               onSaveCannedResponse={ele => {
-                const newVals = this.props.formValues.cannedResponses.slice(0);
+                const newVals = cannedResponses.slice(0);
+
                 const newEle = {
                   ...ele
                 };
+                newEle.tagIds = convertToInt(newEle.tagIds);
                 if (!this.state.responseId) {
                   newEle.id = this.getCannedResponseId();
                   newVals.push(newEle);
@@ -280,15 +293,17 @@ export class CampaignCannedResponsesForm extends React.Component {
           </IconButton>
           <IconButton
             onClick={() => {
-              const newVals = this.props.formValues.cannedResponses
+              const newVals = cannedResponses
                 .map(responseToDelete => {
                   if (responseToDelete.id === response.id) {
                     return null;
                   }
-                  return responseToDelete;
+                  return {
+                    ...responseToDelete,
+                    tagIds: convertToInt(responseToDelete.tagIds)
+                  };
                 })
                 .filter(ele => ele !== null);
-
               this.props.onChange({
                 cannedResponses: newVals
               });
@@ -323,13 +338,17 @@ export class CampaignCannedResponsesForm extends React.Component {
           });
 
           if (error) return;
+          const formCannedResponses = this.updateTagIdsToInt(
+            this.props.formValues.cannedResponses
+          );
 
           this.props.onChange({
             cannedResponses: [
-              ...this.props.formValues.cannedResponses,
+              ...formCannedResponses,
               ...cannedResponses.map(r => ({
                 ...r,
-                id: this.getCannedResponseId()
+                id: this.getCannedResponseId(),
+                tagIds: convertToInt(r.tagIds)
               }))
             ]
           });
@@ -340,7 +359,7 @@ export class CampaignCannedResponsesForm extends React.Component {
 
   render() {
     const { formValues } = this.props;
-    const cannedResponses = formValues.cannedResponses;
+    const cannedResponses = this.updateTagIdsToInt(formValues.cannedResponses);
     const list =
       cannedResponses.length === 0 ? null : (
         <List>
@@ -374,7 +393,7 @@ export class CampaignCannedResponsesForm extends React.Component {
             label={this.props.saveLabel}
           />
         </GSForm>
-        {this.showAddForm()}
+        {this.showAddForm(cannedResponses)}
       </React.Fragment>
     );
   }

src/components/TagChips.jsx

@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
 const TagChips = ({ tags, tagIds, onRequestDelete, extraProps }) => (
   <div className={css(styles.tagChips)}>
     {tagIds.map((id, i) => {
-      const listedTag = tags.find(t => t.id === id);
+      const listedTag = tags.find(t => t.id == id);
       return (
         listedTag && (
           <TagChip

src/components/utils.jsx

@@ -40,3 +40,8 @@ export function deepCopy(obj) {
     return obj;
   }
 }
+
+// Convert an array of strings to an array of integers
+export function convertToInt(array) {
+  return array.map(str => parseInt(str));
+}