Merge pull request #592 from nwplus/portal-app-questions

Render hacker application on Portal dynamically

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "cross-env": "^7.0.2",
     "firebase": "^7.17.1",
+    "html-react-parser": "^5.1.12",
     "html2canvas": "^1.4.1",
     "husky": "^4.3.0",
     "jspdf": "^2.5.1",

src/components/ApplicationForm/HackathonInfo.jsx

@@ -1,55 +1,43 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormSpacing } from './index'
 import { A, CenteredH1, P } from '../Typography'
+import { useHackathon } from '../../utility/HackathonProvider'
+import { getHackerAppQuestions } from '../../utility/firebase'
+import parse, { domToReact } from 'html-react-parser'
 
 const HackathonInfo = () => {
+  const { dbHackathonName } = useHackathon()
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+
+  useEffect(() => {
+    const fetchQuestions = async () => {
+      const questions = await getHackerAppQuestions(dbHackathonName, 'Welcome')
+      setTitle(questions[0].title || '')
+      setContent(questions[0].content || '')
+    }
+    fetchQuestions()
+  }, [dbHackathonName])
+
+  const options = {
+    replace: ({ name, attribs, children }) => {
+      if (name === 'p') {
+        return <P>{domToReact(children, options)}</P>
+      }
+      if (name === 'a') {
+        return (
+          <A href={attribs.href} target={attribs.target}>
+            {domToReact(children, options)}
+          </A>
+        )
+      }
+    },
+  }
   return (
     <>
       <FormSpacing>
-        <CenteredH1>
-          nwPlus is proud to present cmd-f 2024 - Western Canada's largest hackathon celebrating
-          underrepresented genders in tech.
-        </CenteredH1>
-        <P>
-          We are beyond excited to host the 6th iteration of our hackathon on March 9-10, 2024! 
-          cmd-f is a hackathon focused on addressing gender inequality in technology. Our main
-          purpose is to create a safe and dedicated space for gender minorities to hack together.
-          We’re trying to create access for people who have historically been excluded. We encourage
-          participation from women, trans, non-binary, Two-Spirit and gender diverse people. Thus,
-          cmd-f is only open to individuals who identify as an underrepresented gender in
-          technology. Please make sure your participation in this event is aligned with the
-          intentions of the event. We also ask all participants who attend to trust that everyone
-          attending is meant to be here.
-        </P>
-        <P>
-          <span role="img" aria-label="Plant sprout emoji">
-            🌱 
-          </span>
-          Time: March 9-10, 2024 
-        </P>
-        <P>
-          <span role="img" aria-label="Plant sprout emoji">
-            🌱 
-          </span>
-          Location: Life Sciences Institute, UBC
-        </P>
-        <P>
-          Hacker application deadline: <b>March 1, 2024</b>
-        </P>
-        <P>
-          If you have any questions, feel free to reach out to the team at{' '}
-          <A href="mailto:[email protected]" target="_blank">
-            [email protected]
-          </A>
-          !
-        </P>
-        <P>
-          Learn more at{' '}
-          <A href="https://cmd-f.nwplus.io/" target="_blank">
-            cmd-f.nwplus.io
-          </A>
-          !
-        </P>
+        <CenteredH1>{title}</CenteredH1>
+        {parse(content, options)}
       </FormSpacing>
     </>
   )