Task-Upgrade composition api

imports/api/Users/UsersCtrl.ts

@@ -157,12 +157,14 @@ export const updatePersonalDataMethod = new ValidatedMethod({
 	validate({ user }: { user: Meteor.User }) {
 		try {
 			check(user, {
+				_id: String,
 				username: String,
 				emails: [{ address: String, verified: Boolean }],
 				profile: {
 					profile: String,
 					name: String,
-					path: Match.Maybe(String)
+					path: Match.Maybe(String),
+					updated_at: String
 				}
 			});
 		} catch (exception) {

imports/ui/App.vue

@@ -5,20 +5,38 @@
         <component :is="Component"/>
       </transition>
     </router-view>
-    <alert-message/>
-    <loader/>
+    <alert-message ref="alertMessage"/>
+    <loader ref="loader"/>
   </v-app>
 </template>
 
 <script lang="ts">
 import AlertMessage from '@components/Utilities/Alerts/AlertMessage.vue';
 import Loader from '@components/Utilities/Loaders/Loader.vue';
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, provide, ref } from 'vue';
+import { Injections } from '@typings/utilities';
+import mitt from 'mitt';
 
 export default defineComponent({
   name: 'App',
   components: { AlertMessage, Loader },
+  setup() {
+    const alertMessage = ref(null);
+    const loader = ref(null);
+
+    onMounted(() => {
+      provide(Injections.AlertMessage, alertMessage.value);
+      provide(Injections.Loader, loader.value);
+      const emitter = mitt();
+      provide(Injections.Emitter, emitter);
+    })
+
+    return { alertMessage, loader };
+  }
 });
+
+
+
 </script>
 
 <style>

imports/ui/components/ConfigureAccount/GeneralData.vue

@@ -64,77 +64,76 @@
 
 <script lang="ts">
 import profilesMixin from '@mixins/accounts/profiles';
-import validateForm from '@mixins/validateForm';
-import uploadImage from '@mixins/users/uploadImage';
 import { Form, Field, FormContext } from 'vee-validate';
 import { Meteor } from 'meteor/meteor';
 import { User } from '@typings/users';
-import { defineComponent } from 'vue';
+import { defineComponent, inject, reactive, ref } from 'vue';
 import { ResponseMessage } from '@server/utils/ResponseMessage';
 import { useAuthStore } from '/imports/ui/stores/auth';
+import { useFormValidation } from '/imports/ui/composables/forms';
+import { Injections, MeteorError } from '@typings/utilities';
+import { AlertMessageType } from '@components/Utilities/Alerts/AlertMessage.vue';
+import { LoaderType } from '@components/Utilities/Loaders/Loader.vue';
+import { useUploadImage } from '/imports/ui/composables/users/uploadImage';
+import { Emitter, EventType } from 'mitt';
 
 export default defineComponent({
   name: 'GeneralData',
-  mixins: [validateForm, profilesMixin, uploadImage],
+  mixins: [profilesMixin],
   components: {
     Form,
     Field
   },
-  setup() {
+  setup: function () {
     const authStore = useAuthStore();
-    return { authStore };
-  },
-  data() {
-    return {
-      user: {
-        emails: [{ verified: false }],
-        profile: {}
-      } as User,
-      photoFileUser: null,
-      initialValues: {
-        name: '',
-        username: '',
-        email: ''
-      }
-    };
-  },
-  created() {
-    const user = this.authStore.user;
-    if (user) {
-      this.user = {
-        username: user.username,
-        emails: user.emails,
-        profile: {
-          profile: user.profile.profile,
-          name: user.profile.name,
-          path: user.profile.path
-        }
-      };
-      this.initialValues = {
-        name: user.profile.name as string,
-        username: user.username as string,
-        email: user.emails[0].address as string
-      };
-    }
-  },
-  methods: {
-    async saveUser() {
-      if (await this.isFormValid(this.$refs.dataFormObserver as FormContext)) {
-        this.$loader.activate('Updating data. . .');
-        Meteor.call('user.updatePersonalData', { user: this.user, photoFileUser: this.photoFileUser },
-            (err: Meteor.Error, response: ResponseMessage) => {
-              this.$loader.deactivate();
-              if (err) {
-                console.error('Error to save user: ', err);
-                this.$alert.showAlertSimple('error', err.reason);
+    const dataFormObserver = ref<FormContext | null>(null);
+    const alert = inject<AlertMessageType>(Injections.AlertMessage);
+    const loader = inject<LoaderType>(Injections.Loader);
+    const emitter = inject<Emitter<Record<EventType, unknown>>>(Injections.Emitter);
+    const user: User = reactive(authStore.user ? {...authStore.user} : {
+      emails: [{verified: false}],
+      profile: {}
+    });
+    const initialValues = reactive({
+      name: authStore.user?.profile.name || '',
+      username: authStore.user?.username || '',
+      email: authStore.user?.emails[0].address || ''
+    })
+    const photoFileUser = ref(null);
+    const {file, onClickUploadButton} = useUploadImage('fileUpload', (ev) => {
+      user.profile.path = ev.target.result;
+      photoFileUser.value = ev.target.result;
+    })
+
+    const saveUser = async () => {
+      const observer = dataFormObserver.value as FormContext | null;
+      if (observer && alert && await useFormValidation(observer, alert)) {
+        loader?.activate('Updating data . . .');
+        Meteor.call('user.updatePersonalData', {user, photoFileUser: photoFileUser.value},
+            (error: MeteorError, response: ResponseMessage) => {
+              loader?.deactivate();
+              if (error && error instanceof Meteor.Error) {
+                console.error('Error to save user: ', error);
+                alert?.showAlertSimple('error', error.reason + '');
               } else {
-                this.authStore.setUser(Meteor.user());
-                this.emitter.emit('setUserLogged');
-                this.$alert.showAlertSimple('success', response.message);
+                authStore.setUser(Meteor.user() as User);
+                emitter?.emit('setUserLogged');
+                alert?.showAlertSimple('success', response.message + '');
               }
-            });
+            })
       }
-    }
+    };
+
+    return {
+      authStore,
+      dataFormObserver,
+      saveUser,
+      initialValues,
+      photoFileUser,
+      user,
+      file,
+      onClickUploadButton
+    };
   }
 });
 </script>

imports/ui/components/ConfigureAccount/UpdatePassword.vue

@@ -57,8 +57,11 @@
 import JsonHelper from '@mixins/helpers/json';
 import validateForm from '@mixins/validateForm';
 import { Form, Field, FormContext } from 'vee-validate';
-import { defineComponent } from 'vue';
-import { Meteor } from 'meteor/meteor';
+import { defineComponent, inject, reactive, ref } from 'vue';
+import { AlertMessageType } from '@components/Utilities/Alerts/AlertMessage.vue';
+import { Injections, MeteorError } from '@typings/utilities';
+import { useFormValidation } from '/imports/ui/composables/forms';
+import { useNullifyObject } from '/imports/ui/composables/helpers/json';
 
 interface PasswordInput {
   old: string | null;
@@ -73,41 +76,39 @@ export default defineComponent({
     Field
   },
   mixins: [validateForm, JsonHelper],
-  data() {
-    return {
-      password: {
-        old: null,
-        new: null,
-        confirm: null
-      } as PasswordInput,
-      showPass: {
-        old: false,
-        new: false,
-        confirm: false
+  setup() {
+    const passwordFormObserver = ref(null);
+    const alert = inject<AlertMessageType>(Injections.AlertMessage);
+    const password: PasswordInput = reactive({
+      old: null,
+      new: null,
+      confirm: null
+    });
+    const showPass = reactive({
+      old: false,
+      new: false,
+      confirm: false
+    });
+
+    const updatePassword = async () => {
+      const observer = passwordFormObserver.value as FormContext | null;
+      if (observer && alert && await useFormValidation(observer, alert)) {
+        Accounts.changePassword(password.old || '', password.new || '',
+            async (error: MeteorError) => {
+          useNullifyObject(password);
+          observer.resetForm();
+          if (error) {
+            console.error('Error changing password: ', error);
+            alert?.showAlertSimple('error', 'An error occurred while changing the password.');
+            document.getElementById('inputPassword')?.focus();
+          } else {
+            alert?.showAlertSimple('success', 'Password has been updated!');
+          }
+        })
       }
     };
-  },
-  methods: {
-    async updatePassword() {
-      if (await this.isFormValid(this.$refs.passwordFormObserver as FormContext)) {
-        Accounts.changePassword(this.password.old || '', this.password.new || '',
-            async(error: Error | Meteor.Error | Meteor.TypedError | undefined) => {
-              this.setNulls(this.password);
-              this.$refs.passwordFormObserver.resetForm();
-              if (error) {
-                console.error('Error changing password: ', error);
-                this.$alert.showAlertSimple('error', 'An error occurred while changing the password.');
-                document.getElementById('inputPassword').focus();
-              } else {
-                this.$alert.showAlertSimple('success', 'Password has been updated!');
-              }
-            });
-      }
-    }
+
+    return { password, showPass, passwordFormObserver, updatePassword };
   }
 });
 </script>
-
-<style scoped>
-
-</style>

imports/ui/components/UserLogged/UserLogged.vue

@@ -22,8 +22,11 @@
 import { Meteor } from 'meteor/meteor';
 import { User } from '@typings/users';
 import { LogoutHook } from '@typings/accounts';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
 import { useAuthStore } from '/imports/ui/stores/auth';
+import { useRouter } from 'vue-router';
+import { Injections } from '@typings/utilities';
+import { Emitter, EventType } from 'mitt';
 
 declare module Accounts {
   function onLogout(func: Function): LogoutHook;
@@ -33,67 +36,61 @@ export default defineComponent({
   name: 'UserLogged',
   setup() {
     const authStore = useAuthStore();
-    return { authStore };
-  },
-  data() {
-    return {
-      user: {
-        emails: [],
-        profile: {}
-      } as User,
-      onLogoutHook: null as LogoutHook | null
-    };
-  },
-  created() {
-    this.setSession();
-
-  },
-  mounted() {
-    this.emitter.on('setUserLogged', () => {
-      this.setSession();
+    const router = useRouter();
+    const emitter = inject<Emitter<Record<EventType, unknown>>>(Injections.Emitter);
+    const user: User = reactive({
+      emails: [],
+      profile: {}
     });
-    this.onLogoutHook = Accounts.onLogout(() => {
-      this.closeFrontSession();
+    const onLogoutHook = ref<LogoutHook | null>(null);
+
+    onMounted(() => {
+      emitter?.on('setUserLogged', setSession);
+      onLogoutHook.value = Accounts.onLogout(closeFrontSession);
     });
-  },
-  methods: {
-    closeSession() {
-      if (this.onLogoutHook) {
-        this.onLogoutHook.stop();
+
+    const closeSession = () => {
+      if (onLogoutHook.value) {
+        onLogoutHook.value?.stop();
         Meteor.logout();
-        this.authStore.logout();
-        this.$router.push({ name: 'login' });
+        authStore.logout();
+        router.push({ name: 'login' });
       }
-    },
-    closeFrontSession() {
-      if (this.onLogoutHook) {
-        this.onLogoutHook.stop();
-        this.authStore.logout();
-        this.$router.push({ name: 'login' });
+    };
+
+    const closeFrontSession = () => {
+      if (onLogoutHook.value) {
+        onLogoutHook.value?.stop();
+        authStore.logout();
+        router.push({ name: 'login'});
       }
-    },
-    setSession() {
+    };
+
+    const setSession = () => {
       if (Meteor.userId() !== null) {
-        this.user = this.authStore.user || {
+        Object.assign(user, authStore.user || {
           emails: [],
           profile: {}
-        };
+        });
       } else {
-        this.closeSession();
+        closeSession();
       }
     }
-  },
-  computed: {
-    usernameInitials() {
+
+    const usernameInitials = computed(() => {
       let initials = '';
-      if (this.user?.username) {
-        const words = this.user.username.split(' ');
+      if (user.username) {
+        const words = user.username.split(' ');
         initials = words.reduce((acc, word) => {
           return acc + word[0];
         }, '');
       }
       return initials.toUpperCase();
-    }
+    });
+
+    setSession();
+
+    return { user, usernameInitials, closeSession };
   }
 });
 </script>