feat: refactor user info

src/views/components/AccountUserInfo.js

@@ -0,0 +1,113 @@
+export default {
+    name: 'AccountUserInfo',
+    data() {
+        return {
+            type: 'user',
+            phone: '',
+            //
+            name: null,
+            status: null,
+            devices: [],
+            //
+            loading: false,
+        }
+    },
+
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        async openModal() {
+            this.handleReset();
+            $('#modalUserInfo').modal('show');
+        },
+        async handleSubmit() {
+            try {
+                await this.infoApi();
+                showSuccessInfo("Info fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async infoApi() {
+            this.loading = true;
+            try {
+                let response = await http.get(`/user/info?phone=${this.phone_id}`)
+                this.name = response.data.results.verified_name;
+                this.status = response.data.results.status;
+                this.devices = response.data.results.devices;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.phone = '';
+            this.name = null;
+            this.status = null;
+            this.devices = [];
+            this.type = 'user';
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer;">
+        <div class="content">
+            <div class="header">User Info</div>
+            <div class="description">
+                You can search someone user info by phone
+            </div>
+        </div>
+    </div>
+    
+    
+    <!--  Modal UserInfo  -->
+    <div class="ui small modal" id="modalUserInfo">
+        <i class="close icon"></i>
+        <div class="header">
+            Search User Information
+        </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="user">Private Message</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label>Phone</label>
+                    <input v-model="phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="phone_id" disabled aria-label="whatsapp_id">
+                </div>
+
+                <button type="button" class="ui primary button" :class="{'loading': loading}"
+                        @click="handleSubmit">
+                    Search
+                </button>
+            </form>
+
+            <div v-if="devices.length > 0" class="center">
+                <ol>
+                    <li>Nama: {{ name }}</li>
+                    <li>Status: {{ status }}</li>
+                    <li>Device:
+                        <ul>
+                            <li v-for="d in devices">
+                                {{ d.Device }}
+                            </li>
+                        </ul>
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/components/MessageReact.js

@@ -34,16 +34,16 @@ export default {
         async messageApi() {
             this.loading = true;
             try {
-                const payload = { phone: this.phone_id, emoji: this.emoji }
+                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);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/MessageRevoke.js

@@ -33,16 +33,16 @@ export default {
         async messageApi() {
             this.loading = true;
             try {
-                const payload = { phone: this.phone_id }
+                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);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }
@@ -53,7 +53,7 @@ export default {
             this.type = 'user';
         },
     },
-    template:`
+    template: `
     <div class="red card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui red right ribbon label">Message</a>

src/views/components/MessageUpdate.js

@@ -34,7 +34,7 @@ export default {
         async messageApi() {
             this.loading = true;
             try {
-                const payload = { phone: this.phone_id, message: this.new_message }
+                const payload = {phone: this.phone_id, message: this.new_message}
 
                 let response = await window.http.post(`/message/${this.message_id}/update`, payload)
                 this.handleReset();
@@ -42,9 +42,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendAudio.js

@@ -41,9 +41,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }
@@ -54,7 +54,7 @@ export default {
             $("#file_audio").val('');
         },
     },
-    template:`
+    template: `
     <div class="blue card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui blue right ribbon label">Send</a>

src/views/components/SendContact.js

@@ -48,9 +48,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }
@@ -62,7 +62,7 @@ export default {
             this.type = 'user';
         },
     },
-    template:`
+    template: `
     <div class="blue card" @click="openModal()" style="cursor: pointer">
         <div class="content">
             <a class="ui blue right ribbon label">Send</a>

src/views/components/SendFile.js

@@ -49,9 +49,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendImage.js

@@ -49,9 +49,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendLocation.js

@@ -46,9 +46,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendMessage.js

@@ -48,9 +48,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendPoll.js

@@ -48,9 +48,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/components/SendVideo.js

@@ -54,9 +54,9 @@ export default {
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
-                } else {
-                    throw new Error(error.message);
                 }
+                throw new Error(error.message);
+
             } finally {
                 this.loading = false;
             }

src/views/index.html

@@ -108,14 +108,7 @@
                 </div>
             </div>
         </div>
-        <div class="green card" @click="infoModal" style="cursor: pointer;">
-            <div class="content">
-                <div class="header">User Info</div>
-                <div class="description">
-                    You can search someone user info by phone
-                </div>
-            </div>
-        </div>
+        <account-user-info></account-user-info>
         <div class="green card" @click="groupModal" style="cursor: pointer">
             <div class="content">
                 <div class="header">My List Groups</div>
@@ -260,48 +253,7 @@
         </div>
     </div>
 
-    <!--  Modal UserInfo  -->
-    <div class="ui small modal" id="modalUserInfo">
-        <i class="close icon"></i>
-        <div class="header">
-            Search User Information
-        </div>
-        <div class="content">
-            <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="info_type" v-model="info_type" aria-label="type">
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone</label>
-                    <input v-model="info_phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="info_phone_id" disabled aria-label="whatsapp_id">
-                </div>
-
-                <button type="button" class="ui primary button" :class="{'loading': info_loading}"
-                        @click="infoProcess">
-                    Search
-                </button>
-            </form>
 
-            <div v-if="info_devices.length > 0" class="center">
-                <ol>
-                    <li>Nama: [[ info_name ]]</li>
-                    <li>Status: [[ info_status ]]</li>
-                    <li>Device:
-                        <ul>
-                            <li v-for="d in info_devices">
-                                [[ d.Device ]]
-                            </li>
-                        </ul>
-                    </li>
-                </ol>
-            </div>
-        </div>
-    </div>
 </div>
 <script>
     window.TYPEGROUP = "g.us";
@@ -344,6 +296,7 @@
     import MessageUpdate from "./components/MessageUpdate.js";
     import MessageReact from "./components/MessageReact.js";
     import MessageRevoke from "./components/MessageRevoke.js";
+    import AccountUserInfo from "./components/AccountUserInfo.js";
 
     const showErrorInfo = (message) => {
         $('body').toast({
@@ -630,72 +583,11 @@
         }
     }
 
-    const userInfo = {
-        data() {
-            return {
-                info_type: 'user',
-                info_phone: '',
-                //
-                info_name: null,
-                info_status: null,
-                info_devices: [],
-                //
-                info_loading: false,
-            }
-        },
-
-        computed: {
-            info_phone_id() {
-                return this.info_type === 'user' ? `${this.info_phone}@${this.type_user}` : `${this.info_phone}@${this.type_group}`
-            }
-        },
-        methods: {
-            async infoModal() {
-                this.infoReset();
-                $('#modalUserInfo').modal('show');
-            },
-            async infoProcess() {
-                try {
-                    this.info_loading = true;
-                    await this.infoApi();
-                    this.info_loading = false;
-                    showSuccessInfo("Info fetched")
-                } catch (err) {
-                    this.info_loading = false;
-                    showErrorInfo(err)
-                }
-            },
-            infoApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        let response = await http.get(`/user/info?phone=${this.info_phone_id}`)
-                        this.info_name = response.data.results.verified_name;
-                        this.info_status = response.data.results.status;
-                        this.info_devices = response.data.results.devices;
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            },
-            infoReset() {
-                this.info_phone = '';
-                this.info_name = null;
-                this.info_status = null;
-                this.info_devices = [];
-                this.info_type = 'user';
-            }
-        }
-    }
-
     Vue.createApp({
         components: {
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
+            AccountUserInfo,
         },
         delimiters: ['[[', ']]'],
         data() {
@@ -751,7 +643,7 @@
         },
         mixins: [
             login, logout, reconnect,
-            userGroups, userPrivacy, userAvatar, userInfo
+            userGroups, userPrivacy, userAvatar
         ]
     }).mount('#app')
 </script>