web/satellite: ShareContainer, ShareButton refactored and migrated to…

… use composition api Change-Id: Ic8b2d2b70cb5a614858b352064f0619b5a518b3d
storj · Dec 23, 2022 · 96e7c13 · 96e7c13
1 parent ea00213
commit 96e7c13
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 150 deletions.
diff --git a/web/satellite/src/components/common/share/ShareButton.vue b/web/satellite/src/components/common/share/ShareButton.vue
@@ -4,60 +4,30 @@
 <template>
     <a
         class="share-button"
-        :href="link"
+        :href="item.link"
         target="_blank"
         rel="noopener noreferrer"
-        :aria-label="label"
+        :aria-label="item.label"
         :style="style"
     >
-        <component :is="images[label]" />
-        <span>{{ label }}</span>
+        <component :is="item.image" />
+        <span>{{ item.label }}</span>
     </a>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { VueConstructor } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-import { ShareOptions } from '@/components/common/share/ShareContainer.vue';
+import { ShareButtonConfig } from '@/types/browser';
 
-import RedditIcon from '@/../static/images/objects/reddit.svg';
-import FacebookIcon from '@/../static/images/objects/facebook.svg';
-import TwitterIcon from '@/../static/images/objects/twitter.svg';
-import HackerNewsIcon from '@/../static/images/objects/hackerNews.svg';
-import LinkedInIcon from '@/../static/images/objects/linkedIn.svg';
-import TelegramIcon from '@/../static/images/objects/telegram.svg';
-import WhatsAppIcon from '@/../static/images/objects/whatsApp.svg';
-import EmailIcon from '@/../static/images/objects/email.svg';
+const props = defineProps<{ item: ShareButtonConfig }>();
 
-// @vue/component
-@Component
-export default class ShareButton extends Vue {
-    @Prop({ default: '' })
-    public readonly label: ShareOptions;
-    @Prop({ default: '' })
-    public readonly link: string;
-    @Prop({ default: '#000' })
-    public readonly color: string;
-
-    private readonly images: Record<string, VueConstructor<Vue>> = {
-        [ShareOptions.Reddit]: RedditIcon,
-        [ShareOptions.Facebook]: FacebookIcon,
-        [ShareOptions.Twitter]: TwitterIcon,
-        [ShareOptions.HackerNews]: HackerNewsIcon,
-        [ShareOptions.LinkedIn]: LinkedInIcon,
-        [ShareOptions.Telegram]: TelegramIcon,
-        [ShareOptions.WhatsApp]: WhatsAppIcon,
-        [ShareOptions.Email]: EmailIcon,
-    };
-
-    /**
-     * Returns share button background color.
-     */
-    public get style(): Record<string, string> {
-        return { 'background-color': this.color };
-    }
-}
+/**
+ * Returns share button background color.
+ */
+const style = computed((): Record<string, string> => {
+    return { 'background-color': props.item.color };
+});
 </script>
 
 <style scoped lang="scss">

diff --git a/web/satellite/src/components/common/share/ShareContainer.vue b/web/satellite/src/components/common/share/ShareContainer.vue
@@ -6,119 +6,95 @@
         <ShareButton
             v-for="button of shareButtons"
             :key="button.label"
-            :label="button.label"
-            :link="button.link"
-            :color="button.color"
+            :item="button"
         />
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, VueConstructor } from 'vue';
 
