Merge pull request #12 from fiit-tp7-2023/#312-message-component

AB#312 Message component
fiit-tp7-2023 · Apr 2, 2024 · 0a4602f · 0a4602f
2 parents dfd256f + 9a1e6fe
commit 0a4602f
Show file tree

Hide file tree

Showing 22 changed files with 449 additions and 124 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,9 +17,11 @@
     "nuxt",
     "nuxtjs",
     "ofetch",
+    "pinia",
     "Raleway",
     "Roboto",
     "sidebase",
+    "sider",
     "tailwindcss",
     "vueuc",
     "wght"

diff --git a/app.vue b/app.vue
@@ -11,6 +11,23 @@
 </template>
 <script setup lang="ts">
 import type { ThemeConfig } from '@bg-dev/nuxt-naiveui';
+import { useUsersStore, useTokenStore, useChatStore } from '~/store';
+import { MOCKED_USERS, MOCKED_POSTS, MOCKED_DANO_CHATS } from '~/mocks';
+
+const usersStore = useUsersStore();
+const tokenStore = useTokenStore();
+const chatStore = useChatStore();
+
+onMounted(() => {
+  // Mock users
+  usersStore.setUsers(MOCKED_USERS);
+
+  // Mock posts
+  tokenStore.setPosts(MOCKED_POSTS);
+
+  // Mock messages
+  chatStore.setMessages('0xabcde', MOCKED_DANO_CHATS);
+});
 
 const themeConfig: ThemeConfig = {
   shared: {

diff --git a/components/chat/ChatHeader.vue b/components/chat/ChatHeader.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex w-full h-12 bg-slate-300 text-xl items-center pl-5 rounded-md my-2">
+    {{ user?.username ?? user?.address ?? 'Missing user info' }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { User } from '~/types/dtos';
+
+defineProps({
+  user: {
+    type: Object as PropType<User | null>,
+    required: true,
+  },
+});
+</script>
+
+<style></style>
diff --git a/components/chat/ContactRow.vue b/components/chat/ContactRow.vue
@@ -0,0 +1,37 @@
+<template>
+  <nuxt-link :to="'/chat/' + user.address">
+    <span
+      class="hidden w-0 md:flex md:gap-2 md:px-2 md:text-xl md:items-center md:justify-start md:w-full md:h-10"
+      :class="{ 'bg-slate-300': selected }"
+    >
+      <div class="w-5 h-5 bg-slate-500 rounded-full"></div>
+      <p>{{ user.username ?? user.address }}</p>
+    </span>
+
+    <span class="md:hidden md:w-0 flex justify-end w-full h-10 gap-1 px-3">
+      <p
+        class="w-8 h-8 flex justify-center items-center bg-slate-200 rounded-full"
+        :class="{ 'bg-slate-400': selected }"
+      >
+        {{ (user.username ?? user.address)?.charAt(0) }}
+      </p>
+    </span>
+  </nuxt-link>
+</template>
+
+<script lang="ts" setup>
+import type { User } from '~/types/dtos';
+
+defineProps({
+  user: {
+    type: Object as PropType<User>,
+    required: true,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style></style>
diff --git a/components/chat/MessageRow.vue b/components/chat/MessageRow.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="w-full flex justify-between rounded px-2 py-2" :class="[mine ? 'bg-blue-400' : 'bg-white']">
+    <p>{{ message.text }}</p>
+    <span v-if="message.likes" class="flex justify-end gap-1 items-center">
+      <Icon name="mdi:heart" />
+      <p v-if="message.likes > 1">{{ message.likes }}</p>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Message } from '~/types/dtos';
+defineProps({
+  message: {
+    type: Object as PropType<Message>,
+    required: true,
+  },
+  mine: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style></style>
diff --git a/components/controls/SearchBar.vue b/components/controls/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-white rounded-md bg-white text-gray-400"
+    class="hidden md:flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-white rounded-md bg-white text-gray-400"
   >
     <Icon name="mdi:search" size="24" />
     <input

diff --git a/components/layout/LeftSideChat.vue b/components/layout/LeftSideChat.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="h-full border-r my-2 border-gray-400 md:p-2">
+    <ul class="flex flex-col items-start">
+      <li v-for="user in users" :key="user.address" class="w-full">
+        <contact-row :user="user" :selected="user.address == $route.params.address" />
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup lang="ts">
+import ContactRow from '~/components/chat/ContactRow.vue';
+import { useUsersStore } from '~/store';
+
+const usersStore = useUsersStore();
+
+const users = computed(() => usersStore.users);
+</script>
diff --git a/components/layout/LeftSideContent.vue b/components/layout/LeftSideContent.vue
@@ -1,33 +1,52 @@
 <template>
   <div class="h-full border-r my-2 border-gray-400 p-2">
-    <ul class="flex flex-col gap-2 left-nav items-center md:items-start">
-      <li class="flex gap-1 text-xl items-center">
-        <NuxtLink to="/">
-          <icon size="24" name="mdi:home-outline" />
-          <span class="label">Home</span>
-        </NuxtLink>
-      </li>
-      <li class="flex gap-1 text-xl items-center">
-        <NuxtLink to="/sign">
-          <icon size="24" name="mdi:graph-line" />
-          <span class="label">Signing test</span>
-        </NuxtLink>
-      </li>
-      <li class="flex gap-1 text-xl items-center">
-        <NuxtLink to="/settings">
-          <icon size="24" name="mdi:cog-outline" />
-          <span class="label">Settings</span>
+    <ul class="flex flex-col left-nav items-center md:items-start">
+      <li v-for="link in links" :key="link.link" class="w-full">
+        <NuxtLink :to="link.link">
+          <span class="flex gap-1 px-2 text-xl items-center justify-start w-full h-10">
+            <icon size="24" :name="link.icon" />
+            <span class="label">{{ link.name }}</span>
+          </span>
         </NuxtLink>
       </li>
     </ul>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+interface Link {
+  icon: string;
+  name: string;
+  link: string;
+}
+
+const links: Link[] = [
+  {
+    name: 'Home',
+    link: '/',
+    icon: 'mdi:home-outline',
+  },
+  {
+    name: 'Chats',
+    link: '/chat',
+    icon: 'mdi:group',
+  },
+  {
+    name: 'Signing test',
+    link: '/sign',
+    icon: 'mdi:graph-line',
+  },
+  {
+    name: 'Settings',
+    link: '/settings',
+    icon: 'mdi:cog-outline',
+  },
+];
+</script>
 <style>
 .left-nav {
   a {
-    @apply flex justify-center items-center gap-1;
+    @apply flex justify-end md:justify-center items-center gap-1;
     .label {
       @apply hidden md:block;
     }

diff --git a/components/layout/NavigationComponent.vue b/components/layout/NavigationComponent.vue
@@ -4,7 +4,7 @@
     <span class="w-1/2">
       <SearchBar />
     </span>
-    <button v-if="!account" class="border-2 p-2 rounded-md" @click="connectWallet">Connect wallet</button>
+    <button v-if="!account" class="border-2 p-2 rounded-md w-200" @click="connectWallet">Connect wallet</button>
     <button v-else class="border-2 p-2 rounded-md" @click="disconnectWallet">Disconnect wallet</button>
   </div>
 </template>
@@ -21,9 +21,10 @@ const accountStore = useAccountStore();
 const account = computed(() => accountStore.account);
 
 onMounted(async () => {
-  if (account.value) {
-    logger.info('Account connected:', account);
+  if (!account.value) {
+    return;
   }
+  logger.info('Account connected:', account);
 
   logger.info('Refresh tokens');
   const { accessToken, refreshToken } = await $fetch('/api/auth/refresh', {

diff --git a/layouts/chat.vue b/layouts/chat.vue
@@ -0,0 +1,38 @@
+<template>
+  <n-layout class="h-screen">
+    <n-layout-header> <navigation-component /> </n-layout-header>
+    <n-layout-content has-sider content-class="content-style">
+      <n-layout-sider>
+        <left-side-chat />
+      </n-layout-sider>
+      <div class="w-full h-full px-4">
+        <slot />
+      </div>
+    </n-layout-content>
+    <n-layout-footer>
+      <footer-component />
+    </n-layout-footer>
+  </n-layout>
+</template>
+
+<script lang="ts" setup>
+import NavigationComponent from '~/components/layout/NavigationComponent.vue';
+import FooterComponent from '~/components/layout/FooterComponent.vue';
+import LeftSideChat from '~/components/layout/LeftSideChat.vue';
+</script>
+
+<style scoped>
+.n-layout-header,
+.n-layout-content,
+.n-layout-footer {
+  padding: 0;
+  background-color: inherit;
+}
+:deep(.content-style) {
+  min-height: calc(100vh - 120px);
+}
+
+.n-layout-sider {
+  @apply w-[60px] md:w-[300px] !important;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,15 +1,12 @@
 <template>
   <n-layout class="h-screen">
-    <n-layout-header>
-      <NavigationComponent />
-    </n-layout-header>
-    <n-layout-content>
-      <div class="grid grid-cols-8 md:grid-cols-5 gap-x-4">
-        <LeftSideContent />
-        <div class="col-span-6 md:col-span-3">
-          <slot />
-        </div>
-        <RightSideContent />
+    <n-layout-header> <navigation-component /> </n-layout-header>
+    <n-layout-content has-sider content-class="content-style">
+      <n-layout-sider>
+        <left-side-content />
+      </n-layout-sider>
+      <div class="w-full h-full px-4">
+        <slot />
       </div>
     </n-layout-content>
     <n-layout-footer>
@@ -22,7 +19,6 @@
 import NavigationComponent from '~/components/layout/NavigationComponent.vue';
 import FooterComponent from '~/components/layout/FooterComponent.vue';
 import LeftSideContent from '~/components/layout/LeftSideContent.vue';
-import RightSideContent from '~/components/layout/RightSideContent.vue';
 </script>
 
 <style scoped>
@@ -32,8 +28,11 @@ import RightSideContent from '~/components/layout/RightSideContent.vue';
   padding: 0;
   background-color: inherit;
 }
+:deep(.content-style) {
+  min-height: calc(100vh - 120px);
+}
 
-.n-layout-content {
-  min-height: calc(100vh - 220px);
+.n-layout-sider {
+  @apply w-[60px] md:w-[300px] !important;
 }
 </style>
diff --git a/layouts/plain.vue b/layouts/plain.vue
@@ -1,20 +1,16 @@
 <template>
   <n-layout class="h-screen">
-    <n-layout-header>
-      <NavigationComponent />
-    </n-layout-header>
-    <n-layout-content>
-      <div class="grid grid-cols-5 gap-x-4">
-        <div></div>
-        <div class="col-span-3">
+    <n-layout class="h-screen">
+      <n-layout-header> <navigation-component /> </n-layout-header>
+      <n-layout-content content-class="content-style">
+        <div class="w-full h-full px-4">
           <slot />
         </div>
-        <div></div>
-      </div>
-    </n-layout-content>
-    <n-layout-footer>
-      <footer-component />
-    </n-layout-footer>
+      </n-layout-content>
+      <n-layout-footer>
+        <footer-component />
+      </n-layout-footer>
+    </n-layout>
   </n-layout>
 </template>
 
@@ -31,7 +27,7 @@ import FooterComponent from '~/components/layout/FooterComponent.vue';
   background-color: inherit;
 }
 
-.n-layout-content {
-  min-height: calc(100vh - 220px);
+:deep(.content-style) {
+  min-height: calc(100vh - 120px);
 }
 </style>