Added post view

mikhomak · Jun 2, 2024 · 84bc781 · 84bc781
1 parent 6e5a8c9
commit 84bc781
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 33 deletions.
diff --git a/cookingd-front/src/App.vue b/cookingd-front/src/App.vue
@@ -67,8 +67,29 @@ if (tokenFromCookies && !userStore.isLoggedIn) {
       <RouterLink to="/login" style="text-align: center;">Go to login</RouterLink>
     </div>
 
+    <main>
     <RouterView />
+    </main>
   </div>
 </template>
 
-<style scoped></style>
+<style>
+@media (min-width: 1020px) {
+  main {
+    width: 30%;
+  }
+}
+
+@media (max-width: 700px) {
+  main {
+    width: 100%;
+  }
+}
+
+.post_image {
+  max-width: 256px;
+  margin-bottom: 15px;
+  align-self: center;
+}
+
+</style>
diff --git a/cookingd-front/src/components/posts/PostTopDetails.vue b/cookingd-front/src/components/posts/PostTopDetails.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+    name: String,
+    rating: Number,
+    createdAt: Date
+});
+</script>
+<template>
+
+<div style="margin-bottom: 5px;">
+      author: <b>{{ props!.name }}</b> <br />
+      <i>rating : {{ props!.rating }}/5</i>
+      <i style="float: right;">{{ new Date(props!.createdAt!).toLocaleDateString(
+    'en-GB', {
+    day: 'numeric', month: 'numeric', year: 'numeric'
+  }) }}</i>
+    </div>
+</template>
diff --git a/cookingd-front/src/components/posts/ShortPost.vue b/cookingd-front/src/components/posts/ShortPost.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type Post } from '@/types/post'
 import TagList from './TagList.vue';
