Fix: Bugs, Chats now mostly working

app/Http/Controllers/API/ChatController.php

@@ -29,6 +29,7 @@
 use App\Models\UserAudible;
 use App\Models\UserEcho;
 use App\Repositories\ChatRepository;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Carbon;
 
@@ -45,11 +46,11 @@ public function __construct(private readonly ChatRepository $chatRepository)
     }
 
     /* USER DATA */
-    public function user(Request $request)
+    public function user(Request $request): JsonResponse
     {
         $user = $request->user()->load(['chatStatus', 'chatroom', 'group']);
 
-        return $user;
+        return response()->json($user);
     }
 
     /* STATUSES */

resources/js/chat/Chat.vue

@@ -9,7 +9,7 @@
 import axios from "axios";
 import { state, startWatchers } from "./state";
 import Header from "./components/Header.vue";
-import { loadUser } from "./actions";
+import { changeRoom, changeStatus, listenForEvents, loadUser } from "./actions";
 import Tabs from "./components/Tabs.vue";
 import Body from "./components/Body.vue";
 
@@ -22,11 +22,32 @@ export default {
     }
   },
   created() {
-      startWatchers()
       state.startup = Date.now();
       state.activeTarget = '';
       state.activeBot = '';
       loadUser()
+  },
+  watch: {
+    'state.chatrooms':{
+      handler(){
+        changeRoom(state.auth.chatroom.id);
+      },
+      deep: true
+    },
+    'state.statuses':{
+      handler(){
+        changeStatus(state.auth.chat_status.id);
+      },
+      deep: true
+    },
+    'state.room':{
+      handler(newVal, oldVal){
+        window.Echo.leave(`chatroom.${oldVal}`);
+        state.channel = window.Echo.join(`chatroom.${newVal}`);
+        listenForEvents();
+      },
+      deep: true
+    }
   }
 }
 </script>

resources/js/chat/actions.js

