Updates to click to copy

ifmeorg · Mar 4, 2019 · 70c294e · 70c294e
1 parent fa482cd
commit 70c294e
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 2,990 deletions.
diff --git a/app/assets/stylesheets/secret_share/secret_share_content.scss b/app/assets/stylesheets/secret_share/secret_share_content.scss
@@ -5,11 +5,3 @@
   background: $white-80;
   @include dashboardSectionStyles();
 }
-
-.secretShare {
-  #secretShareLink {
-      background-color: $white;
-      color: $mulberry;
-      font-size: 1em;
-  }
-}
diff --git a/app/helpers/moments_helper.rb b/app/helpers/moments_helper.rb
@@ -32,24 +32,17 @@ def moments_stats
     result + '</div>'
   end
 
-  def secret_share_url_props(moment)
-    secret_share_url_input(moment)
-  end
-
-  private
-
-  def secret_share_url_input(moment)
-    { inputs: [
-      {
-        id: 'secretShareLink',
-        type: 'text',
-        name: 'secretShareInput',
-        readOnly: true,
-        value: secret_share_url(moment.secret_share_identifier) || nil,
-        dark: true,
-        copyOnClick: true
-      }
-    ], action:  moment_path(moment) }
+  def secret_share_props(moment)
+    { inputs: [{
+      id: 'secretShare',
+      type: 'text',
+      name: 'secretShare',
+      label: t('moments.secret_share.singular'),
+      readOnly: true,
+      value: secret_share_url(moment.secret_share_identifier) || nil,
+      dark: true,
+      copyOnClick: t('moments.secret_share.link_copied')
+    }], action:  moment_path(moment) }
   end
 
   private

diff --git a/app/views/moments/show.html.erb b/app/views/moments/show.html.erb
@@ -45,10 +45,7 @@
 
 <% if @moment.owned_by?(current_user) && @moment.shared? %>
   <div class="smallMarginTop">
-    <div class="label" id="secretShare">
-      <%= label_tag t('moments.secret_share.singular') %>
-    </div>
-    <%= react_component('Form', props: secret_share_url_props) %>
+    <%= react_component('Form', props: secret_share_link_props(@moment)) %>
   </div>
 <% end %>
 

diff --git a/client/app/components/Input/InputDefault.jsx b/client/app/components/Input/InputDefault.jsx
@@ -1,8 +1,6 @@
 // @flow
-import React, { Fragment } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
+import React from 'react';
 import css from './Input.scss';
-import 'react-toastify/dist/ReactToastify.css';
 
 export const REQUIRES_DEFAULT = ['text', 'number', 'time', 'date', 'hidden'];
 export const DEFAULT_WITH_LABEL = ['text', 'number', 'time', 'date'];
@@ -23,15 +21,17 @@ export type Props = {
   hasError?: Function,
   myRef?: any,
   label?: string,
-  onClick?: Function,
-  copyOnClick?: boolean,
+  copyOnClick?: string,
 };
 
-const copyToClipBoard = (e: SyntheticEvent<HTMLInputElement>) => {
+const copyToClipBoard = (
+  e: SyntheticEvent<HTMLInputElement>,
+  copyOnClick: string,
+) => {
+  const { document, alert } = window;
   e.currentTarget.select();
   document.execCommand('copy');
-  // TODO: Once i18n and react are playing nicely this can be changed
-  toast('Secret Share Link Copied!', { autoClose: 5000 });
+  alert(copyOnClick);
 };
 
 const onFocus = (required: ?boolean, hasError: ?Function) => {
@@ -72,31 +72,33 @@ export const InputDefault = (props: Props) => {
   } = props;
   if (!REQUIRES_DEFAULT.includes(type)) return null;
   return (
-    <Fragment>
-      <input
-        className={css.default}
-        id={id}
-        type={type}
-        name={name}
-        defaultValue={value}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        disabled={disabled}
-        required={required}
-        minLength={minLength}
-        maxLength={maxLength}
-        min={min}
-        max={max}
-        onFocus={() => onFocus(required, hasError)}
-        onBlur={(e: SyntheticEvent<HTMLInputElement>) => onBlur(e, required, hasError)
-        }
-        ref={myRef}
-        aria-label={label}
-        aria-invalid={hasError}
-        onClick={copyOnClick ? (e: SyntheticEvent<HTMLInputElement>) => { copyToClipBoard(e); }
-          : () => {}}
-      />
-      <ToastContainer />
-    </Fragment>
+    <input
+      className={css.default}
+      id={id}
+      type={type}
+      name={name}
+      defaultValue={value}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      minLength={minLength}
+      maxLength={maxLength}
+      min={min}
+      max={max}
+      onFocus={() => onFocus(required, hasError)}
+      onBlur={(e: SyntheticEvent<HTMLInputElement>) => onBlur(e, required, hasError)
+      }
+      ref={myRef}
+      aria-label={label}
+      aria-invalid={hasError}
+      onClick={
+        copyOnClick
+          ? (e: SyntheticEvent<HTMLInputElement>) => {
+            copyToClipBoard(e, copyOnClick);
+          }
+          : () => {}
+      }
+    />
   );
 };
diff --git a/client/app/components/Input/__tests__/InputDefault.spec.jsx b/client/app/components/Input/__tests__/InputDefault.spec.jsx
@@ -59,28 +59,27 @@ describe('InputDefault', () => {
     });
   });
 
-  describe('copyOnClick prop type', () => {
-    it('adds onClick prop ', () => {
+  describe('has valid copyOnClick prop', () => {
+    it('copies to clipboard when input is clicked', () => {
+      jest.spyOn(window, 'alert');
+      jest.spyOn(window.document, 'execCommand');
+      const copyOnClick = 'Some message';
       const wrapper = shallow(
         <InputDefault
           id={id}
           type="text"
           name={name}
-          copyOnClick="true"
+          copyOnClick={copyOnClick}
         />,
       );
-      expect(wrapper.find('input').prop('onClick').onClick).to.equal();
-    });
-
-    it('does not add onClick prop', () => {
-      const wrapper = shallow(
-        <InputDefault
-          id={id}
-          type="text"
-          name={name}
-        />,
-      );
-      expect(wrapper.props().onClick).to.equal(10);
+      wrapper.find('input').simulate('click', {
+        currentTarget: {
+          value: 'test',
+          select: () => {},
+        },
+      });
+      expect(window.document.execCommand).toHaveBeenCalledWith('copy');
+      expect(window.alert).toHaveBeenCalledWith(copyOnClick);
     });
   });
 });
diff --git a/client/app/components/Input/utils.js b/client/app/components/Input/utils.js
@@ -86,6 +86,7 @@ export type Props = {
   accordionOpen?: boolean,
   formNoValidate?: boolean,
   googleAPIKey?: string,
+  copyOnClick?: string,
 };
 
 export type State = {

diff --git a/client/package.json b/client/package.json
@@ -46,8 +46,7 @@
     "react-html-parser": "^2.0.2",
     "react-lazyload": "^2.3.0",
     "react-on-rails": "11.2.2",
-    "react-render-html": "^0.6.0",
-    "react-toastify": "^4.5.2"
+    "react-render-html": "^0.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
@@ -105,7 +104,7 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "\\.(css|scss)$": "identity-obj-proxy"
+      "\\.scss$": "identity-obj-proxy"
     },
     "setupFiles": [
       "./app/libs/testHelper.js"