I've developed an API that transmits a video along with all its comments, and in the frontend, the video is called on mount. I have implemented a create comment button that triggers a createComment route to add a comment to the video and store it in the database. However, the newly added comment does not display because after the initial fetch for all videos is made, the code then utilizes session storage to retain the videos without having to call the API on every mount. Is there a way to include the new comment in the session storage? Each comment is associated with its respective video, so each video is represented as an object with a 'comments' array property.
Any assistance with this issue would be greatly appreciated.
HOME PAGE
<template>
<div class="home">
<SelectedVideo v-bind:user="user" v-bind:video="videos[0]"/>
</div>
</template>
<script>
import axios from 'axios';
import SelectedVideo from '../components/SelectedVideo.component';
axios.defaults.withCredentials = true;
export default {
name: 'Home',
components: {
SelectedVideo
},
data() {
return {
videos: [],
user: null
}
},
created() {
if (sessionStorage.homeVideos) {
console.log('Retrieving from session storage...');
this.videos = JSON.parse(sessionStorage.homeVideos);
} else {
console.log('Fetching from API and saving response to session storage...');
axios.get('http://localhost:8000/api/v1/videos')
.then(res => {
sessionStorage.setItem('homeVideos', JSON.stringify(res.data.data.videos));
this.videos = JSON.parse(sessionStorage.homeVideos);
})
.catch(err => console.log("ERROR: " + err.response.data.message));
}
},
mounted(){
if (sessionStorage.user) {
this.user = JSON.parse(sessionStorage.user);
}
}
}
</script>
<style lang="scss" scoped>
</style>
Selected Video component
<template>
<div class="selected">
<h2 class="selected__title">{{video.title}}</h2>
<video class="selected__video" :src=video.video controls :poster=video.thumb></video>
<div style="width: 70%;">
<div class="selected__details">
<h3 class="selected__details__views">300 views</h3>
<div class="selected__thumbs">
<div class="selected__like">👍 47</div>
<div class="selected__dislike">👎 3</div>
</div>
</div>
<form class="selected__commentbox">
<label for="comments" class="selected__commentbox__label">Comments</label>
<textarea v-model="text" class="selected__commentbox__textarea" rows="4" id="comments" placeholder="Type a sweet comment..."></textarea>
<button @click="handleSubmit" class="selected__commentBtn">add comment</button>
</form>
<div v-bind:key="comment._id" v-for="comment in video.comments" class="selected__comments">
<Comment v-bind:comment="comment"/>
</div>
</div>
</div>
</template>
<script>
import Comment from './Comment.component.vue';
import axios from 'axios';
export default {
name: 'SelectedVideo',
data() {
return {
text: null,
videoId: this.video._id,
userId: this.user._id
}
},
props: ["video", "user"],
components: {
Comment
},
methods: {
handleSubmit(event) {
event.preventDefault();
this.createComment(this.text, this.videoId, this.userId);
this.text = '';
},
async createComment(comment, video, user) {
try{
const res = await axios({
method: 'POST',
url: 'http://localhost:8000/api/v1/comments/',
data: {
comment,
video,
user
}
});
if (res.data.status === 'success') {
// location.reload(true);
console.log(res);
}
} catch(err) {
console.log(err.response.data.message);
}
}
}
}
</script>