From 570c1784f3ffd2ede7c23f0b560ff2cca02b0df9 Mon Sep 17 00:00:00 2001
From: Parajuli Kiran <kiranparajuli589@gmail.com>
Date: Mon, 22 Nov 2021 09:58:01 +0545
Subject: [PATCH] Linked publication detail page with api

---
 src/components/TheAppBar.vue                  |   9 +-
 src/components/feeds/FeedList.vue             |  16 +-
 src/components/feeds/ItemActions.vue          |  11 +-
 src/components/feeds/ItemHeader.vue           |  14 +-
 src/components/feeds/ItemImages.vue           |   4 +-
 src/components/utils/CommunityHoverBox.vue    |   4 +-
 src/mixin/FetchMixin.js                       |  29 +++
 src/mixin/RouteMixin.js                       |  12 +-
 src/router/index.js                           |   2 +-
 src/store/modules/publication.js              |   3 +
 src/utils.js                                  |   5 +-
 src/views/home/comment/FeedCommentItem.vue    |   2 +-
 src/views/home/community/AboutCommunity.vue   |  56 +++--
 src/views/home/community/Community.vue        | 218 ++++++++++--------
 src/views/home/community/CommunityRules.vue   |   8 +-
 .../home/community/MessageModerators.vue      |  25 +-
 src/views/home/community/PostsList.vue        |  17 +-
 src/views/home/community/Sidebar.vue          |  19 +-
 src/views/home/community/WikiPage.vue         |  70 +++++-
 .../community/register/Administration.vue     |   2 +-
 src/views/home/publication/Publication.vue    |  75 +++---
 src/views/home/publication/Sidebar.vue        |   8 +-
 22 files changed, 392 insertions(+), 217 deletions(-)
 create mode 100644 src/mixin/FetchMixin.js

diff --git a/src/components/TheAppBar.vue b/src/components/TheAppBar.vue
index 9b52d40..de1c97a 100644
--- a/src/components/TheAppBar.vue
+++ b/src/components/TheAppBar.vue
@@ -34,7 +34,7 @@
 					<v-avatar
 						v-if="routeNameStartsWith('User')"
 						size="30"
-						color="primary"
+						:color="(userInView && userInView.avatar) ? 'white': 'primary'"
 						class="mt-0 mb-2"
 					>
 						<v-img
@@ -45,12 +45,13 @@
 					<v-avatar
 						v-if="communityInView"
 						size="30"
-						:color="communityInView.theme.color"
+						:color="(communityInView && communityInView.avatar)
+							? 'white': communityInView.theme.color"
 						class="mt-0 mb-2"
 					>
 						<v-img
 							v-if="communityInView && communityInView.avatar"
-							:src="communityInView.avatar.image"
+							:src="$link(communityInView.avatar.image)"
 						/>
 					</v-avatar>
 				</template>
@@ -69,7 +70,7 @@
 				placeholder="Search WordClub"
 			>
 				<template #prepend-inner>
-					<v-icon size="22"> mdi-magnify</v-icon>
+					<v-icon size="22">mdi-magnify</v-icon>
 				</template>
 			</v-text-field>
 		</v-responsive>
diff --git a/src/components/feeds/FeedList.vue b/src/components/feeds/FeedList.vue
index 5dc6a7f..014667c 100644
--- a/src/components/feeds/FeedList.vue
+++ b/src/components/feeds/FeedList.vue
@@ -3,7 +3,6 @@
 		<v-card v-for="(item, index) in publications.results"
 			:key="index" class="my-4 feed-item" outlined
 		>
-			<!--			<v-btn @click="deletePub(item.id)" icon><v-icon>mdi-delete</v-icon></v-btn>-->
 			<item-header :item="item" />
 			<v-card-title class="py-1 cursor publication-title"
 				@click="toPublicationDetail(item.id)"
