Merge pull request #4347 from Giveth/add-bookmark

Add bookmark

lang/ca.json

@@ -203,6 +203,7 @@
 	"label.be_specific_about_your_projects_progress": "Sigues específic sobre el progrés i els objectius del teu projecte i estructura la informació perquè sigui fàcil de llegir, afegint capçaleres i paràgrafs.",
 	"label.be_the_first_booster": "Sigues el primer a impulsar aquest projecte amb GIVpower.",
 	"label.be_the_first_to_give": "Sigues el primer a donar!",
+	"label.bookmarked_projects": "Projectes Marcats",
 	"label.boost": "Impulsa",
 	"label.boosted_projects": "Projectes Impulsats",
 	"label.boost_project": "Potencia el projecte",
@@ -581,7 +582,6 @@
 	"label.let_others_know_you_a_little_better": "Permet als altres conèixer-te una mica millor.",
 	"label.level_up_with_givpower": "puja de nivell amb GIVpower",
 	"label.like": "M'agrada",
-	"label.liked_projects": "Projectes Favorits",
 	"label.likes": "Favorits",
 	"label.link_to_your_giveth_project": "Enllaç al teu projecte de Giveth a les teves xarxes socials",
 	"label.liquid_giv_that_has_already_flowed": "GIV líquid que ja ha fluït del GIVstream",
@@ -869,8 +869,8 @@
 	"label.share_and_earn_rewards": "Comparteix i guanya recompenses",
 	"label.share_and_get_rewarded": "Comparteix i guanya recompenses",
 	"label.share_on_facebook": "Comparteix a Facebook",
-	"label.share_on_linkedin": "Comparteix a LinkedIn",
 	"label.share_on_farcaster": "Comparteix a Farcaster",
+	"label.share_on_linkedin": "Comparteix a LinkedIn",
 	"label.share_on_social_media": "Comparteix a les xarxes socials",
 	"label.share_on_twitter": "comparteix a X (Twitter)",
 	"label.share_on_twitter_linkedin_or_facebook": "Comparteix a X (Twitter), LinkedIn o Facebook, o copia el teu enllaç per compartir en qualsevol lloc!",

lang/en.json

@@ -203,6 +203,7 @@
 	"label.be_specific_about_your_projects_progress": "Be specific about your project's progress and goals and structure your information so it’s easy to read by adding headers and paragraphs.",
 	"label.be_the_first_booster": "Be the first one to boost this project with GIVpower.",
 	"label.be_the_first_to_give": "Be the first to give!",
+	"label.bookmarked_projects": "Bookmarked Projects",
 	"label.boost": "Boost",
 	"label.boosted_projects": "Boosted Projects",
 	"label.boost_project": "Boost project",
@@ -581,7 +582,6 @@
 	"label.let_others_know_you_a_little_better": "Let others get to know you a little better.",
 	"label.level_up_with_givpower": "level up with givpower",
 	"label.like": "Like",
-	"label.liked_projects": "Liked Projects",
 	"label.likes": "Likes",
 	"label.link_to_your_giveth_project": "Link to your Giveth project on your social media",
 	"label.liquid_giv_that_has_already_flowed": "Liquid GIV that has already flowed out of the GIVstream",
@@ -869,8 +869,8 @@
 	"label.share_and_earn_rewards": "Share and earn rewards",
 	"label.share_and_get_rewarded": "Share & get rewarded",
 	"label.share_on_facebook": "Share on Facebook",
-	"label.share_on_linkedin": "Share on LinkedIn",
 	"label.share_on_farcaster": "Share on Farcaster",
+	"label.share_on_linkedin": "Share on LinkedIn",
 	"label.share_on_social_media": "Share on social media",
 	"label.share_on_twitter": "Share on X (Twitter)",
 	"label.share_on_twitter_linkedin_or_facebook": "Share on X (Twitter), LinkedIn or Facebook, or copy your link to share anywhere!",

lang/es.json

