Merge pull request #248 from nwplus/firebase-hacker-app

Connect hacker app form to firebase
nwplus · Aug 1, 2024 · 99dc36f · 99dc36f
2 parents 4dd3da2 + eeba4a7
commit 99dc36f
Show file tree

Hide file tree

Showing 6 changed files with 257 additions and 30 deletions.
diff --git a/components/page.js b/components/page.js
@@ -5,8 +5,6 @@ import { COLOR } from '../constants'
 import Navbar from './navbar'
 import Sidebar from './sidebar'
 import HackerAppNavbar from './hackerAppNavbar'
-import Button from './button'
-import Icon from './Icon'
 
 const HeaderContainer = styled.div`
   display: flex;
@@ -43,12 +41,6 @@ const StyledHackerAppSection = styled.div`
   gap: 75px;
 `
 
-const StyledButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`
-
 const StyledHackerAppNav = styled.div`
   display: flex;
   align-items: center;
@@ -84,14 +76,6 @@ export default ({
                   <Header>Hacker Application / {hackerAppHeader}</Header>
                   {loading && <LoadingImage src={LoadingGif} />}
                 </HeaderContainer>
-                <StyledButton
-                  color={COLOR.MIDNIGHT_PURPLE_DEEP}
-                  contentColor={COLOR.WHITE}
-                  hoverBackgroundColor={COLOR.MIDNIGHT_PURPLE_LIGHT}
-                >
-                  <Icon color={COLOR.WHITE} icon="save" />
-                  Save
-                </StyledButton>
               </StyledHackerAppNav>
               <StyledHackerAppSection>
                 <HackerAppNavbar

diff --git a/components/questionCard.js b/components/questionCard.js
@@ -140,7 +140,7 @@ const QuestionCard = ({ question, removeQuestion, id, moveUp, moveDown, handleCh
       <TitleBar>
         <Bar style={{ width: '90%' }}>
           <Icon color={COLOR.MIDNIGHT_PURPLE_DEEP} icon="question-circle" />
-          <StyledField type="text" placeholder="Untitled" value={question.title} readOnly />
+          <StyledField type="text" placeholder="Untitled" value={question.title || ''} readOnly />
         </Bar>
         <Bar>
           <StyledQuestionButton onClick={() => setToggled(!isToggled)}>
@@ -166,17 +166,17 @@ const QuestionCard = ({ question, removeQuestion, id, moveUp, moveDown, handleCh
           <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Question</QuestionTitle>
           <TextField
             placeholder="Question title"
-            customValue={question.title}
+            customValue={question.title || ''}
             onChangeCustomValue={e => handleChange(id, 'title', e.target.value)}
           />
           <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Description (optional)</QuestionTitle>
           <TextField
             placeholder="Question description"
-            customValue={question.description}
+            customValue={question.description || ''}
             onChangeCustomValue={e => handleChange(id, 'description', e.target.value)}
           />
           <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Question Type</QuestionTitle>
-          <QuestionDropdown onSelect={o => handleChange(id, 'type', o)} defaultValue={question.type} />
+          <QuestionDropdown onSelect={o => handleChange(id, 'type', o)} defaultValue={question.type || ''} />
         </>
       )}
       {isToggled &&
@@ -186,7 +186,7 @@ const QuestionCard = ({ question, removeQuestion, id, moveUp, moveDown, handleCh
         <div>
           <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Options</QuestionTitle>
           <StyledOptions>
-            {question.options.map((option, index) => (
+            {(question.options || []).map((option, index) => (
               <OptionsContent key={index}>
                 <TextField
                   placeholder={`Option ${index + 1}`}
@@ -205,7 +205,7 @@ const QuestionCard = ({ question, removeQuestion, id, moveUp, moveDown, handleCh
           <StyledOtherToggle>
             <QuestionTitle color={`${COLOR.MIDNIGHT_PURPLE_DEEP}`}>Add Other</QuestionTitle>
             <StyledToggle
-              checked={question.other}
+              checked={question.other || false}
               icons={false}
               onChange={() => handleChange(id, 'other', !question.other)}
             />
@@ -215,7 +215,7 @@ const QuestionCard = ({ question, removeQuestion, id, moveUp, moveDown, handleCh
       {isToggled && (
         <StyledOtherToggle style={{ justifyContent: 'flex-end' }}>
           <StyledToggle
-            checked={question.required}
+            checked={question.required || false}
             icons={false}
             onChange={() => handleChange(id, 'required', !question.required)}
           />

diff --git a/pages/hackerapps/[id]/basicinfo.js b/pages/hackerapps/[id]/basicinfo.js
@@ -1,10 +1,21 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { getHackathonPaths, getHackathons } from '../../../utility/firebase'
+import {
+  getHackerAppQuestions,
+  getHackathonPaths,
+  getHackathons,
+  updateHackerAppQuestions,
+  getHackerAppQuestionsMetadata,
+  formatDate,
+  getTimestamp,
+  updateHackerAppQuestionsMetadata,
+} from '../../../utility/firebase'
 import Page from '../../../components/page'
 import { HACKER_APP_NAVBAR, COLOR } from '../../../constants'
 import QuestionCard from '../../../components/questionCard'
 import Icon from '../../../components/Icon'
+import Button from '../../../components/button'
+import { useAuth } from '../../../utility/auth'
 
 const HeaderContainer = styled.div`
   display: flex;
