From 8e66f455755c4e20bce435c84445324d164b99df Mon Sep 17 00:00:00 2001 From: Rutaj Dash <33367546+rutajdash@users.noreply.github.com> Date: Wed, 28 Dec 2022 06:10:26 +0530 Subject: [PATCH] feat: basic integration of live page (#384) * fix: add course list and disable till implementation * fix: integrate data display * chore: add session list * feat: integrate live page --- client/src/assets/placeholder/live.js | 26 ++-- client/src/components/live/companyBanner.js | 64 ++++++--- client/src/components/live/courseSelector.js | 117 +++++++++++++--- client/src/components/live/liveData.js | 131 ++++++++++++------ client/src/components/live/nameFilter.js | 4 + .../queries/live/getLiveByYearAndSemester.js | 29 ++++ client/src/pages/live.jsx | 20 +-- client/src/screens/Live.js | 88 +++++++++--- 8 files changed, 352 insertions(+), 127 deletions(-) create mode 100644 client/src/graphql/queries/live/getLiveByYearAndSemester.js diff --git a/client/src/assets/placeholder/live.js b/client/src/assets/placeholder/live.js index 23c83b7a..085c8aa4 100644 --- a/client/src/assets/placeholder/live.js +++ b/client/src/assets/placeholder/live.js @@ -7,16 +7,22 @@ import brillio from '../images/live/Brillio.png'; export const LIVE = Object.freeze({ sessions: [ - 'Autumn 2020-21', - 'Spring 2020-21', - 'Autumn 2019-20', - 'Spring 2019-20', - 'Autumn 2018-19', - 'Spring 2018-19', - 'Autumn 2017-18', - 'Spring 2017-18', - 'Autumn 2016-17', - 'Spring 2016-17', + // 'Spring 2023', + 'Autumn 2022', + 'Spring 2022', + 'Autumn 2021', + 'Spring 2021', + 'Autumn 2020', + 'Spring 2020', + 'Autumn 2019', + 'Spring 2019', + 'Autumn 2018', + 'Spring 2018', + 'Autumn 2017', + 'Spring 2017', + 'Autumn 2016', + 'Spring 2016', + 'Autumn 2015', ], departments: [ 'All Departments', diff --git a/client/src/components/live/companyBanner.js b/client/src/components/live/companyBanner.js index 6b156920..c30aec9a 100644 --- a/client/src/components/live/companyBanner.js +++ b/client/src/components/live/companyBanner.js @@ -1,35 +1,55 @@ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; // libararies import { Typography } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import Image from 'next/image'; +import getStores from '../../utils/getStores'; const CompanyBanner = ({ data }) => { const classes = useStyles(); const [show, setShow] = useState(false); + const [placedData, setPlacedData] = useState([]); + + useEffect(() => { + let placed = {}; + data.studentsRecruited.forEach((student) => { + if (!placed[student.degree]) { + placed[student.degree] = {}; + } + if (!placed[student.degree][student.branch]) { + placed[student.degree][student.branch] = []; + } + placed[student.degree][student.branch].push(student.name); + }); + setPlacedData(placed); + }, []); + return ( <>
- {data.name} + {data.company.logo.storePath && ( + {data.company.name} + )} - {data.name} + {data.company.name}
Students Recruited: - {data.students} + {data.recruits} CTC: @@ -44,20 +64,23 @@ const CompanyBanner = ({ data }) => {
- {show && ( + {show && placedData && (
- {data.placed.map((student) => ( -
+ {Object.keys(placedData).map((degree) => ( +
- {student.course} + {degree} - {student.branch.map((branches) => ( -
+ {Object.keys(placedData[degree]).map((branch) => ( +
- {branches.branchName} + {branch} - {branches.students.map((studentName) => ( - + {placedData[degree][branch].map((studentName) => ( + {studentName} ))} @@ -110,6 +133,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', justifyContent: 'flex-start', padding: '0px 20px 20px 20px', + flexDirection: 'column', }, course: { textDecoration: 'underline', diff --git a/client/src/components/live/courseSelector.js b/client/src/components/live/courseSelector.js index 8470e2e3..cbe9d605 100644 --- a/client/src/components/live/courseSelector.js +++ b/client/src/components/live/courseSelector.js @@ -14,6 +14,17 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => { const classes = useStyles(); const Desktop = useMediaQuery(theme.breakpoints.up('sm')); + const degrees = [ + 'B.Tech', + 'M.Tech', + 'M.Tech (Research)', + 'Dual Degree M.Tech', + 'M.Sc', + 'Integrated M.Sc', + 'PhD', + 'School Of Management', + ]; + return ( <> {Desktop ? ( @@ -23,6 +34,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
{
- B.Tech + {'All Degrees'}
-
-
- + {degrees.map((deg) => ( +
+
+ +
+ + {deg} +
- - M.Tech - -
+ ))} + {/* //
+ //
+ // + //
+ // + // B.Tech + // + //
+ //
+ //
+ // + //
+ // + // M.Tech + // + //
*/}
) : ( <>
setDegree('All')} + style={{ + backgroundColor: degree === 'B.Tech' ? 'unset' : '#006DCC', + color: degree === 'B.Tech' ? 'black' : 'white', + }} + > + All +
+ {/* TODO: implement */} + {/*
setDegree('B.Tech')} style={{ @@ -86,7 +154,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => { }} > M.Tech -
+
*/}
)} @@ -118,10 +186,13 @@ const useStyles = makeStyles(() => ({ width: '8px', height: '8px', appearance: 'none', + // TODO: remove after implementation + backgroundColor: 'lightgrey', '&:checked': { backgroundColor: theme.palette.primary.blue50, }, }, + radioText: { marginLeft: '4px', fontSize: '18px', diff --git a/client/src/components/live/liveData.js b/client/src/components/live/liveData.js index 8aaef065..457a7a23 100644 --- a/client/src/components/live/liveData.js +++ b/client/src/components/live/liveData.js @@ -1,7 +1,4 @@ -/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Image from 'next/image'; // libararies @@ -16,47 +13,77 @@ import theme from '../../config/themes/light'; import CompanyBanner from './companyBanner'; // placeholder -import { LIVE } from '../../assets/placeholder/live'; +import getStores from '../../utils/getStores'; -const LiveData = ({ activeCompany, setCompany, data }) => { +const LiveData = ({ live }) => { const classes = useStyles(); const Desktop = useMediaQuery(theme.breakpoints.up('sm')); + const [activeCompanyData, setActiveCompanyData] = useState(live[0]); + const [placedData, setPlacedData] = useState({}); + + useEffect(() => { + let placed = {}; + if (!activeCompanyData) return; + activeCompanyData.studentsRecruited.forEach((student) => { + if (!placed[student.degree]) { + placed[student.degree] = {}; + } + if (!placed[student.degree][student.branch]) { + placed[student.degree][student.branch] = []; + } + placed[student.degree][student.branch].push(student.name); + }); + setPlacedData(placed); + }, [activeCompanyData]); + return ( <> {Desktop ? ( <>
-
- {data[activeCompany].name} - - {LIVE.data[activeCompany].name} - - - Students Recruited: - {data[activeCompany].students} - - - CTC: - {data[activeCompany].ctc} - -
- {data[activeCompany].placed.map((student) => ( -
+ {activeCompanyData && ( +
+ {activeCompanyData.company.logo.storePath && ( + {`${activeCompanyData.company.name} + )} + + {activeCompanyData.company.name} + + + Students Recruited: + {activeCompanyData.recruits} + + + CTC: + {activeCompanyData.ctc} + +
+ )} + {Object.keys(placedData).map((degree) => ( +
- {student.course} + {degree} - {student.branch.map((branches) => ( -
+ {Object.keys(placedData[degree]).map((branch) => ( +
- {branches.branchName} + {branch} - {branches.students.map((studentName) => ( - + {placedData[degree][branch].map((studentName) => ( + {studentName} ))} @@ -64,23 +91,41 @@ const LiveData = ({ activeCompany, setCompany, data }) => { ))}
))} + {!activeCompanyData && !live.length && ( + + The data for the selected session is not available at the + moment. + + )}
- {data.map((company, key) => ( + {live.map((item, key) => (
setCompany(key)} + onClick={() => setActiveCompanyData(item)} > - {company.name} + {item.company.logo.storePath && ( + {item.company.name} + )} + {!item.company.logo.storePath && ( + + {item.company.name} + + )}
))}
@@ -88,9 +133,9 @@ const LiveData = ({ activeCompany, setCompany, data }) => { ) : ( <> - Showing {LIVE.data.length} Companies + Showing {live.length} Companies - {data.map((company) => ( + {live.map((company) => ( ))} diff --git a/client/src/components/live/nameFilter.js b/client/src/components/live/nameFilter.js index 26b00eb4..81ba9480 100644 --- a/client/src/components/live/nameFilter.js +++ b/client/src/components/live/nameFilter.js @@ -22,6 +22,8 @@ const NameFilter = ({ filterText, handleChange }) => { className={classes.filterField} value={filterText} onChange={handleChange} + // TODO: remove after implementation + disabled />
@@ -52,6 +54,8 @@ const useStyles = makeStyles(() => ({ filterField: { width: '300px', fontSize: '18px', + // TODO: remove after implementation + backgroundColor: 'lightgray', lineHeight: '24px', fontFamily: 'Source Sans Pro', fontWeight: theme.typography.fontWeightLight, diff --git a/client/src/graphql/queries/live/getLiveByYearAndSemester.js b/client/src/graphql/queries/live/getLiveByYearAndSemester.js new file mode 100644 index 00000000..963df103 --- /dev/null +++ b/client/src/graphql/queries/live/getLiveByYearAndSemester.js @@ -0,0 +1,29 @@ +import { gql } from '@apollo/client'; + +export default gql` + query getLiveByYearAndSemester($year: Int!, $semester: SemesterEnum!) { + getLiveByYearAndSemester(year: $year, semester: $semester) { + id + liveType + company { + id + name + logo { + store + storePath + } + location + } + recruits + year + semester + studentsRecruited { + name + branch + degree + } + ctc + benefits + } + } +`; diff --git a/client/src/pages/live.jsx b/client/src/pages/live.jsx index 1d72d951..fa777e62 100644 --- a/client/src/pages/live.jsx +++ b/client/src/pages/live.jsx @@ -74,13 +74,17 @@ const LivePage = () => { ); }; -export async function getServerSideProps() { - return { - redirect: { - destination: '/comingSoon', - permanent: false, - }, - }; -} +// export async function getServerSideProps() { +/** + * For lan restriction, if ever required + * if (req.headers['x-forwarded-for']) { + * ip = req.headers['x-forwarded-for'].split(',')[0]; + * } else if (req.headers['x-real-ip']) { + * ip = req.connection.remoteAddress; + * } else { + * ip = req.connection.remoteAddress; + * } + */ +// } export default LivePage; diff --git a/client/src/screens/Live.js b/client/src/screens/Live.js index af94b99b..55b12852 100644 --- a/client/src/screens/Live.js +++ b/client/src/screens/Live.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; // libraries import { Typography, Container, useMediaQuery } from '@mui/material'; @@ -18,16 +18,21 @@ import theme from '../config/themes/light'; // placeholder import { LIVE } from '../assets/placeholder/live'; +import getLiveByYearAndSemester from '../graphql/queries/live/getLiveByYearAndSemester'; +import { GraphClient } from '../config/ApolloClient'; +import ActivityIndicator from '../components/shared/ActivityIndicator'; function Live() { const classes = useStyles(); const Desktop = useMediaQuery(theme.breakpoints.up('sm')); - const [activeCompany, setCompany] = useState(0); + const [liveData, setLiveData] = useState([]); const [department, setDepartment] = useState(LIVE.departments[0]); - const [degree, setDegree] = useState('B.Tech'); + const [degree, setDegree] = useState('All Degrees'); const [filterText, setFilter] = useState(''); const [activeSession, setSession] = useState(LIVE.sessions[0]); - const [placement, setPlacement] = useState(false); + const [showPlacement, setShowPlacement] = useState(true); + + const [isLoading, setLoading] = useState(true); const selectSessions = (season) => { setSession(season); @@ -38,12 +43,29 @@ function Live() { }; const selectDegree = (event) => { - setDegree(event.target.value); + // setDegree(event.target.value); }; - const selectDepartment = (branch) => { - setDepartment(branch); - }; + // const selectDepartment = (branch) => { + // setDepartment(branch); + // }; + + useEffect(() => { + setLoading(true); + const [semester, year] = activeSession.split(' '); + GraphClient.query({ + query: getLiveByYearAndSemester, + variables: { year: parseInt(year), semester: semester.toUpperCase() }, + }) + .then((res) => { + setLiveData(res.data.getLiveByYearAndSemester); + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + }, [activeSession]); return ( @@ -59,7 +81,10 @@ function Live() { selectSessions={selectSessions} LIVE={LIVE} /> - +
- + /> */}
- + {!isLoading && liveData && ( + { + if (showPlacement) { + return item.liveType !== 4; + } else { + return item.liveType === 4; + } + })} + /> + )} + {isLoading && }
{' '} @@ -121,19 +153,29 @@ function Live() { margin: '0.5rem', }} > - */} + -
- + {!isLoading && liveData && ( + { + if (showPlacement) { + return item.liveType !== 4; + } else { + return item.liveType === 4; + } + })} + /> + )} + {isLoading && } )}