Code style

.prettierrc

@@ -1,5 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5"
+  "singleQuote": false,
+  "trailingComma": "all"
 }

src/components/Banner.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import Bruce from '../images/banner.svg'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import Bruce from "../images/banner.svg"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const BannerWrapper = styled.header`
   height: 30rem;
@@ -21,9 +21,9 @@ const BannerWrapper = styled.header`
 `
 
 const Heading = styled.div`
-  font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: 500;
   font-size: 2rem;
   color: #c0392b;

src/components/Button.js

@@ -1,14 +1,14 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import styled from 'styled-components'
-import { Button as MaterialButton } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import { Link } from "gatsby"
+import styled from "styled-components"
+import { Button as MaterialButton } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledLink = styled(Link)`
   margin: 1rem 0.5rem;
 `
 
-const Button = ({ children, to, onClick, disabled, variant = 'outlined' }) => (
+const Button = ({ children, to, onClick, disabled, variant = "outlined" }) => (
   <StyledLink
     onClick={onClick}
     to={to === undefined ? false : to}

src/components/Container.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Container = styled.div`
   width: 90%;

src/components/ContentArea.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import { SIDEBAR_WIDTH } from './Sidebar'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import { SIDEBAR_WIDTH } from "./Sidebar"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const ContentAreaContainer = styled.main`
   @media only screen and (min-width: 1200px) {

src/components/CoursePageFooter.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import PagesInThisSection from '../partials/PagesInThisSection'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import PagesInThisSection from "../partials/PagesInThisSection"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const CoursePageFooterWrapper = styled.footer`
   background-color: white;
@@ -22,7 +22,7 @@ class CoursePageFooter extends React.Component {
       <CoursePageFooterWrapper>
         <CoursePageFooterContent>
           <PagesInThisSection
-            style={{ width: '400px', fontSize: '0.8rem', margin: 0 }}
+            style={{ width: "400px", fontSize: "0.8rem", margin: 0 }}
           />
         </CoursePageFooterContent>
       </CoursePageFooterWrapper>

src/components/EndOfSubSection.js

@@ -1,12 +1,12 @@
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
-import PagesContext from '../contexes/PagesContext'
-import { nthIndex } from '../util/strings'
-import { Link } from 'gatsby'
+import React, { Fragment } from "react"
+import styled from "styled-components"
+import PagesContext from "../contexes/PagesContext"
+import { nthIndex } from "../util/strings"
+import { Link } from "gatsby"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowRight as icon } from '@fortawesome/free-solid-svg-icons'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faArrowRight as icon } from "@fortawesome/free-solid-svg-icons"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledLink = styled(Link)`
   color: black;
@@ -47,7 +47,7 @@ class EndOfSubSection extends React.Component {
         {value => {
           const currentPath = value.current.path
           let sectionPath = currentPath
-          const sectionSeparator = nthIndex(currentPath, '/', 2)
+          const sectionSeparator = nthIndex(currentPath, "/", 2)
           if (sectionSeparator !== -1) {
             sectionPath = currentPath.substr(0, sectionSeparator)
           }
@@ -79,10 +79,10 @@ class EndOfSubSection extends React.Component {
           }
           return (
             <div>
-              Pääsit aliluvun loppuun!{' '}
+              Pääsit aliluvun loppuun!{" "}
               {nextPart && (
                 <Fragment>
-                  Jatka tästä seuraavaan osaan:{' '}
+                  Jatka tästä seuraavaan osaan:{" "}
                   <ButtonWrapper>
                     <StyledLink to={nextPart.path}>
                       <StyledIcon icon={icon} />

src/components/Footer.js

@@ -1,22 +1,22 @@
-import React from 'react'
-import styled from 'styled-components'
-import BackgroundImage from '../images/banner.svg'
-import { SIDEBAR_WIDTH } from './Sidebar'
-import { Card, CardContent } from '@material-ui/core'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import { Link } from 'gatsby'
+import React from "react"
+import styled from "styled-components"
+import BackgroundImage from "../images/banner.svg"
+import { SIDEBAR_WIDTH } from "./Sidebar"
+import { Card, CardContent } from "@material-ui/core"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import { Link } from "gatsby"
 
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-import UHLogo from '../images/uh-logo.png'
-import MoocfiLogo from '../images/moocfi-logo-bw.png'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import UHLogo from "../images/uh-logo.png"
+import MoocfiLogo from "../images/moocfi-logo-bw.png"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
   faTwitter,
   faFacebook,
   faYoutube,
   faGithub,
-} from '@fortawesome/free-brands-svg-icons'
+} from "@fortawesome/free-brands-svg-icons"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   color: black;
@@ -118,7 +118,7 @@ class Footer extends React.Component {
                 </OutboundLink>
               </GithubContainer>
               <ContentContainer>
-                Kurssin on tehnyt Helsingin yliopiston{' '}
+                Kurssin on tehnyt Helsingin yliopiston{" "}
                 <OutboundLink
                   href="https://www.helsinki.fi/en/researchgroups/data-driven-education"
                   target="_blank"

src/components/Loading.js

@@ -1,8 +1,8 @@
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import styled from "styled-components"
 
-import { CircularProgress } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { CircularProgress } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const LoadingWrapper = styled.div`
   padding: 5rem;

src/components/LoginControls.js

@@ -1,14 +1,14 @@
-import React, { Fragment } from 'react'
-import Button from './Button'
-import { signOut, getCachedUserDetails } from '../services/moocfi'
+import React, { Fragment } from "react"
+import Button from "./Button"
+import { signOut, getCachedUserDetails } from "../services/moocfi"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
+} from "../contexes/LoginStateContext"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser as profileIcon } from '@fortawesome/free-solid-svg-icons'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faUser as profileIcon } from "@fortawesome/free-solid-svg-icons"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   margin-right: 0.5rem;
@@ -27,9 +27,9 @@ class LoginControls extends React.Component {
       return
     }
     const details = await getCachedUserDetails()
-    let name = `${details?.user_field?.first_name || ''} ${details?.user_field
-      ?.last_name || ''}`.trim()
-    if (name === '') {
+    let name = `${details?.user_field?.first_name || ""} ${details?.user_field
+      ?.last_name || ""}`.trim()
+    if (name === "") {
       name = details.email
     }
     this.setState({
@@ -38,7 +38,7 @@ class LoginControls extends React.Component {
   }
 
   state = {
-    name: 'Loading...',
+    name: "Loading...",
   }
 
   render() {

src/components/Logo.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import logo from '../images/logo.png'
-import styled from 'styled-components'
-import 'typeface-open-sans-condensed'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import logo from "../images/logo.png"
+import styled from "styled-components"
+import "typeface-open-sans-condensed"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const LogoImg = styled.img`
   width: 50px;
@@ -13,7 +13,7 @@ const LogoImg = styled.img`
 
 const LogoTypography = styled.div`
   flex: 1;
-  font-family: 'Open Sans Condensed', sans-serif !important;
+  font-family: "Open Sans Condensed", sans-serif !important;
   font-size: 1.75rem !important;
 `
 

src/components/MailinglistForm.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react"
+import styled from "styled-components"
 
-import { TextField, Button } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { TextField, Button } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Container = styled.div`
   padding: 3rem;

src/components/PointsBalloon/PointsBalloonBalloon.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import Fab from '@material-ui/core/Fab'
-import styled from 'styled-components'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChartLine as icon } from '@fortawesome/free-solid-svg-icons'
+import React from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import Fab from "@material-ui/core/Fab"
+import styled from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faChartLine as icon } from "@fortawesome/free-solid-svg-icons"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   color: white;

src/components/PointsBalloon/PointsBalloonContent.js

@@ -1,11 +1,10 @@
-import React, { Fragment } from 'react'
-import LoginStateContext from '../../contexes/LoginStateContext'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import { Modal, Paper, Button } from '@material-ui/core'
-import styled from 'styled-components'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import Loading from '../Loading'
-
+import React, { Fragment } from "react"
+import LoginStateContext from "../../contexes/LoginStateContext"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import { Modal, Paper, Button } from "@material-ui/core"
+import styled from "styled-components"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import Loading from "../Loading"
 
 const StyledModal = styled(Modal)`
   z-index: 500 !important;
@@ -35,8 +34,8 @@ const Title = styled.h1`
 `
 
 const data = [
-  { group: 'Osa 1', Ohjelmointitehtävät: 80, Kyselyt: 20 },
-  { group: 'Osa 2', Ohjelmointitehtävät: 30, Kyselyt: 40 },
+  { group: "Osa 1", Ohjelmointitehtävät: 80, Kyselyt: 20 },
+  { group: "Osa 2", Ohjelmointitehtävät: 30, Kyselyt: 40 },
 ]
 
 class PointsBalloonContent extends React.Component {
@@ -69,12 +68,14 @@ class PointsBalloonContent extends React.Component {
               <p>
                 Tähän tulee visualisaatio edistymisestäsi heti kun olemme
                 saaneet tämän ominaisuuden toteutettua. Odotellessasi voit
-                tutkia edistymisestäsi ohjelmointitehtävissä
-                TMC:ssä:{' '}
+                tutkia edistymisestäsi ohjelmointitehtävissä TMC:ssä:{" "}
                 <OutboundLink href="https://tmc.mooc.fi/participants/me">
                   https://tmc.mooc.fi/participants/me
                 </OutboundLink>
-                . Huomaathan, että pisteisiisi vaikuttaa muutkin tehtävät kuin ohjelmointitehtävät, kuten vaikka materiaalin seassa olevat kyselyt. Näiden tehtävien pisteet eivät näy TMC:ssä. Kiitos kärsivällisyydestäsi!
+                . Huomaathan, että pisteisiisi vaikuttaa muutkin tehtävät kuin
+                ohjelmointitehtävät, kuten vaikka materiaalin seassa olevat
+                kyselyt. Näiden tehtävien pisteet eivät näy TMC:ssä. Kiitos
+                kärsivällisyydestäsi!
               </p>
             </Fragment>
           </Loading>

src/components/PointsBalloon/index.js

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react'
-import LoginStateContext from '../../contexes/LoginStateContext'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import LoginStateContext from "../../contexes/LoginStateContext"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import styled from "styled-components"
 
-import PointsBalloonBalloon from './PointsBalloonBalloon'
-import PointsBalloonContent from './PointsBalloonContent'
+import PointsBalloonBalloon from "./PointsBalloonBalloon"
+import PointsBalloonContent from "./PointsBalloonContent"
 
 const PoitsBalloonContainer = styled.div`
   position: fixed;