wip

src/components/WebSocketComponent.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useSharedWebSocket, WsDataType } from '../composables/useSharedWebSocket'
 
 const message = ref('')
+const selectedChat = ref('')
 
 const { messages, chats, isConnected, error, send } = useSharedWebSocket({
   // onMessage: (data) => {
@@ -10,11 +11,21 @@ const { messages, chats, isConnected, error, send } = useSharedWebSocket({
   // },
 })
 
+const onChatClick = (id: string) => {
+  console.log(id)
+  selectedChat.value = id
+  send({
+    type: WsDataType.GET_MESSAGES,
+    data: { chat_id: id },
+  })
+}
+
 const sendMessage = () => {
   if (message.value.trim()) {
     send({
-      type: WsDataType.MESSAGE,
+      type: WsDataType.CREATE_MESSAGE,
       data: {
+        chat_id: selectedChat.value,
         text: message.value,
       },
     })
@@ -24,37 +35,55 @@ const sendMessage = () => {
 </script>
 
 <template>
-  <div>
-    <div class="status" :class="{ isConnected, disconnected: !isConnected }">
-      status: {{ isConnected ? 'connected' : 'disconnected' }}
-    </div>
-
-    <div v-if="error" class="error">Error: {{ error }}</div>
-
-    <hr />
-
-    <div>
-      <div>chats</div>
-      <div v-for="chat in chats" :key="chat.id">
-        <div>{{ chat.id }}</div>
-        <div>{{ chat.users }}</div>
+  <v-row>
+    <v-col>
+      <div class="status" :class="{ isConnected, disconnected: !isConnected }">
+        status: {{ isConnected ? 'connected' : 'disconnected' }}
       </div>
-    </div>
-
-    <hr />
-
-    <div>
-      <div>messages:</div>
-      <div v-for="message in messages" :key="message.id">
-        {{ message }}
+      <div>selected chat {{ selectedChat }}</div>
+      <div class="error">Error: {{ error }}</div>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col>
+      <div>
+        <div v-for="chat in chats" :key="chat.id" @click="onChatClick(chat.id)">
+          <div>{{ chat.id }}</div>
+          <div>{{ chat.users }}</div>
+        </div>
       </div>
-    </div>
+    </v-col>
+    <v-col>
+      <v-sheet border class="pa-4 border-opacity-50">
+        <div v-if="selectedChat">
+          <v-sheet height="400px" class="overflow-y-auto">
+            <div v-for="message in messages" :key="message.id">
+              <div>{{ message }}</div>
+            </div>
+          </v-sheet>
 
-    <div class="controls">
-      <input v-model="message" @keyup.enter="sendMessage" placeholder="Type message..." />
-      <button @click="sendMessage" :disabled="!isConnected">Send</button>
-    </div>
-  </div>
+          <div class="d-flex align-center ga-1">
+            <v-text-field
+              rounded="lg"
+              hide-details
+              variant="outlined"
+              v-model="message"
+              @keyup.enter="sendMessage"
+              placeholder="Type message..."
+            >
+            </v-text-field>
+            <v-btn
+              :disabled="!isConnected"
+              variant="elevated"
+              color="primary"
+              icon="mdi-send"
+              @click="sendMessage"
+            />
+          </div>
+        </div>
+      </v-sheet>
+    </v-col>
+  </v-row>
 </template>
 
 <style scoped></style>