@@ -34,6 +33,15 @@ import PublicationType from "@/mixin/PublicationType.js";
 export default {
 	name: "FeedList",
 	mixins: [RouteMixin, PublicationType],
+	props: {
+		payload: {
+			type: Object,
+			default: () => ({
+				is_published: true,
+				depth: 3
+			})
+		}
+	},
 	data: () => ({
 		isLoading: true
 	}),
@@ -53,12 +61,8 @@ export default {
 		await this.fetchPublications()
 	},
 	methods: {
-		deletePub(id) {
-			const url = this.$util.format(this.$urls.publication.detail, id)
-			this.$axios.delete(url)
-		},
 		async fetchPublications() {
-			await this.$store.dispatch("publication/filter", {is_published: true, depth: 3})
+			await this.$store.dispatch("publication/filter", this.payload)
 			this.isLoading = false
 		}
 	}
diff --git a/src/components/feeds/ItemActions.vue b/src/components/feeds/ItemActions.vue
index 426b281..57307ae 100644
--- a/src/components/feeds/ItemActions.vue
+++ b/src/components/feeds/ItemActions.vue
@@ -49,7 +49,7 @@
 			<v-card-text v-if="commentMode">
 				<v-scale-transition>
 					<v-list class="mb-4 rounded"
-						v-if="item.comments.length"
+						v-if="!detail && item.comments.length"
 					>
 						<comment-item v-for="(comment, index) in item.comments"
 							:key="index"
@@ -86,7 +86,7 @@
 				<v-icon left
 					:color="commentMode ? 'white' : ''"
 				>mdi-comment-outline</v-icon>
-				{{item.comments.length}} Comments
+				{{item.reactions.comments}} Comments
 			</v-btn>
 			<v-menu offset-y>
 				<template #activator="{on, attrs}">
@@ -231,7 +231,10 @@ export default {
 	name: "ItemActions",
 	components: {CommentItem, ItemContent, ItemLink, ItemImages, ItemHeader, CommentField},
 	mixins: [PublicationType, Snack, PostMixin],
-	props: {item: {type: Object, default: () => {}}},
+	props: {
+		item: {type: Object, default: () => {}},
+		detail: {type: Boolean, default: false}
+	},
 	data: () => ({
 		clipboardContent: null,
 		commentMode: false,
@@ -252,7 +255,7 @@ export default {
 			return this.$vuetify.breakpoint.width < 600
 		},
 		reactionsCount() {
-			return this.item.reactions
+			return this.item.reactions.total
 		}
 	},
 	methods: {
diff --git a/src/components/feeds/ItemHeader.vue b/src/components/feeds/ItemHeader.vue
index 362daee..4b28c75 100644
--- a/src/components/feeds/ItemHeader.vue
+++ b/src/components/feeds/ItemHeader.vue
@@ -30,9 +30,15 @@
 				<v-list-item v-if="$helper.ifCurrentUserIs(item.created_by)"
 					:to="{name: 'Submit', params: {toEdit: item.id}}"
 				>
-					<v-list-item-icon class="mr-2"><v-icon>mdi-pencil</v-icon></v-list-item-icon>
+					<v-list-item-icon class="mr-2"><v-icon color="primary lighten-1">mdi-pencil</v-icon></v-list-item-icon>
 					<v-list-item-content><v-list-item-title>Edit Publication</v-list-item-title></v-list-item-content>
 				</v-list-item>
+				<v-list-item v-if="$helper.ifCurrentUserIs(item.created_by)"
+					@click="deletePublication()"
+				>
+					<v-list-item-icon class="mr-2"><v-icon color="red lighten-1">mdi-delete</v-icon></v-list-item-icon>
+					<v-list-item-content><v-list-item-title>Delete Publication</v-list-item-title></v-list-item-content>
+				</v-list-item>
 			</v-list>
 		</v-menu>
 	</v-card-text>
@@ -48,6 +54,12 @@ export default {
 	components: {
 		UserHoverBox,
 		CommunityHoverBox,
+	},
+	methods: {
+		deletePublication() {
+			const url = this.$util.format(this.$urls.publication.detail, this.item.id)
+			this.$axios.delete(url)
+		},
 	}
 }
 </script>
diff --git a/src/components/feeds/ItemImages.vue b/src/components/feeds/ItemImages.vue
index e0d2e94..606c05c 100644
--- a/src/components/feeds/ItemImages.vue
+++ b/src/components/feeds/ItemImages.vue
@@ -9,7 +9,7 @@
 				flat
 				height="350"
 			>
-				<v-img :src="image.image"
+				<v-img :src="$link(image.image)"
 					height="350"
 					contain
 				/>
@@ -24,7 +24,7 @@
 				flat
 				height="350"
 			>
-				<v-img :src="image.image_url"
+				<v-img :src="$link(image.image_url)"
 					height="350"
 					contain
 				/>
diff --git a/src/components/utils/CommunityHoverBox.vue b/src/components/utils/CommunityHoverBox.vue
index 2416221..da9049b 100644
--- a/src/components/utils/CommunityHoverBox.vue
+++ b/src/components/utils/CommunityHoverBox.vue
@@ -15,7 +15,7 @@
 					size="30"
 					:color="community.theme.color" tile
 					class="rounded cursor"
-					@click="toCommunityDetail(community.unique_id)"
+					@click="toCommunityDetail(community.id)"
 				>
 					<v-img v-if="community.avatar"
 						:src="$link(community.avatar)"
@@ -25,7 +25,7 @@
 				<div
 					class="px14 weight-600 cursor hover-underline"
 					:class="`${community.theme.color}--text`"
-					@click="toCommunityDetail(community.unique_id)"
+					@click="toCommunityDetail(community.id)"
 				>
 					{{ community.name }}
 				</div>
diff --git a/src/mixin/FetchMixin.js b/src/mixin/FetchMixin.js
new file mode 100644
index 0000000..ce5c8b3
--- /dev/null
+++ b/src/mixin/FetchMixin.js
@@ -0,0 +1,29 @@
+const FetchMixin = {
+	name: "FetchMixin",
+	data: () => ({
+		loading: true,
+		notFound: null
+	}),
+	beforeRouteLeave(to, from, next){
+		this.SET_TO_VIEW(null)
+		next()
+	},
+	methods: {
+		fetchDetail() {
+			this.routeId = this.$route.params.id
+			this.loading = true
+			return this.$axios
+				.get(this.$util.format(this.$urls[this.model].detail, this.routeId))
+				.then(res => {
+					this.SET_TO_VIEW(res)
+				})
+				.catch(() => {
+					this.notFound = true
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		}
+	}
+}
+export default FetchMixin
diff --git a/src/mixin/RouteMixin.js b/src/mixin/RouteMixin.js
index e1b2514..68fdb66 100644
--- a/src/mixin/RouteMixin.js
+++ b/src/mixin/RouteMixin.js
@@ -3,14 +3,14 @@ const RouteMixin = {
 		async toPublicationDetail(id) {
 			await this.$router.push({name: "Publication", params: {id: id}})
 		},
-		async toCommunityDetail(uniqueId) {
-			await this.$router.push({name: "Community Detail", params: {uniqueId: uniqueId}})
+		async toCommunityDetail(id) {
+			await this.$router.push({name: "Community Detail", params: {id: id}})
 		},
-		async toCommunityWiki(uniqueId) {
-			await this.$router.push({name: "Community Detail Wiki", params: {uniqueId: uniqueId}})
+		async toCommunityWiki(id) {
+			await this.$router.push({name: "Community Detail Wiki", params: {id: id}})
 		},
-		async toCommunityModmail(uniqueId) {
-			await this.$router.push({name: "Community Detail Modmail", params: {uniqueId: uniqueId}})
+		async toCommunityModmail(id) {
+			await this.$router.push({name: "Community Detail Modmail", params: {id: id}})
 		},
 		async toRegisterCommunity() {
 			await this.$router.push({name: "Community Mainframe"})
diff --git a/src/router/index.js b/src/router/index.js
index 1956d7b..db4158b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -96,7 +96,7 @@ const routes = [
 		}
 	},
 	{
-		path: "/community/:uniqueId",
+		path: "/community/:id",
 		components: {
 			default: () => import("@/views/home/community/Community"),
 			sidebar: () => import("@/views/home/community/Sidebar")
diff --git a/src/store/modules/publication.js b/src/store/modules/publication.js
index 5741a5e..5019a27 100644
--- a/src/store/modules/publication.js
+++ b/src/store/modules/publication.js
@@ -56,6 +56,9 @@ const actions = {
 	removeImageItem({commit}, draftId, itemId) {
 		commit("REMOVE_IMAGE_ITEM", draftId, itemId)
 	},
+	setInView({commit}, value) {
+		commit("SET_TO_VIEW", value)
+	}
 }
 
 export default {
diff --git a/src/utils.js b/src/utils.js
index 8263d7e..81b38b2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,4 +1,5 @@
 export function generateFullLink(link) {
-	if (link.startsWith("http://localhost:8000")) return link
-	return "http://localhost:8000" + link
+	if (link.startsWith("http://")) return link
+	else if (link.startsWith("https://")) return link
+	else return "http://localhost:8000" + link
 }
diff --git a/src/views/home/comment/FeedCommentItem.vue b/src/views/home/comment/FeedCommentItem.vue
index 68ac3b7..2ee240e 100644
--- a/src/views/home/comment/FeedCommentItem.vue
+++ b/src/views/home/comment/FeedCommentItem.vue
@@ -17,7 +17,7 @@
 					<v-icon>mdi-circle-small</v-icon>
 					<div class="px14 weight-600 cursor hover-underline"
 						:class="`${comment.publication.community.theme.color}--text`"
-						@click="toCommunityDetail(comment.publication.community.unique_id)"
+						@click="toCommunityDetail(comment.publication.community.id)"
 					>
 						{{ comment.publication.community.unique_id }}
 					</div>
diff --git a/src/views/home/community/AboutCommunity.vue b/src/views/home/community/AboutCommunity.vue
index 63ae8d8..af81e15 100644
--- a/src/views/home/community/AboutCommunity.vue
+++ b/src/views/home/community/AboutCommunity.vue
@@ -15,22 +15,22 @@
 		<v-card-text class="pa-3">
 			{{ community.quote }}
 		</v-card-text>
-		<v-card-text class="d-flex align-center pa-3 weight-500">
+		<v-card-text class="d-flex align-center pa-3 weight-500 justify-space-between">
 			<div>
 				<div class="px18">
-					{{ community.subscribers.count }}
+					{{ community.subscriptions.subscribers }}
 				</div>
 				<div class="px14">
-					{{ community.settings.what_to_call_subscribers }}
+					{{ community.theme.to_call_subscriber }}
 				</div>
 			</div>
 			<div class="px-1" />
 			<div>
 				<div class="px18">
-					{{ community.notifiedSubscribers.count }}
+					{{ community.subscriptions.notification_disables }}
 				</div>
 				<div class="px14">
-					{{ community.settings.feeling_after_subscribing }}
+					{{ community.theme.state_after_subscription }}
 				</div>
 			</div>
 		</v-card-text>
@@ -40,7 +40,7 @@
 				mdi-routes-clock
 			</v-icon>
 			<div class="px-2 px16 weight-500">
-				Created {{ $moment(community.timestamp).fromNow() }}
+				Created {{ $moment(community.date_of_registration).fromNow() }}
 			</div>
 		</v-card-text>
 		<v-card-text class="pa-3">
@@ -54,35 +54,34 @@
 		</v-card-text>
 		<v-divider />
 		<v-card-text>
-			<v-menu offset-y>
-				<template #activator="{on, attrs}">
-					<v-btn
-						depressed small
-						rounded block
-						v-bind="attrs"
-						v-on="on"
+			<v-btn
+				depressed small
+				rounded block
+				@click="seeTheme = !seeTheme"
+			>
+				<template #default>
+					<div class="d-flex align-center justify-space-between px-4"
+						style="width: 100%"
 					>
-						<template #default>
-							<div class="d-flex align-center justify-space-between px-4"
-								style="width: 100%"
-							>
-								<div>Community options</div>
-								<v-icon>mdi-chevron-down</v-icon>
-							</div>
-						</template>
-					</v-btn>
+						<div>Community options</div>
+						<v-icon>mdi-chevron-down</v-icon>
+					</div>
 				</template>
-				<v-list dense>
+			</v-btn>
+		</v-card-text>
+		<v-slide-y-transition>
+			<v-card-actions v-if="seeTheme">
+				<v-card outlined class="full-width" rounded="lg">
 					<v-list-item>
-						<v-list-item-icon>mdi-eye-outline</v-list-item-icon>
+						<v-list-item-icon><v-icon>mdi-eye-outline</v-icon></v-list-item-icon>
 						<v-list-item-content><v-list-item-title>Community Theme</v-list-item-title></v-list-item-content>
 						<v-list-item-action>
-							<v-switch v-model="seeTheme" />
+							<v-switch :color="community.theme.color" v-model="seeTheme" />
 						</v-list-item-action>
 					</v-list-item>
-				</v-list>
-			</v-menu>
-		</v-card-text>
+				</v-card>
+			</v-card-actions>
+		</v-slide-y-transition>
 	</v-card>
 </template>
 
@@ -100,7 +99,6 @@ export default {
 			community: "community/inView"
 		})
 	},
-	methods: {}
 }
 </script>
 
diff --git a/src/views/home/community/Community.vue b/src/views/home/community/Community.vue
index cddaddc..4188cf9 100644
--- a/src/views/home/community/Community.vue
+++ b/src/views/home/community/Community.vue
@@ -1,104 +1,149 @@
 <template>
-	<v-card class="mx-auto transparent"
-		flat
+	<v-card
+		class="mx-auto transparent"
+		flat :loading="loading"
 	>
-		<v-card-text class="pa-0">
-			<v-img :src="community.cover.image"
-				height="300"
-			/>
-		</v-card-text>
-		<v-card-title class="pa-0 white">
-			<v-card max-width="800"
-				width="800"
-				class="mx-auto"
-				flat color="white"
-			>
-				<v-card-text class="pa-3 pt-0 pb-1 d-flex align-center"
-					style="width: 100%"
+		<div v-if="community && community.theme">
+			<v-card-text class="pa-0">
+				<v-card height="300" :color="community.theme.color"
+					tile flat
 				>
-					<v-avatar
-						class="community-avatar"
-						size="80"
-						:color="community.theme.color"
-					>
-						<v-img v-if="community.avatar"
-							:src="community.avatar.image"
-						/>
-					</v-avatar>
-					<div class="px-2" />
-					<div class="px24">
-						{{ community.name }}
-					</div>
-					<v-spacer />
-					<div class="px-2" />
-					<v-btn outlined
-						color="teal"
-						rounded
-					>
-						Join
-					</v-btn>
-					<div class="px-2" />
-					<v-btn icon
-						color="teal"
-					>
-						<v-icon>mdi-bell</v-icon>
-					</v-btn>
-				</v-card-text>
-				<v-card-actions class="flex-wrap px14 weight-500 py-0">
-					<div class="community-top-button ma-2 mb-0 cursor"
-						:class="{'community-top-button-active': $route.name==='Community'}"
-						@click="toCommunityDetail(community.id)"
-					>
-						Posts
-					</div>
-					<div class="community-top-button ma-2 mb-0 cursor"
-						:class="{'community-top-button-active': $route.name==='Community Wiki'}"
-						@click="toCommunityWiki(community.id)"
-					>
-						Wiki
-					</div>
-					<div class="community-top-button ma-2 mb-0 cursor"
-						:class="{'community-top-button-active': $route.name==='Community Modmail'}"
-						@click="toCommunityModmail(community.id)"
+					<v-img
+						v-if="community.cover"
+						:src="$link(community.cover.image)"
+						height="300"
+					/>
+				</v-card>
+			</v-card-text>
+			<v-card-title class="pa-0 white">
+				<v-card max-width="800"
+					width="800"
+					class="mx-auto"
+					flat color="white"
+				>
+					<v-card-text class="pa-3 pt-0 pb-1 d-flex align-center"
+						style="width: 100%"
 					>
-						ModMail
-					</div>
-				</v-card-actions>
-			</v-card>
-		</v-card-title>
-		<v-card-text class="pt-4">
-			<v-card max-width="800"
-				class="mx-auto"
-				flat color="transparent"
-			>
-				<v-slide-x-transition>
-					<transition name="view">
-						<router-view />
-					</transition>
-				</v-slide-x-transition>
-			</v-card>
-		</v-card-text>
+						<v-avatar
+							class="community-avatar"
+							size="80"
+							:color="(community.avatar) ? 'white' : community.theme.color"
+						>
+							<v-img v-if="community.avatar"
+								:src="$link(community.avatar.image)"
+							/>
+						</v-avatar>
+						<div class="px-2" />
+						<div class="px24">
+							{{ community.name }}
+						</div>
+						<v-spacer />
+						<div class="px-2" />
+						<v-btn outlined rounded
+							:color="community.theme.color"
+						>
+							Join
+						</v-btn>
+						<div class="px-2" />
+						<v-btn icon :color="community.theme.color">
+							<v-icon>mdi-bell</v-icon>
+						</v-btn>
+					</v-card-text>
+					<v-card-actions class="flex-wrap px14 weight-500 py-0">
+						<div
+							class="community-top-button ma-2 mb-0 cursor"
+							@click="toCommunityDetail(community.id)"
+							:class="($route.name==='Community Detail') ? community.theme.color + '--text': ''"
+						>
+							<div class="px-1">Posts</div>
+							<v-scale-transition>
+								<v-card height="3" :color="community.theme.color"
+									v-if="$route.name==='Community Detail'"
+								/>
+							</v-scale-transition>
+						</div>
+						<div class="community-top-button ma-2 mb-0 cursor"
+							@click="toCommunityWiki(community.id)"
+							:class="($route.name==='Community Detail Wiki') ? community.theme.color + '--text': ''"
+						>
+							<div class="px-1">Wiki</div>
+							<v-scale-transition>
+								<v-card height="3" :color="community.theme.color"
+									v-if="$route.name==='Community Detail Wiki'"
+								/>
+							</v-scale-transition>
+						</div>
+						<div class="community-top-button ma-2 mb-0 cursor"
+							:class="($route.name==='Community Detail Modmail') ? community.theme.color + '--text': ''"
+							@click="toCommunityModmail(community.id)"
+						>
+							<div class="px-1">Modmail</div>
+							<v-scale-transition>
+								<v-card height="3" :color="community.theme.color"
+									v-if="$route.name==='Community Detail Modmail'"
+								/>
+							</v-scale-transition>
+						</div>
+					</v-card-actions>
+				</v-card>
+			</v-card-title>
+			<v-card-text class="pt-4">
+				<v-card max-width="800"
+					class="mx-auto"
+					flat color="transparent"
+				>
+					<v-slide-x-transition>
+						<transition name="view">
+							<router-view />
+						</transition>
+					</v-slide-x-transition>
+				</v-card>
+			</v-card-text>
+		</div>
 	</v-card>
 </template>
 
 <script>
-import {mapGetters} from "vuex";
+import {mapGetters, mapMutations} from "vuex";
 import RouteMixin from "@/mixin/RouteMixin.js";
+import FetchMixin from "@/mixin/FetchMixin.js";
 export default {
 	name: "Community",
-	mixins: [RouteMixin],
-	props: {},
-	data: () => ({}),
+	mixins: [RouteMixin, FetchMixin],
+	data: () => ({
+		model: "community"
+	}),
 	computed: {
 		...mapGetters({
 			community: "community/inView"
 		})
 	},
-	methods: {}
+	created() {
+		this.fetchDetail()
+			.then(() => {
+				this.setTabListeners(this.community.theme.color)
+			})
+	},
+	methods: {
+		...mapMutations("community", ["SET_TO_VIEW"]),
+		setTabListeners(color) {
+			function onMouseOver(e) {
+				e.target.classList.add(`${color}--text`)
+			}
+			function onMouseOut(e) {
+				e.target.classList.remove(`${color}--text`)
+			}
+			const tabs = document.querySelectorAll(".community-top-button")
+			tabs.forEach(tab => {
+				tab.addEventListener("mouseover", onMouseOver)
+				tab.addEventListener("mouseout", onMouseOut)
+			})
+		}
+	}
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .community-avatar {
 	border: 4px solid white !important;
 	margin-top: -10px;
@@ -107,15 +152,8 @@ export default {
 	font-size: 24px;
 }
 .community-top-button {
-	padding: 0 6px;
-	color: #666666;
+	color: #818080;
 	text-transform: uppercase;
 	font-weight: 600;
 }
-.community-top-button:hover {
-	color: #269687
-}
-.community-top-button-active {
-	border-bottom: 3px solid #269687;
-}
 </style>
diff --git a/src/views/home/community/CommunityRules.vue b/src/views/home/community/CommunityRules.vue
index 8e98c31..5b2fedd 100644
--- a/src/views/home/community/CommunityRules.vue
+++ b/src/views/home/community/CommunityRules.vue
@@ -1,6 +1,8 @@
 <template>
 	<v-card outlined>
-		<v-card-title class="px-3 py-2 teal white--text px14 weight-500">
+		<v-card-title class="px-3 py-2 white--text px14 weight-500"
+			:class="community.theme.color"
+		>
 			#/{{ community.unique_id }} Rules
 		</v-card-title>
 		<v-divider class="mx-2" />
@@ -9,13 +11,13 @@
 				<template #default>
 					<tbody>
 						<tr v-for="(item, index) in community.rules"
-							:key="item"
+							:key="item.id"
 						>
 							<td class="weight-500">
 								{{ index + 1 }}
 							</td>
 							<td class="weight-500">
-								{{ item }}
+								{{ item.title }}
 							</td>
 						</tr>
 					</tbody>
diff --git a/src/views/home/community/MessageModerators.vue b/src/views/home/community/MessageModerators.vue
index daf80ff..a65b300 100644
--- a/src/views/home/community/MessageModerators.vue
+++ b/src/views/home/community/MessageModerators.vue
@@ -17,32 +17,43 @@
 			</v-btn>
 		</v-card-text>
 		<v-card-text>
-			<div v-for="(mod, index) in community.moderators"
+			<div v-for="(mod, index) in community.admins"
 				:key="index"
 				class="d-flex weight-500 align-center py-1"
 				:class="`${community.theme.color}--text`"
 			>
 				<div>
-					{{ mod.username }}
+					{{ mod.user.username }}
 				</div>
-				<div v-if="mod.role.president || mod.role.vc"
-					class="px-1"
-				>
+				<div class="px-1">
 					-
 				</div>
-				<div v-if="mod.role.president"
+				<div
 					class="white--text rounded px-1"
 					:class="community.theme.color"
 				>
 					President
 				</div>
-				<div v-if="mod.role.vc"
+			</div>
+			<div v-for="(mod, index) in community.sub_admins"
+				:key="index"
+				class="d-flex weight-500 align-center py-1"
+				:class="`${community.theme.color}--text`"
+			>
+				<div>
+					{{ mod.user.username }}
+				</div>
+				<div class="px-1">
+					-
+				</div>
+				<div
 					class="white--text rounded px-1"
 					:class="community.theme.color"
 				>
 					Vice President
 				</div>
 			</div>
+
 		</v-card-text>
 	</v-card>
 </template>
diff --git a/src/views/home/community/PostsList.vue b/src/views/home/community/PostsList.vue
index 3feda32..cc039ec 100644
--- a/src/views/home/community/PostsList.vue
+++ b/src/views/home/community/PostsList.vue
@@ -4,7 +4,7 @@
 		<div class="py-2" />
 		<hot-bar :color="community.theme.color" />
 		<div class="py-2" />
-		<!--		<feed-list />-->
+		<feed-list :payload="payload" />
 	</div>
 </template>
 
@@ -12,18 +12,21 @@
 import AddPostBox from "@/views/home/components/AddPostBox.vue";
 import HotBar from "@/views/home/components/HotBar.vue";
 import {mapGetters} from "vuex";
+import FeedList from "@/components/feeds/FeedList.vue";
 export default {
 	name: "PostsList",
-	// feed list for community
-	components: {HotBar, AddPostBox},
-	props: {},
-	data: () => ({}),
+	components: {FeedList, HotBar, AddPostBox},
 	computed: {
 		...mapGetters({
 			community: "community/inView"
-		})
+		}),
+		payload() {
+			return {
+				is_published: true,
+				community: this.community.id
+			}
+		}
 	},
-	methods: {}
 }
 </script>
 
diff --git a/src/views/home/community/Sidebar.vue b/src/views/home/community/Sidebar.vue
index 60c7884..b2455b3 100644
--- a/src/views/home/community/Sidebar.vue
+++ b/src/views/home/community/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="pa-2">
+	<div class="px-2 pb-16" v-if="community">
 		<about-community />
 		<div class="py-2" />
 		<community-rules />
@@ -11,17 +11,20 @@
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
 	name: "Sidebar",
 	components: {
-		AboutCommunity: () =>  import("@/views/home/community/AboutCommunity.vue"),
-		CommunityRules: () =>  import("@/views/home/community/CommunityRules.vue"),
-		MessageModerators: () =>  import("@/views/home/community/MessageModerators.vue"),
+		AboutCommunity: () =>  import("@/views/home/community/AboutCommunity"),
+		CommunityRules: () =>  import("@/views/home/community/CommunityRules"),
+		MessageModerators: () =>  import("@/views/home/community/MessageModerators"),
+	},
+	computed: {
+		...mapGetters({
+			community: "community/inView"
+		})
 	},
-	props: {},
-	data: () => ({}),
-	computed: {},
-	methods: {}
 }
 </script>
 
diff --git a/src/views/home/community/WikiPage.vue b/src/views/home/community/WikiPage.vue
index 5ad7181..f26e86d 100644
--- a/src/views/home/community/WikiPage.vue
+++ b/src/views/home/community/WikiPage.vue
@@ -1,17 +1,79 @@
 <template>
-	<div />
+	<v-card flat>
+		<v-card-actions class="grey lighten-5">
+			<v-spacer />
+			<v-menu offset-y>
+				<template #activator="{on, attrs}">
+					<v-btn icon
+						v-bind="attrs" v-on="on"
+					>
+						<v-icon>mdi-dots-horizontal</v-icon>
+					</v-btn>
+				</template>
+				<v-list dense>
+					<v-list-item>View Wiki History</v-list-item>
+					<v-divider />
+					<v-list-item>View Page Source</v-list-item>
+					<v-divider />
+					<v-list-item>Copy URL</v-list-item>
+				</v-list>
+			</v-menu>
+		</v-card-actions>
+		<v-card-text>
+			<v-card flat color="grey lighten-4">
+				<v-card-title class="table-of-content">Table of content</v-card-title>
+				<v-card-text>
+					<v-list class="content-item-list" dense>
+						<v-list-item class="content-item">
+							Welcome to {{community.name}}!
+						</v-list-item>
+						<v-list-item class="content-item">
+							Rules
+						</v-list-item>
+						<v-list-item class="content-item align-center">
+							<v-list-item-icon class="mr-2 my-0"><v-icon>mdi-circle-small</v-icon></v-list-item-icon>
+							<v-list-item-content><v-list-item-title>One</v-list-item-title></v-list-item-content>
+						</v-list-item>
+						<v-list-item class="content-item align-center">
+							<v-list-item-icon class="mr-2 my-0"><v-icon>mdi-circle-small</v-icon></v-list-item-icon>
+							<v-list-item-content><v-list-item-title>One</v-list-item-title></v-list-item-content>
+						</v-list-item>
+						<v-list-item class="content-item align-center">
+							<v-list-item-icon class="mr-2 my-0"><v-icon>mdi-circle-small</v-icon></v-list-item-icon>
+							<v-list-item-content><v-list-item-title>One</v-list-item-title></v-list-item-content>
+						</v-list-item>
+						<v-list-item class="content-item align-center">
+							<v-list-item-icon class="mr-2 my-0"><v-icon>mdi-circle-small</v-icon></v-list-item-icon>
+							<v-list-item-content><v-list-item-title>One</v-list-item-title></v-list-item-content>
+						</v-list-item>
+					</v-list>
+				</v-card-text>
+			</v-card>
+		</v-card-text>
+	</v-card>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
 	name: "WikiPage",
 	props: {},
 	data: () => ({}),
-	computed: {},
+	computed: {
+		...mapGetters({
+			community: "community/inView"
+		})
+	},
 	methods: {}
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.table-of-content {
+	font-size: 18px!important;
+}
+::v-deep.v-list-item {
+	min-height: 30px !important;
+}
 </style>
diff --git a/src/views/home/community/register/Administration.vue b/src/views/home/community/register/Administration.vue
index b7c374c..25c6e1f 100644
--- a/src/views/home/community/register/Administration.vue
+++ b/src/views/home/community/register/Administration.vue
@@ -48,7 +48,7 @@
 				<v-spacer />
 				<v-btn color="grey" dark>Skip</v-btn>
 				<v-btn color="primary"
-					@click="toCommunityDetail(community.unique_id)"
+					@click="toCommunityDetail(community.id)"
 				>Submit</v-btn>
 			</v-card-actions>
 		</div>
diff --git a/src/views/home/publication/Publication.vue b/src/views/home/publication/Publication.vue
index 4dc2173..f748112 100644
--- a/src/views/home/publication/Publication.vue
+++ b/src/views/home/publication/Publication.vue
@@ -1,36 +1,16 @@
 <template>
-	<v-card outlined
+	<v-card outlined :loading="loading"
 		class="mx-auto" max-width="800"
 	>
-		<v-card-text class="d-flex align-center py-2 flex-wrap justify-space-between">
-			<community-hover-box :community="publication.community" />
-			<v-icon>mdi-circle-small</v-icon>
-			<user-hover-box :user="publication.created_by" />
-			<v-icon>mdi-circle-small</v-icon>
-			<div class="publication-timestamp">
-				{{ $moment(publication.timestamp).fromNow() }}
-			</div>
-			<v-spacer />
-			<v-btn icon>
-				<v-icon>mdi-dots-horizontal</v-icon>
-			</v-btn>
-		</v-card-text>
+		<item-header :item="publication" />
 		<v-card-title class="py-2 publication-title">
 			{{ publication.title }}
 		</v-card-title>
-		<v-card-text class="py-2 px16">
-			Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
-		</v-card-text>
-		<v-img src="https://www.gaonconnection.com/h-upload/2018/08/142057lsun8ytpjw37abf0qnrntgspzxa8sogd2800639.png"
-			height="400"
-		/>
-		<v-card-text class="px16">
-			Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
-		</v-card-text>
-		<actions />
-		<v-card-actions class="pb-0 px-1">
-			<comment-field :publication="publication.id" />
-		</v-card-actions>
+		<item-images v-if="publication.type === 'media'" :item="publication" />
+		<item-link v-if="publication.type === 'link'" :link="publication.link"/>
+		<item-content v-if="publication.type ==='editor'" :content="JSON.parse(publication.content)" />
+		<item-actions :item="publication" @init="fetchDetail" :detail="true" />
+		<v-divider />
 		<v-card-text>
 			<v-menu offset-y>
 				<template #activator="{on, attrs}">
@@ -61,33 +41,54 @@
 				</div>
 			</div>
 		</v-card-text>
-		<v-card-text class="px-0">
-			<comment-list />
+		<v-card-text class="py-0">
+			<comment-item v-for="(comment, index) in publication.comments"
+				:key="index"
+				:index="index"
+				:item="comment"
+				:count="publication.comments.length"
+				@init="$emit('init')"
+			/>
 		</v-card-text>
 	</v-card>
 </template>
 
 <script>
 import RouteMixin from "@/mixin/RouteMixin.js";
-import {mapGetters} from "vuex";
+import {mapGetters, mapMutations} from "vuex";
+import ItemHeader from "@/components/feeds/ItemHeader.vue";
+import ItemContent from "@/components/feeds/ItemContent.vue";
+import ItemImages from "@/components/feeds/ItemImages.vue";
+import ItemLink from "@/components/feeds/ItemLink.vue";
+import ItemActions from "@/components/feeds/ItemActions.vue";
+import CommentItem from "@/views/home/publication/CommentItem.vue";
+import FetchMixin from "@/mixin/FetchMixin.js";
 
 export default {
 	name: "Publication",
 	components: {
-		UserHoverBox: () => import("@/components/utils/UserHoverBox.vue"),
-		CommunityHoverBox: () => import("@/components/utils/CommunityHoverBox.vue"),
-		Actions: () => import("@/views/home/publication/Actions.vue"),
-		CommentList: () => import("@/views/home/publication/CommentList.vue"),
-		CommentField: () => import("@/components/form/CommentField.vue")
+		CommentItem,
+		ItemActions,
+		ItemLink,
+		ItemImages,
+		ItemContent,
+		ItemHeader
 	},
-	mixins: [RouteMixin],
+	mixins: [RouteMixin, FetchMixin],
 	data: () => ({
-		myComment: ""
+		myComment: "",
+		model: "publication"
 	}),
 	computed: {
 		...mapGetters({
 			publication: "publication/inView"
 		})
+	},
+	created() {
+		this.fetchDetail()
+	},
+	methods: {
+		...mapMutations("publication", ["SET_TO_VIEW"])
 	}
 }
 </script>
diff --git a/src/views/home/publication/Sidebar.vue b/src/views/home/publication/Sidebar.vue
index 01a7659..fcda8ed 100644
--- a/src/views/home/publication/Sidebar.vue
+++ b/src/views/home/publication/Sidebar.vue
@@ -1,6 +1,10 @@
 <template>
-	<div class="pa-2">
-		<community-peek :community="publication.community" />
+	<div v-if="publication" class="pa-2">
+		<community-peek
+			v-if="publication.community"
+			:community="publication.community"
+		/>
+
 		<div class="py-4" />
 		<posting-to-word-club />
 		<div class="py-4" />