Add Google Form Link partial

nygrenh · nygrenh · commit 382f3f2071ac · 2020-01-21T16:15:00.000+02:00
diff --git a/src/partials/GoogleFormLink.js b/src/partials/GoogleFormLink.js
@@ -0,0 +1,66 @@
+import React, { useContext } from "react"
+import LoginStateContext from "../contexes/LoginStateContext"
+import styled from "styled-components"
+import { Card } from "@material-ui/core"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import { withTranslation } from "react-i18next"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
+import { useAsync } from "react-use"
+import { getCachedUserDetails } from "../services/moocfi"
+
+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;
+`
+
+const GoogleFormLink = ({ children, href, t, emailfieldname }) => {
+  const { loggedIn } = useContext(LoginStateContext)
+  const userDetails = useAsync(getCachedUserDetails)
+
+  if (!loggedIn) {
+    return (
+      <Wrapper>
+        <MessageWrapper>
+          <div>
+            <P>{t("loginToSee")}</P>
+          </div>
+        </MessageWrapper>
+      </Wrapper>
+    )
+  }
+
+  if (userDetails.loading) {
+    return <div>Loading...</div>
+  }
+
+  if (userDetails.error) {
+    return <div>Error while loading user information.</div>
+  }
+
+  const email = userDetails.value.email
+
+  let link = href
+  if (emailfieldname) {
+    link = `${link}&${encodeURIComponent(emailfieldname)}=${encodeURIComponent(
+      email,
+    )}`
+  }
+  return (
+    <OutboundLink href={link} target="_blank" rel="noopener noreferrer">
+      {children}
+    </OutboundLink>
+  )
+}
+
+export default withTranslation("common")(
+  withSimpleErrorBoundary(GoogleFormLink),
+)
diff --git a/src/partials/index.js b/src/partials/index.js
@@ -40,6 +40,7 @@ import AbStudy from "./AbStudy"
 import CrowdSorcerer from "./CrowdSorcerer"
 import MoodleExercise from "./MoodleExercise"
 import SqlTrainerExercise from "./SqlTrainerExercise"
+import GoogleFormLink from "./GoogleFormLink"
 
 import {
   Table,
@@ -87,6 +88,7 @@ const mapping = {
   "registration-link-ohja": RegistrationLink2,
   "moodle-exercise": MoodleExercise,
   "sqltrainer-exercise": SqlTrainerExercise,
+  "google-form-link": GoogleFormLink,
   notice: Notice,
   crowdsorcerer: CrowdSorcerer,
   youtube: Youtube,
