diff --git a/src/components/Container.js b/src/components/Container.js new file mode 100644 index 00000000..fa19c5ae --- /dev/null +++ b/src/components/Container.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +const Container = styled.div` + max-width: 800px; + margin: 0 auto; +` + +export default Container diff --git a/src/components/LoginControls.js b/src/components/LoginControls.js index 9b2b857f..ceda2b3d 100644 --- a/src/components/LoginControls.js +++ b/src/components/LoginControls.js @@ -3,9 +3,11 @@ import Button from './Button' import { Button as MaterialButton } from '@material-ui/core' import { signOut, getCachedUserDetails } from '../services/moocfi' import { navigate } from 'gatsby' -import LoginStateContext from '../contexes/LoginStateContext' +import LoginStateContext, { + withLoginStateContext, +} from '../contexes/LoginStateContext' -export default class LoginControls extends React.Component { +class LoginControls extends React.Component { static contextType = LoginStateContext doSignOut = e => { @@ -43,3 +45,5 @@ export default class LoginControls extends React.Component { ) } } + +export default withLoginStateContext(LoginControls) diff --git a/src/contexes/LoginStateContext.js b/src/contexes/LoginStateContext.js index f3e02ce5..5f97a004 100644 --- a/src/contexes/LoginStateContext.js +++ b/src/contexes/LoginStateContext.js @@ -26,4 +26,12 @@ export class LoginStateContextProvider extends React.Component { } } +export function withLoginStateContext(Component) { + return props => ( + + + + ) +} + export default LoginStateContext diff --git a/src/pages/404.js b/src/pages/404.js index 79fcae52..28624535 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,11 +1,15 @@ import React from 'react' -import Layout from '../templates/layout' +import Layout from '../templates/Layout' +import Container from '../components/Container' +import { withLoginStateContext } from '../contexes/LoginStateContext' const NotFoundPage = () => ( -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

+ +

Ei löytynyt

+

Olet päätynyt osoitteeseen, jota ei ole olemassa.

+ ) -export default NotFoundPage +export default withLoginStateContext(NotFoundPage) diff --git a/src/pages/index.js b/src/pages/index.js index aa7f8cd3..96062072 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,184 +1,186 @@ import React, { Fragment } from 'react' -import Layout from '../templates/layout' +import Layout from '../templates/Layout' import Banner from '../components/Banner' import MailinglistForm from '../components/MailinglistForm' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' import GatsbyLink from 'gatsby-link' +import { withLoginStateContext } from '../contexes/LoginStateContext' -import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableRow, +} from '@material-ui/core' +import Container from '../components/Container' const IndexPage = () => ( - - - - - -
-

Tietoa kurssista

-

- Ohjelmoinnin MOOC on kaikille avoin ja ilmainen ohjelmoinnin - perusteet opettava verkkokurssi. Kurssilla perehdytään nykyaikaisen - ohjelmoinnin perusideoihin sekä ohjelmoinnissa käytettävien - työvälineiden lisäksi algoritmien laatimiseen. Kurssille - osallistuminen ei vaadi ennakkotietoja ohjelmoinnista. -

-

- Ohjelmoinnin MOOC vastaa sisällöltään Helsingin yliopiston - tietojenkäsittelytieteen laitoksen kursseja Ohjelmoinnin perusteet - ja Ohjelmoinnin jatkokurssi. Kurssit vastaavat yhteensä kymmentä - opintopistettä (5+5). -

-

- Ohjelmoinnin MOOC tarjoaa mahdollisuuden opinto-oikeuteen - tietojenkäsittelytieteen opintoihin Helsingin yliopistolla. Mikäli - haet kurssin kautta opinto-oikeutta, lue kaikki opinto-oikeuden - hakemiseen liittyvät tiedot huolellisesti. Esimerkiksi tehtävien - aikarajoista EI voida joustaa lainkaan. Ehdot opinto-oikeuden - saamiseksi päivittyvät lähempänä yhteishakua. Lisätietoa - opinto-oikeudesta saat{' '} - täältä. -