-import ShareButton from '@/components/common/share/ShareButton.vue';
-
-export enum ShareOptions {
-    Reddit = 'Reddit',
-    Facebook = 'Facebook',
-    Twitter = 'Twitter',
-    HackerNews = 'Hacker News',
-    LinkedIn = 'LinkedIn',
-    Telegram = 'Telegram',
-    WhatsApp = 'WhatsApp',
-    Email = 'E-Mail',
-}
-
-type ShareButtonConfig = {
-    link: string,
-    label: ShareOptions,
-    color: string,
-}
-
-// @vue/component
-@Component({
-    components: {
-        ShareButton,
-    },
-})
-export default class ShareContainer extends Vue {
-    @Prop({ default: '' })
-    private readonly link: string;
-
-    private readonly ShareOptions = ShareOptions;
-
-    /**
-     * Returns share buttons list.
-     */
-    private get shareButtons(): ShareButtonConfig[] {
-        return [
-            { label: ShareOptions.Reddit, color: '#5f99cf', link: this.redditLink },
-            { label: ShareOptions.Facebook, color: '#3b5998', link: this.facebookLink },
-            { label: ShareOptions.Twitter, color: '#55acee', link: this.twitterLink },
-            { label: ShareOptions.HackerNews, color: '#f60', link: this.hackernewsLink },
-            { label: ShareOptions.LinkedIn, color: '#0077b5', link: this.linkedinLink },
-            { label: ShareOptions.Telegram, color: '#54a9eb', link: this.telegramLink },
-            { label: ShareOptions.WhatsApp, color: '#25d366', link: this.whatsappLink },
-            { label: ShareOptions.Email, color: '#777', link: this.emailLink },
-        ];
-    }
-
-    /**
-     * Return the reddit link to share the current bucket on reddit.
-     */
-    private get redditLink(): string {
-        return `https://reddit.com/submit/?url=${this.link}&resubmit=true&title=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage`;
-    }
-
-    /**
-     * Return the facebook link to share the current bucket on facebook.
-     */
-    public get facebookLink(): string {
-        return `https://facebook.com/sharer/sharer.php?u=${this.link}`;
-    }
+import { ShareButtonConfig, ShareOptions } from '@/types/browser';
 
-    /**
-     * Return the twitter link to share the current bucket on twitter.
-     */
-    public get twitterLink(): string {
-        return `https://twitter.com/intent/tweet/?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&url=${this.link}`;
-    }
-
-    /**
-     * Return the hacker news link to share the current bucket on hacker news.
-     */
-    public get hackernewsLink(): string {
-        return `https://news.ycombinator.com/submitlink?u=${this.link}&t=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage`;
-    }
-
-    /**
-     * Return the linkedin link to share the current bucket on linkedin.
-     */
-    public get linkedinLink(): string {
-        return `https://www.linkedin.com/shareArticle?mini=true&url=${this.link}&title=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&summary=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&source=${this.link}`;
-    }
-
-    /**
-     * Return the telegram link to share the current bucket on telegram.
-     */
-    public get telegramLink(): string {
-        return `https://telegram.me/share/url?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&url=${this.link}`;
-    }
-
-    /**
-     * Return the whatsapp link to share the current bucket on whatsapp.
-     */
-    public get whatsappLink(): string {
-        return `whatsapp://send?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage%20${this.link}`;
-    }
+import ShareButton from '@/components/common/share/ShareButton.vue';
 
-    /**
-     * Return the email link to share the current bucket through email.
-     */
-    public get emailLink(): string {
-        return `mailto:?subject=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&body=${this.link}`;
-    }
-}
+import RedditIcon from '@/../static/images/objects/reddit.svg';
+import FacebookIcon from '@/../static/images/objects/facebook.svg';
+import TwitterIcon from '@/../static/images/objects/twitter.svg';
+import HackerNewsIcon from '@/../static/images/objects/hackerNews.svg';
+import LinkedInIcon from '@/../static/images/objects/linkedIn.svg';
+import TelegramIcon from '@/../static/images/objects/telegram.svg';
+import WhatsAppIcon from '@/../static/images/objects/whatsApp.svg';
+import EmailIcon from '@/../static/images/objects/email.svg';
+
+const props = defineProps<{ link: string; }>();
+
+const images: Record<string, VueConstructor> = {
+    [ShareOptions.Reddit]: RedditIcon,
+    [ShareOptions.Facebook]: FacebookIcon,
+    [ShareOptions.Twitter]: TwitterIcon,
+    [ShareOptions.HackerNews]: HackerNewsIcon,
+    [ShareOptions.LinkedIn]: LinkedInIcon,
+    [ShareOptions.Telegram]: TelegramIcon,
+    [ShareOptions.WhatsApp]: WhatsAppIcon,
+    [ShareOptions.Email]: EmailIcon,
+};
+
+/**
+ * Returns share buttons list.
+ */
+const shareButtons = computed((): ShareButtonConfig[] => {
+    return [
+        new ShareButtonConfig(
+            ShareOptions.Reddit,
+            '#5f99cf',
+            `https://reddit.com/submit/?url=${props.link}&resubmit=true&title=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage`,
+            images[ShareOptions.Reddit],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.Facebook,
+            '#3b5998',
+            `https://facebook.com/sharer/sharer.php?u=${props.link}`,
+            images[ShareOptions.Facebook],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.Twitter,
+            '#55acee',
+            `https://twitter.com/intent/tweet/?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&url=${props.link}`,
+            images[ShareOptions.Twitter],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.HackerNews,
+            '#f60',
+            `https://news.ycombinator.com/submitlink?u=${props.link}&t=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage`,
+            images[ShareOptions.HackerNews],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.LinkedIn,
+            '#0077b5',
+            `https://www.linkedin.com/shareArticle?mini=true&url=${props.link}&title=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&summary=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&source=${props.link}`,
+            images[ShareOptions.LinkedIn],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.Telegram,
+            '#54a9eb',
+            `https://telegram.me/share/url?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&url=${props.link}`,
+            images[ShareOptions.Telegram],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.WhatsApp,
+            '#25d366',
+            `whatsapp://send?text=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage%20${props.link}`,
+            images[ShareOptions.WhatsApp],
+        ),
+        new ShareButtonConfig(
+            ShareOptions.Email,
+            '#777',
+            `mailto:?subject=Shared%20using%20Storj%20Decentralized%20Cloud%20Storage&body=${props.link}`,
+            images[ShareOptions.Email],
+        ),
+    ];
+});
 </script>
 
 <style scoped lang="scss">

diff --git a/web/satellite/src/types/browser.ts b/web/satellite/src/types/browser.ts
@@ -1,6 +1,10 @@
 // Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
+import { VueConstructor } from 'vue';
+
+import EmailIcon from '../../static/images/objects/email.svg';
+
 /**
  * Exposes all properties and methods present and available in the file/browser objects in Browser.
  */
@@ -10,3 +14,23 @@ export interface BrowserFile extends File {
   Size: number;
   type: string;
 }
+
+export enum ShareOptions {
+  Reddit = 'Reddit',
+  Facebook = 'Facebook',
+  Twitter = 'Twitter',
+  HackerNews = 'Hacker News',
+  LinkedIn = 'LinkedIn',
+  Telegram = 'Telegram',
+  WhatsApp = 'WhatsApp',
+  Email = 'E-Mail',
+}
+
+export class ShareButtonConfig {
+    constructor(
+      public label: ShareOptions = ShareOptions.Email,
+      public color: string = 'white',
+      public link: string = '',
+      public image: VueConstructor = EmailIcon,
+    ) {}
+}