Adds messages

src/router/index.js

@@ -1,13 +1,13 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import ARPS from '@/views/manualusers/ARPS.vue'
 import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
-import About from '@/views/pages/About.vue'
-import ContentPolicy from '@/views/pages/ContentPolicy.vue'
-import FAQ from '@/views/pages/FAQ.vue'
-import Pricing from '@/views/pages/Pricing.vue'
-import CreatorGuide from '@/views/pages/CreatorGuide.vue'
-import HelpAndContact from '@/views/pages/HelpAndContact.vue'
-import TermsAndConditions from '@/views/pages/TermsAndConditions.vue'
+import About from '@/views/documentation/About.vue'
+import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
+import FAQ from '@/views/documentation/FAQ.vue'
+import Pricing from '@/views/documentation/Pricing.vue'
+import CreatorGuide from '@/views/documentation/CreatorGuide.vue'
+import HelpAndContact from '@/views/documentation/HelpAndContact.vue'
+import TermsAndConditions from '@/views/documentation/TermsAndConditions.vue'
 import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'

src/stores/auth.js

@@ -15,12 +15,13 @@ export const auth = defineStore({
 
         async login(client, email, password) {
             const requestBody = {
-                emailAddress: email,
+                email: email,
                 password: password
             };
             const response = await client.post(`${baseUrl}/users/login`, requestBody)
             this.user = {
-                accessToken: response.data,
+                accessToken: response.data.accessToken,
+                refreshToken: response.data.refreshToken,
             }
             localStorage.setItem('jwt', this.user.accessToken);
 

src/views/main/Creator.vue

@@ -6,6 +6,15 @@
            :src="imageSrc">
     </v-img>
 
+    <div class="w-full border-b-2 p-6">
+      <CreatePost content-id="00000001-0000-0000-0000-000000000001"></CreatePost>
+    </div>
+    
+    <div class="w-full border-b-2 p-6">
+      <h2 class="font-sans font-semibold">Commentaires</h2>
+      <PostList content-id="00000001-0000-0000-0000-000000000001"></PostList>
+    </div>
+
     <PostContentMenu></PostContentMenu>
 
     <div class="flex">
@@ -22,6 +31,8 @@
 import PostContentMenu from '@/views/main/PostContentMenu.vue'
 import PostCard from "@/views/main/PostCard.vue"
 import posts from "@/views/main/posts.json"
+import CreatePost from "@/views/messages/CreatePost.vue";
+import PostList from "@/views/messages/PostList.vue";
 
 let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
 

src/views/main/Header.vue

@@ -39,8 +39,8 @@
             class="rounded-full w-32 md:w-64 lg:w-96 mx-2"
             append-inner-icon="mdi-magnify"
             @click.stop
-            @click:append-inner="onSearch"
-        ></v-text-field>
+            @click:append-inner="onSearch">
+        </v-text-field>
       </template>
       <template v-else>
         <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
@@ -89,7 +89,6 @@
     </div>
 
 
-    
   </header>
 </template>
 

src/views/messages/CreatePost.vue

@@ -0,0 +1,61 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="flex flex-row">
+
+      <div class="px-1 content-center">
+        <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+             alt="Profile Image"
+             class="rounded-full"
+             width="32px"
+             height="32px">
+      </div>
+
+      <v-text-field
+          v-model="message"
+          density="compact"
+          variant="solo-inverted"
+          placeholder="Votre commentaire..."
+          hide-details
+          clearable>
+      </v-text-field>
+
+    </div>
+
+    <div class="flex flex-row gap-2 p-2 justify-end">
+      <v-btn style="border-radius: 20px" variant="text">Canceller</v-btn>
+      <v-btn style="border-radius: 20px" @click="publish">Publier</v-btn>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+// import posts from "@/views/posts/posts.json";
+
+import {useClient} from '@/plugins/api.js';
+import {defineProps, ref} from 'vue';
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+const message = ref("");
+
+const publish = async () => {
+  await client.post(
+      `/api/messages/`,
+      {
+        "contentId": props.contentId,
+        "message": message.value
+      });
+}
+
+
+</script>

src/views/messages/Message.vue

@@ -0,0 +1,65 @@
+<template>
+
+  <div class="flex flex-column">
+
+    <div class="flex flex-row p-1">
+
+      <div class="px-2 content-center">
+        <img :src="message.portrait"
+             alt="Profile Image"
+             class="rounded-full"
+             width="32px"
+             height="32px">
+      </div>
+
+      <div class="p-2">
+
+        <div>
+          <span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
+          <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+        </div>
+
+        <div class="font-sans">
+          {{ message.value }}
+        </div>
+
+        <div class="flex px-4">
+
+          <div>
+            <v-icon>mdi-thumb-up-outline</v-icon>
+            {{ message.thumb_up_count }}
+          </div>
+
+          <div>
+            <v-icon>mdi-thumb-down-outline</v-icon>
+            {{ message.thumb_down_count }}
+          </div>
+
+          <div>
+            <v-btn variant="flat">Reply</v-btn>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+import {defineProps} from 'vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true
+  }
+});
+
+</script>
+
+
+

src/views/messages/PostList.vue

@@ -0,0 +1,36 @@
+<template>
+
+  <div v-for="(message, index) in messages" :key="index">
+    <Message :message="message"></Message>
+  </div>
+
+</template>
+
+<script setup>
+
+import Message from "@/views/messages/Message.vue";
+// import posts from "@/views/posts/posts.json";
+
+import {useClient} from '@/plugins/api.js';
+import {defineProps, onBeforeMount, ref} from 'vue';
+
+const props = defineProps({
+  contentId: {
+    type: String,
+    required: true
+  }
+});
+
+const client = useClient();
+const messages = ref();
+
+onBeforeMount(async () => {
+  try {
+    const response = await client.get(`/api/messages/${props.contentId}`)
+    messages.value = response.data
+  } catch (error) {
+    console.error("Failed to fetch posts", error);
+  }
+})
+
+</script>

src/views/messages/posts.json

@@ -0,0 +1,29 @@
+[
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "Hello World!",
+    "thumb_up_count": 0,
+    "thumb_down_count": 0
+  },
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "Welcome to life!",
+    "thumb_up_count": 0,
+    "thumb_down_count": 3
+  },
+  {
+    "content": "40C28A05-2262-43F4-862A-09A4246A8DDE",
+    "portrait": "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png",
+    "created_by": "@marchy",
+    "created_at": "",
+    "message": "We love you!",
+    "thumb_up_count": 1,
+    "thumb_down_count": 0
+  }
+]