- -
+ + + +
+

Tietoa kurssista

+

+ Ohjelmoinnin MOOC on kaikille avoin ja ilmainen ohjelmoinnin perusteet + opettava verkkokurssi. Kurssilla perehdytään nykyaikaisen ohjelmoinnin + perusideoihin sekä ohjelmoinnissa käytettävien työvälineiden lisäksi + algoritmien laatimiseen. Kurssille osallistuminen ei vaadi + ennakkotietoja ohjelmoinnista. +

+

+ Ohjelmoinnin MOOC vastaa sisällöltään Helsingin yliopiston + tietojenkäsittelytieteen laitoksen kursseja Ohjelmoinnin perusteet ja + Ohjelmoinnin jatkokurssi. Kurssit vastaavat yhteensä kymmentä + opintopistettä (5+5). +

+

+ Ohjelmoinnin MOOC tarjoaa mahdollisuuden opinto-oikeuteen + tietojenkäsittelytieteen opintoihin Helsingin yliopistolla. Mikäli + haet kurssin kautta opinto-oikeutta, lue kaikki opinto-oikeuden + hakemiseen liittyvät tiedot huolellisesti. Esimerkiksi tehtävien + aikarajoista EI voida joustaa lainkaan. Ehdot opinto-oikeuden + saamiseksi päivittyvät lähempänä yhteishakua. Lisätietoa + opinto-oikeudesta saat{' '} + täältä. +

+ +
-
-

Kurssin kaksi versiota

+
+

Kurssin kaksi versiota

-

- Kurssista julkaistaan aluksi aikataulutettu versio, jossa on - viikoittaiset deadlinet. Myöhemmin kurssista aukeaa myös - aikatauluton versio, jossa tehtäviä voi tehdä täysin omaan tahtiin. - Voit siirtyä aikataululliselta kurssilta aikatauluttomaan mikäli - niin haluat. Kurssin vaihtaminen toiseen suuntaan ei ole - mahdollista. Huomaa kuitenkin että aikatauluttomasta versiosta ei - voi hakea opinto-oikeutta. -

-
+

+ Kurssista julkaistaan aluksi aikataulutettu versio, jossa on + viikoittaiset deadlinet. Myöhemmin kurssista aukeaa myös aikatauluton + versio, jossa tehtäviä voi tehdä täysin omaan tahtiin. Voit siirtyä + aikataululliselta kurssilta aikatauluttomaan mikäli niin haluat. + Kurssin vaihtaminen toiseen suuntaan ei ole mahdollista. Huomaa + kuitenkin että aikatauluttomasta versiosta ei voi hakea + opinto-oikeutta. +

+
-
-

Sisältö ja aikataulu

+
+

Sisältö ja aikataulu

-

- Kurssi koostuu 14 tehtäväsarjasta. Kunkin tehtäväsarjan tekemiseen - kannattaa varata aikaa noin 5-20 tuntia. Varaamme oikeuden - aikataulun ja aiheiden muutoksiin, kuitenkin niin, että jokaista - tehtäväsarjaa on mahdollista suorittaa vähintään kahden viikon ajan. -

+

+ Kurssi koostuu 14 tehtäväsarjasta. Kunkin tehtäväsarjan tekemiseen + kannattaa varata aikaa noin 5-20 tuntia. Varaamme oikeuden aikataulun + ja aiheiden muutoksiin, kuitenkin niin, että jokaista tehtäväsarjaa on + mahdollista suorittaa vähintään kahden viikon ajan. +

-

- Kurssin sisältö tarkentuu kurssin edetessä. Tietoa kurssin - aikatauluista sekä sisällöstä lisätään tälle sivulle kurssin - aloituksen lähestyessä. -

+

+ Kurssin sisältö tarkentuu kurssin edetessä. Tietoa kurssin + aikatauluista sekä sisällöstä lisätään tälle sivulle kurssin + aloituksen lähestyessä. +

