refactor(modal): reduce watchers

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/ClusterView.vue

@@ -70,25 +70,25 @@ export default defineComponent({
   },
 
   mounted() {
-    this.routeChange();
+    this.refresh();
   },
 
   created() {
-    utils.bus.on('memories:user-config-changed', this.routeChange);
+    utils.bus.on('memories:user-config-changed', this.refresh);
   },
 
   beforeDestroy() {
-    utils.bus.off('memories:user-config-changed', this.routeChange);
+    utils.bus.off('memories:user-config-changed', this.refresh);
   },
 
   watch: {
     async $route() {
-      this.routeChange();
+      this.refresh();
     },
   },
 
   methods: {
-    async routeChange() {
+    async refresh() {
       try {
         this.items = [];
         this.loading++;

src/components/frame/XImg.vue

@@ -43,7 +43,7 @@ export default defineComponent({
   },
 
   watch: {
-    src(newSrc, oldSrc) {
+    src() {
       this.loadImage();
     },
   },

src/components/modal/FaceDeleteModal.vue

@@ -39,17 +39,15 @@ export default defineComponent({
 
   data: () => ({
     show: false,
-    user: '',
-    name: '',
   }),
 
-  mounted() {
+  computed: {
-    this.refreshParams();
+    name() {
-  },
+      return this.$route.params.name;
+    },
 
-  watch: {
+    user() {
-    $route() {
+      return this.$route.params.user;
-      this.refreshParams();
     },
   },
 
@@ -59,21 +57,12 @@ export default defineComponent({
     },
 
     open() {
-      const user = this.$route.params.user || '';
+      if (this.user !== utils.uid) {
-      if (this.$route.params.user !== utils.uid) {
+        showError(this.t('memories', 'Only user "{user}" can delete this person', { user: this.user }));
-        showError(
-          this.t('memories', 'Only user "{user}" can delete this person', {
-            user,
-          }),
-        );
         return;
       }
-      this.show = true;
-    },
 
-    refreshParams() {
+      this.show = true;
-      this.user = this.$route.params.user;
-      this.name = this.$route.params.name;
     },
 
     async save() {
@@ -83,15 +72,11 @@ export default defineComponent({
         } else {
           await dav.faceRecognitionSetPersonVisibility(this.name, false);
         }
-        this.$router.push({ name: this.$route.name as string });
+        this.$router.push({ name: this.$route.name as string }); // "recognize" or "facerecognition"
         this.close();
       } catch (error) {
         console.log(error);
-        showError(
+        showError(this.t('photos', 'Failed to delete {name}.', { name: this.name }));
-          this.t('photos', 'Failed to delete {name}.', {
-            name: this.name,
-          }),
-        );
       }
     },
   },

src/components/modal/FaceEditModal.vue

@@ -8,7 +8,7 @@
       <NcTextField
         class="field"
         :autofocus="true"
-        :value.sync="name"
+        :value.sync="input"
         :label="t('memories', 'Name')"
         :label-visible="false"
         :placeholder="t('memories', 'Name')"
@@ -49,24 +49,20 @@ export default defineComponent({
 
   data: () => ({
     show: false,
-    user: '',
+    input: '',
-    name: '',
-    oldName: '',
   }),
 
-  mounted() {
-    this.refreshParams();
-  },
-
-  watch: {
-    $route() {
-      this.refreshParams();
-    },
-  },
-
   computed: {
+    name() {
+      return this.$route.params.name;
+    },
+
+    user() {
+      return this.$route.params.user;
+    },
+
     canSave() {
-      return this.name !== this.oldName && this.name !== '' && isNaN(Number(this.name));
+      return this.input && this.name !== this.input && isNaN(Number(this.input));
     },
   },
 
@@ -76,49 +72,37 @@ export default defineComponent({
     },
 
     open() {
-      const user = this.$route.params.user || '';
+      if (this.user !== utils.uid) {
-      if (this.$route.params.user !== utils.uid) {
+        showError(this.t('memories', 'Only user "{user}" can update this person', { user: this.user }));
-        showError(
-          this.t('memories', 'Only user "{user}" can update this person', {
-            user,
-          }),
-        );
         return;
       }
+
+      this.input = isNaN(Number(this.name)) ? this.name : String();
       this.show = true;
     },
 
-    refreshParams() {
-      this.user = String(this.$route.params.user);
-      this.name = String(this.$route.params.name);
-      this.oldName = this.name;
-
-      // if name is number then it is blank
-      if (!isNaN(Number(this.name))) {
-        this.name = String();
-      }
-    },
-
     async save() {
       if (!this.canSave) return;
 
       try {
         if (this.routeIsRecognize) {
-          await dav.recognizeRenameFace(this.user, this.oldName, this.name);
+          await dav.recognizeRenameFace(this.user, this.name, this.input);
         } else {
-          await dav.faceRecognitionRenamePerson(this.oldName, this.name);
+          await dav.faceRecognitionRenamePerson(this.name, this.input);
         }
+
         this.$router.replace({
           name: this.$route.name as string,
-          params: { user: this.user, name: this.name },
+          params: { user: this.user, name: this.input },
         });
+
         this.close();
       } catch (error) {
         console.log(error);
         showError(
           this.t('photos', 'Failed to rename {oldName} to {name}.', {
-            oldName: this.oldName,
+            oldName: this.name,
-            name: this.name,
+            name: this.input,
           }),
         );
       }

src/components/modal/FaceList.vue

@@ -59,24 +59,28 @@ export default defineComponent({
   },
 
   data: () => ({
-    user: String(),
-    name: String(),
     list: null as ICluster[] | null,
     fuse: null as Fuse<ICluster> | null,
     search: String(),
   }),
 
-  watch: {
-    $route() {
-      this.refreshParams();
-    },
-  },
-
   mounted() {
-    this.refreshParams();
+    this.refresh();
   },
 
   computed: {
+    user() {
+      return this.$route.params.user;
+    },
+
+    name() {
+      return this.$route.params.name;
+    },
+
+    backend() {
+      return this.$route.name as 'recognize' | 'facerecognition';
+    },
+
     filteredList() {
       if (!this.list || !this.search || !this.fuse) return this.list || [];
       return this.fuse.search(this.search).map((r) => r.item);
@@ -84,23 +88,20 @@ export default defineComponent({
   },
 
   methods: {
-    async refreshParams() {
+    async refresh() {
-      this.user = this.$route.params.user;
+      try {
-      this.name = this.$route.params.name;
+        this.list = null;
-      this.list = null;
+        const faces = await dav.getFaceList(this.backend);
-      this.search = '';
+        this.list = faces.filter((c: IFace) => c.user_id === this.user && String(c.name || c.cluster_id) !== this.name);
-
+        this.fuse = new Fuse(this.list, { keys: ['name'] });
-      const backend = this.routeIsRecognize ? 'recognize' : this.routeIsFaceRecognition ? 'facerecognition' : null;
+      } catch (e) {
-      console.assert(backend, '[BUG] Invalid route for FaceList');
+        showError(this.t('memories', 'Failed to load faces'));
-
+        console.error(e);
-      const faces = await dav.getFaceList(backend!);
+      }
-      this.list = faces.filter((c: IFace) => c.user_id === this.user && String(c.name || c.cluster_id) !== this.name);
-
-      this.fuse = new Fuse(this.list, { keys: ['name'] });
     },
 
     async addFace() {
-      let name: string = String();
+      let name = String();
 
       try {
         // TODO: use a proper dialog