forked from rage/java-programming
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCoins.js
More file actions
144 lines (131 loc) · 4.45 KB
/
Copy pathCoins.js
File metadata and controls
144 lines (131 loc) · 4.45 KB
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React, { Fragment, Component } from "react"
import styled from "styled-components"
import { fetchProgrammingExerciseModelSolution } from "../../services/moocfi"
import { Button, Paper, Card, CardContent } from "@material-ui/core"
import Modal from "@material-ui/core/Modal"
import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
import { withTranslation, Trans } from "react-i18next"
const ModalContent = styled(Paper)`
padding: 5rem;
overflow-y: scroll;
max-height: 100vh;
`
const TokenContainer = styled.div`
margin-bottom: 1rem;
p {
font-size: 1rem;
color: #2e3032;
}
`
class Coins extends Component {
state = {
exerciseDetails: undefined,
modelSolutionModalOpen: false,
modelSolution: undefined,
render: false,
}
onShowModelSolution = async () => {
try {
let modelSolution = this.state.modelSolution
if (!modelSolution) {
modelSolution = await fetchProgrammingExerciseModelSolution(
this.props.exerciseDetails.id,
)
}
this.setState({ modelSolutionModalOpen: true, modelSolution })
} catch (err) {
console.error("Could not fetch model solution", err)
}
}
onModelSolutionModalClose = () => {
this.setState({ modelSolutionModalOpen: false })
}
render() {
const { exerciseDetails, nocoins } = this.props
if (nocoins) {
return <TokenContainer>{this.props.t("noCoin")}</TokenContainer>
}
if (!exerciseDetails.email_verified) {
return (
<TokenContainer>
{this.props.t("modelSolutionUnavailableBecauseEmailNotVerified")}
</TokenContainer>
)
}
const tokenThreshHold =
exerciseDetails?.course
?.grant_model_solution_token_every_nth_completed_exercise
//const _totalTokens = exerciseDetails?.course?.total_model_solution_tokens
const availableTokens =
exerciseDetails?.course?.available_model_solution_tokens
const modelSolutionTokenUsedOnThisExercise =
exerciseDetails?.model_solution_token_used_on_this_exercise
return (
<div>
{tokenThreshHold && (
<Fragment>
<TokenContainer>
<p>{this.props.t("whyCoin")}</p>
<p>
{this.props.t("getNewCoin")} <i>{tokenThreshHold}</i>
{this.props.t("getNewCoin2")}{" "}
{availableTokens === 1 ? (
<span>{this.props.t("oneCoin")} </span>
) : availableTokens > 0 ? (
<span>
{" "}
<Trans i18nKey="howManyCoins" count={availableTokens}>
{this.props.t("howManyCoins")}
</Trans>
</span>
) : (
<span>{this.props.t("nocoins")}</span>
)}
</p>
<p>{this.props.t("howCoins")}</p>
{(availableTokens > 0 ||
modelSolutionTokenUsedOnThisExercise) && (
<Button
onClick={this.onShowModelSolution}
variant="outlined"
color="secondary"
style={{ marginRight: "0.5rem" }}
>
{this.props.t("seeSolution")}s (
{modelSolutionTokenUsedOnThisExercise
? this.props.t("coinUsed")
: this.props.t("usesCoin")}
)
</Button>
)}
<Button variant="outlined" onClick={this.props.onUpdate}>
{this.props.t("update")}
</Button>
</TokenContainer>
<Modal
open={this.state.modelSolutionModalOpen}
onClose={this.onModelSolutionModalClose}
>
{this.state.modelSolution && (
<ModalContent>
<h1>{this.props.t("solution")}</h1>
{this.state.modelSolution.solution.files.map((fileEntry) => {
return (
<Card>
<CardContent>
<h2>{fileEntry.path}</h2>
<pre class="language-java">{fileEntry.contents}</pre>
</CardContent>
</Card>
)
})}
</ModalContent>
)}
</Modal>
</Fragment>
)}
</div>
)
}
}
export default withTranslation("common")(withSimpleErrorBoundary(Coins))