- - - - Aikataulu - Julkaisu - Deadline - - - - - Osa 1 - 14.12.2018 - 21.1.2019 - - - Osa 2 - 28.12.2018 - 28.1.2019 - - - Osa 3 - 11.1.2019 - 4.2.2019 - - - Osa 4 - 25.1.2019 - 11.2.2019 - - - Osa 5 - 1.2.2019 - 18.2.2019 - - - Osa 6 - 8.2.2019 - 25.2.2019 - - - Osa 7 - 15.2.2019 - 4.3.2019 - - - Osa 8 - 1.3.2019 - 18.3.2019 - - - Osa 9 - 8.3.2019 - 25.3.2019 - - - Osa 10 - 15.3.2019 - 1.4.2019 - - - Osa 11 - 22.3.2019 - 8.4.2019 - - - Osa 12 - 29.3.2019 - 15.4.2019 - - - Osa 13 - 12.4.2019 - 29.4.2019 - - - Osa 14 - 19.4.2019 - 6.5.2019 - - -
+ + + + Aikataulu + Julkaisu + Deadline + + + + + Osa 1 + 14.12.2018 + 21.1.2019 + + + Osa 2 + 28.12.2018 + 28.1.2019 + + + Osa 3 + 11.1.2019 + 4.2.2019 + + + Osa 4 + 25.1.2019 + 11.2.2019 + + + Osa 5 + 1.2.2019 + 18.2.2019 + + + Osa 6 + 8.2.2019 + 25.2.2019 + + + Osa 7 + 15.2.2019 + 4.3.2019 + + + Osa 8 + 1.3.2019 + 18.3.2019 + + + Osa 9 + 8.3.2019 + 25.3.2019 + + + Osa 10 + 15.3.2019 + 1.4.2019 + + + Osa 11 + 22.3.2019 + 8.4.2019 + + + Osa 12 + 29.3.2019 + 15.4.2019 + + + Osa 13 + 12.4.2019 + 29.4.2019 + + + Osa 14 + 19.4.2019 + 6.5.2019 + + +
-

- - Määräajat ovat aina maanantaisin. Määräaikojen kellonajat ovat - aina 23:59:00 – osan 1 tehtävät tulee palauttaa siis viimeistään - 21.1.2019 klo 23:59:00. Virallisena määräaikana käytetään - tehtäväpalvelimen kelloa, joka on Suomen ajassa. Huomaa, että oman - koneesi kello voi olla jäljessä tai edellä, joten älä jätä - tehtävien tekemistä ja palauttamista viime hetkeen. - -

-
+

+ + Määräajat ovat aina maanantaisin. Määräaikojen kellonajat ovat aina + 23:59:00 – osan 1 tehtävät tulee palauttaa siis viimeistään + 21.1.2019 klo 23:59:00. Virallisena määräaikana käytetään + tehtäväpalvelimen kelloa, joka on Suomen ajassa. Huomaa, että oman + koneesi kello voi olla jäljessä tai edellä, joten älä jätä tehtävien + tekemistä ja palauttamista viime hetkeen. + +

+
-
-

Ilmoittautuminen

+
+

Ilmoittautuminen

-

- Kurssille ei tarvitse eikä voi ilmoittautua. Ilmoittautuneiksi - katsotaan ne osallistujat, jotka tekevät kurssin - ohjelmointitehtäviä. -

-
- - - +

+ Kurssille ei tarvitse eikä voi ilmoittautua. Ilmoittautuneiksi + katsotaan ne osallistujat, jotka tekevät kurssin ohjelmointitehtäviä. +

