Skip to content

Commit ca58c23

Browse files
nygrenhnygrenh
committed
Implement fetching progress data
1 parent 7c36570 commit ca58c23

9 files changed

Lines changed: 163 additions & 242 deletions

File tree

‎src/components/PointsBalloon/PointsBalloonContent.js‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { Fragment } from "react"
2-
import LoginStateContext from "../../contexes/LoginStateContext"
32
import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
43
import { Modal, Paper, Button } from "@material-ui/core"
54
import styled from "styled-components"
6-
import { OutboundLink } from "gatsby-plugin-google-analytics"
75
import Loading from "../Loading"
6+
import { fetchProgress } from "../../services/progress"
7+
import PagesContext from "../../contexes/PagesContext"
88

99
const StyledModal = styled(Modal)`
1010
z-index: 500 !important;
@@ -16,11 +16,14 @@ const ModalContent = styled(Paper)`
1616
background-color: white;
1717
width: 100%;
1818
max-width: 450px;
19-
height: 500px;
19+
height: 700px;
20+
max-height: 90vh;
21+
overflow-y: scroll;
2022
position: fixed;
2123
right: 1.5rem;
2224
bottom: 1.5rem;
2325
z-index: 200 !important;
26+
font-size: 0.7rem;
2427
`
2528

2629
const ModalControls = styled.div`
@@ -33,22 +36,31 @@ const Title = styled.h1`
3336
font-size: 1.5rem;
3437
`
3538

36-
const data = [
37-
{ group: "Osa 1", Ohjelmointitehtävät: 80, Kyselyt: 20 },
38-
{ group: "Osa 2", Ohjelmointitehtävät: 30, Kyselyt: 40 },
39-
]
40-
4139
class PointsBalloonContent extends React.Component {
42-
static contextType = LoginStateContext
40+
static contextType = PagesContext
4341

4442
state = {
4543
render: false,
4644
data: null,
45+
error: null,
4746
}
4847

49-
componentDidMount() {
48+
async componentDidMount() {
5049
this.setState({ render: true })
51-
this.setState({ data })
50+
try {
51+
let data = await fetchProgress(this.context)
52+
this.setState({ data })
53+
} catch (e) {
54+
this.setState({ error: e.toString() })
55+
}
56+
}
57+
58+
handleClose = () => {
59+
this.setState({
60+
data: null,
61+
error: null,
62+
})
63+
this.props.handleClose()
5264
}
5365

5466
render() {
@@ -61,28 +73,18 @@ class PointsBalloonContent extends React.Component {
6173
<ModalContent>
6274
<ModalControls>
6375
<Title>Edistyminen</Title>
64-
<Button onClick={this.props.handleClose}>Sulje</Button>
76+
<Button onClick={this.handleClose}>Sulje</Button>
6577
</ModalControls>
66-
<Loading loading={!this.state.data}>
78+
<Loading loading={!this.state.data && !this.state.error}>
6779
<Fragment>
68-
<p>
69-
Tähän tulee visualisaatio edistymisestäsi heti kun olemme
70-
saaneet tämän ominaisuuden toteutettua. Odotellessasi voit
71-
tutkia edistymisestäsi ohjelmointitehtävissä TMC:ssä:{" "}
72-
<OutboundLink href="https://tmc.mooc.fi/participants/me">
73-
https://tmc.mooc.fi/participants/me
74-
</OutboundLink>
75-
. Huomaathan, että pisteisiisi vaikuttaa muutkin tehtävät kuin
76-
ohjelmointitehtävät, kuten vaikka materiaalin seassa olevat
77-
kyselyt. Näiden tehtävien pisteet eivät näy TMC:ssä. Kiitos
78-
kärsivällisyydestäsi!
79-
</p>
80-
<p>
81-
<b>
82-
Varmista odotellessasi että olet tehnyt kaikki kohdassa "Lista
83-
osan tehtävistä" listatut tehtävät.
84-
</b>
85-
</p>
80+
{this.state.error ? (
81+
<div>
82+
Edistymisen hakeminen kaatui seuraavaan virheeseen:{" "}
83+
{this.state.error}
84+
</div>
85+
) : (
86+
<pre>{JSON.stringify(this.state.data, undefined, 2)}</pre>
87+
)}
8688
</Fragment>
8789
</Loading>
8890
</ModalContent>

‎src/components/PointsBalloon/data.json‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/components/PointsBalloon/index.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import styled from "styled-components"
66
import PointsBalloonBalloon from "./PointsBalloonBalloon"
77
import PointsBalloonContent from "./PointsBalloonContent"
88

9-
const PoitsBalloonContainer = styled.div`
9+
const PointsBalloonContainer = styled.div`
1010
position: fixed;
1111
right: 1.5rem;
1212
bottom: 1.5rem;
@@ -18,7 +18,7 @@ class PointsBalloon extends React.Component {
1818

1919
state = {
2020
render: false,
21-
open: false,
21+
open: true,
2222
}
2323

2424
componentDidMount() {
@@ -38,13 +38,15 @@ class PointsBalloon extends React.Component {
3838
return <Fragment />
3939
}
4040
return (
41-
<PoitsBalloonContainer>
41+
<PointsBalloonContainer>
4242
{!this.state.open && <PointsBalloonBalloon onClick={this.onClick} />}
43-
<PointsBalloonContent
44-
open={this.state.open}
45-
handleClose={this.onClose}
46-
/>
47-
</PoitsBalloonContainer>
43+
{this.state.open && (
44+
<PointsBalloonContent
45+
open={this.state.open}
46+
handleClose={this.onClose}
47+
/>
48+
)}
49+
</PointsBalloonContainer>
4850
)
4951
}
5052
}

‎src/components/PointsBalloon/spec.json‎

Lines changed: 0 additions & 170 deletions
This file was deleted.

‎src/services/crowdsorcerer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import axios from "axios"
2+
import { accessToken } from "./moocfi"
3+
4+
const BASE_URL = "https://crowdsorcerer.testmycode.io"
5+
6+
export async function fetchCrowdsorcererProgress() {
7+
const res = await axios.get(
8+
`${BASE_URL}/api/v0/users/current/progress?course=ohjelmointi-19&oauth_token=${accessToken()}`,
9+
)
10+
return res.data?.points_by_group
11+
}

‎src/services/moocfi.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,19 @@ export async function fetchProgrammingExerciseModelSolution(exerciseId) {
196196
return res.data
197197
}
198198

199+
export async function fetchProgrammingProgress(exerciseName) {
200+
const res = await axios.get(
201+
`${BASE_URL}/org/${ORGANIZATION}/courses/${COURSE}/users/current/progress`,
202+
{
203+
headers: {
204+
"Content-Type": "application/json",
205+
Authorization: `Bearer ${accessToken()}`,
206+
},
207+
},
208+
)
209+
return res.data?.points_by_group
210+
}
211+
199212
export function canDoResearch() {
200213
try {
201214
return store.get("tmc.user.details")?.extra_fields?.research === "1"

0 commit comments

Comments
 (0)