From 90916e70b2e8acd5469efc32208c84bf3eafcf57 Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Sat, 23 Oct 2021 22:23:58 +0300
Subject: [PATCH] Add notifications, notification on subscribe/unsubscribe in
 channels and subscriptions pages

---
 package.json                         |  1 +
 src/App.vue                          |  1 +
 src/components/Channel.vue           | 12 ++++++++++++
 src/components/SubscriptionsPage.vue | 12 ++++++++++++
 src/locales/en.json                  |  4 ++++
 src/main.js                          |  3 +++
 yarn.lock                            |  5 +++++
 7 files changed, 38 insertions(+)

diff --git a/package.json b/package.json
index 92d726c2..6ee652e8 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
+        "@kyvg/vue3-notification": "^2.3.4",
         "core-js": "3.18.2",
         "css-loader": "^6.4.0",
         "dompurify": "^2.3.3",
diff --git a/src/App.vue b/src/App.vue
index bc5a75e5..de167463 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <template>
+    <notifications />
     <div class="uk-flex">
         <Menu style="flexShrink: 0" />
         <main
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 7aad2336..016d1b3b 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -120,6 +120,18 @@ export default {
                 },
             });
             this.subscribed = !this.subscribed;
+
+            var notifText;
+            if (this.subscribed) {
+                notifText = this.$t("notifications.notif_subscribe");
+            } else {
+                notifText = this.$t("notifications.notif_unsubscribe");
+            }
+
+            this.$notify({
+                text: notifText,
+                type: "success",
+            });
         },
     },
 };
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 5b4e8736..fc2215c0 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -141,6 +141,18 @@ export default {
                 },
             });
             subscription.subscribed = !subscription.subscribed;
+
+            var notifText;
+            if (this.subscribed) {
+                notifText = this.$t("notifications.notif_subscribe");
+            } else {
+                notifText = this.$t("notifications.notif_unsubscribe");
+            }
+
+            this.$notify({
+                text: notifText,
+                type: "success",
+            });
         },
         exportHandler() {
             const subscriptions = [];
diff --git a/src/locales/en.json b/src/locales/en.json
index 4dd5fa70..aef73f40 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -73,6 +73,10 @@
         "no_subscriptions_in_subscriptions_2": "to see your subscriptions here.",
         "no_subscriptions_in_subscriptions_title": "No subscriptions yet"
     },
+    "notifications": {
+        "notif_subscribe": "Successfully subscribed!",
+        "notif_unsubscribe": "Successfully unsubscribed!"
+    },
     "comment": {
         "pinned_by": "Pinned by"
     },
diff --git a/src/main.js b/src/main.js
index d6c67e30..6e1b328b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -59,6 +59,8 @@ const timeAgo = new TimeAgo("en-US");
 
 import("./registerServiceWorker");
 
+import Notifications from "@kyvg/vue3-notification";
+
 const mixin = {
     methods: {
         timeFormat: function(duration) {
@@ -259,6 +261,7 @@ window.i18n = i18n;
 const app = createApp(App);
 app.use(i18n);
 app.use(router);
+app.use(Notifications);
 app.mixin(mixin);
 app.component("FontAwesomeIcon", FontAwesomeIcon);
 app.mount("#app");
diff --git a/yarn.lock b/yarn.lock
index 75a519f1..5d54d5d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1067,6 +1067,11 @@
     "@intlify/runtime" "9.1.9"
     "@intlify/shared" "9.1.9"
 
+"@kyvg/vue3-notification@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@kyvg/vue3-notification/-/vue3-notification-2.3.4.tgz#7503647ae1d26a7c58bbf5182b505ca345c0882a"
+  integrity sha512-20Km1L75gncIZCjosT1OKbJl9HhNiOd7LRXqVIqlehHHem9NgBjQhDFz6XGo1RcF0MyA4/BC7kV7tcq/PMT+tA==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"