@@ -36,10 +47,41 @@ const QuestionsContainer = styled.div`
   gap: 10px;
 `
 
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: absolute;
+  top: 60px;
+  right: 80px;
+`
+
+const StyledMetadataP = styled.p`
+  position: absolute;
+  top: 100px;
+  right: 80px;
+  color: ${COLOR.MIDNIGHT_PURPLE};
+`
+
 export default ({ id, hackathons }) => {
   const [questions, setQuestions] = useState([
     { title: '', description: '', type: '', options: [''], other: false, required: false },
   ])
+  const [metadata, setMetadata] = useState({})
+  const { email: user } = useAuth().user
+
+  useEffect(() => {
+    const fetchQuestions = async () => {
+      const appQuestions = await getHackerAppQuestions(id, 'BasicInfo')
+      setQuestions(appQuestions)
+    }
+    const fetchMetadata = async () => {
+      const fetchedMetadata = await getHackerAppQuestionsMetadata(id, 'BasicInfo')
+      setMetadata(fetchedMetadata)
+    }
+    fetchQuestions()
+    fetchMetadata()
+  }, [id])
 
   const addQuestion = index => {
     const newQuestions = [...questions]
@@ -88,6 +130,14 @@ export default ({ id, hackathons }) => {
     setQuestions(newQuestions)
   }
 
+  const handleSave = async hackathon => {
+    await updateHackerAppQuestions(hackathon, questions, 'BasicInfo')
+    const newMetadata = { lastEditedAt: getTimestamp(), lastEditedBy: user }
+    setMetadata(newMetadata)
+    await updateHackerAppQuestionsMetadata(hackathon, 'BasicInfo', newMetadata)
+    alert('Questions were saved to the database!')
+  }
+
   return (
     <>
       <Page
@@ -96,6 +146,20 @@ export default ({ id, hackathons }) => {
         hackerAppHeader={id}
         hackerAppNavbarItems={HACKER_APP_NAVBAR}
       >
+        <StyledButton
+          color={COLOR.MIDNIGHT_PURPLE_DEEP}
+          contentColor={COLOR.WHITE}
+          hoverBackgroundColor={COLOR.MIDNIGHT_PURPLE_LIGHT}
+          onClick={async () => {
+            await handleSave(id)
+          }}
+        >
+          <Icon color={COLOR.WHITE} icon="save" />
+          Save
+        </StyledButton>
+        <StyledMetadataP>{`Last Edited by ${metadata.lastEditedBy} at ${formatDate(
+          metadata.lastEditedAt?.seconds
+        )}`}</StyledMetadataP>
         <HeaderContainer>
           <Header>2. Add basic information questions</Header>
         </HeaderContainer>

diff --git a/pages/hackerapps/[id]/skills.js b/pages/hackerapps/[id]/skills.js
@@ -1,10 +1,21 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
-import { getHackathonPaths, getHackathons } from '../../../utility/firebase'
+import {
+  getHackathonPaths,
+  getHackathons,
+  getHackerAppQuestions,
+  updateHackerAppQuestions,
+  getHackerAppQuestionsMetadata,
+  formatDate,
+  getTimestamp,
+  updateHackerAppQuestionsMetadata,
+} from '../../../utility/firebase'
 import Page from '../../../components/page'
 import { HACKER_APP_NAVBAR, COLOR } from '../../../constants'
 import QuestionCard from '../../../components/questionCard'
 import Icon from '../../../components/Icon'
+import Button from '../../../components/button'
+import { useAuth } from '../../../utility/auth'
 
 const HeaderContainer = styled.div`
   display: flex;
