лайки на react от разных пользователей
имеется сервис на фронте, с помощью которого в компоненте я пытаюсь дать пользователям возможность ставить лайки:
public async follow(vacationId: number): Promise<void>{
try{
await axios.post(appConfig.followVacationUrl + vacationId)
alert("follow")
vacationsStore.dispatch({type: VacationActionType.Follow, payload: vacationId})
}
catch(err: any) {
alert(err.message)
}
}
public async unfollow(vacationId: number): Promise<void>{
await axios.delete(appConfig.unfollowVacationUrl + vacationId)
vacationsStore.dispatch({type: VacationActionType.Unfollow, payload: vacationId})
}
}
Лайки работают, но при входе разных пользователей они видят уже отлайканные посты. То есть задача стоит в том, чтобы отделить лайки по пользователям и добавить счетчик этих лайков. Есть что, можно принести userId с бека
unction UserVacationCard(props: UserVacationCard): JSX.Element {
const vacationId = props.vacation.vacationId;
const [counter, setCounter] = useState(0);
// Check if the user is following the vacation
const [following, setFollowing] = useState<boolean>(
localStorage.getItem(`following-${vacationId}`) === "true"
);
// Update the state and localStorage when the user follows/unfollows a vacation
function followVacation() {
vacationService.follow(props.vacation.vacationId);
setFollowing(true);
localStorage.setItem(`following-${vacationId}`, "true");
alert("you are following");
}
function unfollowVacation() {
vacationService.unfollow(props.vacation.vacationId);
setFollowing(false);
localStorage.removeItem(`following-${vacationId}`);
alert("you have unfollowed");
}
return (
<div className="UserVacationCard">
<span>
<button
className="follow"
onClick={following ? unfollowVacation : followVacation}>
{following ? "Unfollow" : "Follow"}
</button>
</span>
</div>
);
}
export default UserVacationCard;