After successfully integrating the Baileys Rest API from this Baileys-Rest into a Laravel Inertia project, everything seems to be working fine. However, the challenge now is how to continuously monitor the session status response, especially when a user scans the QR code and successfully logs in, at which point the QR code image needs to be replaced with a checklist image.
I've attempted to use the watch function but it doesn't seem to work. I also tried removing the boolean check in the watch function, but that didn't work either. The issue seems to be that the check is not being triggered when the QR code is active for scanning.
Device.vue
<template>
<AuthenticatedLayout>
<div class="m-5 p-5">
<div class="m-5">
<img v-if="qrCode" :src="qrCode" alt="QR Code" />
</div>
<button class="btn btn-success" @click="scan(id)">Button</button>
<button class="btn btn-error" @click="logout()">logout</button>
</div>
</AuthenticatedLayout>
</template>
<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { ref, onMounted, onUpdated } from "vue";
import QRCode from "qrcode";
import axios from "axios";
export default {
components: {
AuthenticatedLayout,
},
setup() {
const qrCode = ref(null);
let statusResponse = ref("");
const id = "TheId";
const deviceName = "TheId";
const status = ref("");
const reloadPage = ref("");
let intervalId = null;
return {
qrCode,
statusResponse,
id,
deviceName,
status,
reloadPage,
intervalId,
};
},
watch: {
id: {
immediate: true,
handler(newId) {
const scan = this.scan(newId);
if (scan) {
this.check(newId);
}
},
},
},
beforeUnmount() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
},
methods: {
async check(id) {
setInterval(async () => {
await axios.get(
`http://localhost:3000/sessions/${this.deviceName}`
);
}, 2000);
},
async scan(id) {
// console.log("here");
try {
//check if session exists
const statusResponse = await axios.get(
`http://localhost:3000/sessions/${this.deviceName}/status`
);
console.log(statusResponse.data.status);
} catch (error) {
// this.intervalId = true;
console.log(error.response.data.error == "Session not found");
if (error.response.data.error == "Session not found") {
// console.log("here");
try {
try {
const res = await axios.post(
`http://localhost:3000/sessions/add`,
{ sessionId: this.deviceName }
);
this.qrCode = res.data.qr;
//If QR code Valid or scanned and login
return true;
} catch (error) {
console.error("Error:", error);
}
} catch (error) {
console.log("Error : ", error);
}
}
}
},
async logout() {
const response = await fetch(
`http://localhost:3000/sessions/${this.deviceName}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
location.reload();
},
},
};
</script>
<style lang="scss" scoped></style>