@@ -36,10 +47,41 @@ const QuestionsContainer = styled.div`
   gap: 10px;
 `
 
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: absolute;
+  top: 60px;
+  right: 80px;
+`
+
+const StyledMetadataP = styled.p`
+  position: absolute;
+  top: 100px;
+  right: 80px;
+  color: ${COLOR.MIDNIGHT_PURPLE};
+`
+
 export default ({ id, hackathons }) => {
   const [questions, setQuestions] = useState([
     { title: '', description: '', type: '', options: [''], other: false, required: false },
   ])
+  const [metadata, setMetadata] = useState({})
+  const { email: user } = useAuth().user
+
+  useEffect(() => {
+    const fetchQuestions = async () => {
+      const appQuestions = await getHackerAppQuestions(id, 'Skills')
+      setQuestions(appQuestions)
+    }
+    const fetchMetadata = async () => {
+      const fetchedMetadata = await getHackerAppQuestionsMetadata(id, 'Skills')
+      setMetadata(fetchedMetadata)
+    }
+    fetchQuestions()
+    fetchMetadata()
+  }, [id])
 
   const addQuestion = index => {
     const newQuestions = [...questions]
@@ -88,6 +130,14 @@ export default ({ id, hackathons }) => {
     setQuestions(newQuestions)
   }
 
+  const handleSave = async hackathon => {
+    await updateHackerAppQuestions(hackathon, questions, 'Skills')
+    const newMetadata = { lastEditedAt: getTimestamp(), lastEditedBy: user }
+    setMetadata(newMetadata)
+    await updateHackerAppQuestionsMetadata(hackathon, 'Skills', newMetadata)
+    alert('Questions were saved to the database!')
+  }
+
   return (
     <>
       <Page
@@ -96,6 +146,20 @@ export default ({ id, hackathons }) => {
         hackerAppHeader={id}
         hackerAppNavbarItems={HACKER_APP_NAVBAR}
       >
+        <StyledButton
+          color={COLOR.MIDNIGHT_PURPLE_DEEP}
+          contentColor={COLOR.WHITE}
+          hoverBackgroundColor={COLOR.MIDNIGHT_PURPLE_LIGHT}
+          onClick={async () => {
+            await handleSave(id)
+          }}
+        >
+          <Icon color={COLOR.WHITE} icon="save" />
+          Save
+        </StyledButton>
+        <StyledMetadataP>{`Last Edited by ${metadata.lastEditedBy} at ${formatDate(
+          metadata.lastEditedAt?.seconds
+        )}`}</StyledMetadataP>
         <HeaderContainer>
           <Header>3. Add skills and long answer questions</Header>
         </HeaderContainer>