feat: refactor send location

src/views/components/MessageReact.js

@@ -15,14 +15,14 @@ export default {
         }
     },
     methods: {
-        messageModal() {
+        openModal() {
             $('#modalMessageReaction').modal({
                 onApprove: function () {
                     return false;
                 }
             }).modal('show');
         },
-        async messageProcess() {
+        async handleSubmit() {
             try {
                 let response = await this.messageApi()
                 showSuccessInfo(response)
@@ -31,28 +31,24 @@ export default {
                 showErrorInfo(err)
             }
         },
-        messageApi() {
-            return new Promise(async (resolve, reject) => {
-                try {
-                    this.loading = true;
-                    let payload = new FormData();
-                    payload.append("phone", this.phone_id)
-                    payload.append("emoji", this.emoji)
-                    let response = await http.post(`/message/${this.message_id}/reaction`, payload)
-                    this.messageReset();
-                    resolve(response.data.message)
-                } catch (error) {
-                    if (error.response) {
-                        reject(error.response.data.message)
-                    } else {
-                        reject(error.message)
-                    }
-                } finally {
-                    this.loading = false;
+        async messageApi() {
+            this.loading = true;
+            try {
+                const payload = { phone: this.phone_id, emoji: this.emoji }
+                let response = await window.http.post(`/message/${this.message_id}/reaction`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
                 }
-            })
+            } finally {
+                this.loading = false;
+            }
         },
-        messageReset() {
+        handleReset() {
             this.phone = '';
             this.message_id = '';
             this.emoji = '';
@@ -60,7 +56,7 @@ export default {
         },
     },
     template: `
-    <div class="red card" @click="messageModal()" style="cursor: pointer">
+    <div class="red card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui red right ribbon label">Message</a>
             <div class="header">React Message</div>
@@ -106,7 +102,7 @@ export default {
         </div>
         <div class="actions">
             <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
-                 @click="messageProcess">
+                 @click="handleSubmit">
                 Send
                 <i class="send icon"></i>
             </div>

src/views/components/MessageRevoke.js

@@ -14,14 +14,14 @@ export default {
         }
     },
     methods: {
-        messageModal() {
+        openModal() {
             $('#modalMessageRevoke').modal({
                 onApprove: function () {
                     return false;
                 }
             }).modal('show');
         },
-        async messageProcess() {
+        async handleSubmit() {
             try {
                 let response = await this.messageApi()
                 showSuccessInfo(response)
@@ -30,34 +30,31 @@ export default {
                 showErrorInfo(err)
             }
         },
-        messageApi() {
-            return new Promise(async (resolve, reject) => {
-                try {
-                    this.loading = true;
-                    let payload = new FormData();
-                    payload.append("phone", this.phone_id)
-                    let response = await http.post(`/message/${this.message_id}/revoke`, payload)
-                    this.messageReset();
-                    resolve(response.data.message)
-                } catch (error) {
-                    if (error.response) {
-                        reject(error.response.data.message)
-                    } else {
-                        reject(error.message)
-                    }
-                } finally {
-                    this.loading = false;
+        async messageApi() {
+            this.loading = true;
+            try {
+                const payload = { phone: this.phone_id }
+                let response = await window.http.post(`/message/${this.message_id}/revoke`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
                 }
-            })
+            } finally {
+                this.loading = false;
+            }
         },
-        messageReset() {
+        handleReset() {
             this.phone = '';
             this.message_id = '';
             this.type = 'user';
         },
     },
     template:`
-    <div class="red card" @click="messageModal()" style="cursor: pointer">
+    <div class="red card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui red right ribbon label">Message</a>
             <div class="header">Revoke Message</div>
@@ -97,7 +94,7 @@ export default {
         </div>
         <div class="actions">
             <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
-                 @click="messageProcess">
+                 @click="handleSubmit">
                 Send
                 <i class="send icon"></i>
             </div>

src/views/components/MessageUpdate.js

@@ -15,14 +15,14 @@ export default {
         }
     },
     methods: {
-        messageModal() {
+        openModal() {
             $('#modalMessageUpdate').modal({
                 onApprove: function () {
                     return false;
                 }
             }).modal('show');
         },
-        async messageProcess() {
+        async handleSubmit() {
             try {
                 let response = await this.messageApi()
                 showSuccessInfo(response)
@@ -31,31 +31,25 @@ export default {
                 showErrorInfo(err)
             }
         },
-        messageApi() {
-            return new Promise(async (resolve, reject) => {
-                try {
-                    this.loading = true;
-
-                    const payload = {
-                        phone: this.phone_id,
-                        message: this.new_message
-                    }
+        async messageApi() {
+            this.loading = true;
+            try {
+                const payload = { phone: this.phone_id, message: this.new_message }
 
-                    let response = await http.post(`/message/${this.message_id}/update`, payload)
-                    this.messageReset();
-                    resolve(response.data.message)
-                } catch (error) {
-                    if (error.response) {
-                        reject(error.response.data.message)
-                    } else {
-                        reject(error.message)
-                    }
-                } finally {
-                    this.loading = false;
+                let response = await window.http.post(`/message/${this.message_id}/update`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
                 }
-            })
+            } finally {
+                this.loading = false;
+            }
         },
-        messageReset() {
+        handleReset() {
             this.type = 'user';
             this.phone = '';
             this.message_id = '';
@@ -64,7 +58,7 @@ export default {
         },
     },
     template: `
-    <div class="red card" @click="messageModal()" style="cursor: pointer">
+    <div class="red card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui red right ribbon label">Message</a>
             <div class="header">Update Message</div>
@@ -109,7 +103,7 @@ export default {
         </div>
         <div class="actions">
             <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
-                 @click="messageProcess">
+                 @click="handleSubmit">
                 Update
                 <i class="send icon"></i>
             </div>

src/views/components/SendAudio.js

@@ -13,14 +13,14 @@ export default {
         }
     },
     methods: {
-        sendModal() {
+        openModal() {
             $('#modalAudioSend').modal({
                 onApprove: function () {
                     return false;
                 }
             }).modal('show');
         },
-        async sendProcess() {
+        async handleSubmit() {
             try {
                 let response = await this.sendApi()
                 showSuccessInfo(response)
@@ -29,35 +29,33 @@ export default {
                 showErrorInfo(err)
             }
         },
-        sendApi() {
-            return new Promise(async (resolve, reject) => {
-                try {
-                    this.loading = true;
-                    let payload = new FormData();
-                    payload.append("phone", this.phone_id)
-                    payload.append("audio", $("#file")[0].files[0])
-                    let response = await http.post(`/send/audio`, payload)
-                    this.sendReset();
-                    resolve(response.data.message)
-                } catch (error) {
-                    if (error.response) {
-                        reject(error.response.data.message)
-                    } else {
-                        reject(error.message)
-                    }
-                } finally {
-                    this.loading = false;
+        async sendApi() {
+            this.loading = true;
+            try {
+                let payload = new FormData();
+                payload.append("phone", this.phone_id)
+                payload.append("audio", $("#file")[0].files[0])
+                const response = await window.http.post(`/send/audio`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
                 }
-            })
+            } finally {
+                this.loading = false;
+            }
         },
-        sendReset() {
+        handleReset() {
             this.phone = '';
             this.type = 'user';
             $("#file").val('');
         },
     },
     template:`
-    <div class="blue card" @click="sendModal()" style="cursor: pointer">
+    <div class="blue card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui blue right ribbon label">Send</a>
             <div class="header">Send Audio</div>
@@ -101,7 +99,7 @@ export default {
         </div>
         <div class="actions">
             <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
-                 @click="sendProcess">
+                 @click="handleSubmit">
                 Send
                 <i class="send icon"></i>
             </div>

src/views/components/SendLocation.js

@@ -0,0 +1,116 @@
+export default {
+    name: 'SendLocation',
+    data() {
+        return {
+            type: 'user',
+            phone: '',
+            latitude: '',
+            longitude: '',
+            loading: false,
+        }
+    },
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        openModal() {
+            $('#modalSendLocation').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        async handleSubmit() {
+            try {
+                let response = await this.sendApi()
+                showSuccessInfo(response)
+                $('#modalSendLocation').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async sendApi() {
+            this.loading = true;
+            try {
+                const payload = {
+                    phone: this.phone_id,
+                    latitude: this.latitude,
+                    longitude: this.longitude
+                };
+
+                const response = await window.http.post(`/send/location`, payload);
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.phone = '';
+            this.latitude = '';
+            this.longitude = '';
+            this.type = 'user';
+        },
+    },
+    template: `
+    <div class="blue card" @click="openModal()" style="cursor: pointer">
+        <div class="content">
+            <a class="ui blue right ribbon label">Send</a>
+            <div class="header">Send Location</div>
+            <div class="description">
+                Send location to user or group
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal SendLocation  -->
+    <div class="ui small modal" id="modalSendLocation">
+        <i class="close icon"></i>
+        <div class="header">
+            Send Location
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="type" v-model="type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label>Phone / Group ID</label>
+                    <input v-model="phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="phone_id" disabled aria-label="whatsapp_id">
+                </div>
+                <div class="field">
+                    <label>Location Latitude</label>
+                    <input v-model="latitude" type="text" placeholder="Please enter latitude"
+                           aria-label="latitude">
+                </div>
+                <div class="field">
+                    <label>Location Longitude</label>
+                    <input v-model="longitude" type="text" placeholder="Please enter longitude"
+                           aria-label="longitude">
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
+                 @click="handleSubmit">
+                Send
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/components/SendPoll.js

@@ -17,14 +17,14 @@ export default {
         }
     },
     methods: {
-        showModal() {
+        openModal() {
             $('#modalSendPoll').modal({
                 onApprove: function () {
                     return false;
                 }
             }).modal('show');
         },
-        async sendProcess() {
+        async handleSubmit() {
             try {
                 let response = await this.sendApi()
                 window.showSuccessInfo(response)
@@ -33,31 +33,29 @@ export default {
                 window.showErrorInfo(err)
             }
         },
-        sendApi() {
-            return new Promise(async (resolve, reject) => {
-                try {
-                    this.loading = true;
-                    const payload = {
-                        phone: this.phone_id,
-                        question: this.question,
-                        max_answer: this.max_vote,
-                        options: this.options
-                    }
-                    let response = await window.http.post(`/send/poll`, payload)
-                    this.sendReset();
-                    resolve(response.data.message)
-                } catch (error) {
-                    if (error.response) {
-                        reject(error.response.data.message)
-                    } else {
-                        reject(error.message)
-                    }
-                } finally {
-                    this.loading = false;
+        async sendApi() {
+            this.loading = true;
+            try {
+                const payload = {
+                    phone: this.phone_id,
+                    question: this.question,
+                    max_answer: this.max_vote,
+                    options: this.options
+                }
+                const response = await window.http.post(`/send/poll`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
                 }
-            })
+            } finally {
+                this.loading = false;
+            }
         },
-        sendReset() {
+        handleReset() {
             this.phone = '';
             this.type = 'user';
             this.question = '';
@@ -72,7 +70,7 @@ export default {
         }
     },
     template: `
-    <div class="blue card" @click="showModal()" style="cursor: pointer">
+    <div class="blue card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui blue right ribbon label">Send</a>
             <div class="header">Send Poll</div>
@@ -134,7 +132,7 @@ export default {
         </div>
         <div class="actions">
             <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
-                 @click="sendProcess" type="button">
+                 @click="handleSubmit" type="button">
                 Send
                 <i class="send icon"></i>
             </div>

src/views/index.html

@@ -124,15 +124,8 @@
                 </div>
             </div>
         </div>
-        <div class="blue card" @click="sendLocationModal()" style="cursor: pointer">
-            <div class="content">
-                <a class="ui blue right ribbon label">Send</a>
-                <div class="header">Send Location</div>
-                <div class="description">
-                    Send location to user or group
-                </div>
-            </div>
-        </div>
+
+        <send-location></send-location>
         <send-audio></send-audio>
         <send-poll></send-poll>
     </div>
@@ -462,48 +455,6 @@
         </div>
     </div>
 
-    <!--  Modal SendLocation  -->
-    <div class="ui small modal" id="modalSendLocation">
-        <i class="close icon"></i>
-        <div class="header">
-            Send Location
-        </div>
-        <div class="content">
-            <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="location_type" v-model="location_type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="location_phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="location_phone_id" disabled aria-label="whatsapp_id">
-                </div>
-                <div class="field">
-                    <label>Location Latitude</label>
-                    <input v-model="location_latitude" type="text" placeholder="Please enter latitude"
-                           aria-label="latitude">
-                </div>
-                <div class="field">
-                    <label>Location Longitude</label>
-                    <input v-model="location_longitude" type="text" placeholder="Please enter longitude"
-                           aria-label="longitude">
-                </div>
-            </form>
-        </div>
-        <div class="actions">
-            <div class="ui approve positive right labeled icon button" :class="{'loading': this.location_loading}"
-                 @click="sendLocationProcess">
-                Send
-                <i class="send icon"></i>
-            </div>
-        </div>
-    </div>
-
     <!--  Modal UserGroup  -->
     <div class="ui small modal" id="modalUserGroup">
         <i class="close icon"></i>
@@ -676,6 +627,7 @@
     {{ end }}
 </script>
 <script type="module">
+    import SendLocation from "./components/SendLocation.js";
     import SendAudio from "./components/SendAudio.js";
     import SendPoll from "./components/SendPoll.js";
     import MessageUpdate from "./components/MessageUpdate.js";
@@ -1129,69 +1081,6 @@
         }
     }
 
-    const sendLocation = {
-        data() {
-            return {
-                location_type: 'user',
-                location_phone: '',
-                location_latitude: '',
-                location_longitude: '',
-                location_loading: false,
-            }
-        },
-        computed: {
-            location_phone_id() {
-                return this.location_type === 'user' ? `${this.location_phone}@${this.type_user}` : `${this.location_phone}@${this.type_group}`
-            }
-        },
-        methods: {
-            sendLocationModal() {
-                $('#modalSendLocation').modal({
-                    onApprove: function () {
-                        return false;
-                    }
-                }).modal('show');
-            },
-            async sendLocationProcess() {
-                try {
-                    let response = await this.sendLocationApi()
-                    showSuccessInfo(response)
-                    $('#modalSendLocation').modal('hide');
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-            sendLocationApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        this.location_loading = true;
-                        let payload = new FormData();
-                        payload.append("phone", this.location_phone_id)
-                        payload.append("latitude", this.location_latitude)
-                        payload.append("longitude", this.location_longitude)
-                        let response = await http.post(`/send/location`, payload)
-                        this.sendLocationReset();
-                        resolve(response.data.message)
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    } finally {
-                        this.location_loading = false;
-                    }
-                })
-            },
-            sendLocationReset() {
-                this.location_phone = '';
-                this.location_latitude = '';
-                this.location_longitude = '';
-                this.location_type = 'user';
-            },
-        }
-    }
-
     const userGroups = {
         data() {
             return {
@@ -1420,7 +1309,7 @@
 
     Vue.createApp({
         components: {
-            SendAudio, SendPoll,
+            SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
         },
         delimiters: ['[[', ']]'],
@@ -1477,7 +1366,7 @@
         },
         mixins: [
             login, logout, reconnect,
-            sendMessage, sendImage, sendFile, sendVideo, sendContact, sendLocation,
+            sendMessage, sendImage, sendFile, sendVideo, sendContact,
             userGroups, userPrivacy, userAvatar, userInfo
         ]
     }).mount('#app')