+import PostTopDetails from '@/components/posts/PostTopDetails.vue'
 const props = defineProps({
   // wtf is this shit
   // is this how you pass an object as props?
@@ -18,31 +19,24 @@ const props = defineProps({
     flex-direction: column;
   ">
     <h3 style="margin-bottom: 5px;">
-      <RouterLink to="">{{ props.post.title }}</RouterLink>
+      <router-link :to="`/post/${props.post.id}`">{{ props.post.title }}</router-link>
     </h3>
-    <div style="margin-bottom: 5px;">
-      author: <b>{{ props.post.user.name }}</b> <br/>
-      <i>rating : {{ props.post.rating }}/5</i>
-      <i style="float: right;">{{ new Date(props.post.createdAt).toLocaleDateString(
-        'en-GB', {
-        day: 'numeric', month: 'numeric', year: 'numeric'
-      }) }}</i>
-    </div>
-    <img v-if="props.post.mainImageUrl" v-bind:src="props.post.mainImageUrl" />
-    <img v-else src="@/assets/missing_image.webp" />
+
+    <!-- I fucking hate ts so fucking much -->
+    <!-- @vue-ignore -->
+    <PostTopDetails :name="props!.post!.user!.name" :rating="props!.post!.rating!" :createdAt="props.post.createdAt"/>
+    <img v-if="props.post.mainImageUrl" v-bind:src="props.post.mainImageUrl" class="post_image"/>
+    <img v-else src="@/assets/missing_image.webp" class="post_image"/>
     <div style="flex:50%">
       <p>
         {{ props.post.shortText }}
       </p>
       likes: {{ props.post.likes }}
-     <TagList :tags="props.post.tags" /> 
+      <TagList :tags="props.post.tags" />
     </div>
   </div>
 </template>
 
 <style scoped>
-img {
-  max-width: 256px;
-  margin-bottom: 15px;
-}
+
 </style>
diff --git a/cookingd-front/src/components/posts/TagList.vue b/cookingd-front/src/components/posts/TagList.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 <template>
     <div style="display: flex; flex-wrap: wrap;">
-    <li v-if="props.tags" v-for="tag in props.tags" style="margin-right: 10px;">
+    <li v-if="props.tags" v-for="tag in props.tags" style="margin-right: 10px; list-style: none;">
         <TagComonent :tag="tag" />
     </li>
     </div>

diff --git a/cookingd-front/src/router/index.ts b/cookingd-front/src/router/index.ts
@@ -43,7 +43,12 @@ const router = createRouter({
       path: '/new-post',
       name: 'new-post',
       component: () => import('../views/NewPostView.vue')
-    }
+    },
+     {
+      path: '/post/:post_id',
+      name: 'post page',
+      component: () => import('../views/Post.vue')
+    },
   ]
 });
 

diff --git a/cookingd-front/src/types/post.ts b/cookingd-front/src/types/post.ts
@@ -1,4 +1,5 @@
 type Post = {
+  id: String,
   title: String,
   shortText: String,
   text: String,

diff --git a/cookingd-front/src/views/AccountView.vue b/cookingd-front/src/views/AccountView.vue
@@ -50,7 +50,7 @@ const { result, loading, error } = useQuery(USER_INFO_QUERY, () => ({
 
 </script>
 <template>
-  <main>
+  <div>
     <h2>My Account</h2>
     <div v-if="!loading">
       user: {{ result.user.name }}
@@ -67,5 +67,5 @@ const { result, loading, error } = useQuery(USER_INFO_QUERY, () => ({
     <div v-else-if="error">
       <h3>Oopsie, there was an error!</h3>
     </div>
-  </main>
+  </div>
 </template>
diff --git a/cookingd-front/src/views/HomeView.vue b/cookingd-front/src/views/HomeView.vue
@@ -44,7 +44,7 @@ const { result, loading, error } = useQuery(LATEST_POSTS_QUERY, () => ({
 
 </script>
 <template>
-  <main>
+  <div>
     <h2>Homepage</h2>
 
     <div v-if="!loading">
@@ -64,20 +64,10 @@ const { result, loading, error } = useQuery(LATEST_POSTS_QUERY, () => ({
       <h3 style="color: greenyellow">Loading posts...</h3>
     </div>
 
-  </main>
+  </div>
 </template>
 <style>
-@media (min-width: 1020px) {
-  main {
-    width: 30%;
-  }
-}
 
-@media (max-width: 700px) {
-  main {
-    width: 100%;
-  }
-}
 
 .btn_page:disabled {
   color: red;

diff --git a/cookingd-front/src/views/Post.vue b/cookingd-front/src/views/Post.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+import { useRoute } from 'vue-router';
+import PostTopDetails from '@/components/posts/PostTopDetails.vue'
+import TagList from '@/components/posts/TagList.vue';
+
+const route = useRoute();
+
+const POST_QUERY = gql`
+query($post_id: String!){
+  postForId(postId : $post_id){
+    title
+    text
+    likes
+    rating
+    createdAt
+    allowComments
+    allowLikes
+    mainImageUrl
+    tags{
+      name
+    }
+    user{
+      name
+    }
+  }
+}
+`
+
+const { result, loading, error } = useQuery(POST_QUERY, () => ({
+  post_id: route.params.post_id
+}));
+
+</script>
+
+<template>
+  <div v-if="!loading">
+    <h3>{{ result.postForId.title }}</h3>
+    <PostTopDetails :name="result.postForId.user.name" :rating="result.postForId.rating"
+      :createdAt="result.postForId.createdAt" />
+    <img v-if="result.postForId.mainImageUrl" v-bind:src="result.postForId.mainImageUrl" class="post_image" />
+    <img v-else src="@/assets/missing_image.webp" class="post_image"/>
+    <div style="flex:50%">
+      <p>
+        {{ result.postForId.text }}
+      </p>
+      likes: {{ result.postForId.likes }}
+      <TagList :tags="result.postForId.tags" />
+    </div>
+
+  </div>
+
+  <div v-else-if="loading">
+    <h3 style="color: greenyellow">Loading posts...</h3>
+  </div>
+</template>