chore: Replace packages with native functions (#5140)

2022-08-03 13:38:21 +02:00 · 2022-08-03 13:38:21 +02:00 · a18c0a97f3
commit a18c0a97f3
parent 262458f07d
15 changed files with 68 additions and 57 deletions
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@ -9,7 +9,7 @@

 <script>
 import 'highlight.js/styles/default.css';
-import copy from 'copy-text-to-clipboard';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';

 export default {
  props: {
@ -23,9 +23,9 @@ export default {
    },
  },
  methods: {
-    onCopy(e) {
+    async onCopy(e) {
      e.preventDefault();
-      copy(this.script);
+      await copyTextToClipboard(this.script);
      bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -109,8 +109,6 @@
  </li>
 </template>
 <script>
-import copy from 'copy-text-to-clipboard';
-
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import timeMixin from '../../../mixins/time';

@ -128,6 +126,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';

 export default {
  components: {
@ -405,8 +404,8 @@ export default {
        this.showAlert(this.$t('CONVERSATION.FAIL_DELETE_MESSSAGE'));
      }
    },
-    handleCopy() {
-      copy(this.data.content);
+    async handleCopy() {
+      await copyTextToClipboard(this.data.content);
      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
      this.showContextMenu = false;
    },
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@ -1,8 +1,7 @@
-import queryString from 'query-string';
 import { DEFAULT_REDIRECT_URL } from '../constants';

 export const frontendURL = (path, params) => {
-  const stringifiedParams = params ? `?${queryString.stringify(params)}` : '';
+  const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
  return `/app/${path}${stringifiedParams}`;
 };

--- a/app/javascript/dashboard/helper/flag.js
+++ b/app/javascript/dashboard/helper/flag.js
@ -0,0 +1,19 @@
+const FLAG_OFFSET = 127397;
+
+/**
+ * Gets emoji flag for given locale.
+ *
+ * @param {string} countryCode locale code
+ * @return {string} emoji flag
+ *
+ * @example
+ * getCountryFlag('cz') // '🇨🇿'
+ */
+export const getCountryFlag = countryCode => {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => FLAG_OFFSET + char.charCodeAt());
+
+  return String.fromCodePoint(...codePoints);
+};
--- a/app/javascript/dashboard/helper/specs/flag.spec.js
+++ b/app/javascript/dashboard/helper/specs/flag.spec.js
@ -0,0 +1,9 @@
+import { getCountryFlag } from '../flag';
+
+describe('#flag', () => {
+  it('returns the correct flag ', () => {
+    expect(getCountryFlag('cz')).toBe('🇨🇿');
+    expect(getCountryFlag('IN')).toBe('🇮🇳');
+    expect(getCountryFlag('US')).toBe('🇺🇸');
+  });
+});
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@ -28,7 +28,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
-import flag from 'country-code-emoji';
+import { getCountryFlag } from 'dashboard/helper/flag';

 import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@ -200,7 +200,7 @@ export default {
            if (row.country) {
              return (
                <div class="text-truncate">
-                  {`${flag(row.countryCode)} ${row.country}`}
+                  {`${getCountryFlag(row.countryCode)} ${row.country}`}
                </div>
              );
            }
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@ -150,7 +150,7 @@ import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
 import alertMixin from 'shared/mixins/alertMixin';
 import adminMixin from '../../../../mixins/isAdmin';
 import { mapGetters } from 'vuex';
-import flag from 'country-code-emoji';
+import { getCountryFlag } from 'dashboard/helper/flag';

 export default {
  components: {
@ -244,7 +244,7 @@ export default {
    },
    findCountryFlag(countryCode, cityAndCountry) {
      try {
-        const countryFlag = countryCode ? flag(countryCode) : '🌎';
+        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
        return `${cityAndCountry} ${countryFlag}`;
      } catch (error) {
        return '';
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@ -28,9 +28,9 @@
  </div>
 </template>
 <script>
-import copy from 'copy-text-to-clipboard';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';

 export default {
  components: {
@ -60,9 +60,9 @@ export default {
    },
  },
  methods: {
-    onCopy(e) {
+    async onCopy(e) {
      e.preventDefault();
-      copy(this.value);
+      await copyTextToClipboard(this.value);
      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@ -20,10 +20,11 @@
 </template>

 <script>
-import copy from 'copy-text-to-clipboard';
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import attributeMixin from 'dashboard/mixins/attributeMixin';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+
 export default {
  components: {
    CustomAttribute,
@ -86,8 +87,8 @@ export default {
        this.showAlert(errorMessage);
      }
    },
-    onCopy(attributeValue) {
-      copy(attributeValue);
+    async onCopy(attributeValue) {
+      await copyTextToClipboard(attributeValue);
      this.showAlert(this.$t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
    },
  },
--- a/app/javascript/shared/helpers/clipboard.js
+++ b/app/javascript/shared/helpers/clipboard.js
@ -0,0 +1,14 @@
+/**
+ * Writes a text string to the system clipboard.
+ *
+ * @async
+ * @param {string} text text to be written to the clipboard
+ * @throws {Error} unable to copy text to clipboard
+ */
+export const copyTextToClipboard = async text => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    throw new Error(`Unable to copy text to clipboard: ${error.message}`);
+  }
+};
--- a/app/javascript/shared/mixins/filterMixin.js
+++ b/app/javascript/shared/mixins/filterMixin.js
@ -1,5 +1,3 @@
-// import groupBy from 'lodash.groupby';
-
 export default {
  methods: {
    setFilterAttributes() {
--- a/app/javascript/widget/helpers/utils.js
+++ b/app/javascript/widget/helpers/utils.js
@ -36,3 +36,10 @@ export const RNHelper = {
    );
  },
 };
+
+export const groupBy = (array, predicate) => {
+  return array.reduce((acc, value) => {
+    (acc[predicate(value)] ||= []).push(value);
+    return acc;
+  }, {});
+};
--- a/app/javascript/widget/store/modules/conversation/getters.js
+++ b/app/javascript/widget/store/modules/conversation/getters.js
@ -1,5 +1,5 @@
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import groupBy from 'lodash.groupby';
+import { groupBy } from 'widget/helpers/utils';
 import { groupConversationBySender } from './helpers';
 import { formatUnixDate } from 'shared/helpers/DateHelper';

--- a/package.json
+++ b/package.json
@ -32,18 +32,14 @@
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "bourbon": "^6.0.0",
    "chart.js": "~2.9.4",
-    "copy-text-to-clipboard": "2.2.0",
    "core-js": "3.11.0",
-    "country-code-emoji": "^1.0.0",
    "date-fns": "2.21.1",
    "date-fns-tz": "^1.3.3",
    "dompurify": "2.2.7",
-    "dotenv": "^8.0.0",
    "foundation-sites": "~6.5.3",
    "highlight.js": "~10.4.1",
    "ionicons": "~2.0.1",
    "js-cookie": "^2.2.1",
-    "lodash.groupby": "^4.6.0",
    "marked": "4.0.10",
    "md5": "^2.3.0",
    "ninja-keys": "^1.1.9",
@ -52,7 +48,6 @@
    "prosemirror-markdown": "1.5.1",
    "prosemirror-state": "1.3.4",
    "prosemirror-view": "1.18.4",
-    "query-string": "5",
    "semver": "7.3.5",
    "spinkit": "~1.2.5",
    "tailwindcss": "^1.9.6",
@ -60,7 +55,6 @@
    "v-tooltip": "~2.1.3",
    "videojs-record": "^4.5.0",
    "vue": "2.6.12",
-    "vue-axios": "~1.2.2",
    "vue-chartjs": "3.5.1",
    "vue-clickaway": "~2.1.0",
    "vue-color": "2.8.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -5501,11 +5501,6 @@ copy-descriptor@^0.1.0:
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

-copy-text-to-clipboard@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz#329dd6daf8c42034c763ace567418401764579ae"
-  integrity sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==
-
 core-js-compat@^3.8.1, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.0.tgz#635683f43480a0b41e3f6be3b1c648dadb8b4390"
@ -5561,11 +5556,6 @@ cosmiconfig@^7.0.0:
    path-type "^4.0.0"
    yaml "^1.10.0"

-country-code-emoji@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/country-code-emoji/-/country-code-emoji-1.0.0.tgz#7c77791839c9e9921beec08ef080caa7cfb8b40c"
-  integrity sha512-fBM5A49oZkOxOVb0bx7q7Hanlfh8e3z/r6/ZnFhbL57JXGIgWPC2HYrjXEyiGML7OFftDV/WfAlJdDkoAbj1Rg==
-
 cp-file@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@ -10173,11 +10163,6 @@ lodash.get@^4.0:
  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=

-lodash.groupby@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
-  integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
-
 lodash.has@^4.0:
  version "4.5.2"
  resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
@ -12971,15 +12956,6 @@ qs@~6.5.2:
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

-query-string@5:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
-  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 query-string@^4.1.0:
  version "4.3.4"
  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@ -15629,11 +15605,6 @@ void-elements@^3.1.0:
  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
  integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=

-vue-axios@~1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/vue-axios/-/vue-axios-1.2.2.tgz#d18bb48fa7bf469ffa86676960f52a89b7d38a9d"
-  integrity sha1-0Yu0j6e/Rp/6hmdpYPUqibfTip0=
-
 vue-chartjs@3.5.1:
  version "3.5.1"
  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"