Don't use Pinia for requestData even in development

package.json

@@ -28,7 +28,6 @@
     "marked": "~4",
     "pako": "~1.0",
     "papaparse": "^5.4.1",
-    "pinia": "^2.0.23",
     "qrcode-generator": "~1",
     "ramda": "~0.27",
     "vue": "~3",

src/components/async-route.vue

@@ -12,12 +12,12 @@ except according to the terms contained in the LICENSE file.
 <template>
   <div v-if="loading === 'tab'">
     <loading :state="showsLoading"/>
-    <component :is="component" v-if="component != null" v-bind="propsAndAttrs"/>
+    <component :is="component" v-if="component != null" v-bind="bindings"/>
   </div>
   <page-body v-else-if="showsLoading">
     <loading :state="true"/>
   </page-body>
-  <component :is="component" v-else-if="component != null" v-bind="propsAndAttrs"/>
+  <component :is="component" v-else-if="component != null" v-bind="bindings"/>
 </template>
 
 <script>
@@ -66,44 +66,14 @@ export default {
     };
   },
   computed: {
-    propsAndAttrs() {
+    bindings() {
       // The main use of this.$attrs is to pass along event listeners to the
       // component.
-      return { ...this.props, ...this.$attrs };
-    },
-    componentNameAndKey() {
-      return [this.componentName, this.k];
+      return { ...this.props, ...this.$attrs, key: this.k };
     }
   },
   watch: {
-    componentNameAndKey([newComponentName], [oldComponentName]) {
-      if (newComponentName !== oldComponentName) {
-        this.load();
-      } else if (this.component != null) {
-        /*
-        If this.k has changed, then we need to re-render the component (unless
-        this.component == null, in which case there is no component to
-        re-render). We will cause a re-render by setting this.component to
-        `null` for a tick.
-
-        Previously, we used the `key` attribute to cause the component to
-        re-render. However, that results in the following lifecycle stages:
-
-          - `beforeUnmount` for the old component
-          - `setup` for the new component
-          - `unmounted` for the old component
-
-        Because we use `unmounted` hooks with requestData, we need `unmounted`
-        for the old component to happen before `setup` for the new component.
-        Otherwise, the new component might try to create a local resource with
-        the same name as one created by the old component, whose local resources
-        haven't been removed yet.
-        */
-        const { component } = this;
-        this.component = null;
-        this.$nextTick(() => { this.component = component; });
-      }
-    }
+    componentName: 'load'
   },
   created() {
     this.load();

src/components/entity/conflict-summary.vue

@@ -109,10 +109,10 @@ const markAsResolved = () => {
     .then(({ data }) => {
       hideConfirm();
       alert.success(t('conflictResolved'));
-      entity.patch(() => {
-        entity.conflict = data.conflict;
-        entity.updatedAt = data.updatedAt;
-      });
+
+      entity.conflict = data.conflict;
+      entity.updatedAt = data.updatedAt;
+
       emit('resolve');
     })
     .catch(noop);

src/components/entity/show.vue

@@ -128,15 +128,14 @@ const afterUpdate = (updatedEntity) => {
   fetchActivityData();
   updateModal.hide();
   alert.success(i18n.t('alert.updateEntity'));
-  entity.patch(() => {
-    // entity.currentVersion will no longer have extended metadata, but we don't
-    // need it to.
-    entity.currentVersion = updatedEntity.currentVersion;
-    entity.updatedAt = updatedEntity.updatedAt;
-    // Update entity.conflict in case a conflict has been resolved by another
-    // user or in another tab.
-    entity.conflict = updatedEntity.conflict;
-  });
+
+  // entity.currentVersion will no longer have extended metadata, but we don't
+  // need it to.
+  entity.currentVersion = updatedEntity.currentVersion;
+  entity.updatedAt = updatedEntity.updatedAt;
+  // Update entity.conflict in case a conflict has been resolved by another user
+  // or in another tab.
+  entity.conflict = updatedEntity.conflict;
 };
 
 const deleteModal = modalData();

src/components/form-attachment/list.vue

@@ -337,17 +337,17 @@ export default {
           if (this.$route !== initialRoute) return;
           if (updates.length === this.uploadStatus.total)
             this.alert.success(this.$tcn('alert.success', updates.length));
-          this.attachments.patch(() => {
-            for (const [name, updatedAt] of updates) {
-              const attachment = this.attachments.get(name);
-              attachment.blobExists = true;
-              attachment.datasetExists = false;
-              attachment.exists = true;
-              attachment.updatedAt = updatedAt;
 
-              this.updatedAttachments.add(name);
-            }
-          });
+          for (const [name, updatedAt] of updates) {
+            const attachment = this.attachments.get(name);
+            attachment.blobExists = true;
+            attachment.datasetExists = false;
+            attachment.exists = true;
+            attachment.updatedAt = updatedAt;
+
+            this.updatedAttachments.add(name);
+          }
+
           this.uploadStatus = { total: 0, remaining: 0, current: null, progress: 0 };
         });
       this.plannedUploads = [];
@@ -362,16 +362,13 @@ export default {
     afterLinkDataset() {
       const { attachment } = this.linkDatasetModal;
       this.linkDatasetModal.hide();
-
       this.alert.success(this.$t('alert.link', {
         attachmentName: attachment.name
       }));
 
-      this.attachments.patch(() => {
-        attachment.datasetExists = true;
-        attachment.blobExists = false;
-        attachment.exists = true;
-      });
+      attachment.datasetExists = true;
+      attachment.blobExists = false;
+      attachment.exists = true;
     }
   }
 };

src/container.js

@@ -11,15 +11,13 @@ except according to the terms contained in the LICENSE file.
 */
 import axios from 'axios';
 import { Translation } from 'vue-i18n';
-import { createPinia } from 'pinia';
 
 import createAlert from './alert';
 import createCentralI18n from './i18n';
 import createCentralRouter from './router';
 import createUnsavedChanges from './unsaved-changes';
 import { $tcn } from './util/i18n';
 import { createRequestData } from './request-data';
-import { noop } from './util/util';
 
 const provide = [
   'alert',
@@ -29,8 +27,6 @@ const provide = [
   'logger'
 ];
 
-const piniaMock = { install: noop };
-
 export default ({
   // `router` must be a function that returns an object. The function will be
   // passed a partial container. It is also possible to create a container
@@ -47,7 +43,6 @@ export default ({
   logger = console
 } = {}) => {
   const container = {
-    pinia: process.env.NODE_ENV === 'development' ? createPinia() : piniaMock,
     i18n: i18n.global,
     alert,
     unsavedChanges,
@@ -64,7 +59,6 @@ export default ({
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$tcn = $tcn;
 
-    app.use(container.pinia);
     app.use(container.requestData);
     if (container.router != null) app.use(container.router);