Skip to content

Commit

Permalink
Merge pull request #209 from nwplus/dev
Browse files Browse the repository at this point in the history 
firebase friendly
  • Loading branch information
@DonaldKLee
DonaldKLee authored Nov 19, 2024
2 parents e7f222b + 6acfe43 commit 5f9272c
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 30 deletions.
163 changes: 133 additions & 30 deletions components/Hackathons.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
// import { useState } from 'react';
import styled from 'styled-components';
// import HackathonCard from './HackathonCard';
// import NewsletterModal from './NewsletterModal';
// import { Body, Title2 } from './Typography';
// import Button from './Button';
import fireDb from '../utilities/firebase';

import SpaceDeer from '../public/assets/space-deer.svg'
// nwHacks
import nwHacksPlanet from '../public/assets/nwHacksPlanet.png'
Expand All @@ -23,26 +21,8 @@ import hcMoonThreeImg from '../public/assets/hcmoon-3.svg'
// Mobile tooltips
import leftToolTip from '../public/assets/moon-left-tooltip.svg'
import rightToolTip from '../public/assets/moon-right-tooltip.svg'

const HackCampData = {
imgSrc: hcPlanet,
link: 'https://hackcamp.nwplus.io',
date: 'Nov 9 - 10',
registrationOpenDate: "Oct 6",
open: true,
};
const nwHacksData = {
imgSrc: nwHacksPlanet,
link: 'https://nwhacks.io',
date: 'Jan 18 - 19',
open: true,
};
const cmdfData = {
imgSrc: cmdfPlanet,
link: 'https://cmd-f.nwplus.io',
date: 'Mar 8 - 9',
open: true,
};
import { useState } from 'react';
import { useEffect } from 'react';

