refactor: remove vue-rx dependency

components/collections/ChooseType.vue

@@ -54,25 +54,27 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import gql from "graphql-tag"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     doc: Boolean,
     show: Boolean,
   },
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUserInfo$, null),
+    }
+  },
   data() {
     return {
       skipTeamsFetching: true,
     }
   },
-  subscriptions() {
-    return {
-      currentUser: currentUserInfo$,
-    }
-  },
   apollo: {
     myTeams: {
       query: gql`
@@ -96,12 +98,12 @@ export default {
       this.$apollo.queries.myTeams.refetch()
       this.skipTeamsFetching = false
     },
-    updateCollectionsType(tabID) {
+    updateCollectionsType(tabID: string) {
       this.$emit("update-collection-type", tabID)
     },
-    updateSelectedTeam(team) {
+    updateSelectedTeam(team: any) {
       this.$emit("update-selected-team", team)
     },
   },
-}
+})
 </script>

components/collections/ImportExport.vue

@@ -166,19 +166,27 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
 import * as teamUtils from "~/helpers/teams/utils"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restCollections$,
   setRESTCollections,
   appendRESTCollections,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
     collectionsType: { type: Object, default: () => {} },
   },
+  setup() {
+    return {
+      myCollections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showJsonCode: false,
@@ -187,12 +195,6 @@ export default {
       collectionJson: "",
     }
   },
-  subscriptions() {
-    return {
-      myCollections: restCollections$,
-      currentUser: currentUser$,
-    }
-  },
   methods: {
     async createCollectionGist() {
       this.getJSONCollection()
@@ -547,5 +549,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/graphql/ImportExport.vue

@@ -91,21 +91,23 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   graphqlCollections$,
   setGraphqlCollections,
   appendGraphqlCollections,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
-  subscriptions() {
+  setup() {
     return {
-      collections: graphqlCollections$,
-      currentUser: currentUser$,
+      collections: useReadonlyStream(graphqlCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
     }
   },
   computed: {
@@ -388,5 +390,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/graphql/index.vue

@@ -122,9 +122,12 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import clone from "lodash/clone"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     // Whether to activate the ability to pick items (activates 'select' events)
     savingMode: { type: Boolean, default: false },
@@ -133,6 +136,11 @@ export default {
     // Whether to show the 'New' and 'Import/Export' actions
     showCollActions: { type: Boolean, default: true },
   },
+  setup() {
+    return {
+      collections: useReadonlyStream(graphqlCollections$, []),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -152,14 +160,9 @@ export default {
       filterText: "",
     }
   },
-  subscriptions() {
-    return {
-      collections: graphqlCollections$,
-    }
-  },
   computed: {
     filteredCollections() {
-      const collections = this.collections
+      const collections = clone(this.collections)
 
       if (!this.filterText) return collections
 
@@ -270,5 +273,5 @@ export default {
       this.$data.editingRequestIndex = undefined
     },
   },
-}
+})
 </script>

components/collections/index.vue

@@ -173,6 +173,7 @@
 <script>
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -186,14 +187,28 @@ import {
   removeRESTRequest,
   editRESTRequest,
 } from "~/newstore/collections"
+import {
+  useReadonlyStream,
+  useStreamSubscriber,
+} from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
     saveRequest: Boolean,
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeTo: subscribeToStream,
+
+      collections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -219,12 +234,6 @@ export default {
       teamCollectionsNew: [],
     }
   },
-  subscriptions() {
-    return {
-      collections: restCollections$,
-      currentUser: currentUser$,
-    }
-  },
   computed: {
     showTeamCollections() {
       if (this.currentUser == null) {
@@ -294,7 +303,7 @@ export default {
     },
   },
   mounted() {
-    this.$subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
+    this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
       this.teamCollectionsNew = cloneDeep(colls)
     })
   },
@@ -658,5 +667,5 @@ export default {
       }
     },
   },
-}
+})
 </script>