refactor: drop useComposer hoc and replace it with useEdit composable (#3)

Author: themustafaomar

src/components/dashboard/bar/SettingsMenu.vue

@@ -12,7 +12,7 @@
         <v-img
           aspect-ratio="1/1"
           cover
-          :src="authStore.user.avatar"
+          :src="authStore.user.avatar_url"
           width="40"
           class="rounded-pill"
         >

src/components/dashboard/chat/Toolbar.vue

@@ -15,7 +15,7 @@
     <v-list-item
       v-else
       lines="two"
-      :prepend-avatar="conversation.avatar"
+      :prepend-avatar="conversation.avatar_url"
       density="comfortable"
       :title="conversation.name"
       subtitle="Driver"

src/components/dashboard/chat/Typing.vue

@@ -6,7 +6,7 @@
     </audio>
 
     <v-avatar>
-      <v-img cover :src="partner.avatar"></v-img>
+      <v-img cover :src="partner.avatar_url"></v-img>
     </v-avatar>
 
     <div class="bg-grey-lighten-3 rounded-lg ms-4 py-2 px-3">

src/components/dashboard/chat/conversations/List.vue

@@ -20,7 +20,7 @@
           class="py-3"
         >
           <template #prepend>
-            <v-avatar :image="conversation.avatar" />
+            <v-avatar :image="conversation.avatar_url" />
           </template>
 
           <h4 class="font-weight-medium d-flex align-center justify-space-between">

src/components/dashboard/chat/messages/Text.vue

@@ -4,7 +4,7 @@
     :class="{ 'justify-start': !current, 'flex-end flex-row-reverse': current }"
   >
     <v-avatar v-if="data.type === 'text'" size="40">
-      <v-img cover :src="data.user.avatar"></v-img>
+      <v-img cover :src="data.user.avatar_url"></v-img>
     </v-avatar>
 
     <!-- The message body -->

src/components/dashboard/chat/messages/Voice.vue

@@ -7,7 +7,7 @@
       <template #badge>
         <v-icon size="23" color="grey-darken-2">mdi-microphone</v-icon>
       </template>
-      <v-avatar size="40" :image="data.user.avatar" />
+      <v-avatar size="40" :image="data.user.avatar_url" />
     </v-badge>
 
     <!-- The message body -->

src/components/dashboard/profile/Avatar.vue

@@ -8,7 +8,7 @@
     icon="mdi-camera"
     style="cursor: pointer"
   >
-    <v-avatar size="90" :image="url ? url : user.avatar" />
+    <v-avatar size="90" :image="url ? url : user.avatar_url" />
   </v-badge>
 
   <input @change="init" ref="uploader" type="file" accept="image/*" class="d-none" />

src/components/dashboard/roles/Compose.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-dialog width="700">
+  <v-dialog v-model="isActive" @update:model-value="close" width="700">
     <v-card rounded="lg">
       <v-card-title>
-        <h3 class="font-weight-regular text-h6">{{ compose.title }}</h3>
+        <h3 class="font-weight-regular text-h6">{{ action.title }}</h3>
       </v-card-title>
 
       <v-skeleton-loader
@@ -44,16 +44,16 @@
                     :value="item[index].id"
                     hide-details
                     color="primary"
-                  ></v-checkbox>
-                  <v-checkbox v-else :label="label" hide-details disabled></v-checkbox>
+                  />
+                  <v-checkbox v-else :label="label" hide-details disabled />
                 </td>
               </tr>
             </tbody>
           </v-table>
         </v-card-text>
 
         <v-card-actions class="pa-4">
-          <v-btn @click="isOpen = false" variant="flat" color="red">Discard</v-btn>
+          <v-btn @click="close" variant="flat" color="red">Discard</v-btn>
           <v-btn
             :disabled="form.busy || !meta.valid"
             :loading="form.busy"
@@ -62,7 +62,7 @@
             class="ms-4"
             @click="saveOrUpdate"
           >
-            {{ compose.action }}
+            {{ action.saveButton }}
           </v-btn>
         </v-card-actions>
       </Form>
@@ -71,101 +71,59 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import { Form } from 'vee-validate'
 import { useAppStore } from '@/stores/app'
-import { useForm } from '@/composables/useForm'
+import { useForm, useEdit } from '@/composables'
 import { createRoleValidation } from '@/validations/roles'
+import { groupBy } from '@/utils'
 import axios from '@/plugins/axios'
 
-const emit = defineEmits(['created'])
-const props = defineProps({
-  compose: Object,
-})
+const emit = defineEmits(['created', 'update:modelValue'])
 
 const isLoading = ref(false)
-const updateId = ref(null)
 const permissions = ref([])
 const normalizePermissions = computed(() => groupBy(permissions.value, 'group_name'))
 const { notify } = useAppStore()
 const form = useForm({
   name: '',
   permissions: [],
 })
-
-// Lifecycle hooks
-
-onMounted(async () => {
-  permissions.value = (await axios.get('/permissions')).data.data
-})
-
-props.compose.onUpdate(() => {
-  const data = props.compose.data
-  if (data) {
-    form.fill({
-      name: data.name,
-      permissions: permissions.value.map(({ id }) => id),
-    })
-    form._method = 'PUT'
-    updateId.value = data.id
-  } else {
-    form.reset()
-  }
+const { isActive, isEditing, onCreate, onEdit, editPayload, close, action } = useEdit(form, {
+  title: 'Role',
 })
 
-// Functions
-
-const groupBy = (xs, key) => {
-  return xs.reduce((rv, x) => {
-    ;(rv[x[key]] = rv[x[key]] || []).push(x)
-    return rv
-  }, {})
+const fetchPermissions = async () => {
+  const { data } = await axios.get('/permissions')
+  permissions.value = data.data
 }
 
-const saveOrUpdate = () => {
-  props.compose.isUpdating ? _update() : _save()
-}
-
-const _update = () => {
-  form.post(`/roles/${updateId.value}`).then(() => _reset())
-}
+fetchPermissions()
 
-const _save = () => {
-  form.post('/roles').then(() => _reset())
+const saveOrUpdate = async () => {
+  if (isEditing()) {
+    await form.post(`/roles/${editPayload.value.id}`)
+  } else {
+    await form.post('/roles')
+  }
+  _reset()
 }
 
-// const prepareForUpdate = (id) => {
-//   isLoading.value = true
-//   axios.get(`/roles/${id}`).then(({ data: { data } }) => {
-//     updateId.value = id
-//     isLoading.value = false
-//     form.fill({
-//       name: data.name,
-//       permissions: data.permissions.map(({ id }) => id),
-//     })
-//     form._method = 'PUT'
-//   })
-// }
 const _reset = () => {
-  props.compose.close()
   emit('created')
-  notify(
-    props.compose.isUpdating
-      ? 'The role has been successfully updated!'
-      : 'A new role has been successfully created!'
-  )
+  const message = isEditing()
+    ? 'The role has been successfully updated!'
+    : 'A new role has been successfully created!'
+  notify(message)
+  close()
 }
 
-// const open = (id) => {
-//   if (id) {
-//     isEdit.value = true
-//     prepareForUpdate(id)
-//   } else {
-//     isEdit.value = false
-//     form.reset()
-//   }
-//   isOpen.value = true
-// }
-
-// defineExpose({ open })
+defineExpose({
+  create: onCreate,
+  edit: (data) =>
+    onEdit({
+      ...data,
+      permissions: data.permissions.map(({ id }) => id),
+    }),
+})
 </script>

src/components/dashboard/users/Compose.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-dialog width="700">
+  <v-dialog v-model="isActive" @update:model-value="close" width="700">
     <v-card rounded="lg">
       <v-card-title class="px-6 py-3 border-b">
-        <h4 class="font-weight-medium">{{ compose.title }}</h4>
+        <h4 class="font-weight-medium">{{ action.title }}</h4>
       </v-card-title>
 
       <v-skeleton-loader
@@ -73,20 +73,21 @@
             ]"
             required
           />
+          <pre>{{ editPayload }}</pre>
 
           <app-uploader
             v-model="form.avatar"
             required
             label="Upload a profile picture"
             accept="image/*"
             extensions="jpg,svg,jpeg,png,bmp,gif,webp"
-            :preview-url="compose.data?.avatar"
-            :is-updating="compose.isUpdating"
+            :preview-url="editPayload?.avatar_url"
+            :is-updating="isEditing()"
           />
         </v-card-text>
 
         <v-card-actions class="border-t px-4 py-3 mt-3">
-          <v-btn @click="compose.close()" variant="plain" color="red">Discard</v-btn>
+          <v-btn @click="close" variant="plain" color="red">Discard</v-btn>
 
           <v-btn
             type="submit"
@@ -96,7 +97,7 @@
             color="primary"
             class="ms-4"
           >
-            {{ compose.action }}
+            {{ action.saveButton }}
           </v-btn>
         </v-card-actions>
       </Form>
@@ -105,18 +106,16 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { Form } from 'vee-validate'
 import { useAppStore } from '@/stores/app'
-import { useForm } from '@/composables/useForm'
+import { useForm, useEdit } from '@/composables'
 import { composeUserValidation } from '@/validations/users'
 import axios from '@/plugins/axios'
 
-const emit = defineEmits(['created'])
-const props = defineProps({ compose: Object })
+const emit = defineEmits(['created', 'update:modelValue'])
 
 const isLoading = ref(false)
-const updateId = ref(null)
 const roles = ref([])
 const { notify } = useAppStore()
 const form = useForm({
@@ -126,52 +125,45 @@ const form = useForm({
   role: '',
   status: 1,
   team: '',
+  avatar: null,
 })
-
-props.compose.onUpdate(() => {
-  const data = props.compose.data
-  if (data) {
-    form.fill({
-      ...data,
-      role: data.role.id,
-      status: data.status.value,
-    })
-    form._method = 'PUT'
-    updateId.value = data.id
-  } else {
-    form.reset()
-  }
+const { isActive, isEditing, onCreate, onEdit, editPayload, close, action } = useEdit(form, {
+  title: 'User',
 })
 
-// Lifeycle hooks
-
-onMounted(async () => {
+const fetchRoles = async () => {
   roles.value = (await axios.get('/roles')).data.data
   form.role = roles.value.find((role) => role.name === 'admin').id
-})
-
-// Functions
-
-const saveOrUpdate = () => {
-  props.compose.isUpdating ? _update() : _save()
 }
 
-const _save = () => {
-  form.post('/users').then(() => _reset())
-}
+fetchRoles()
 
-const _update = () => {
-  form.post(`/users/${updateId.value}`).then(() => _reset())
+const saveOrUpdate = async () => {
+  if (isEditing()) {
+    await form.post(`/users/${editPayload.value.id}`)
+  } else {
+    await form.post('/users')
+  }
+  _reset()
 }
 
 const _reset = () => {
-  props.compose.close()
   emit('created')
   notify(
-    props.compose.isUpdating
+    isEditing()
       ? 'The user info has been successfully updated!'
       : 'A new user has been successfully created!'
   )
-  form.reset()
+  close()
 }
+
+defineExpose({
+  create: onCreate,
+  edit: (data) =>
+    onEdit({
+      ...data,
+      role: data.role.id,
+      status: data.status.value,
+    }),
+})
 </script>

src/composables/index.ts

@@ -0,0 +1,5 @@
+export { useForm } from './useForm'
+export { useUser } from './useUser'
+export { useEdit } from './useEdit'
+export { useIsDark } from './useIsDark'
+export { useLoader } from './useLoader'