AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixing: update in realtime the posts vote

Browse Source
This commit is contained in:
MuslemRahimi 2024-06-18 22:17:10 +02:00
parent e2e63c28cd
commit b3acd33c24
4 changed files with 105 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/PostSection.svelte
View File

@ -6,7 +6,7 @@
import Downvote from '$lib/components/Downvote.svelte';
import Upvote from '$lib/components/Upvote.svelte';
import {userRegion, tagList, postIdDeleted} from '$lib/store';
import {userRegion, postVote, tagList, postIdDeleted} from '$lib/store';
import toast from 'svelte-french-toast';
@ -144,6 +144,9 @@ const handleUpvote = async (event) => {
} else {
upvoteCounter[postId]--;
}
$postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
const response = await fetch(fastifyURL+'/upvote', {
method: 'POST',
headers: {
@ -178,6 +181,7 @@ const handleDownvote = async (event) => {
downvoteCounter[postId]--;
}
$postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
const response = await fetch(fastifyURL+'/downvote', {
method: 'POST',

1
src/lib/store.ts
View File

@ -82,6 +82,7 @@ export const switchWatchList = writable(<boolean>(false));
export const cachedPosts = writable(<Array<any>> {});
export const currentPagePosition = writable(<Number> (0));
export const postVote = writable(<Array<any>> {});
export const similarTickerClicked = writable(<boolean>(false));

50
src/routes/community/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang='ts'>
import { onMount,onDestroy } from 'svelte';
import { userRegion, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
import { userRegion, postVote, discordMembers, setCache, getCache, cachedPosts, currentPagePosition, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
import { afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
@ -236,7 +236,6 @@ onMount(async () => {
//getTickerMentioning(),
]);
window.scrollTo(0, 0);
loading = false;
}
@ -263,6 +262,7 @@ onMount(async () => {
onDestroy(async () => {
$postIdDeleted ='';
$postVote = {};
});
@ -304,6 +304,36 @@ afterNavigate(({from}) => {
})
// Function to update the vote
function updateVote(posts, postVote) {
const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
// Find the post by ID
const post = posts?.find(post => post?.id === id);
if (post) {
post.upvote = upvote;
post.downvote = downvote;
// Check if expand['alreadyVoted(post)'] exists
if (!post.expand['alreadyVoted(post)']) {
// Create the structure if it does not exist
post.expand['alreadyVoted(post)'] = [
{
type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
user: data?.user?.id
}
];
} else {
// Update the existing type based on the click flags
post.expand['alreadyVoted(post)'][0].type = upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral';
}
} else {
console.log("Post not found.");
}
return posts
}
$: {
if($postIdDeleted.length !== 0)
@ -315,9 +345,24 @@ $: {
}
$: {
if($postVote && Object?.keys($postVote).length !== 0)
{
//Update in realtime the already downloaded posts list when user votes
posts = updateVote(posts, $postVote)
//console.log(posts?.at(0))
$postVote = {};
}
}
$: {
if(posts)
{
console.log('caching saved')
$cachedPosts = {"sortingPosts": sortingPosts,'currentPage': currentPage, 'seenPostId': seenPostId, 'posts': posts};
}
}
@ -341,7 +386,6 @@ $: {
</script>

59
src/routes/community/post/[postId]/+page.svelte
View File

@ -9,7 +9,7 @@
import { onMount, onDestroy } from 'svelte';
import {userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import {userRegion, cachedPosts, postVote, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
@ -68,6 +68,9 @@
} else {
upvoteCounter[postId]--;
}
$postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
const response = await fetch(fastifyURL+'/upvote', {
method: 'POST',
headers: {
@ -102,7 +105,8 @@
downvoteCounter[postId]--;
}
$postVote = {'id': postId, 'upvote': upvoteCounter[postId], 'downvote': downvoteCounter[postId], 'upvoteClicked': upvoteButtonClicked[postId], 'downvoteClicked': downvoteButtonClicked[postId]};
const response = await fetch(fastifyURL+'/downvote', {
method: 'POST',
headers: {
@ -148,7 +152,7 @@
const handleReport = async () => {
dropdownOpen = !dropdownOpen;
dropdownOpen = !dropdownOpen;
toast.success('Post has been reported. Thank you!', {
style: 'border-radius: 200px; background: #333; color: #fff;'
});
@ -356,8 +360,41 @@
$commentAdded = '';
$commentIdDeleted = '';
$scrollToComment = '';
$postVote = {};
})
// Function to update the vote when posts are cached
function updateVote(postVote) {
const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
console.log(postVote)
// Find the post by ID
const item = $cachedPosts?.posts?.find(post => post?.id === id);
console.log(item)
if (item) {
item.upvote = upvote;
item.downvote = downvote;
// Check if expand['alreadyVoted(item)'] exists
if (!item.expand['alreadyVoted(item)']) {
// Create the structure if it does not exist
item.expand['alreadyVoted(post)'] = [
{
type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
user: data?.user?.id
}
];
} else {
// Update the existing type based on the click flags
item.expand['alreadyVoted(post)'][0].type = upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral';
}
} else {
console.log("Post not found.");
}
}
function addCommentToParent(comments, newComment) {
// Helper function to handle the recursion
@ -466,7 +503,17 @@
}
$: {
if($postVote && Object?.keys($postVote).length !== 0)
{
//Update in realtime the already downloaded posts list when user votes in cached posts
updateVote($postVote)
//console.log(posts?.at(0))
$postVote = {};
}
}
</script>
@ -480,7 +527,6 @@
<!-- Other meta tags -->
<meta property="og:title" content="{post.title} · stocknear"/>
<meta property="og:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
@ -488,7 +534,6 @@
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="{post.title} · stocknear"/>
<meta name="twitter:description" content="Your daily dose of stock market funny memes, GIFs, videos and weird news stories. We deliver hundreds of new stock market memes daily.">
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -523,7 +568,7 @@
</form>
<!--End Upvote-->
<label class="px-6 py-4 w-14 rounded-lg bg-[#202020] text-[1rem] text-bold text-white">
{upvoteCounter[post?.id] - downvoteCounter[post?.id] }
{typeof upvoteCounter[post?.id] === 'number' || typeof downvoteCounter[post?.id] === 'number' ? (upvoteCounter[post?.id] - downvoteCounter[post?.id]) : '-' }
</label>
<!--Start Downvote-->
<form on:submit={handleDownvote}>