From 5db7fc45a9d9af595bb4c07c4dc50f73dd7556bc Mon Sep 17 00:00:00 2001 From: samtuhseng Date: Sun, 3 Dec 2023 00:09:28 -0800 Subject: [PATCH 1/9] sponsor blurb --- components/spocos.js | 24 +- package-lock.json | 21085 ++++++++++++++++++++++++----------------- yarn.lock | 5791 +++++------ 3 files changed, 15624 insertions(+), 11276 deletions(-) diff --git a/components/spocos.js b/components/spocos.js index 606516ee..3eaca9d5 100644 --- a/components/spocos.js +++ b/components/spocos.js @@ -53,6 +53,7 @@ export default function SponsorshipPage({ hackathonId }) { const [newobj, setnewobj] = useState({ name: '', + blurb: '', link: '', imgURL: '', imgName: '', @@ -90,6 +91,7 @@ export default function SponsorshipPage({ hackathonId }) { const handleEdit = async (id) => { setnewobj({ name: sponsors[id].name, + blurb: sponsors[id].blurb, link: sponsors[id].link, imgURL: sponsors[id].imgURL, imgName: sponsors[id].imgName, @@ -108,6 +110,7 @@ export default function SponsorshipPage({ hackathonId }) { const handleView = async (id) => { setnewobj({ name: sponsors[id].name, + blurb: sponsors[id].blurb, link: sponsors[id].link, imgURL: sponsors[id].imgURL, imgName: sponsors[id].imgName, @@ -126,6 +129,7 @@ export default function SponsorshipPage({ hackathonId }) { const handleNew = () => { setnewobj({ name: '', + blurb: '', link: '', imgURL: '', imgName: '', @@ -192,6 +196,7 @@ export default function SponsorshipPage({ hackathonId }) { // 3. refreshes form setnewobj({ name: '', + blurb: '', link: '', imgURL: '', imgName: '', @@ -240,6 +245,9 @@ export default function SponsorshipPage({ hackathonId }) { Sponsor Name + + Sponsor Blurb + Link @@ -267,6 +275,7 @@ export default function SponsorshipPage({ hackathonId }) { {Object.entries(sponsors).map(([key, item]) => ( {item.name} + {item.blurb} {item.link} {item.imgName} {item.tier} @@ -309,12 +318,11 @@ export default function SponsorshipPage({ hackathonId }) { modalAction={modalAction} onChange={(event) => handleChange('name', event.target.value)} /> - handleChange('link', event.target.value)} + onChange={(event) => handleChange('blurb', event.target.value)} /> @@ -322,6 +330,12 @@ export default function SponsorshipPage({ hackathonId }) {
+ handleChange('link', event.target.value)} + /> - - {options.map((option) => ( + + {options.map(option => ( - ); + ) } diff --git a/components/generalConfig.js b/components/generalConfig.js index 59e6f9cc..ec1a29f7 100644 --- a/components/generalConfig.js +++ b/components/generalConfig.js @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import Icon from './Icon'; -import { COLOR, NEW, EDIT, VIEW, DELETE } from '../constants'; -import Modal, { Label, ModalContent, ModalField } from './modal'; -import { firestore, updateHackathonField } from '../utility/firebase'; +import React, { useState } from 'react' +import styled from 'styled-components' +import { COLOR, DELETE, EDIT, NEW, VIEW } from '../constants' +import { firestore, updateHackathonField } from '../utility/firebase' +import Icon from './Icon' +import Modal, { Label, ModalContent, ModalField } from './modal' const KeyValueContainer = styled.div` padding: 5px 0px 5px 5px; @@ -12,17 +12,17 @@ const KeyValueContainer = styled.div` &:hover { background-color: ${COLOR.WHITE}; } -`; +` const GeneralKey = styled.span` color: ${COLOR.DARK_GRAY}; font-size: 18px; padding-right: 5px; -`; +` const FieldValue = styled.span` font-size: 18px; -`; +` const FieldType = styled.span` color: ${COLOR.DARK_GRAY}; @@ -31,16 +31,16 @@ const FieldType = styled.span` ${KeyValueContainer}:hover & { display: block; } -`; +` const HoverContainer = styled.div` margin-left: auto; display: flex; -`; +` const IconContainer = styled.div` padding: 0px 5px 0px 5px; -`; +` const AddField = styled.p` padding: 5px 0px 5px 5px; @@ -50,105 +50,103 @@ const AddField = styled.p` &:hover { background-color: ${COLOR.WHITE}; } -`; +` const TypeSelect = styled.select` color: ${COLOR.BODY_TEXT}; width: 100%; text-align: left; -`; +` export default ({ id, title, content }) => { - const [field, setField] = useState({}); - const [isAdding, setIsAdding] = useState(false); - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalAction, setModalAction] = useState({}); + const [field, setField] = useState({}) + const [isAdding, setIsAdding] = useState(false) + const [isModalOpen, setIsModalOpen] = useState(false) + const [modalAction, setModalAction] = useState({}) const handleAddField = async () => { setField({ field: '', type: 'string', value: '', - }); - setIsModalOpen(true); - setIsAdding(true); - setModalAction(NEW); - }; + }) + setIsModalOpen(true) + setIsAdding(true) + setModalAction(NEW) + } - const handleEditField = async (fieldName) => { + const handleEditField = async fieldName => { setField({ field: fieldName, type: typeof content[fieldName], value: content[fieldName], - }); - setIsModalOpen(true); - setIsAdding(false); - setModalAction(EDIT); - }; + }) + setIsModalOpen(true) + setIsAdding(false) + setModalAction(EDIT) + } const handleClose = async () => { - setField({}); - setIsModalOpen(false); - }; + setField({}) + setIsModalOpen(false) + } const handleChange = async (property, value) => { setField({ ...field, [property]: value, - }); - }; + }) + } - const handleSave = async (event) => { - event.preventDefault(); - setIsModalOpen(false); + const handleSave = async event => { + event.preventDefault() + setIsModalOpen(false) const fieldKey = `${ - title === 'globalStyling' - ? 'BuildConfig.globalStyling' - : `BuildConfig.componentStyling.${title}` - }.${field.field}`; + title === 'globalStyling' ? 'BuildConfig.globalStyling' : `BuildConfig.componentStyling.${title}` + }.${field.field}` - let fieldValue = field.value; + let fieldValue = field.value if (modalAction === DELETE) { - fieldValue = firestore.FieldValue.delete(); + fieldValue = firestore.FieldValue.delete() } else if (field.type === 'number') { // convert to corresponding type if necessary - fieldValue = Number(fieldValue); + fieldValue = Number(fieldValue) if (!fieldValue) { - alert('Field must be a valid number.'); - return; + alert('Field must be a valid number.') + return } } else if (field.type === 'boolean') { - fieldValue = fieldValue === 'true'; + fieldValue = fieldValue === 'true' } updateHackathonField(id, { [fieldKey]: fieldValue, - }); - }; + }) + } - const handleDeleteField = async (fieldName) => { + const handleDeleteField = async fieldName => { setField({ field: fieldName, type: typeof content[fieldName], value: content[fieldName], - }); - setIsModalOpen(true); - setIsAdding(false); - setModalAction(DELETE); - }; + }) + setIsModalOpen(true) + setIsAdding(false) + setModalAction(DELETE) + } return ( <> + Add field - {Object.keys(content).map((fieldName) => { - let value = content[fieldName]; - const fieldType = typeof value; + {Object.keys(content).map(fieldName => { + let value = content[fieldName] + const fieldType = typeof value if (fieldType === 'string') { - value = `"${value}"`; + value = `"${value}"` } else if (fieldType === 'boolean') { - value = String(value); + value = String(value) } return ( @@ -164,29 +162,21 @@ export default ({ id, title, content }) => { - ); + ) })} {/* Modal for adding new field */} - + handleChange('field', event.target.value)} + onChange={event => handleChange('field', event.target.value)} />
- handleChange('type', event.target.value)} - > + handleChange('type', event.target.value)}> @@ -196,10 +186,7 @@ export default ({ id, title, content }) => { {field.type === 'boolean' ? (
- handleChange('value', event.target.value)} - > + handleChange('value', event.target.value)}> @@ -209,11 +196,11 @@ export default ({ id, title, content }) => { label="Value" value={field.value} modalAction={modalAction} - onChange={(event) => handleChange('value', event.target.value)} + onChange={event => handleChange('value', event.target.value)} /> )} - ); -}; + ) +} diff --git a/components/globalStyles.js b/components/globalStyles.js index b0bb565f..a32e1254 100644 --- a/components/globalStyles.js +++ b/components/globalStyles.js @@ -1,4 +1,4 @@ -import { createGlobalStyle } from 'styled-components'; +import { createGlobalStyle } from 'styled-components' export const GlobalStyle = createGlobalStyle` * { @@ -6,4 +6,4 @@ export const GlobalStyle = createGlobalStyle` font-style: normal; font-weight: normal; } -`; +` diff --git a/components/input.js b/components/input.js index c7f250e6..fbd013c0 100644 --- a/components/input.js +++ b/components/input.js @@ -1,11 +1,9 @@ -import styled from 'styled-components'; -import { COLOR } from '../constants'; +import styled from 'styled-components' +import { COLOR } from '../constants' export const InputField = styled.input` - ${(props) => - props.inline - ? 'flex-grow: 1; width: 50%; border-radius: 2px 0 0 2px;' - : 'width: 100%; border-radius: 2px;'} + ${props => + props.inline ? 'flex-grow: 1; width: 50%; border-radius: 2px 0 0 2px;' : 'width: 100%; border-radius: 2px;'} height: 40px; border: 1px solid ${COLOR.DARK_GRAY}; @@ -15,6 +13,6 @@ export const InputField = styled.input` background: ${COLOR.WHITE}; font-family: inherit; font-size: 16px; -`; +` -export default InputField; +export default InputField diff --git a/components/modal.js b/components/modal.js index 3bbd6117..fca27932 100644 --- a/components/modal.js +++ b/components/modal.js @@ -1,10 +1,10 @@ -import React from 'react'; -import styled from 'styled-components'; -import { COLOR, VIEW, NEW, EDIT, CLOSE, SPONSORSHIP } from '../constants'; -import TextBox from './textbox'; -import Button from './button'; -import Dropdown from './dropdown'; -import { InputField } from './input'; +import React from 'react' +import styled from 'styled-components' +import { CLOSE, COLOR, EDIT, NEW, SPONSORSHIP, VIEW } from '../constants' +import Button from './button' +import Dropdown from './dropdown' +import { InputField } from './input' +import TextBox from './textbox' const BackDropScreen = styled.div` width: 100vw; @@ -15,7 +15,7 @@ const BackDropScreen = styled.div` top: 0; background-color: ${COLOR.BLACK}; opacity: 50%; -`; +` export const ModalTitle = styled.h1` margin: 0 0 16px 0; @@ -23,7 +23,7 @@ export const ModalTitle = styled.h1` font-size: 24px; line-height: 30px; color: ${COLOR.BLACK}; -`; +` export const Label = styled.label` display: block; @@ -31,7 +31,7 @@ export const Label = styled.label` font-size: 16px; line-height: 20px; font-weight: bold; -`; +` const GenericText = styled.p` font-size: 16px; @@ -42,43 +42,27 @@ const GenericText = styled.p` word-break: break-all !important; width: auto; text-align: left; -`; +` -export const ModalField = ({ - dropdown, - dropdownOptions, - label, - value, - type = 'text', - onChange, - modalAction, -}) => { +export const ModalField = ({ dropdown, dropdownOptions, label, value, type = 'text', onChange, modalAction }) => { return ( <>
- {(label === 'Answer' || label === 'Description') && - modalAction !== VIEW && ( - - )} - {label !== 'Answer' && - label !== 'Description' && - !dropdown && - modalAction !== VIEW && ( - - )} + {(label === 'Answer' || label === 'Description') && modalAction !== VIEW && ( + + )} + {label !== 'Answer' && label !== 'Description' && !dropdown && modalAction !== VIEW && ( + + )} {dropdown && modalAction !== VIEW && ( - + )} {modalAction === VIEW && {value}}
- ); -}; + ) +} const UploadButton = styled(Button)` border-radius: !important; @@ -87,20 +71,20 @@ const UploadButton = styled(Button)` padding: 24px 24px !important; padding: 0 0.75rem; margin-bottom: 0.75rem; -`; +` const Inline = styled.div` margin-top: 18px; display: flex; align-items: top; -`; +` const ImageContainer = styled.div` width: 200px; height: 200px; margin-bottom: 0.75rem; background: #c4c4c4; -`; +` export const UploadContainer = ({ type, value, onClick, disabled }) => ( <> @@ -111,7 +95,7 @@ export const UploadContainer = ({ type, value, onClick, disabled }) => ( -); +) export const LogoImage = ({ children }) => ( <> @@ -120,7 +104,7 @@ export const LogoImage = ({ children }) => ( {children}
-); +) const ModalBackground = styled.div` transform: translateY(0); @@ -139,46 +123,41 @@ const ModalBackground = styled.div` max-width: 100%; max-height: 70%; overflow-y: auto; -`; +` const ButtonContainer = styled.div` margin: 0; padding-bottom: 20px; float: right; display: inline-block; -`; +` const InlineButtonSpan = styled.div` margin-left: 28px; margin-top: 37px; float: right; display: inline; -`; +` export const ModalButton = ({ type, handleClose, handleSave }) => { - let buttonText; + let buttonText switch (type) { case NEW: - buttonText = 'Add New'; - break; + buttonText = 'Add New' + break case EDIT: - buttonText = 'Save'; - break; + buttonText = 'Save' + break default: - buttonText = 'Confirm'; - break; + buttonText = 'Confirm' + break } return ( <> {type === CLOSE && ( -
- ); -}; + ) +} diff --git a/components/projectsCard.js b/components/projectsCard.js index 2b64ee83..3b0c6f4f 100644 --- a/components/projectsCard.js +++ b/components/projectsCard.js @@ -1,15 +1,8 @@ -import React from 'react'; -import styled from 'styled-components'; -import Card, { - CardHeader, - CardTitle, - CardContent, - CardButtonContainer, - CardContainer, - TableContainer, -} from './card'; -import Button from './button'; -import { NEW, EDIT, DELETE, COLOR } from '../constants'; +import React from 'react' +import styled from 'styled-components' +import { COLOR, DELETE, EDIT, NEW } from '../constants' +import Button from './button' +import Card, { CardButtonContainer, CardContainer, CardContent, CardHeader, CardTitle, TableContainer } from './card' const Text = styled.p` padding-right: 12px; @@ -19,21 +12,15 @@ const Text = styled.p` overflow: hidden; text-overflow: ellipsis; color: ${COLOR.BODY_TEXT}; -`; +` const Actions = styled.div` flex: 1; display: flex; justify-content: flex-start; -`; +` -export default ({ - isLoading, - handleNew, - handleEdit, - handleDelete, - projects, -}) => { +export default ({ isLoading, handleNew, handleEdit, handleDelete, projects }) => { return ( @@ -47,9 +34,7 @@ export default ({ - {isLoading && ( - Loading... - )} + {isLoading && Loading... } {!isLoading && ( @@ -81,16 +66,8 @@ export default ({ {project.teamMembers?.toString()} -
- ); + ) })} { - handleInput(!currentQuicklink.common, 'common'); + handleInput(!currentQuicklink.common, 'common') }} />

*Common links appear on homepage

- Last edited by {currentQuicklink.editor} at{' '} - {formatDate(currentQuicklink.lastModified)} + Last edited by {currentQuicklink.editor} at {formatDate(currentQuicklink.lastModified)}

- ); -}; + ) +} export const getStaticProps = async () => { - const hackathons = await getHackathons(); + const hackathons = await getHackathons() return { props: { hackathons, }, - }; -}; + } +} diff --git a/pages/Livesite/schedule.js b/pages/Livesite/schedule.js index c967d211..1bebfbc4 100644 --- a/pages/Livesite/schedule.js +++ b/pages/Livesite/schedule.js @@ -1,147 +1,128 @@ -import React, { useState, useEffect } from 'react'; -import Page from '../../components/page'; -import FeatureFlag from '../../components/FeatureFlag'; +import React, { useEffect, useState } from 'react' +import FeatureFlag from '../../components/FeatureFlag' +import Button from '../../components/button' +import Card, { CardButtonContainer, CardContent, CardHeader, CardTitle } from '../../components/card' +import { DateTimePicker } from '../../components/dateTimePicker' +import Modal, { Label, ModalContent, ModalField } from '../../components/modal' +import Page from '../../components/page' import { - formatDate, - getTimestamp, - getHackathons, - getActiveHackathon, - getLivesiteEvents, - addLivesiteEvent, - updateLivesiteEvent, - deleteLivesiteEvent, -} from '../../utility/firebase'; -import Card, { - CardHeader, - CardTitle, - CardButtonContainer, - CardContent, -} from '../../components/card'; -import Button from '../../components/button'; -import { - TableWrapper, + ActionsButtonContainer, TableContent, - TableRow, - TableHeader, TableData, - ActionsButtonContainer, TableEmptyText, -} from '../../components/table'; -import Modal, { Label, ModalContent, ModalField } from '../../components/modal'; + TableHeader, + TableRow, + TableWrapper, +} from '../../components/table' +import { COLOR, DELETE, EDIT, LIVESITE_NAVBAR, NEW, VIEW } from '../../constants' +import { useAuth } from '../../utility/auth' import { - COLOR, - EDIT, - VIEW, - NEW, - DELETE, - LIVESITE_NAVBAR, -} from '../../constants'; -import { DateTimePicker } from '../../components/dateTimePicker'; -import { useAuth } from '../../utility/auth'; + addLivesiteEvent, + deleteLivesiteEvent, + formatDate, + getActiveHackathon, + getHackathons, + getLivesiteEvents, + getTimestamp, + updateLivesiteEvent, +} from '../../utility/firebase' export default function Events({ hackathons }) { - const [activeHackathon, setActiveHackathon] = useState(''); - const [events, setEvents] = useState([]); - const [newEvent, setNewEvent] = useState({}); - const [eventViewing, setEventViewing] = useState({}); - const [eventEditing, setEventEditing] = useState({}); - const [eventConfirm, setEventConfirm] = useState({}); - const [isLoading, setIsLoading] = useState(true); - const [alertMsg, setAlertMsg] = useState(''); - const { email: user } = useAuth().user; + const [activeHackathon, setActiveHackathon] = useState('') + const [events, setEvents] = useState([]) + const [newEvent, setNewEvent] = useState({}) + const [eventViewing, setEventViewing] = useState({}) + const [eventEditing, setEventEditing] = useState({}) + const [eventConfirm, setEventConfirm] = useState({}) + const [isLoading, setIsLoading] = useState(true) + const [alertMsg, setAlertMsg] = useState('') + const { email: user } = useAuth().user useEffect(() => { - (async () => { - setActiveHackathon(await getActiveHackathon); - })(); - }); + ;(async () => { + setActiveHackathon(await getActiveHackathon) + })() + }) const fetchEvents = async () => { if (activeHackathon) { - const eventsFetched = await getLivesiteEvents(activeHackathon); + const eventsFetched = await getLivesiteEvents(activeHackathon) if (Object.keys(eventsFetched).length > 0) { - setEvents(eventsFetched); + setEvents(eventsFetched) } } - setIsLoading(false); - }; + setIsLoading(false) + } useEffect(() => { if (alertMsg.length > 0) { - alert(alertMsg); + alert(alertMsg) } - }, [alertMsg]); + }, [alertMsg]) useEffect(() => { - fetchEvents(); - }, [activeHackathon]); + fetchEvents() + }, [activeHackathon]) const handleNew = async () => { - newEvent.lastModifiedBy = user; - newEvent.startTime = new Date(newEvent.startTime).toISOString(); - newEvent.endTime = new Date(newEvent.endTime).toISOString(); - newEvent.type = newEvent.type ?? 'main'; - const eventID = await addLivesiteEvent(activeHackathon, { ...newEvent }); - newEvent.lastModified = formatDate(getTimestamp().seconds); + newEvent.lastModifiedBy = user + newEvent.startTime = new Date(newEvent.startTime).toISOString() + newEvent.endTime = new Date(newEvent.endTime).toISOString() + newEvent.type = newEvent.type ?? 'main' + const eventID = await addLivesiteEvent(activeHackathon, { ...newEvent }) + newEvent.lastModified = formatDate(getTimestamp().seconds) setEvents({ ...events, [eventID]: { ...newEvent, eventID, }, - }); - setNewEvent({}); - setAlertMsg(`Successfully added the following event: \n${newEvent.name}`); - }; + }) + setNewEvent({}) + setAlertMsg(`Successfully added the following event: \n${newEvent.name}`) + } const handleUpdate = async () => { - eventEditing.lastModified = user; - eventEditing.startTime = new Date(eventEditing.startTime).toISOString(); - eventEditing.endTime = new Date(eventEditing.endTime).toISOString(); - await updateLivesiteEvent(activeHackathon, { ...eventEditing }); - eventEditing.lastModified = formatDate(getTimestamp().seconds); + eventEditing.lastModified = user + eventEditing.startTime = new Date(eventEditing.startTime).toISOString() + eventEditing.endTime = new Date(eventEditing.endTime).toISOString() + await updateLivesiteEvent(activeHackathon, { ...eventEditing }) + eventEditing.lastModified = formatDate(getTimestamp().seconds) setEvents({ ...events, [eventEditing.eventID]: eventEditing, - }); - setEventEditing({}); - setAlertMsg( - `Successfully updated the following event: \n${eventEditing.name}` - ); - }; + }) + setEventEditing({}) + setAlertMsg(`Successfully updated the following event: \n${eventEditing.name}`) + } const handleDelete = (eventID, confirmed = false) => { if (!confirmed) { - setEventConfirm({ ...events[eventID] }); - return; + setEventConfirm({ ...events[eventID] }) + return } - deleteLivesiteEvent(activeHackathon, eventID); + deleteLivesiteEvent(activeHackathon, eventID) setEvents( Object.keys(events) - .filter((curr) => { - return curr !== eventID; + .filter(curr => { + return curr !== eventID }) .reduce((obj, curr) => { - obj[curr] = events[curr]; - return obj; + obj[curr] = events[curr] + return obj }, {}) - ); - setEventConfirm( - {}, - setAlertMsg( - `Successfully deleted the following event: \n${events[eventID].name}` - ) - ); - }; + ) + setEventConfirm({}, setAlertMsg(`Successfully deleted the following event: \n${events[eventID].name}`)) + } const handleInput = (property, value, event, setState) => { setState({ ...event, [property]: value, - }); - }; + }) + } - const EventRow = (props) => { + const EventRow = props => { return ( {props.name} @@ -150,36 +131,20 @@ export default function Events({ hackathons }) { {props.type} - {warningDeployModal} @@ -104,10 +92,7 @@ export default function BuildConfig({ id, hackathons }) { ) : ( [ !buildConfig.componentStyling ? ( - + ) : ( Object.entries(buildConfig.componentStyling).map(([key, val]) => ( @@ -115,33 +100,26 @@ export default function BuildConfig({ id, hackathons }) { ), !buildConfig.globalStyling ? ( - + ) : ( - + ), ] )} - ); + ) } export const getStaticPaths = async () => { - return getHackathonPaths(); -}; + return getHackathonPaths() +} export const getStaticProps = async ({ params }) => { - const hackathons = await getHackathons(); + const hackathons = await getHackathons() return { props: { hackathons, id: params.id, }, - }; -}; + } +} diff --git a/pages/[id]/FeatureFlags.js b/pages/[id]/FeatureFlags.js index 217d3805..d2073f75 100644 --- a/pages/[id]/FeatureFlags.js +++ b/pages/[id]/FeatureFlags.js @@ -1,65 +1,60 @@ -import styled from 'styled-components'; -import { useEffect, useState } from 'react'; -import Page from '../../components/page'; -import Card, { - CardHeader, - CardButtonContainer, - CardTitle, - CardContent, -} from '../../components/card'; -import Button from '../../components/button'; -import FeatureFlag from '../../components/FeatureFlag'; -import { COLOR, EDIT, HACKATHON_NAVBAR } from '../../constants'; +import { useEffect, useState } from 'react' +import styled from 'styled-components' +import FeatureFlag from '../../components/FeatureFlag' +import Button from '../../components/button' +import Card, { CardButtonContainer, CardContent, CardHeader, CardTitle } from '../../components/card' +import Page from '../../components/page' +import { COLOR, EDIT, HACKATHON_NAVBAR } from '../../constants' +import { useAuth } from '../../utility/auth' import { - getTimestamp, - subscribeToFlags, formatDate, - updateFlags, getHackathonPaths, getHackathons, -} from '../../utility/firebase'; -import { useAuth } from '../../utility/auth'; + getTimestamp, + subscribeToFlags, + updateFlags, +} from '../../utility/firebase' const InlineButton = styled.span` display: inline; float: right; margin: 0 16px; padding-bottom: 32px; -`; +` const InlineButtonContainer = styled.div` display: inline-block; float: right; margin-top: -40px; -`; +` export default function FeatureFlags({ id, hackathons }) { - const [editing, setEditing] = useState(false); - const [flags, setFlags] = useState({}); - const [editedFlags, setEditedFlags] = useState({}); - const { email: user } = useAuth().user; + const [editing, setEditing] = useState(false) + const [flags, setFlags] = useState({}) + const [editedFlags, setEditedFlags] = useState({}) + const { email: user } = useAuth().user useEffect(() => { - return subscribeToFlags(id, setFlags); - }, [window.location.href]); + return subscribeToFlags(id, setFlags) + }, [window.location.href]) useEffect(() => { if (!editing) { - setEditedFlags({}); + setEditedFlags({}) } - }, [editing]); + }, [editing]) const saveFlags = async () => { - const updateObj = editedFlags; - updateObj.lastEdited = getTimestamp(); - updateObj.lastEditedBy = user; - await updateFlags(id, updateObj); - setEditing(false); - }; + const updateObj = editedFlags + updateObj.lastEdited = getTimestamp() + updateObj.lastEditedBy = user + await updateFlags(id, updateObj) + setEditing(false) + } const EditFlagsComponent = () => ( <> {Object.entries(editedFlags).map(([key, value]) => { if (key === 'lastEdited' || key === 'lastEditedBy') { - return null; + return null } return ( - ); + ) })} @@ -89,79 +84,67 @@ export default function FeatureFlags({ id, hackathons }) { - ); + ) const ViewFlagsComponent = () => ( <> {Object.entries(flags).map(([key, value]) => { if (key === 'lastEdited' || key === 'lastEditedBy') { - return null; + return null } - return ; + return })} - ); + ) if (!flags) { return ( - + No Feature Flags for {id} - ); + ) } return ( - + Feature Flags for {id} -

{`Last edited by ${flags.lastEditedBy} at ${formatDate( - flags.lastEdited?.seconds - )}`}

+

{`Last edited by ${flags.lastEditedBy} at ${formatDate(flags.lastEdited?.seconds)}`}