-
Notifications
You must be signed in to change notification settings - Fork 0
/
ChallengeComponent.js
109 lines (102 loc) · 3.18 KB
/
ChallengeComponent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { useState } from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { useMutation } from "@apollo/client";
import ActiveChallengeComponent from "./ActiveChallengeComponent";
import { CREATE_OWN_CHALLENGE, STOP_OWN_CHALLENGE } from "../graphql/mutations";
import { ALL_CHALLENGES, ACTIVE_OWN_CHALLENGES } from "../graphql/queries";
import dayjs from "dayjs";
import CompletedChallengeComponent from "./CompletedChallengeComponent";
const useStyles = makeStyles((theme) => ({
root: {
marginLeft: theme.spacing(2),
flexGrow: 1,
marginBottom: 1,
},
}));
const ChallengeComponent = ({ challenge, user }) => {
const today = dayjs();
const endDate = dayjs().add(challenge.duration, "day");
const classes = useStyles();
const [stopChallenge] = useMutation(STOP_OWN_CHALLENGE, {
refetchQueries: [{ query: ACTIVE_OWN_CHALLENGES }],
onError: (error) => {
console.log("error: ", error);
},
});
const activeChallenge = challenge.ownChallenges.find((c) => c.active);
const abortChallenge = () => {
return stopChallenge({
variables: {
challengeID: activeChallenge.id,
abortDate: today.format("YYYY-MM-DD"),
},
});
};
const checkDate = () =>
activeChallenge &&
today > endDate &&
stopChallenge({
variables: {
challengeID: activeChallenge.id,
},
});
checkDate();
const passiveChallenge =
challenge.ownChallenges.length > 0 &&
!activeChallenge &&
challenge.ownChallenges[challenge.ownChallenges.length - 1];
const [description, setDescription] = useState("testing... "); // TODO: implement an input
const [createChallenge] = useMutation(CREATE_OWN_CHALLENGE, {
refetchQueries: [{ query: ALL_CHALLENGES }],
onError: (error) => {
console.log("error: ", error);
// setError(error.toString())
},
});
const startChallenge = () => {
return createChallenge({
variables: {
challengeID: challenge.id,
userID: user.id,
startDate: today.format("YYYY-MM-DD"),
endDate: endDate.format("YYYY-MM-DD"),
description: description,
},
});
};
return (
<div className={classes.root}>
<h1>{challenge.name}</h1>
<p>{challenge.description}</p>
<p>
<a href={challenge.link} target="_blank">
{challenge.link}
</a>
</p>
<p>Challenge duration: {challenge.duration} days</p>
{activeChallenge ? (
<div>
<ActiveChallengeComponent challenge={activeChallenge} />
<br />
<Button variant="outlined" color="red" onClick={abortChallenge}>
Abort challenge
</Button>
</div>
) : (
<div>
{passiveChallenge && (
<CompletedChallengeComponent challenge={passiveChallenge} duration={challenge.duration} />
)}
<br />
<Button variant="outlined" color="primary" onClick={startChallenge}>
{passiveChallenge
? "Restart the challenge!"
: "Start the challenge!"}
</Button>
</div>
)}
</div>
);
};
export default ChallengeComponent;