Implement a ab study partial

src/contexes/AbGroupContext.js

@@ -0,0 +1,3 @@
+import React from "react"
+
+export default React.createContext()

src/partials/AbStudy/OnlyForAbGroup.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import styled from "styled-components"
+import AbGroupContext from "../../contexes/AbGroupContext"
+
+class OnlyForAbGroup extends Component {
+  static contextType = AbGroupContext
+
+  state = {
+    render: false,
+  }
+
+  componentDidMount() {
+    this.setState({ render: true })
+  }
+
+  render() {
+    if (!this.state.render) {
+      return <div>Loading...</div>
+    }
+    if (!this.context) {
+      return (
+        <div>
+          Error:. Please use only-for-ab-group only inside of ab-study
+          components.
+        </div>
+      )
+    }
+    if (!this.props.group) {
+      return <div>Error: please provide a group.</div>
+    }
+    if (this.props.group === this.context.toString()) {
+      return this.props.children
+    }
+    return <div />
+  }
+}
+
+export default withSimpleErrorBoundary(OnlyForAbGroup)

src/partials/AbStudy/index.js

@@ -0,0 +1,130 @@
+import React, { Component } from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import LoginStateContext from "../../contexes/LoginStateContext"
+
+import { Card } from "@material-ui/core"
+import styled from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faExclamationTriangle as icon } from "@fortawesome/free-solid-svg-icons"
+import LoginControls from "../../components/LoginControls"
+import Loading from "../../components/Loading"
+import { fetchAbGroup } from "../../services/abstudio"
+import AbGroupContext from "../../contexes/AbGroupContext"
+
+const StyledIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.25em;
+  font-size: 3.3em !important;
+`
+
+const Wrapper = styled(Card)`
+  margin-bottom: 2rem;
+  padding: 1rem;
+`
+
+const MessageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const P = styled.p`
+  margin-bottom: 1rem !important;
+`
+
+class AbStudy extends Component {
+  static contextType = LoginStateContext
+
+  state = {
+    error: undefined,
+    render: false,
+    group: undefined,
+  }
+
+  async componentDidMount() {
+    this.setState({ render: true })
+    if (!this.props.id) {
+      return
+    }
+    try {
+      const { group } = await fetchAbGroup(this.props.id)
+      if (!group) {
+        this.setState({ error: "Group is null" })
+      }
+      this.setState({ group })
+    } catch (e) {
+      this.setState({ error: e.toString() })
+    }
+  }
+
+  render() {
+    if (!this.state.render) {
+      return (
+        <Wrapper>
+          Ladataan kurssisisällön osaa...
+          <Loading heightHint="200px" />
+        </Wrapper>
+      )
+    }
+    if (this.state.error) {
+      return (
+        <Wrapper>
+          <MessageWrapper>
+            <StyledIcon icon={icon} />
+            <div>
+              <P>
+                Kurssisisällön osaa ei pystytty lataamaan virheen takia:{" "}
+                <pre>{this.state.error}</pre>
+              </P>
+              <div>
+                <LoginControls />
+              </div>
+            </div>
+          </MessageWrapper>
+        </Wrapper>
+      )
+    }
+    if (!this.props.id) {
+      return (
+        <Wrapper>
+          Tässä kohtaa on sisältöä, joka ei ole oikein määritelty. Syy: id
+          puuttuu.
+        </Wrapper>
+      )
+    }
+    if (!this.context.loggedIn) {
+      return (
+        <Wrapper>
+          <MessageWrapper>
+            <StyledIcon icon={icon} />
+            <div>
+              <P>
+                Tässä kohtaa materiaalia on sisältöä, joka näkyy vain
+                sisäänkirjautuneille käyttäjille. Kirjaudu sisään nähdäksesi
+                sen.
+              </P>
+              <div>
+                <LoginControls />
+              </div>
+            </div>
+          </MessageWrapper>
+        </Wrapper>
+      )
+    }
+    if (!this.state.group) {
+      return (
+        <Wrapper>
+          Ladataan kurssisisällön osaa...
+          <Loading heightHint="200px">{this.props.children}</Loading>
+        </Wrapper>
+      )
+    }
+    return (
+      <div>
+        <AbGroupContext.Provider value={this.state.group}>
+          {this.props.children}
+        </AbGroupContext.Provider>
+      </div>
+    )
+  }
+}
+
+export default withSimpleErrorBoundary(AbStudy)

src/partials/index.js

@@ -35,6 +35,7 @@ import FloatImageRight from "./FloatImageRight"
 import CodeStatesVisualizer from "./CodeStatesVisualizer"
 import PdfSlideshow from "./PdfSlideshow"
 import ExercisesInThisSection from "./ExercisesInThisSection"
+import AbStudy from "./AbStudy"
 
 import {
   Table,
@@ -45,6 +46,7 @@ import {
   TableTh,
 } from "./Table"
 import Deadline from "./Deadline"
+import OnlyForAbGroup from "./AbStudy/OnlyForAbGroup"
 
 const mapping = {
   test: Test,
@@ -58,6 +60,8 @@ const mapping = {
   "code-states-visualizer": CodeStatesVisualizer,
   "pdf-slideshow": PdfSlideshow,
   "exercises-in-this-section": ExercisesInThisSection,
+  "ab-study": AbStudy,
+  "only-for-ab-group": OnlyForAbGroup,
   youtube: Youtube,
   quiznator: Quiznator,
   table: Table,

src/services/abstudio.js

@@ -0,0 +1,11 @@
+import axios from "axios"
+import { accessToken } from "./moocfi"
+
+const BASE_URL = "https://ab-studio.testmycode.io"
+
+export async function fetchAbGroup(studyId) {
+  const res = await axios.get(
+    `${BASE_URL}/api/v0/ab_studies/${studyId}/group?oauth_token=${accessToken()}`,
+  )
+  return res.data
+}