This commit is contained in:
MuslemRahimi 2024-06-05 08:15:37 +02:00
parent 05a14b91be
commit 226d21c6e7
5 changed files with 979 additions and 982 deletions

View File

@ -74,7 +74,7 @@ export const oauthProvider = writable(<string> (""));
export const switchWatchList = writable(<boolean>(false)); export const switchWatchList = writable(<boolean>(false));
export const cachedPosts = writable(<Array<any>> []); export const cachedPosts = writable(<Array<any>> {});
export const currentPagePosition = writable(<Number> (0)); export const currentPagePosition = writable(<Number> (0));
export const similarTickerClicked = writable(<boolean>(false)); export const similarTickerClicked = writable(<boolean>(false));

View File

@ -163,7 +163,7 @@ async function getPost() {
let postData; let postData;
if ($cachedPosts?.length === 0) if (Object?.keys($cachedPosts)?.length === 0)
{ {
postData = { postData = {
//userId: data?.user.id, //userId: data?.user.id,
@ -176,8 +176,8 @@ async function getPost() {
{ {
postData = { postData = {
//userId: data?.user.id, //userId: data?.user.id,
startPage: $cachedPosts[0].currentPage, startPage: $cachedPosts?.currentPage,
seenPostId: $cachedPosts[0].seenPostId.length === 0 ? [] : $cachedPosts[0].seenPostId, seenPostId: $cachedPosts?.seenPostId.length === 0 ? [] : $cachedPosts?.seenPostId,
sortingPosts: sortingPosts, sortingPosts: sortingPosts,
}; };
} }
@ -227,9 +227,9 @@ let LoginPopup;
let BottomNavigation; let BottomNavigation;
onMount(async () => { onMount(async () => {
if ($cachedPosts?.length === 0) { if (Object?.keys($cachedPosts)?.length === 0) {
// Only make API requests if cached posts are not available // Only make API requests if cached posts are not available
[communityStats, moderators, posts, discordData] = await Promise.all([ [communityStats, moderators, posts, discordData] = await Promise?.all([
getCommunityStats(), getCommunityStats(),
getModerators(), getModerators(),
getPost(), getPost(),
@ -244,7 +244,7 @@ onMount(async () => {
else { else {
// Use cached data if available // Use cached data if available
posts = $cachedPosts?.at(0)?.posts; posts = $cachedPosts?.posts;
communityStats = getCache('', 'getCommunityStats'); communityStats = getCache('', 'getCommunityStats');
moderators = getCache('', 'getModerators'); moderators = getCache('', 'getModerators');
discordData = getCache('','getDiscordWidget'); discordData = getCache('','getDiscordWidget');
@ -269,7 +269,7 @@ onDestroy(async () => {
let sortingPosts = $cachedPosts?.at(0)?.sortingPosts?.length > 0 ? $cachedPosts?.at(0)?.sortingPosts : 'hot'; let sortingPosts = $cachedPosts?.sortingPosts?.length > 0 ? $cachedPosts?.sortingPosts : 'hot';
async function handleCategoryOfPosts(state) { async function handleCategoryOfPosts(state) {
loading = true; loading = true;
@ -280,7 +280,7 @@ async function handleCategoryOfPosts(state) {
noPostMore = false; noPostMore = false;
sortingPosts = state; sortingPosts = state;
$cachedPosts = []; $cachedPosts = {};
posts = await getPost(); posts = await getPost();
loading = false; loading = false;
} }
@ -319,7 +319,7 @@ $: {
$: { $: {
if(posts) if(posts)
{ {
$cachedPosts = [{"sortingPosts": sortingPosts,'currentPage': currentPage, 'seenPostId': seenPostId, 'posts': posts}]; $cachedPosts = {"sortingPosts": sortingPosts,'currentPage': currentPage, 'seenPostId': seenPostId, 'posts': posts};
} }
} }

View File

@ -1,38 +1,7 @@
import { error, fail, redirect } from "@sveltejs/kit"; import { error, fail, redirect } from "@sveltejs/kit";
import { validateData } from "$lib/utils"; import { validateData } from "$lib/utils";
import { loginUserSchema, registerUserSchema } from "$lib/schemas"; import { loginUserSchema, registerUserSchema } from "$lib/schemas";
import { userRegion, oauthState, oauthVerifier, oauthProvider } from '$lib/store'; import { oauthState, oauthVerifier, oauthProvider } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
} else {
fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
}
});
export const load = async ({ params }) => {
const getPostId = async () => {
return params.postId;
};
return {
getPostId: await getPostId(),
};
};
export const actions = { export const actions = {

View File

@ -1,26 +1,28 @@
<script lang='ts'> <script lang='ts'>
import {getImageURL, formatDate} from '$lib/utils'; import {getImageURL, formatDate} from '$lib/utils';
import CommentSection from '$lib/components/CommentSection.svelte'; import CommentSection from '$lib/components/CommentSection.svelte';
import TextEditor from '$lib/components/TextEditor.svelte'; import TextEditor from '$lib/components/TextEditor.svelte';
import Downvote from '$lib/components/Downvote.svelte'; import Downvote from '$lib/components/Downvote.svelte';
import Upvote from '$lib/components/Upvote.svelte'; import Upvote from '$lib/components/Upvote.svelte';
import VideoPlayer from '$lib/components/VideoPlayer.svelte'; import VideoPlayer from '$lib/components/VideoPlayer.svelte';
import { onMount, onDestroy } from 'svelte';
import {cachedPosts, userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
import toast from 'svelte-french-toast';
export let data; import { onMount, onDestroy } from 'svelte';
export let form; import {userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
const usRegion = ['cle1','iad1','pdx1','sfo1']; import toast from 'svelte-french-toast';
let fastifyURL; export let data;
export let form;
userRegion.subscribe(value => { const usRegion = ['cle1','iad1','pdx1','sfo1'];
let fastifyURL;
userRegion.subscribe(value => {
if (usRegion.includes(value)) { if (usRegion.includes(value)) {
fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL; fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
@ -30,35 +32,19 @@ userRegion.subscribe(value => {
}); });
let post = {'id': 'test', 'upvote': 0, 'downvote': 0}; let post = data?.getOnePost;
let isScrolled = false; let isScrolled = false;
let isLoaded = false; let isLoaded = false;
let upvoteButtonClicked = {}; let upvoteButtonClicked = {};
let downvoteButtonClicked = {}; let downvoteButtonClicked = {};
let upvoteCounter = {}; let upvoteCounter = {};
let downvoteCounter = {}; let downvoteCounter = {};
let userAlreadyVoted; let userAlreadyVoted;
async function getOnePost() {
const postData = {'postId': data?.getPostId};
const response = await fetch(fastifyURL+'/get-one-post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
const output = await response.json()
return output?.items
}
const handleUpvote = async (event) => {
const handleUpvote = async (event) => {
event.preventDefault(); // prevent the default form submission behavior event.preventDefault(); // prevent the default form submission behavior
@ -90,9 +76,9 @@ const handleUpvote = async (event) => {
body: JSON.stringify(postData) body: JSON.stringify(postData)
}); // make a POST request to the server with the FormData object }); // make a POST request to the server with the FormData object
}; };
const handleDownvote = async (event) => { const handleDownvote = async (event) => {
event.preventDefault(); // prevent the default form submission behavior event.preventDefault(); // prevent the default form submission behavior
const postId = event.target.postId.value; const postId = event.target.postId.value;
@ -125,9 +111,9 @@ const handleDownvote = async (event) => {
body: JSON.stringify(postData) body: JSON.stringify(postData)
}); // make a POST request to the server with the FormData object }); // make a POST request to the server with the FormData object
}; };
function handleScroll() { function handleScroll() {
// Check the scroll position // Check the scroll position
isScrolled = window.scrollY > 0; isScrolled = window.scrollY > 0;
@ -135,7 +121,7 @@ function handleScroll() {
} }
const sortCommentsByDate = (comments) => { const sortCommentsByDate = (comments) => {
return comments.sort(function(a, b) { return comments.sort(function(a, b) {
return new Date(b?.created) - new Date(a?.created); return new Date(b?.created) - new Date(a?.created);
}); });
@ -144,33 +130,33 @@ const sortCommentsByDate = (comments) => {
let dropdownOpen = false; // State variable to control dropdown visibility let dropdownOpen = false; // State variable to control dropdown visibility
function toggleDropdown() { function toggleDropdown() {
dropdownOpen = !dropdownOpen; dropdownOpen = !dropdownOpen;
} }
const handleCopyLink = async () => { const handleCopyLink = async () => {
dropdownOpen = !dropdownOpen; dropdownOpen = !dropdownOpen;
await navigator.clipboard.writeText("https://stocknear.com/community/post/"+post.id); await navigator.clipboard.writeText("https://stocknear.com/community/post/"+post.id);
toast.success('Link copied', { toast.success('Link copied', {
style: 'border-radius: 200px; background: #333; color: #fff;' style: 'border-radius: 200px; background: #333; color: #fff;'
}); });
}; };
const handleReport = async () => { const handleReport = async () => {
dropdownOpen = !dropdownOpen; dropdownOpen = !dropdownOpen;
toast.success('Post has been reported. Thank you!', { toast.success('Post has been reported. Thank you!', {
style: 'border-radius: 200px; background: #333; color: #fff;' style: 'border-radius: 200px; background: #333; color: #fff;'
}); });
}; };
const handleDeletePost = async () => { const handleDeletePost = async () => {
dropdownOpen = !dropdownOpen; dropdownOpen = !dropdownOpen;
@ -206,26 +192,26 @@ const handleDeletePost = async () => {
style: 'border-radius: 200px; background: #333; color: #fff;' style: 'border-radius: 200px; background: #333; color: #fff;'
}); });
} }
}; };
let numberOfComments = 0; let numberOfComments = 0;
let comments = []; let comments = [];
//let replyComments = data?.allReplyComments?.items.reverse() || []; //let replyComments = data?.allReplyComments?.items.reverse() || [];
let moderators; let moderators;
let videoId = null; let videoId = null;
let loadTextEditor = false; let loadTextEditor = false;
async function getAllComments() async function getAllComments()
{ {
const postData = {'postId': data?.getPostId}; const postData = {'postId': data?.getPostId};
@ -242,10 +228,10 @@ async function getAllComments()
return output; return output;
}; };
const getModerators = async () => { const getModerators = async () => {
let output; let output;
// Get cached data for the specific tickerID // Get cached data for the specific tickerID
@ -272,48 +258,28 @@ const getModerators = async () => {
function isModerator(userId) { function isModerator(userId) {
return moderators?.some(moderator => userId === moderator?.user); return moderators?.some(moderator => userId === moderator?.user);
} }
function countAllComments(comments) { function countAllComments(comments) {
// Helper function to recursively count comments // Helper function to recursively count comments
function countComments(commentsList) { function countComments(commentsList) {
let count = 0; let count = 0;
for (let comment of commentsList) { for (let comment of commentsList) {
count += 1; // Count this comment count += 1; // Count this comment
if (comment.children && comment.children.length > 0) { if (comment.children && comment.children.length > 0) {
count += countComments(comment.children); // Recursively count nested comments count += countComments(comment.children); // Recursively count nested comments
} }
} }
return count; return count;
} }
return countComments(comments); return countComments(comments);
}
let LoginPopup;
onMount(async () => {
post = $cachedPosts?.at(0)?.posts?.find(item => item?.id === data?.getPostId) ?? {};
if (Object?.keys(post)?.length !== 0) {
[moderators, comments] = await Promise?.all([
getModerators(),
getAllComments(),
]);
} else {
[post, moderators, comments] = await Promise?.all([
getOnePost(),
getModerators(),
getAllComments(),
]);
} }
numberOfComments = countAllComments(comments) || 0; let LoginPopup;
onMount(async () => {
upvoteCounter[post.id] = post?.upvote; upvoteCounter[post.id] = post?.upvote;
downvoteCounter[post.id] = post?.downvote; downvoteCounter[post.id] = post?.downvote;
@ -334,10 +300,14 @@ onMount(async () => {
LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default; LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
} }
[moderators, comments] = await Promise.all([
getModerators(),
getAllComments(),
]);
numberOfComments = countAllComments(comments) || 0;
if (post?.postType === 'link') {
if (post?.postType === 'link') {
const url = new URL(post.link); const url = new URL(post.link);
if (url.hostname === "www.youtube.com") { if (url.hostname === "www.youtube.com") {
const videoIdMatch = url.search.match(/v=([^&]+)/); const videoIdMatch = url.search.match(/v=([^&]+)/);
@ -346,7 +316,7 @@ if (post?.postType === 'link') {
} }
} }
} }
loadTextEditor = true; loadTextEditor = true;
isLoaded = true; isLoaded = true;
@ -361,16 +331,16 @@ if (post?.postType === 'link') {
window.removeEventListener('scroll', handleScroll); window.removeEventListener('scroll', handleScroll);
}; };
}); });
let previousPage : string = base || '/community/'; let previousPage : string = base || '/community/';
afterNavigate(({from}) => { afterNavigate(({from}) => {
previousPage = from?.url.pathname || '/community/' previousPage = from?.url.pathname || '/community/'
}) })
function closePost(event) { function closePost(event) {
if (event.target.classList.contains('cursor-zoom-out')) { if (event.target.classList.contains('cursor-zoom-out')) {
@ -378,16 +348,18 @@ function closePost(event) {
} }
} }
onDestroy( () => {
onDestroy( () => {
$commentAdded = ''; $commentAdded = '';
$commentIdDeleted = ''; $commentIdDeleted = '';
$scrollToComment = ''; $scrollToComment = '';
}) })
function addCommentToParent(comments, newComment) { function addCommentToParent(comments, newComment) {
// Helper function to handle the recursion // Helper function to handle the recursion
function findAndAddParent(commentsList, newComment) { function findAndAddParent(commentsList, newComment) {
for (let comment of commentsList) { for (let comment of commentsList) {
@ -421,9 +393,9 @@ function addCommentToParent(comments, newComment) {
} }
return comments; return comments;
} }
function updateCommentInList(newObject, list) { function updateCommentInList(newObject, list) {
// Helper function to handle the recursion // Helper function to handle the recursion
function findAndReplaceComment(commentsList, newComment) { function findAndReplaceComment(commentsList, newComment) {
for (let comment of commentsList) { for (let comment of commentsList) {
@ -446,12 +418,12 @@ function updateCommentInList(newObject, list) {
// Return the updated list // Return the updated list
return list; return list;
} }
// Function to recursively find and remove a comment by id // Function to recursively find and remove a comment by id
function removeCommentById(comments, idToRemove) { function removeCommentById(comments, idToRemove) {
for (let i = 0; i < comments?.length; i++) { for (let i = 0; i < comments?.length; i++) {
let comment = comments[i]; let comment = comments[i];
// If the current comment has the id to remove // If the current comment has the id to remove
@ -466,40 +438,40 @@ function removeCommentById(comments, idToRemove) {
} }
} }
return comments; // Return the original comments list if the comment is not found return comments; // Return the original comments list if the comment is not found
} }
$: { $: {
if($commentAdded?.length !== 0) if($commentAdded?.length !== 0)
{ {
comments = sortCommentsByDate(addCommentToParent(comments, $commentAdded)) comments = sortCommentsByDate(addCommentToParent(comments, $commentAdded))
numberOfComments = countAllComments(comments) numberOfComments = countAllComments(comments)
} }
} }
$: { $: {
if($commentUpdated?.length !== 0) if($commentUpdated?.length !== 0)
{ {
comments = updateCommentInList($commentUpdated, comments); comments = updateCommentInList($commentUpdated, comments);
} }
} }
$: { $: {
if($commentIdDeleted?.length !== 0) if($commentIdDeleted?.length !== 0)
{ {
comments = removeCommentById(comments, $commentIdDeleted) comments = removeCommentById(comments, $commentIdDeleted)
numberOfComments = countAllComments(comments) numberOfComments = countAllComments(comments)
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {post.title} · stocknear</title> <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {post.title} · stocknear</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
@ -518,16 +490,15 @@ $: {
<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: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"/> <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<!--<section on:click={closePost} class="bg-[#0F0F0F] cursor-zoom-out min-h-screen">--> <!--<section on:click={closePost} class="bg-[#0F0F0F] cursor-zoom-out min-h-screen">-->
<!--in:pageTransitionIn={{ duration: 250, screenWidth: $screenWidth }}--> <!--in:pageTransitionIn={{ duration: 250, screenWidth: $screenWidth }}-->
{#if isLoaded} <div class="overflow-hidden flex flex-row item-start w-full lg:mt-5 relative max-w-6xl m-auto lg:px-5 sm:pb-40">
<div class="overflow-hidden flex flex-row item-start w-full lg:mt-5 relative max-w-6xl m-auto lg:px-5 sm:pb-40">
<!--Start Voting--> <!--Start Voting-->
<div style="top: 4rem;" class="hidden lg:flex flex-col items-center relative h-fit sticky z-20 lg:mr-3 "> <div style="top: 4rem;" class="hidden lg:flex flex-col items-center relative h-fit sticky z-20 lg:mr-3 ">
<!--Start Upvote--> <!--Start Upvote-->
@ -579,10 +550,10 @@ $: {
<!--End Voting--> <!--End Voting-->
<div class="w-full bg-[#202020] max-w-5xl m-auto border sm:hover:border-slate-800 border-slate-800 rounded-none sm:rounded-xl "> <div class="w-full bg-[#202020] max-w-5xl m-auto border sm:hover:border-slate-800 border-slate-800 rounded-none sm:rounded-xl ">
<!-- Start Header --> <!-- Start Header -->
<div style="top: 0.8rem;" class="sm:rounded-xl absolute h-12 sticky z-20 bg-[#202020] w-full {isScrolled && $screenWidth < 640 ? 'border-b border-gray-700 ease-in' : 'ease-out'}"> <div style="top: 0.8rem;" class="sm:rounded-xl absolute h-12 sticky z-20 bg-[#202020] w-full {isScrolled && $screenWidth < 640 ? 'border-b border-gray-700 ease-in' : 'ease-out'}">
<div class="flex flex-row items-center justify-between w-full pt-3"> <div class="flex flex-row items-center justify-between w-full pt-3">
<a href={previousPage} class="absolute left-2 sm:left-4 sm:top-4"> <a href={previousPage} class="absolute left-2 sm:left-4 sm:top-4">
<svg class="w-5 h-5 inline-block sm:mr-1 sm:-mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <svg class="w-5 h-5 inline-block sm:mr-1 sm:-mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
@ -598,9 +569,9 @@ $: {
Post Post
</span> </span>
</div> </div>
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex flex-col overflow-hidden pb-40"> <div class="flex flex-col overflow-hidden pb-40">
@ -924,33 +895,29 @@ $: {
</div> </div>
</div> </div>
{:else}
<div class="flex justify-center items-center m-auto h-full w-full max-w-6xl">
<div class="loader">Loading...</div>
</div>
{/if}
<!--Start Login Modal-->
{#if LoginPopup} <!--Start Login Modal-->
{#if LoginPopup}
<LoginPopup form={form}/> <LoginPopup form={form}/>
{/if} {/if}
<!--End Login Modal--> <!--End Login Modal-->
{#if data?.user} {#if data?.user}
<!--Start Delete Strategy Modal--> <!--Start Delete Strategy Modal-->
<input type="checkbox" id="deletePostModal" class="modal-toggle" /> <input type="checkbox" id="deletePostModal" class="modal-toggle" />
<dialog id="deletePostModal" class="modal modal-bottom sm:modal-middle"> <dialog id="deletePostModal" class="modal modal-bottom sm:modal-middle">
<label for="deletePostModal" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label> <label for="deletePostModal" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
<div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-600 overflow-hidden"> <div class="modal-box w-full bg-[#202020] sm:border sm:border-slate-600 overflow-hidden">
<h3 class="font-bold text-xl mb-5 pt-5 text-white m-auto w-3/4 text-center"> <h3 class="font-bold text-xl mb-5 pt-5 text-white m-auto w-3/4 text-center">
Are you sure you want to delete the post? Are you sure you want to delete the post?
@ -964,21 +931,21 @@ $: {
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End Delete Strategy Modal--> <!--End Delete Strategy Modal-->
{/if} {/if}
<style> <style>
.info-card { .info-card {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -989,4 +956,4 @@ $: {
} }
</style> </style>

View File

@ -0,0 +1,61 @@
import { userRegion, cachedPosts } from '$lib/store';
import { get } from 'svelte/store';
export const load = async ({ params }) => {
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
} else {
fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
}
});
async function getOnePost() {
// Get the current value of cachedPosts
const cachedValue = get(cachedPosts);
// Try to find the post in the cached value
const output = cachedValue?.posts?.find(item => item?.id === params.postId) ?? {};
// If the post is found in the cache, return it
if (Object.keys(output).length !== 0) {
return output;
}
// If the post is not found in the cache, fetch it from the endpoint
const postData = { postId: params.postId };
const response = await fetch(fastifyURL + '/get-one-post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
const result = await response.json();
// Assuming the result contains an 'items' array
return result.items;
}
const getPostId = async () => {
return params.postId;
};
return {
getPostId: await getPostId(),
getOnePost: await getOnePost(),
};
};