refactor(post): separate the post viewer

lemredd · Oct 10, 2022 · 480e3d0 · 480e3d0
1 parent 4b4e2d3
commit 480e3d0
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 52 deletions.
diff --git a/components/post/post_viewer.vue b/components/post/post_viewer.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="post-container" :hidden="post.isPostShown">
+		<div class="left">
+			<div><img src="./images/emptyUser.png"/></div>
+			<h2 class="title">
+				{{ post.user }}
+			</h2>
+		</div>
+		<div class="middle">
+			<h2 class="title">
+				{{ post.title }}
+				{{ post.badWordExist() }}
+			</h2>
+		</div>
+		<div class="right">
+			<h2 class="title">
+				{{ voteCountUpdate(post) }}
+			</h2>
+			<label class="switch">
+				<input
+					type="checkbox"
+					:checked="determineUserVoted(post)"
+					class="switch"
+					@click="upVote($event, post)"/>
+				<span class="slider"></span>
+			</label>
+			<h2 class="title">
+				{{ downVoteCountUpdate(post) }}
+			</h2>
+			<label class="switch">
+				<input
+					type="checkbox"
+					:checked="determineUserDownVoted(post)"
+					class="switch"
+					@click="downVote($event, post)"/>
+				<span class="slider"></span>
+			</label>
+
+			<h2 class="title">
+				{{ totalVotes(post) }}
+			</h2>
+		</div>
+		<p :class="`${post.id}`">
+			{{ post.desc }}
+		</p>
+	</div>
+</template>
+
+<style>
+
+</style>
+
+<script setup lang="ts">
+
+import {
+	voteCountUpdate,
+	determineUserVoted,
+	upVote,
+	downVoteCountUpdate,
+	determineUserDownVoted,
+	downVote,
+	totalVotes
+} from "./post"
+</script>
diff --git a/pages/forum/index.page.vue b/pages/forum/index.page.vue
@@ -97,51 +97,7 @@
 						</div>
 					</div>
 					<!--  -->
-					<div class="post-container" :hidden="post.isPostShown">
-						<div class="left">
-							<div><img src="./images/emptyUser.png"/></div>
-							<h2 class="title">
-								{{ post.user }}
-							</h2>
-						</div>
-						<div class="middle">
-							<h2 class="title">
-								{{ post.title }}
-								{{ post.badWordExist() }}
-							</h2>
-						</div>
-						<div class="right">
-							<h2 class="title">
-								{{ voteCountUpdate(post) }}
-							</h2>
-							<label class="switch">
-								<input
-									type="checkbox"
-									:checked="determineUserVoted(post)"
-									class="switch"
-									@click="upVote($event, post)"/>
-								<span class="slider"></span>
-							</label>
-							<h2 class="title">
-								{{ downVoteCountUpdate(post) }}
-							</h2>
-							<label class="switch">
-								<input
-									type="checkbox"
-									:checked="determineUserDownVoted(post)"
-									class="switch"
-									@click="downVote($event, post)"/>
-								<span class="slider"></span>
-							</label>
-
-							<h2 class="title">
-								{{ totalVotes(post) }}
-							</h2>
-						</div>
-						<p :class="`${post.id}`">
-							{{ post.desc }}
-						</p>
-					</div>
+					<PostViewer/>
 				</div>
 				<br/>
 			</div>
@@ -167,18 +123,13 @@
 import { ref } from "vue"
 import {
 	posts,
-	voteCountUpdate,
-	determineUserVoted,
-	upVote,
-	downVoteCountUpdate,
-	determineUserDownVoted,
-	downVote,
-	totalVotes,
 	secludePostDiv,
 	dummyUserDemo
 } from "./post"
 
 import makeSwitch from "$@/helpers/make_switch"
+
+import PostViewer from "@/post/post_viewer.vue"
 import PostMenu from "@/page_shell/dropdown.vue"
 import CreatePostForm from "@/post/create_post_form.vue"