const HackathonsContainer = styled.div`
width: 90%;
Expand Down Expand Up @@ -304,7 +284,130 @@ const ToolTip = styled.img`
`

export default function Hackathons() {
// const [showModal, setShowModal] = useState(false);
const [hackathonData, setHackathonData] = useState(null);
const [HackCampData, setHackCampData] = useState(null);
const [nwHacksData, setNwHacksData] = useState(null);
const [cmdfData, setCmdfData] = useState(null);
// const [nextHackathon, setNextHackathon] = useState(null);

const getHackathonData = async () => {
const hackathonData = await fireDb.getHackathonData();
setHackathonData(hackathonData);

const hackathons = [
{
name: 'HackCamp',
data: {
imgSrc: hcPlanet,
link: 'https://hackcamp.nwplus.io',
date: hackathonData['hackathonWeekend']['hackcamp'],
start: hackathonData['hackathonStart']['hackcamp'],
open: hackathonData['applicationsOpen']['hackcamp'],
},
},
{
name: 'nwHacks',
data: {
imgSrc: nwHacksPlanet,
link: 'https://nwhacks.io',
date: hackathonData['hackathonWeekend']['nwhacks'],
start: hackathonData['hackathonStart']['nwhacks'],
open: hackathonData['applicationsOpen']['nwhacks'],
},
},
{
name: 'cmd-f',
data: {
imgSrc: cmdfPlanet,
link: 'https://cmd-f.nwplus.io',
date: hackathonData['hackathonWeekend']['cmd-f'],
start: hackathonData['hackathonStart']['cmd-f'],
open: hackathonData['applicationsOpen']['cmd-f'],
},
},
];

const sortedHackathons = hackathons.sort((a, b) => {
const today = new Date();
const threeDayBuffer = (date) => {
const bufferDate = new Date(date);
bufferDate.setDate(bufferDate.getDate() + 3);
return bufferDate;
};

const aDate = new Date(a.data.start);
const bDate = new Date(b.data.start);

// Check if the events are past
const aIsPast = today > threeDayBuffer(a.data.start);
const bIsPast = today > threeDayBuffer(b.data.start);

// If one is past and the other isn't, sort accordingly
if (aIsPast && !bIsPast) return 1;
if (!aIsPast && bIsPast) return -1;

// Otherwise, sort by date
return aDate - bDate;
});
// Styling based on the position
const getStyleForHackathon = (index) => {
switch (index) {
case 0:
return { width: "254px", height: "254px" };
case 1:
return { width: "220px", height: "220px" };
case 2:
return { width: "214.75px", height: "214.75px" };
default:
return {};
}
};
// Add dynamic width and height to each hackathon data
sortedHackathons.forEach((hackathon, index) => {
const style = getStyleForHackathon(index);
hackathon.data.width = style.width;
hackathon.data.height = style.height;
});
// Dynamically set the data based on the sorted order
if (sortedHackathons.length > 0) {
// Ensure names are correctly assigned to their respective states
sortedHackathons.forEach((hackathon) => {
switch (hackathon.name) {
case "HackCamp":
setHackCampData(hackathon.data || {});
break;
case "nwHacks":
setNwHacksData(hackathon.data || {});
break;
case "cmd-f":
setCmdfData(hackathon.data || {});
break;
default:
break;
}
});
}
}

useEffect(() => {
console.log('HackCampData updated:', HackCampData);
}, [HackCampData]);

useEffect(() => {
console.log('nwHacksData updated:', nwHacksData);
}, [nwHacksData]);

useEffect(() => {
console.log('cmdfData updated:', cmdfData);
}, [cmdfData]);

useEffect(() => {
getHackathonData();
}, []);

if (!hackathonData || !HackCampData || !nwHacksData || !cmdfData) {
return <></>;
}

return (
<>
Expand Down Expand Up @@ -338,7 +441,7 @@ export default function Hackathons() {
<Moon src={hcMoonThreeImg} />
</MoonContainer>

<HackathonImageContainer style={{width: "254px", height: "254px", top:"-75px" }}>
<HackathonImageContainer style={{width: HackCampData.width, height: HackCampData.height, top:"-75px" }}>
<HackathonImage src={HackCampData.imgSrc} />
</HackathonImageContainer>
</HackathonPlanetContainers>
Expand All @@ -364,7 +467,7 @@ export default function Hackathons() {
<Moon src={nwMoonThreeImg} />
</MoonContainer>

<HackathonImageContainer style={{width: "220px", height: "220px", float: "right" }}>
<HackathonImageContainer style={{width: nwHacksData.width, height: nwHacksData.height, float: "right" }}>
<HackathonImage src={nwHacksData.imgSrc} />
</HackathonImageContainer>

Expand All @@ -376,7 +479,7 @@ export default function Hackathons() {
<HackathonTitle>nwHacks {nwHacksData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
<HackathonDescriptions>Our flagship hackathon – largest in Western Canada.</HackathonDescriptions>
<HackathonDate>{nwHacksData.date}</HackathonDate>
<HackathonButton href={nwHacksData.link} target="_blank">Interest Form Open</HackathonButton>
<HackathonButton href={nwHacksData.link} target="_blank">Apply now!</HackathonButton>
</HackathonDetails>
</HackathonPlanet>

Expand Down Expand Up @@ -408,7 +511,7 @@ export default function Hackathons() {
<Moon src={cmdfMoonTwoImg} />
</MoonContainer>

<HackathonImageContainer style={{width: "214.75px", height: "214.75px", textAlign: "right" }}>
<HackathonImageContainer style={{width: cmdfData.width, height: cmdfData.height, textAlign: "right" }}>
<HackathonImage src={cmdfData.imgSrc} />
</HackathonImageContainer>

Expand Down Expand Up @@ -489,7 +592,7 @@ export default function Hackathons() {
<MobileHackathonDate>{nwHacksData.date}</MobileHackathonDate>

<HackathonDescriptions>Our flagship hackathon – largest in Western Canada.</HackathonDescriptions>
<HackathonButton href={nwHacksData.link} target="_blank">Interest Form Open</HackathonButton>
<HackathonButton href={nwHacksData.link} target="_blank">Apply now!</HackathonButton>
</MobileHackathonDetails>
</MobileHackathonPlanet>

Expand Down
5 changes: 5 additions & 0 deletions utilities/firebase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ const fireDb = {
const data = await ref.get()
return data.data()
},
getHackathonData: async () => {
const ref = db.collection('InternalWebsites').doc('Portal')
const data = await ref.get()
return data.data()
},
}

export default fireDb

0 comments on commit 5f9272c

Please sign in to comment.