From d0ddb4e78e1b10df278d859845562e400c7590c7 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 13 Jun 2021 00:19:59 -0600
Subject: [PATCH] Update StoryCompose component

---
 .../assets/js/components/StoryCompose.vue     | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/components/StoryCompose.vue b/resources/assets/js/components/StoryCompose.vue
index b196c56b..ba6a35f7 100644
--- a/resources/assets/js/components/StoryCompose.vue
+++ b/resources/assets/js/components/StoryCompose.vue
@@ -165,11 +165,21 @@
 										<p class="mb-0 text-muted font-weight-bold"><span>{{story.created_ago}} ago</span></p>
 									</div>
 									<div class="flex-grow-1 text-right">
+										<button v-if="story.viewers.length" @click="toggleShowViewers(index)" class="btn btn-link btn-sm mr-1">
+											<i class="fas fa-eye fa-lg text-muted"></i>
+										</button>
 										<button @click="deleteStory(story, index)" class="btn btn-link btn-sm">
 											<i class="fas fa-trash-alt fa-lg text-muted"></i>
 										</button>
 									</div>
 								</div>
+								<div v-if="story.showViewers && story.viewers.length" class="m-2 text-left">
+									<p class="font-weight-bold mb-2">Viewed By</p>
+									<div v-for="viewer in story.viewers" class="d-flex">
+										<img src="/storage/avatars/default.png" width="24" height="24" class="rounded-circle mr-2">
+										<p class="mb-0 font-weight-bold">viewer.username</p>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -256,7 +266,11 @@
 			this.mediaWatcher();
 			axios.get('/api/stories/v0/fetch/' + this.profileId)
 			.then(res => {
-				this.stories = res.data;
+				this.stories = res.data.map(s => {
+					s.showViewers = false;
+					s.viewers = [];
+					return s;
+				});
 				this.loaded = true;
 			});
 		},
@@ -397,6 +411,10 @@
 
 			viewMyStory() {
 				window.location.href = '/i/my/story';
+			},
+
+			toggleShowViewers(index) {
+				this.stories[index].showViewers = this.stories[index].showViewers ? false : true;
 			}
 		}
 	}