Jeremy/GITC-565/fix Twitter handle feature (#9661)

* remove maxlength from input and add onPaste function to transform input value * refactor * refactor onPaste to onBlur so that this works no matter how the URL is entered * refactor onBlur and add refine test * refactor following code review * refactor two regexps into single expression * slight refactor * slight refactor * refactor * run eslint fixes * typo fix * add missing comma * add missing semicolons * refactor * do not allow twitter handles smaller than 4 characters long * refactor Co-authored-by: Chibuotu Amadi <[email protected]>
gitcoinco · Nov 5, 2021 · 9f7cab5 · 9f7cab5
1 parent 3ff30b5
commit 9f7cab5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/app/assets/v2/js/grants/_new.js b/app/assets/v2/js/grants/_new.js
@@ -92,10 +92,10 @@ Vue.mixin({
       if (!vm.form.twitter_handle_1.length) {
         vm.$set(vm.errors, 'twitter_handle_1', 'Please enter twitter handle of your project');
       }
-      if (vm.form.twitter_handle_1 && !(/^@?[a-zA-Z0-9_]{1,15}$/).test(vm.form.twitter_handle_1)) {
+      if (vm.form.twitter_handle_1 && !(/^@?[a-zA-Z0-9_]{4,15}$/).test(vm.form.twitter_handle_1)) {
         vm.$set(vm.errors, 'twitter_handle_1', 'Please enter a valid twitter handle of your project e.g @humanfund');
       }
-      if (vm.form.twitter_handle_2 && !(/^@?[a-zA-Z0-9_]{1,15}$/).test(vm.form.twitter_handle_2)) {
+      if (vm.form.twitter_handle_2 && !(/^@?[a-zA-Z0-9_]{4,15}$/).test(vm.form.twitter_handle_2)) {
         vm.$set(vm.errors, 'twitter_handle_2', 'Please enter your twitter handle e.g @georgecostanza');
       }
 
@@ -277,7 +277,15 @@ Vue.mixin({
           _alert(err.message, 'danger');
         }
       });
-    }
+    },
+    handleTwitterUsername(event) {
+      const inputField = event.target;
+      const matchResult = inputField.value.match(/https:\/\/twitter.com\/(\w{4,15})/);
+
+      const extracted = matchResult ? `@${matchResult[1]}` : inputField.value;
+
+      this.$set(this.form, inputField.id, extracted);
+    },
   },
   watch: {
     deep: true,
@@ -378,7 +386,7 @@ if (document.getElementById('gc-new-grant')) {
             ]
           },
           theme: 'snow',
-          placeholder: 'Give a detailed desciription about your Grant'
+          placeholder: 'Give a detailed description about your Grant'
         }
       };
     },

diff --git a/app/grants/templates/grants/_new.html b/app/grants/templates/grants/_new.html
@@ -155,7 +155,7 @@ <h1 class="text-center font-title-xl">Create a Grant</h1>
                   <label class="font-caption letter-spacing text-black-60 text-uppercase" for="twitter_handle_1">Project Twitter Handle</label>
                   <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
 
-                  <input id="twitter_handle_1" v-model="form.twitter_handle_1" name="twitter_handle_1" class="form__input form__input-lg" maxlength="20" type="text" placeholder="humanfund" required/>
+                  <input id="twitter_handle_1" v-model="form.twitter_handle_1" @blur.prevent="handleTwitterUsername" name="twitter_handle_1" class="form__input form__input-lg" type="text" placeholder="humanfund" required/>
 
                   <div class="text-danger" v-if="errors.twitter_handle_1">
                     [[errors.twitter_handle_1]]
@@ -166,7 +166,7 @@ <h1 class="text-center font-title-xl">Create a Grant</h1>
                 <div class="col-12 mb-3">
                   <label class="font-caption letter-spacing text-black-60 text-uppercase" for="twitter_handle_2">Your Twitter Handle</label>
 
-                  <input id="twitter_handle_2" v-model="form.twitter_handle_2" name="twitter_handle_2" class="form__input form__input-lg" maxlength="20" type="text" placeholder="georgecostanza"/>
+                  <input id="twitter_handle_2" v-model="form.twitter_handle_2" @blur.prevent="handleTwitterUsername" name="twitter_handle_2" class="form__input form__input-lg" type="text" placeholder="georgecostanza"/>
 
                   <div class="text-danger" v-if="errors.twitter_handle_2">
                     [[errors.twitter_handle_2]]

diff --git a/cypress/integration/grants/test_grant_creation.js b/cypress/integration/grants/test_grant_creation.js
@@ -24,6 +24,19 @@ describe('Creating a new grant', () => {
   });
 
   describe('creation:success - required fields only', () => {
+    it('extracts the user\'s Twitter handle when the full Twitter URL is entered into the form', () => {
+      const orgTwitterURL = 'https://twitter.com/gitcoin'
+      const userTwitterURL = 'https://twitter.com/gitcoinbot'
+
+      cy.visit('grants/new');
+
+      cy.get('input[name=twitter_handle_1]').type(orgTwitterURL).blur();
+      cy.get('input[name=twitter_handle_2]').type(userTwitterURL).blur();
+
+      cy.get('input[name=twitter_handle_1]').should('have.value', '@gitcoin');
+      cy.get('input[name=twitter_handle_2]').should('have.value', '@gitcoinbot');
+    });
+
     it('submits a grant for review', () => {
       cy.visit('grants/new');