@@ -203,6 +203,7 @@
 	"label.be_specific_about_your_projects_progress": "Sé específico sobre el progreso y los objetivos de tu proyecto y estructura la información para que sea fácil de leer, añadiendo encabezados y párrafos.",
 	"label.be_the_first_booster": "Sé el primero para Boostear este proyecto con GIVpower.",
 	"label.be_the_first_to_give": "¡Sé el primero en donar!",
+	"label.bookmarked_projects": "Proyectos Marcados",
 	"label.boost": "Aumentar",
 	"label.boosted_projects": "Proyectos con Boost",
 	"label.boost_project": "Boostea el proyecto",
@@ -581,7 +582,6 @@
 	"label.let_others_know_you_a_little_better": "Permitir a otros conocerte mejor.",
 	"label.level_up_with_givpower": "sube el nivel con GIVpower",
 	"label.like": "Me gusta",
-	"label.liked_projects": "Proyectos Favoritos",
 	"label.likes": "Favoritos",
 	"label.link_to_your_giveth_project": "Enlace al proyecto de Giveth en sus redes sociales",
 	"label.liquid_giv_that_has_already_flowed": "GIV liquido que ya ha fluido de tu GIVstream",
@@ -869,8 +869,8 @@
 	"label.share_and_earn_rewards": "Comparte y obtén recompensas",
 	"label.share_and_get_rewarded": "Comparte & obtén recompensas",
 	"label.share_on_facebook": "Comparte en Facebook",
-	"label.share_on_linkedin": "Comparte en LinkedIn",
 	"label.share_on_farcaster": "Comparte en Farcaster",
+	"label.share_on_linkedin": "Comparte en LinkedIn",
 	"label.share_on_social_media": "Comparte en redes sociales",
 	"label.share_on_twitter": "compartir en X (Twitter)",
 	"label.share_on_twitter_linkedin_or_facebook": "Comparte en X (Twitter), LinkedIn o Facebook, o copia tu enlace para compartirlo en cualquier lugar!",

package.json

@@ -18,7 +18,7 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.10.4",
-		"@giveth/ui-design-system": "^1.11.31",
+		"@giveth/ui-design-system": "^1.11.33",
 		"@reduxjs/toolkit": "^2.2.4",
 		"@safe-global/api-kit": "^2.1.0",
 		"@segment/snippet": "^4.15.3",

src/apollo/gql/gqlHomePage.ts

@@ -54,7 +54,6 @@ export const FETCH_HOMEPAGE_DATA = gql`
 				userId
 				contentSummary
 				isMain
-				totalReactions
 				createdAt
 				reaction {
 					id

src/apollo/gql/gqlProjects.ts

@@ -28,11 +28,6 @@ export const PROJECT_CARD_FIELDS = gql`
 	fragment ProjectCardFields on Project {
 		...ProjectCoreFields
 		descriptionSummary
-		totalReactions
-		reaction {
-			id
-			userId
-		}
 		adminUser {
 			name
 			walletAddress
@@ -224,7 +219,6 @@ export const FETCH_PROJECT_BY_SLUG_SINGLE_PROJECT = gql`
 				id
 				userId
 			}
-			totalReactions
 			categories {
 				name
 				value
@@ -351,7 +345,6 @@ export const FETCH_PROJECT_REACTION_BY_ID = gql`
 				id
 				userId
 			}
-			totalReactions
 		}
 	}
 `;
@@ -378,7 +371,6 @@ export const FETCH_PROJECT_UPDATES = gql`
 			userId
 			content
 			isMain
