Add points to user score react - reactjs

Question

I am trying to add points to a user profile each time a button is pressed. The points should accumulate.
I am able to add the points to the profile when going onto the modal component (which has the button to adds the points & that can only be pressed once).
However, when I reload the modal, now with the disabled button, the points are still being updated but are going to null.
Another issue is that the points are not being accumulated, instead they are being replaced each time.
"points" is the issue. Everything else works properly.
const EventLog = ({ current, logPointsNow, logPoints }: IEventLog) => {
const [dateLogged, setDateLogged] = useState("");
const [points, setPoints] = useState("");
useEffect(() => {
if (current) {
setDateLogged(current.dateLogged);
}
}, [current]);
const handleClick = () => {
setDateLogged(Date());
setPoints(points + String(50));
};
useEffect(() => {
const updatedDate = {
dateLogged,
};
logPointsNow(updatedDate);
}, [dateLogged]);
useEffect(() => {
const meetingPoints = {
points,
};
logPoints(meetingPoints);
}, [points]);
return (
<IonContent>
<UserPoints />
<IonButton
type="submit"
expand="block"
onClick={handleClick}
disabled={arrivalTime ? true : false}
>
Log
</IonButton>
<IonItem>
<IonLabel>Points earned: {points}</IonLabel>
</IonItem>
</IonContent>
);
};
const mapStateToProps = (state: IEventLogReduxProps) => ({
current: state.event.current,
});
export default connect(mapStateToProps, { logPointsNow, logPoints })(EventLog);
Here's the component for fetching user info:
const UserPoints = ({ auth }: IUserP) => {
return (
<IonItem>
{auth!.user.points}
{auth!.user.name}
</IonItem>
);
};
const mapStateToProps = (state: IAuthReduxProps) => ({
auth: state.auth,
});
export default connect(mapStateToProps, null)(UserPoints);

Answer 1

I believe you only want this triggered on the initial load, removing current from the second parameter for useEffect should guarantee that the useEffect is only triggered on initial load... similar to componentDidMount
useEffect(() => {
if (current) {
setPointsNow(current.pointsNow);
}
}, []);

Answer 2

If removing your dependencies would help, then I wouldn't lie about the dependencies, When you don't want your first useEffect to change pointsNow only when it has been changed then I would prefer to have a initial-value for pointsNow, (you have "") then I would change the first useEffect to:
useEffect( () => {
if (current && pointsNow === "") {
setPointsNow(current.pointsNow);
}
}, [current]);
And one more thing that has nothing to do with your current problem: I think you use "useEffect" more than you need. Sure you want to call "logPoints" when points changes but almost every function call depends on something and with that logic we would pass every logic to useEffect.
I don't know how it's gonna grow so sry when I misunderstood, but for now you could just have a handlerFunction which calls "logPoints" and call that handleFunction when you change points. Now when I make no mistakes you change points only at two different places one time in the first useEffect and then in "handleClick".

Answer 3

I fixed the 1st issue:
I am able to add the points to the profile when going onto the modal component (which has the button to adds the points & that can only be pressed once). However, when I reload the modal, now with the disabled button, the points are still being updated but are going to null.
By doing the following:
useEffect(()=>{
if(dateLogged) {
const meetingPoints = {
points
};
logPoints(meetingPoints)
}
}, [points])