+
+ + ) -export default IndexPage +export default withLoginStateContext(IndexPage) diff --git a/src/pages/missing-info.js b/src/pages/missing-info.js index ab95f818..775e4b97 100644 --- a/src/pages/missing-info.js +++ b/src/pages/missing-info.js @@ -1,11 +1,11 @@ -import React, { Fragment } from 'react' +import React from 'react' -import Layout from '../templates/layout' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from '../templates/Layout' import CourseOptionsEditor from '../components/user/CourseOptionsEditor' import { navigate } from 'gatsby' -import LoginStateContext from '../contexes/LoginStateContext'; +import LoginStateContext, { + withLoginStateContext, +} from '../contexes/LoginStateContext' class MissingInfo extends React.Component { static contextType = LoginStateContext @@ -24,16 +24,11 @@ class MissingInfo extends React.Component { return
Redirecting...
} return ( - - - - - - - - + + + ) } } -export default MissingInfo +export default withLoginStateContext(MissingInfo) diff --git a/src/pages/opettajille.js b/src/pages/opettajille.js index b42a0182..025eb091 100644 --- a/src/pages/opettajille.js +++ b/src/pages/opettajille.js @@ -1,40 +1,36 @@ import React, { Fragment } from 'react' -import Layout from '../templates/layout' -import Banner from '../components/Banner' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from '../templates/Layout' +import Container from '../components/Container' +import { withLoginStateContext } from '../contexes/LoginStateContext' + const IndexPage = () => ( - - - - - -
-

Opettajille ja opinto-ohjaajille

-

- Kurssin tai sen osan saa ottaa vapaasti osaksi peruskoulun, lukion, - ammattikoulun, ammattikorkeakoulun tai yliopiston opintotarjontaa. - Kerro opiskelijoillesi mahdollisuudesta osallistua kurssille. -

-

- Jos haluat, että kurssillasi on koe ja opiskelijasi saavat kurssista - merkinnän Helsingin yliopiston Avoimelta yliopistolta, ohjeista - opiskelijasi osallistumaan Helsingin yliopiston Avoimen yliopiston - ilmaiseksi tarjoamaan kokeeseen. Saat lisätietoja tästä - järjestelystä ottamalla meihin yhteyttä (mooc@cs.helsinki.fi). -

-

- Avoimen yliopiston kurssisuoritus luetaan automaattisesti osaksi - Helsingin yliopiston opintoja. Useat toisen asteen oppilaitokset - kuten lukiot tarjoavat Ohjelmoinnin MOOCin suorittamisesta - suoritusmerkintöjä. -

-
- - - + + +
+

Opettajille ja opinto-ohjaajille

+

+ Kurssin tai sen osan saa ottaa vapaasti osaksi peruskoulun, lukion, + ammattikoulun, ammattikorkeakoulun tai yliopiston opintotarjontaa. + Kerro opiskelijoillesi mahdollisuudesta osallistua kurssille. +

+

+ Jos haluat, että kurssillasi on koe ja opiskelijasi saavat kurssista + merkinnän Helsingin yliopiston Avoimelta yliopistolta, ohjeista + opiskelijasi osallistumaan Helsingin yliopiston Avoimen yliopiston + ilmaiseksi tarjoamaan kokeeseen. Saat lisätietoja tästä järjestelystä + ottamalla meihin yhteyttä (mooc@cs.helsinki.fi). +

+

+ Avoimen yliopiston kurssisuoritus luetaan automaattisesti osaksi + Helsingin yliopiston opintoja. Useat toisen asteen oppilaitokset kuten + lukiot tarjoavat Ohjelmoinnin MOOCin suorittamisesta + suoritusmerkintöjä. +

+
+ + ) -export default IndexPage +export default withLoginStateContext(IndexPage) diff --git a/src/pages/opinto-oikeus.js b/src/pages/opinto-oikeus.js index 4cc657a8..a361fb33 100644 --- a/src/pages/opinto-oikeus.js +++ b/src/pages/opinto-oikeus.js @@ -1,61 +1,56 @@ import React, { Fragment } from 'react' -import Layout from '../templates/layout' -import Banner from '../components/Banner' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from '../templates/Layout' +import Container from '../components/Container' +import { withLoginStateContext } from '../contexes/LoginStateContext' const IndexPage = () => ( - - - - - -
-

Mahdollisuus opinto-oikeuteen

-

- Keväällä 2019 järjestettävä aikataulutettu Ohjelmoinnin MOOC antaa - mahdollisuuden päästä opiskelemaan tietojenkäsittelytieteen - kandiohjelmaan, matemaattis-luonnontieteelliseen tiedekuntaan, - Helsingin yliopistoon. -

-

- Opinto-oikeuden hakeminen Ohjelmoinnin MOOCin kautta edellyttää - osallistumista aikataulutettuun versioon, tehtävien tekemistä - annetussa aikataulussa, sekä osallistumista toukokuussa - järjestettävään näyttökokeeseen. -

-

- Saat kutsun näyttökokeeseen tekemällä aikataulutetun kurssin - jokaisesta osasta vähintään 90% saatavissa olevista pisteistä. - Pisteiden laskemisessa otetaan huomioon vain ohjelmointitehtävät. - Kyselyt sekä mahdollisesti sivulla näkyvä visualisaatio eivät - vaikuta näihin pisteisiin. -

-

- Näyttökokeen menestyksekkäästi suorittamalla sinulla on mahdollisuus - saada opinto-oikeus tietojenkäsittelytieteen luonnontieteen - kandidaatin (LuK) ja filosofian maisterin (FM) tutkintoihin. - Näyttökokeeseessa tehdään kurssitehtävien kaltainen hieman laajempi - ohjelmointitehtävä, sekä kirjoitetaan lyhyt kirjoitelma. -

-

- MOOC-kurssin perusteella haetaan päähaussa, joka on osa yhteishakua. - Sinun tulee siis täyttää päähaun hakulomake, jossa asetat Helsingin - Yliopiston tietojenkäsittelytieteen ohjelman haluamallesi - prioriteetille. -

-

- Yhteishaun hakuaika on 20.3.-3.4.2019. Hakuaika päättyy klo 15.00. -

-

- Löydät lisätietoja sähköisestä hausta korkeakouluihin Opintopolku.fi - -portaalista 29.10.2018 alkaen. -

-
- - - + + +
+

Mahdollisuus opinto-oikeuteen

+

+ Keväällä 2019 järjestettävä aikataulutettu Ohjelmoinnin MOOC antaa + mahdollisuuden päästä opiskelemaan tietojenkäsittelytieteen + kandiohjelmaan, matemaattis-luonnontieteelliseen tiedekuntaan, + Helsingin yliopistoon. +

+

+ Opinto-oikeuden hakeminen Ohjelmoinnin MOOCin kautta edellyttää + osallistumista aikataulutettuun versioon, tehtävien tekemistä + annetussa aikataulussa, sekä osallistumista toukokuussa + järjestettävään näyttökokeeseen. +

+

+ Saat kutsun näyttökokeeseen tekemällä aikataulutetun kurssin + jokaisesta osasta vähintään 90% saatavissa olevista pisteistä. + Pisteiden laskemisessa otetaan huomioon vain ohjelmointitehtävät. + Kyselyt sekä mahdollisesti sivulla näkyvä visualisaatio eivät vaikuta + näihin pisteisiin. +

+

+ Näyttökokeen menestyksekkäästi suorittamalla sinulla on mahdollisuus + saada opinto-oikeus tietojenkäsittelytieteen luonnontieteen + kandidaatin (LuK) ja filosofian maisterin (FM) tutkintoihin. + Näyttökokeeseessa tehdään kurssitehtävien kaltainen hieman laajempi + ohjelmointitehtävä, sekä kirjoitetaan lyhyt kirjoitelma. +

+

+ MOOC-kurssin perusteella haetaan päähaussa, joka on osa yhteishakua. + Sinun tulee siis täyttää päähaun hakulomake, jossa asetat Helsingin + Yliopiston tietojenkäsittelytieteen ohjelman haluamallesi + prioriteetille. +

+

+ Yhteishaun hakuaika on 20.3.-3.4.2019. Hakuaika päättyy klo 15.00. +

+

+ Löydät lisätietoja sähköisestä hausta korkeakouluihin Opintopolku.fi + -portaalista 29.10.2018 alkaen. +

+
+ + ) -export default IndexPage +export default withLoginStateContext(IndexPage) diff --git a/src/pages/profile.js b/src/pages/profile.js index d6293c1a..228feb8d 100644 --- a/src/pages/profile.js +++ b/src/pages/profile.js @@ -1,11 +1,12 @@ -import React, { Fragment } from 'react' +import React from 'react' -import Layout from '../templates/layout' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from '../templates/Layout' import CourseOptionsEditor from '../components/user/CourseOptionsEditor' import { navigate } from 'gatsby' -import LoginStateContext from '../contexes/LoginStateContext' +import LoginStateContext, { + withLoginStateContext, +} from '../contexes/LoginStateContext' +import Container from '../components/Container' class MissingInfo extends React.Component { static contextType = LoginStateContext @@ -24,23 +25,20 @@ class MissingInfo extends React.Component { return
Redirecting...
} return ( - - - - -

Profiili

+ + +

Profiili

-

- Täällä voit muokata mooc.fi -tilisi asetuksia tämän kurssin - osalta. Katso myös profiilisi mooc.fi:n Test My Code -palvelussa:{' '} - https://tmc.mooc.fi. -

- - - - +

+ Täällä voit muokata mooc.fi -tilisi asetuksia tämän kurssin osalta. + Katso myös profiilisi mooc.fi:n Test My Code -palvelussa:{' '} + https://tmc.mooc.fi. +

+ + + ) } } -export default MissingInfo +export default withLoginStateContext(MissingInfo) diff --git a/src/pages/sign-in.js b/src/pages/sign-in.js index a16024f4..2a399baf 100644 --- a/src/pages/sign-in.js +++ b/src/pages/sign-in.js @@ -1,13 +1,14 @@ -import React, { Fragment } from 'react' -import Layout from '../templates/layout' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import React from 'react' +import Layout from '../templates/Layout' import { authenticate } from '../services/moocfi' import { navigate, Link } from 'gatsby' import { TextField, Button } from '@material-ui/core' import styled from 'styled-components' -import LoginStateContext from '../contexes/LoginStateContext' +import LoginStateContext, { + withLoginStateContext, +} from '../contexes/LoginStateContext' +import Container from '../components/Container' const Row = styled.div` margin-bottom: 1.5rem; @@ -64,84 +65,81 @@ class SignInPage extends React.Component { return
Redirecting....
} return ( - - - - - -

Kirjaudu sisään

-
- - Tämä kurssi käyttää{' '} - - mooc.fi - {' '} - käyttäjätunnuksia. Jos olet aikaisemmin tehnyt mooc.fi - -kursseja voit käyttää olemassaolevia tunnuksiasi. - - - - this.setState({ email: o.target.value })} - /> - - - this.setState({ password: o.target.value })} - /> - + + + +

Kirjaudu sisään

+ + + Tämä kurssi käyttää{' '} + + mooc.fi + {' '} + käyttäjätunnuksia. Jos olet aikaisemmin tehnyt mooc.fi -kursseja + voit käyttää olemassaolevia tunnuksiasi. + - - - - - {this.state.error && ( - - Invalid credentials - - )} - Luo uusi tunnus + this.setState({ email: o.target.value })} + /> - this.setState({ password: o.target.value })} + /> + + + + - -
- - + + {this.state.error && ( + + Invalid credentials + + )} + + Luo uusi tunnus + + + + Unohdin salasanani + + + + + ) } } -export default SignInPage +export default withLoginStateContext(SignInPage) diff --git a/src/pages/sign-up.js b/src/pages/sign-up.js index 0014c560..5187a5ba 100644 --- a/src/pages/sign-up.js +++ b/src/pages/sign-up.js @@ -1,14 +1,15 @@ -import React, { Fragment } from 'react' +import React from 'react' import { navigate } from 'gatsby' -import Layout from '../templates/layout' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from '../templates/Layout' import CreateAccountForm from '../components/user/CreateAccountForm' import CourseOptionsEditor from '../components/user/CourseOptionsEditor' import ConfirmEmail from '../components/user/ConfirmEmail' -import LoginStateContext from '../contexes/LoginStateContext' +import LoginStateContext, { + withLoginStateContext, +} from '../contexes/LoginStateContext' +import Container from '../components/Container' class SignInPage extends React.Component { static contextType = LoginStateContext @@ -38,14 +39,11 @@ class SignInPage extends React.Component { } return ( - - - - {stepComponent} - - + + {stepComponent} + ) } } -export default SignInPage +export default withLoginStateContext(SignInPage) diff --git a/src/templates/CourseContentTemplate.js b/src/templates/CourseContentTemplate.js index 83cfcde1..247e63a6 100644 --- a/src/templates/CourseContentTemplate.js +++ b/src/templates/CourseContentTemplate.js @@ -4,16 +4,19 @@ import styled from 'styled-components' import rehypeReact from 'rehype-react' import { navigate } from 'gatsby' -import Layout from '../templates/layout' -import Sidebar from '../components/Sidebar' -import ContentArea from '../components/ContentArea' +import Layout from './Layout' + import getNamedPartials from '../partials' -import PagesContext from '../contexes/PagesContext' -import TopBar from '../components/TopBar' import CoursePageFooter from '../components/CoursePageFooter' import { getCachedUserDetails } from '../services/moocfi' import './remark.css' -import { LoginStateContextProvider } from '../contexes/LoginStateContext' +import PagesContext from '../contexes/PagesContext' +import LoginStateContext, { + LoginStateContextProvider, +} from '../contexes/LoginStateContext' +import Container from '../components/Container' + +import { loggedIn } from '../services/moocfi' const ContentWrapper = styled.div` margin-top: 1rem; @@ -22,10 +25,10 @@ const ContentWrapper = styled.div` const SectionIndicator = styled.h2`` export default class CourseContentTemplate extends React.Component { - static contextType = LoginStateContextProvider + static contextType = LoginStateContext async componentDidMount() { - if (!this.context.loggedIn) { + if (!loggedIn()) { return } @@ -53,20 +56,18 @@ export default class CourseContentTemplate extends React.Component { }} > - - - - - + + + Osa x.y

{frontmatter.title}

{renderAst(htmlAst)} - + - - + + ) diff --git a/src/templates/Layout.js b/src/templates/Layout.js new file mode 100644 index 00000000..8ac0e562 --- /dev/null +++ b/src/templates/Layout.js @@ -0,0 +1,50 @@ +import React, { Fragment } from 'react' +import Helmet from 'react-helmet' +import Sidebar from '../components/Sidebar' +import ContentArea from '../components/ContentArea' +import TopBar from '../components/TopBar' +import { StaticQuery, graphql } from 'gatsby' + +import './reboot.css' +import './theme.css' + +const layoutQuery = graphql` + query { + title: site { + siteMetadata { + title + } + } + } +` + +export default class Layout extends React.Component { + render() { + const { children } = this.props + + return ( + { + return ( + + + + + {children} + + ) + }} + /> + ) + } +} diff --git a/src/templates/layout.js b/src/templates/layout.js deleted file mode 100644 index e540d10b..00000000 --- a/src/templates/layout.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Helmet from 'react-helmet' -import { StaticQuery, graphql } from 'gatsby' - -import './reboot.css' -import './theme.css' - -const Layout = ({ children, data }) => ( - ( - <> - -
- {children} -
- - )} - /> -) - -Layout.propTypes = { - children: PropTypes.node.isRequired, -} - -export default Layout