From 8c4c5709c6fae022ce4865ba0b96932eb24780ae Mon Sep 17 00:00:00 2001
From: Pranab Singh <iampranabb@gmail.com>
Date: Wed, 9 Oct 2019 02:10:10 +0530
Subject: [PATCH] Added provision for adding multiple tags by using commas

---
 src/ui/component/channelEdit/view.jsx |  4 +--
 src/ui/component/publishForm/view.jsx |  4 +--
 src/ui/component/tagsSearch/view.jsx  | 49 +++++++++++++++++----------
 src/ui/component/tagsSelect/view.jsx  |  2 +-
 static/app-strings.json               |  2 +-
 5 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/ui/component/channelEdit/view.jsx b/src/ui/component/channelEdit/view.jsx
index 91388fcef..ec660b159 100644
--- a/src/ui/component/channelEdit/view.jsx
+++ b/src/ui/component/channelEdit/view.jsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Form, FormField } from 'component/common/form';
 import Button from 'component/button';
 import SelectAsset from 'component/selectAsset';
-import TagSelect from 'component/tagsSelect';
+import TagsSelect from 'component/tagsSelect';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
           disabled={false}
           onChange={text => setParams({ ...params, description: text })}
         />
-        <TagSelect
+        <TagsSelect
           title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your channel.')}
diff --git a/src/ui/component/publishForm/view.jsx b/src/ui/component/publishForm/view.jsx
index c805dbd9a..0b4ffa3cc 100644
--- a/src/ui/component/publishForm/view.jsx
+++ b/src/ui/component/publishForm/view.jsx
@@ -6,7 +6,7 @@ import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
 import classnames from 'classnames';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
-import TagSelect from 'component/tagsSelect';
+import TagsSelect from 'component/tagsSelect';
 import PublishText from 'component/publishText';
 import PublishPrice from 'component/publishPrice';
 import PublishFile from 'component/publishFile';
@@ -130,7 +130,7 @@ function PublishForm(props: Props) {
         <PublishText disabled={formDisabled} />
         <Card actions={<SelectThumbnail />} />
 
-        <TagSelect
+        <TagsSelect
           title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your content.')}
diff --git a/src/ui/component/tagsSearch/view.jsx b/src/ui/component/tagsSearch/view.jsx
index e8066469a..e4c3639c8 100644
--- a/src/ui/component/tagsSearch/view.jsx
+++ b/src/ui/component/tagsSearch/view.jsx
@@ -34,7 +34,12 @@ export default function TagsSearch(props: Props) {
     tags.unshift({ name: newTag });
   }
 
-  const doesTagMatch = name => (newTag ? name.toLowerCase().includes(newTag.toLowerCase()) : true);
+  const doesTagMatch = name => {
+    let nextTag;
+    nextTag = newTag.substr(newTag.lastIndexOf(',') + 1, newTag.length);
+    nextTag = newTag.substr(newTag.lastIndexOf(' ') + 1, newTag.length);
+    return newTag ? name.toLowerCase().includes(nextTag.toLowerCase()) : true;
+  };
   // Make sure there are no duplicates, then trim
   const suggestedTagsSet = new Set(tags.map(tag => tag.name));
   const suggestedTags = Array.from(suggestedTagsSet)
@@ -51,32 +56,40 @@ export default function TagsSearch(props: Props) {
 
   function handleSubmit(e) {
     e.preventDefault();
-    const trimmedTag = newTag.trim();
+    let tags = newTag.trim();
 
-    if (trimmedTag.length === 0) {
+    if (tags.length === 0) {
       return;
     }
 
     setNewTag('');
-    if (onSelect) {
-      onSelect({ name: trimmedTag });
-    } else {
-      if (!unfollowedTags.map(({ name }) => name).includes(trimmedTag)) {
-        doAddTag(trimmedTag);
-      }
 
-      if (!followedTags.map(({ name }) => name).includes(trimmedTag)) {
-        doToggleTagFollow(trimmedTag);
+    tags = tags.split(',').map(newTag => newTag.trim());
+    tags.forEach(tag => {
+      if (onSelect) {
+        onSelect({ name: tag });
+      } else {
+        if (!unfollowedTags.map(({ name }) => name).includes(tag)) {
+          doAddTag(tag);
+        }
+
+        if (!followedTags.map(({ name }) => name).includes(tag)) {
+          doToggleTagFollow(tag);
+        }
       }
-    }
+    });
   }
 
-  function handleTagClick(tag) {
-    if (onSelect) {
-      onSelect({ name: tag });
-    } else {
-      doToggleTagFollow(tag);
-    }
+  function handleTagClick(tags) {
+    tags = tags.split(',').map(newTag => newTag.trim());
+
+    tags.forEach(tag => {
+      if (onSelect) {
+        onSelect({ name: tag });
+      } else {
+        doToggleTagFollow(tag);
+      }
+    });
   }
 
   return (
diff --git a/src/ui/component/tagsSelect/view.jsx b/src/ui/component/tagsSelect/view.jsx
index f27a5ebc4..f00d32ee3 100644
--- a/src/ui/component/tagsSelect/view.jsx
+++ b/src/ui/component/tagsSelect/view.jsx
@@ -23,7 +23,7 @@ type Props = {
   placeholder?: string,
 };
 
-export default function TagSelect(props: Props) {
+export default function TagsSelect(props: Props) {
   const {
     showClose,
     followedTags,
diff --git a/static/app-strings.json b/static/app-strings.json
index ead476e00..458ef6e63 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -792,4 +792,4 @@
   "Create": "Create",
   "You have no rewards available.": "You have no rewards available.",
   "URL does not include name.": "URL does not include name."
-}
\ No newline at end of file
+}