From 9db0749deac9d814ece0c03b24e1630ca2c1eea0 Mon Sep 17 00:00:00 2001 From: grantfogle Date: Tue, 2 Aug 2022 15:36:34 -0600 Subject: [PATCH] cleaning up draw odds, integratedd with firebase firestore --- src/components/dashboard/Dashboard.jsx | 36 ++++++--- .../dashboard/drawOdds/DrawOdds.jsx | 78 ++++++++++--------- src/firebase.js | 16 ++-- src/firebase/config.js | 21 +++++ 4 files changed, 99 insertions(+), 52 deletions(-) create mode 100644 src/firebase/config.js diff --git a/src/components/dashboard/Dashboard.jsx b/src/components/dashboard/Dashboard.jsx index 4dd8a92..4272ba5 100644 --- a/src/components/dashboard/Dashboard.jsx +++ b/src/components/dashboard/Dashboard.jsx @@ -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 ( - - + + - + {/* */} {/* */} {/* */} diff --git a/src/components/dashboard/drawOdds/DrawOdds.jsx b/src/components/dashboard/drawOdds/DrawOdds.jsx index 1e3f6c7..55fcc90 100644 --- a/src/components/dashboard/drawOdds/DrawOdds.jsx +++ b/src/components/dashboard/drawOdds/DrawOdds.jsx @@ -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( + + {key} + {resInfo.applications} + {resInfo.success} ({getSuccessPercentage(resInfo.applications, resInfo.success)}) + {nonResInfo.applications} + {nonResInfo.success} ({getSuccessPercentage(nonResInfo.applications, nonResInfo.success)}) + + ) + } + return objMap; + } + } + const displaySecondChoiceRows = () => { + const secondChoiceObj = displayStats.secondChoice; + return ( + + 2nd Choice + {secondChoiceObj.res.applications} + {secondChoiceObj.res.success} ({getSuccessPercentage(secondChoiceObj.res.applications, secondChoiceObj.res.success)}) + {secondChoiceObj.nonRes.applications} + {secondChoiceObj.nonRes.success} ({getSuccessPercentage(secondChoiceObj.nonRes.applications, secondChoiceObj.nonRes.success)}) + + ) + } -// 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 ( Preference Points - Res Applicant - Res Success - Non Res Applicant - Non Res Success + Res Applicant + Res Success + Non Res Applicant + Non Res Success - {rows.map((row) => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} + {displayFirstChoiceRows()} + {displaySecondChoiceRows()}
diff --git a/src/firebase.js b/src/firebase.js index 68655d5..3702a04 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -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 @@ -107,4 +107,4 @@ export { registerWithEmailAndPassword, sendPasswordReset, logout, - }; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/firebase/config.js b/src/firebase/config.js new file mode 100644 index 0000000..fe76d00 --- /dev/null +++ b/src/firebase/config.js @@ -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 }; \ No newline at end of file