@@ -209,7 +209,6 @@ export function fetchRooms() {
       state.tab = response.data.data[0].name;
       state.activeTab = 'room' + state.room;
       fetchConfiguration();
-      fetchMessages()
   });
 }
 export function fetchConfiguration() {
@@ -242,10 +241,10 @@ export function fetchStatuses() {
 }
 
 export function forceMessage(name) {
-  document.getElementById('chatbox__messages-create').value = '/msg ' + name + ' ';
+  state.input = '/msg ' + name + ' ';
 }
 export function  forceGift(name) {
-  document.getElementById('chatbox__messages-create').value = '/gift ' + name + ' ';
+  state.input = '/gift ' + name + ' ';
 }
 export function leaveBot(id) {
   if (id > 0) {
@@ -450,7 +449,7 @@ export function playSound() {
 }
 export function handleSound(type, id) {
   let i;
-  let audioState = document.getElementById('chatbody').getAttribute('audio');
+  let audioState = state.audio;
   if (type === 'room') {
     for (i = 0; i < state.audibles.length; i++) {
       if (
@@ -499,7 +498,7 @@ export function handleSound(type, id) {
 }
 export function handleMessage(type, id, message) {
   let i;
-  let audioState = document.getElementById('chatbody').getAttribute('audio');
+  let audioState = state.audio;
   if (type === 'room') {
     for (i = 0; i < state.audibles.length; i++) {
       if (
@@ -655,6 +654,7 @@ export function createMessage(message, save = true, user_id = 1, receiver_id = n
     })
     .then((response) => {
       if (state.activeTab.substring(0, 3) === 'bot' || state.activeTab.substring(0, 6) === 'target') {
+
         state.messages.push(response.data.data);
       }
       if (state.messages.length > state.config.message_limit) {
@@ -724,6 +724,7 @@ export function listenForEvents() {
       state.users = users;
     })
     .listen('.new.message', (e) => {
+      console.log(e)
       if (state.activeTab.substring(0, 4) !== 'room') return false;
       state.messages.push(e.message);
       handleMessage('room', state.room, e.message);

resources/js/chat/components/Body.vue

@@ -13,27 +13,17 @@ export default {
     state() {
       return state
     },
-    msgs() {
-      return filter(state.messages, (o) => {
-        return o;
-      });
-    },
     statusColor() {
       if (state.statuses.length > 0) {
         let i = findIndex(state.statuses, (o) => {
           return o.id === state.status;
         });
-
         return state.statuses[i].color;
       }
-
       return '';
     },
   },
   components: { ChatUserList, ChatMessages, ChatForm },
-  mounted() {
-    console.log(state)
-  }
 };
 </script>
 
@@ -45,7 +35,7 @@ export default {
     <chat-messages
       v-if="state.tab !== ''"
       @pm-sent="(o) => createMessage(o.message, o.save, o.user_id, o.receiver_id, o.bot_id)"
-      :messages="msgs"
+      :messages="state.messages"
     >
     </chat-messages>
     <chat-user-list
@@ -70,7 +60,6 @@ export default {
         </span>
     </section>
     <chat-form
-      @changedStatus="changeStatus"
       @message-sent="(o) => createMessage(o.message, o.save, o.user_id, o.receiver_id, o.bot_id)"
       @typing="isTyping"
     >

resources/js/chat/components/ChatForm.vue

@@ -4,7 +4,7 @@
         <textarea
           @keyup="keyup"
           @keydown.enter.prevent="keydown"
-          v-model="input"
+          v-model="state.input"
           id="chatbox__messages-create"
           class="form__textarea"
           name="message"
@@ -22,14 +22,11 @@
 import { state } from "../state";
 
 export default {
-  data() {
-    return {
-      user: null,
-      editor: null,
-      input: null,
-    };
-  },
+  emits: ['typing', 'message-sent'],
   computed: {
+    state() {
+      return state
+    },
     receiver_id() {
       return state.receiver_id;
     },
@@ -47,7 +44,7 @@ export default {
       }
     },
     sendMessage() {
-      let msg = this.input.trim();
+      let msg = state.input.trim();
       if (msg !== null && msg !== '') {
         this.$emit('message-sent', {
           message: msg,
@@ -56,7 +53,7 @@ export default {
           receiver_id: state.receiver_id,
           bot_id: state.bot_id,
         });
-        this.input = '';
+        state.input = '';
       }
     },
   }

resources/js/chat/components/ChatMessages.vue

@@ -2,18 +2,18 @@
   <div class="chatroom__messages--wrapper">
     <ul class="chatroom__messages">
       <li v-for="message in messages">
-        <article class="chatbox-message">
+        <article v-if="message" class="chatbox-message">
           <header class="chatbox-message__header">
             <address
               class="chatbox-message__address user-tag"
-              :style="`background-image: ${message.user?.group?.effect};`"
+              :style="`background-image: ${message?.user?.group?.effect ?? 'none'};`"
             >
               <a
                 class="user-tag__link"
-                :class="message.user?.group?.icon"
-                :href="`/users/${message.user?.username}`"
-                :style="`color: ${message.user?.group?.color }`"
-                :title="message.user?.group?.name"
+                :class="message.user?.group?.icon ?? ''"
+                :href="`/users/${message?.user?.username}`"
+                :style="`color: ${message?.user?.group?.color }`"
+                :title="message?.user?.group?.name"
               >
                 <span v-if="message.user && message.user.id > 1">{{ message.user?.username ?? 'Unknown' }}</span>
                 <span v-if="message.bot && message.bot.id >= 1 && (!message.user || message.user.id < 2)">{{ message.bot?.name ?? 'Unknown' }}</span>
@@ -24,7 +24,7 @@
               :datetime="message.created_at"
               :title="message.created_at"
             >
-              {{ message.created_at | diffForHumans }}
+              {{ diffForHumans(message.created_at) }}
             </time>
           </header>
           <aside class="chatbox-message__aside">
@@ -68,7 +68,6 @@
 <script>
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import pmMethods from '../../components/chat/mixins/pmMethods';
 import { state } from "../state";
 
 export default {
@@ -80,7 +79,6 @@ export default {
       editor: null,
     };
   },
-  mixins: [pmMethods],
   methods: {
     checkBot(e, message) {
       if (e.target.hasAttribute('trigger') && e.target.getAttribute('trigger') == 'bot') {
@@ -102,7 +100,7 @@ export default {
           /* Owner can mod all */
           state.auth.group.is_owner ||
           /* User can mod his own message */
-          message.user.id === this.$parent.auth.id ||
+          message.user.id === state.auth.id ||
           /* is_admin can mod messages except for Owner messages */
           (state.auth.group.is_admin && !message.user.group.is_owner) ||
           /* Mods CAN NOT mod other mods messages */
@@ -121,21 +119,17 @@ export default {
           ? `color: ${user.group.color};`
           : `cursor: pointer;`;
     },
-  },
-  created() {
-    dayjs.extend(relativeTime);
-    this.interval = setInterval(() => this.$forceUpdate(), 30000);
-  },
-
-  filters: {
     diffForHumans: (date) => {
       if (!date) {
         return null;
       }
-
       return dayjs(date).fromNow();
     },
   },
+  created() {
+    dayjs.extend(relativeTime);
+    this.interval = setInterval(() => this.$forceUpdate(), 30000);
+  },
   beforeDestroy() {
     clearInterval(this.interval);
   },

resources/js/chat/components/ChatUserList.vue

@@ -20,12 +20,12 @@
               {{ user.username }}
             </a>
         </span>
-        <menu class="chatroom-users__buttons" v-if="$parent.auth.id !== user.id">
+        <menu class="chatroom-users__buttons" v-if="state.auth.id !== user.id">
           <li>
             <button
               class="chatroom-users__button"
               title="Gift user bon (/gift <username> <amount> <message>)"
-              @click.prevent="$parent.forceGift(user.username)"
+              @click.prevent="forceGift(user.username)"
             >
               <i
                 class="fas fa-gift"
@@ -36,7 +36,7 @@
             <button
               class="chatroom-users__button"
               title="Send chat PM (/msg <username> <message>)"
-              @click.prevent="$parent.forceMessage(user.username)"
+              @click.prevent="forceMessage(user.username)"
             >
               <i
                 class="fas fa-envelope"
@@ -50,7 +50,16 @@
 </template>
 <script>
 
+import { state } from "../state";
+import { forceGift, forceMessage } from "../actions";
+
 export default {
+  methods: { forceGift, forceMessage },
+  computed: {
+    state() {
+      return state
+    }
+  },
   props: {
     users: { required: true },
   },

resources/js/chat/state.js

@@ -48,25 +48,5 @@ export let state = reactive({
   receiver_id: null,
   bot_id: null,
   showWhispers: 1,
+  input: ''
 })
-
-export function startWatchers () {
-
-  watch( state.chatrooms, function() {
-    console.log("Chatrooms updated")
-    changeRoom(state.auth.chatroom.id);
-  })
-
-  watch( state.statuses, function() {
-    console.log("Statuses updated")
-    changeStatus(state.auth.chat_status.id)
-  })
-
-  watch( state.room, function(newVal, oldVal) {
-    console.log("Room updated")
-    window.Echo.leave(`chatroom.${oldVal}`);
-    state.channel = window.Echo.join(`chatroom.${newVal}`);
-    listenForEvents();
-  })
-
-}