-			totalReactions
 			reaction {
 				projectUpdateId
 				userId
@@ -416,7 +408,6 @@ export const FETCH_FEATURED_PROJECT_UPDATES = gql`
 			userId
 			content
 			isMain
-			totalReactions
 			createdAt
 		}
 	}

src/apollo/types/types.ts

@@ -52,7 +52,6 @@ export interface IProject {
 	listed?: boolean | null;
 	categories: ICategory[];
 	reaction?: IReaction;
-	totalReactions: number;
 	adminUser: IAdminUser;
 	donations: {
 		id?: string;

src/components/DonateSocialBox.tsx

@@ -49,7 +49,6 @@ const DonateSocialBox: FC<ISocialBox> = props => {
 
 			<BadgeWrapper>
 				<ShareLikeBadge
-					type={verified ? 'reward' : 'share'}
 					onClick={() => isActive && setShowModal(true)}
 					isSimple={isMobile}
 					fromDonate={true}

src/components/badges/ShareLikeBadge.tsx

@@ -4,46 +4,33 @@ import {
 	neutralColors,
 	IconShare,
 	brandColors,
-	IconHeartOutline,
 	ButtonText,
-	IconHeartFilled,
 	FlexCenter,
 } from '@giveth/ui-design-system';
 import { Shadow } from '../styled-components/Shadow';
 const ShareLikeBadge = (props: {
-	type: 'share' | 'like' | 'reward';
 	active?: boolean;
 	onClick: () => void;
 	isSimple?: boolean | null;
 	fromDonate?: boolean | null;
 }) => {
 	const { formatMessage } = useIntl();
-	const { type, active, onClick, isSimple, fromDonate } = props;
-	const isShare = type === 'share' || type === 'reward';
-	const text =
-		type === 'share'
-			? formatMessage({ id: 'label.share' })
-			: type === 'reward'
-				? formatMessage({ id: 'label.share' })
-				: formatMessage({ id: 'label.like' });
-	const icon = isShare ? (
-		<IconShare
-			color={
-				fromDonate ? brandColors.pinky[500] : neutralColors.gray[700]
-			}
-		/>
-	) : active ? (
-		<IconHeartFilled color={brandColors.pinky[500]} />
-	) : (
-		<IconHeartOutline color={neutralColors.gray[700]} />
-	);
+	const { active, onClick, isSimple, fromDonate } = props;
 
 	return (
 		<Wrapper onClick={onClick}>
-			{icon}
+			{
+				<IconShare
+					color={
+						fromDonate
+							? brandColors.pinky[500]
+							: neutralColors.gray[700]
+					}
+				/>
+			}
 			{!isSimple && (
 				<BadgeText size='small' $fromDonate={fromDonate}>
-					{text}
+					{formatMessage({ id: 'label.share' })}
 				</BadgeText>
 			)}
 		</Wrapper>

src/components/project-card/ProjectCard.tsx

@@ -19,7 +19,7 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import { Shadow } from '@/components/styled-components/Shadow';
-import ProjectCardBadges from './ProjectCardLikeAndShareButtons';
+import ProjectCardBadges from './ProjectCardBadgeButtons';
 import ProjectCardOrgBadge from './ProjectCardOrgBadge';
 import { IProject } from '@/apollo/types/types';
 import { timeFromNow } from '@/lib/helpers';

src/components/project-card/ProjectCardLikeAndShareButtons.tsx → src/components/project-card/ProjectCardBadgeButtons.tsx

@@ -1,118 +1,36 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useState } from 'react';
 import {
 	brandColors,
-	IconHeartFilled16,
-	IconHeartOutline16,
 	IconRocketInSpace,
 	IconShare16,
 	neutralColors,
-	Subline,
 	Flex,
 } from '@giveth/ui-design-system';
 import styled, { css } from 'styled-components';
-import { captureException } from '@sentry/nextjs';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
-import { likeProject, unlikeProject } from '@/lib/reaction';
-import { isSSRMode, showToastError } from '@/lib/helpers';
 import { IProject } from '@/apollo/types/types';
-import { useAppDispatch, useAppSelector } from '@/features/hooks';
-import {
-	decrementLikedProjectsCount,
-	incrementLikedProjectsCount,
-} from '@/features/user/user.slice';
+import { useAppSelector } from '@/features/hooks';
 import { useModalCallback } from '@/hooks/useModalCallback';
 import { EContentType } from '@/lib/constants/shareContent';
 import ShareModal from '../modals/ShareModal';
 import BoostModal from '../modals/Boost/BoostModal';
 
-interface IProjectCardLikeAndShareButtons {
+interface IProjectCardBadgeButtons {
 	project: IProject;
 }
 
-const ProjectCardLikeAndShareButtons: FC<IProjectCardLikeAndShareButtons> = ({
-	project,
-}) => {
+const ProjectCardBadgeButtons: FC<IProjectCardBadgeButtons> = ({ project }) => {
 	const [showShare, setShowShare] = useState(false);
 	const [showBoost, setShowBoost] = useState(false);
-	const { slug, id: projectId, verified } = project;
-	const [reaction, setReaction] = useState(project.reaction);
-	const [totalReactions, setTotalReactions] = useState(
-		project.totalReactions,
-	);
-	const [likeLoading, setLikeLoading] = useState(false);
-	const {
-		isSignedIn,
-		userData: user,
-		isEnabled,
-	} = useAppSelector(state => state.user);
-	const dispatch = useAppDispatch();
+	const { slug, verified } = project;
+	const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
 	const { open: openConnectModal } = useWeb3Modal();
 
-	useEffect(() => {
-		setReaction(project.reaction);
-	}, [project.reaction, user?.id]);
-
-	useEffect(() => {
-		setTotalReactions(project.totalReactions);
-	}, [project.totalReactions]);
-
-	const likeUnlikeProject = async () => {
-		if (projectId) {
-			setLikeLoading(true);
-
-			try {
-				if (!reaction) {
-					const newReaction = await likeProject(projectId);
-					setReaction(newReaction);
-					if (newReaction) {
-						setTotalReactions(
-							_totalReactions => (_totalReactions || 0) + 1,
-						);
-						dispatch(incrementLikedProjectsCount());
-					}
-				} else if (reaction?.userId === user?.id) {
-					const successful = await unlikeProject(reaction.id);
-					if (successful) {
-						setReaction(undefined);
-						setTotalReactions(
-							_totalReactions => (_totalReactions || 1) - 1,
-						);
-						dispatch(decrementLikedProjectsCount());
-					}
-				}
-			} catch (e) {
-				showToastError(e);
-				captureException(e, {
-					tags: {
-						section: 'likeUnlikeProject',
-					},
-				});
-			} finally {
-				setLikeLoading(false);
-			}
-		}
-	};
-
 	const showBoostModal = () => {
 		setShowBoost(true);
 	};
 
 	const { modalCallback: signInThenBoost } = useModalCallback(showBoostModal);
-
-	const { modalCallback: signInThenLike } =
-		useModalCallback(likeUnlikeProject);
-
-	const checkSignInThenLike = () => {
-		if (isSSRMode) return;
-		if (!isEnabled) {
-			openConnectModal?.();
-		} else if (!isSignedIn) {
-			signInThenLike();
-		} else {
-			likeUnlikeProject();
-		}
-	};
-
 	const checkSignInThenBoost = () => {
 		if (!isEnabled) {
 			openConnectModal?.();
@@ -140,19 +58,6 @@ const ProjectCardLikeAndShareButtons: FC<IProjectCardLikeAndShareButtons> = ({
 							<IconRocketInSpace />
 						</BadgeButton>
 					)}
-					<BadgeButton
-						$isLoading={likeLoading}
-						onClick={likeLoading ? undefined : checkSignInThenLike}
-					>
-						{Number(totalReactions) > 0 && (
-							<Subline>{totalReactions}</Subline>
-						)}
-						{reaction?.userId && reaction?.userId === user?.id ? (
-							<IconHeartFilled16 color={brandColors.pinky[500]} />
-						) : (
-							<IconHeartOutline16 />
-						)}
-					</BadgeButton>
 					<BadgeButton
 						onClick={e => {
 							setShowShare(true);
@@ -176,7 +81,7 @@ interface IBadgeButton {
 	$isLoading?: boolean;
 }
 
-const BadgeButton = styled(Flex)<IBadgeButton>`
+export const BadgeButton = styled(Flex)<IBadgeButton>`
 	gap: 3px;
 	padding: 6px 7px;
 	z-index: 2;
@@ -260,4 +165,4 @@ const BadgeWrapper = styled.div`
 	pointer-events: none;
 `;
 
-export default ProjectCardLikeAndShareButtons;
+export default ProjectCardBadgeButtons;