Skip to content

cleaning up draw odds, integratedd with firebase firestore #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
grantfogle wants to merge 1 commit into
base: main
Choose a base branch
from
Open

cleaning up draw odds, integratedd with firebase firestore #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions src/components/dashboard/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,49 @@
import React, {useState, useEffect} from 'react';
import {Link, useNavigate} from 'react-router-dom';
import {auth, signInWithEmail, signInWithGoogle, logout} from '../../firebase'
import {useAuthState} from 'react-firebase-hooks/auth';
import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { auth, signInWithEmail, signInWithGoogle, logout } from '../../firebase';
import { doc, getDoc } from 'firebase/firestore';
import { d } from 'firebase/database';
import { useAuthState } from 'react-firebase-hooks/auth';
import { collection, getDocs } from 'firebase/firestore';

import {Box, Typography, Container} from '@mui/material';
import { db, rtDb } from '../../firebase/config';
import { Box, Typography, Container } from '@mui/material';

import Navbar from './navbar/Navbar';
import DashboardSearch from './dashboardSearch/DashboardSearch';
import DrawOdds from './drawOdds/DrawOdds';

const Dashboard = () => {
const [searchStr, setSearchStr] = useState('EE001E1R');
const [displayStats, setDisplayStats] = useState('');
const [species, setSpecies] = useState('');
const [method, setMethod] = useState('')
const [method, setMethod] = useState('')
const [season, seatSeason] = useState('');
const [unit, setUnit] = useState('');

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

const fetchDrawData = async () => {
const snap = await getDoc(doc(db, 'co-elk-stats', searchStr));
const data = snap.data();
setDisplayStats(data);
}

const updateSearchStr = (updatedStr) => {
setSearchStr(updateSearchStr);
}
// check auth state, if !user false then navigate back to home page
// error handling
// ghost loading
// dribbble mock https://dribbble.com/search/table
return (
<Box sx={{height: '100vh'}}>
<Navbar logout={logout}/>
<Box sx={{ height: '100vh' }}>
<Navbar logout={logout} />
<Container maxWidth="lg">
<DashboardSearch />
<DrawOdds />
<DrawOdds displayStats={displayStats} />
{/* <AppBar contains sign out and settings /> */}
{/* <DashboardSearch /> */}
{/* <Display Graph for draw odds? /> */}
Expand Down
78 changes: 43 additions & 35 deletions src/components/dashboard/drawOdds/DrawOdds.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,61 @@ import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}

const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
export default function DrawOdds({ displayStats }) {
const displayFirstChoiceRows = () => {
const firstChoiceObj = displayStats.firstChoice;
let objMap = [];
if (firstChoiceObj) {
for (let key in firstChoiceObj) {
const resInfo = firstChoiceObj[key].res;
const nonResInfo = firstChoiceObj[key].nonRes;
objMap.push(
<TableRow>
<TableCell>{key}</TableCell>
<TableCell>{resInfo.applications}</TableCell>
<TableCell>{resInfo.success} ({getSuccessPercentage(resInfo.applications, resInfo.success)})</TableCell>
<TableCell>{nonResInfo.applications}</TableCell>
<TableCell>{nonResInfo.success} ({getSuccessPercentage(nonResInfo.applications, nonResInfo.success)})</TableCell>
</TableRow>
)
}
return objMap;
}
}

const displaySecondChoiceRows = () => {
const secondChoiceObj = displayStats.secondChoice;
return (
<TableRow>
<TableCell>2nd Choice</TableCell>
<TableCell>{secondChoiceObj.res.applications}</TableCell>
<TableCell>{secondChoiceObj.res.success} ({getSuccessPercentage(secondChoiceObj.res.applications, secondChoiceObj.res.success)})</TableCell>
<TableCell>{secondChoiceObj.nonRes.applications}</TableCell>
<TableCell>{secondChoiceObj.nonRes.success} ({getSuccessPercentage(secondChoiceObj.nonRes.applications, secondChoiceObj.nonRes.success)})</TableCell>
</TableRow>
)
}

// preference points on the y axis
// res non res, pre draw applicants, post draw success
// get all units
// calculate percent
// 0 points res 183
const getSuccessPercentage = (applicants, success) => {
const successPercentage = (success / applicants) * 100;
return successPercentage + '%';
}

export default function DrawOdds({tableData}) {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Preference Points</TableCell>
<TableCell align="right">Res Applicant</TableCell>
<TableCell align="right">Res Success</TableCell>
<TableCell align="right">Non Res Applicant</TableCell>
<TableCell align="right">Non Res Success</TableCell>
<TableCell>Res Applicant</TableCell>
<TableCell>Res Success</TableCell>
<TableCell>Non Res Applicant</TableCell>
<TableCell>Non Res Success</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
{displayFirstChoiceRows()}
{displaySecondChoiceRows()}
</TableBody>
</Table>
</TableContainer>
Expand Down
16 changes: 8 additions & 8 deletions src/firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ import { typography } from "@mui/system";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

// Initialize Firebase
Expand Down Expand Up @@ -107,4 +107,4 @@ export {
registerWithEmailAndPassword,
sendPasswordReset,
logout,
};
};
21 changes: 21 additions & 0 deletions src/firebase/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getDatabase } from 'firebase/database'

const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

// init firebase
initializeApp(firebaseConfig);

const db = getFirestore();
const rtDb = getDatabase();

export { db, rtDb };