From 8125df5b7037e2351445185469bde039077912d4 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad0@hotmail.com>
Date: Thu, 27 Jun 2024 12:38:49 -0400
Subject: [PATCH] Adds messages

---
 src/router/index.js                           | 14 ++--
 src/stores/auth.js                            |  5 +-
 src/views/{pages => documentation}/About.vue  |  0
 .../ContentPolicy.vue                         |  0
 .../{pages => documentation}/CreatorGuide.vue |  0
 src/views/{pages => documentation}/FAQ.vue    |  0
 .../HelpAndContact.vue                        |  0
 .../{pages => documentation}/Pricing.vue      |  0
 .../TermsAndConditions.vue                    |  0
 src/views/main/Creator.vue                    | 21 ++++--
 src/views/main/Header.vue                     | 13 ++--
 src/views/messages/CreatePost.vue             | 61 +++++++++++++++++
 src/views/messages/Message.vue                | 65 +++++++++++++++++++
 src/views/messages/PostList.vue               | 36 ++++++++++
 src/views/messages/posts.json                 | 29 +++++++++
 15 files changed, 223 insertions(+), 21 deletions(-)
 rename src/views/{pages => documentation}/About.vue (100%)
 rename src/views/{pages => documentation}/ContentPolicy.vue (100%)
 rename src/views/{pages => documentation}/CreatorGuide.vue (100%)
 rename src/views/{pages => documentation}/FAQ.vue (100%)
 rename src/views/{pages => documentation}/HelpAndContact.vue (100%)
 rename src/views/{pages => documentation}/Pricing.vue (100%)
 rename src/views/{pages => documentation}/TermsAndConditions.vue (100%)
 create mode 100644 src/views/messages/CreatePost.vue
 create mode 100644 src/views/messages/Message.vue
 create mode 100644 src/views/messages/PostList.vue
 create mode 100644 src/views/messages/posts.json

diff --git a/src/router/index.js b/src/router/index.js
index c747095..6aca19e 100644
--- a/src/router/index.js
+++ b/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'
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 976fdb1..9973860 100644
--- a/src/stores/auth.js
+++ b/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);
 
diff --git a/src/views/pages/About.vue b/src/views/documentation/About.vue
similarity index 100%
rename from src/views/pages/About.vue
rename to src/views/documentation/About.vue
diff --git a/src/views/pages/ContentPolicy.vue b/src/views/documentation/ContentPolicy.vue
similarity index 100%
rename from src/views/pages/ContentPolicy.vue
rename to src/views/documentation/ContentPolicy.vue
diff --git a/src/views/pages/CreatorGuide.vue b/src/views/documentation/CreatorGuide.vue
similarity index 100%
rename from src/views/pages/CreatorGuide.vue
rename to src/views/documentation/CreatorGuide.vue
diff --git a/src/views/pages/FAQ.vue b/src/views/documentation/FAQ.vue
similarity index 100%
rename from src/views/pages/FAQ.vue
rename to src/views/documentation/FAQ.vue
diff --git a/src/views/pages/HelpAndContact.vue b/src/views/documentation/HelpAndContact.vue
similarity index 100%
rename from src/views/pages/HelpAndContact.vue
rename to src/views/documentation/HelpAndContact.vue
diff --git a/src/views/pages/Pricing.vue b/src/views/documentation/Pricing.vue
similarity index 100%
rename from src/views/pages/Pricing.vue
rename to src/views/documentation/Pricing.vue
diff --git a/src/views/pages/TermsAndConditions.vue b/src/views/documentation/TermsAndConditions.vue
similarity index 100%
rename from src/views/pages/TermsAndConditions.vue
rename to src/views/documentation/TermsAndConditions.vue
diff --git a/src/views/main/Creator.vue b/src/views/main/Creator.vue
index cf491bf..5448b9a 100644
--- a/src/views/main/Creator.vue
+++ b/src/views/main/Creator.vue
@@ -6,13 +6,22 @@
            :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">      
-        <PostCard v-for="(post, index) in posts"
-                  :post="post"
-                  class="m-2 bg-red w-full">
-        </PostCard>     
+    <div class="flex">
+      <PostCard v-for="(post, index) in posts"
+                :post="post"
+                class="m-2 bg-red w-full">
+      </PostCard>
     </div>
   </div>
 </template>
@@ -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';
 
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index 4667ba2..2e08846 100644
--- a/src/views/main/Header.vue
+++ b/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>
@@ -63,17 +63,17 @@
 
           <v-list class="mt-2">
             <v-list-item @click="navigateToProfile">
-            
+
               <v-list-item-title>
                 <router-link to="/profile">
-                Mon profil
+                  Mon profil
                 </router-link>
               </v-list-item-title>
             </v-list-item>
             <v-list-item>
               <v-list-item-title>
                 <router-link to="/wallet">
-                Mon wallet
+                  Mon wallet
                 </router-link>
               </v-list-item-title>
             </v-list-item>
@@ -88,8 +88,7 @@
       </div>
     </div>
 
-   
-    
+
   </header>
 </template>
 
diff --git a/src/views/messages/CreatePost.vue b/src/views/messages/CreatePost.vue
new file mode 100644
index 0000000..4456a8a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/messages/Message.vue b/src/views/messages/Message.vue
new file mode 100644
index 0000000..7576601
--- /dev/null
+++ b/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>
+
+
+
diff --git a/src/views/messages/PostList.vue b/src/views/messages/PostList.vue
new file mode 100644
index 0000000..b7f35bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/messages/posts.json b/src/views/messages/posts.json
new file mode 100644
index 0000000..87f0fe3
--- /dev/null
+++ b/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
+  }
+]
\ No newline at end of file