Skip to content

Commit

Permalink
feat: basic integration of live page (#384)
Browse files Browse the repository at this point in the history 
* fix: add course list and disable till implementation

* fix: integrate data display

* chore: add session list

* feat: integrate live page
  • Loading branch information
@rutajdash
rutajdash committed Dec 28, 2022
1 parent 803a2ff commit 8e66f45
Show file tree
Hide file tree
Showing 8 changed files with 352 additions and 127 deletions.
26 changes: 16 additions & 10 deletions client/src/assets/placeholder/live.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
64 changes: 44 additions & 20 deletions client/src/components/live/companyBanner.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div className={classes.active}>
<div className={classes.companyData}>
<div>
<Image
src={data.image}
alt={data.name}
className={classes.activeImage}
/>
{data.company.logo.storePath && (
<Image
src={`${getStores[data.company.logo.store]}${
data.company.logo.storePath
}`}
width={180}
height={180}
alt={data.company.name}
className={classes.activeImage}
/>
)}
<Typography variant='body1' className={classes.companyTitle}>
{data.name}
{data.company.name}
</Typography>
</div>
<div>
<Typography variant='body2' className={classes.companysubTitle}>
<span style={{ color: '#005299' }}>Students Recruited: </span>
{data.students}
{data.recruits}
</Typography>
<Typography variant='body2' className={classes.companysubTitle}>
<span style={{ color: '#005299' }}>CTC: </span>
Expand All @@ -44,20 +64,23 @@ const CompanyBanner = ({ data }) => {
</Typography>
</div>
</div>
{show && (
{show && placedData && (
<div className={classes.student}>
{data.placed.map((student) => (
<div key={student} className={classes.studentsData}>
{Object.keys(placedData).map((degree) => (
<div key={degree} className={classes.studentsData}>
<Typography variant='body2' className={classes.course}>
{student.course}
{degree}
</Typography>
{student.branch.map((branches) => (
<div key={{ ...student, ...branches }}>
{Object.keys(placedData[degree]).map((branch) => (
<div key={`${degree}--${branch}`}>
<Typography variant='body2' className={classes.branch}>
{branches.branchName}
{branch}
</Typography>
{branches.students.map((studentName) => (
<Typography variant='body2' key={studentName}>
{placedData[degree][branch].map((studentName) => (
<Typography
variant='body2'
key={`${degree}--${branch}--${studentName}`}
>
{studentName}
</Typography>
))}
Expand Down Expand Up @@ -110,6 +133,7 @@ const useStyles = makeStyles((theme) => ({
display: 'flex',
justifyContent: 'flex-start',
padding: '0px 20px 20px 20px',
flexDirection: 'column',
},
course: {
textDecoration: 'underline',
Expand Down
117 changes: 94 additions & 23 deletions client/src/components/live/courseSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -23,6 +34,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
</Typography>
<div className={classes.radioWrapper}>
<div
key={'All Degrees'}
style={{
display: 'flex',
flexDirection: 'row',
Expand All @@ -32,42 +44,98 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
<div className={classes.radioButton}>
<input
type='radio'
checked={degree === 'B.Tech'}
checked={degree === 'All Degrees'}
onChange={handleChange}
value='B.Tech'
value={'All Degrees'}
className={classes.radio}
/>
</div>
<Typography variant='body1' className={classes.radioText}>
B.Tech
{'All Degrees'}
</Typography>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<div className={classes.radioButton}>
<input
type='radio'
checked={degree === 'M.Tech'}
onChange={handleChange}
value='M.Tech'
className={classes.radio}
/>
{degrees.map((deg) => (
<div
key={deg}
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<div className={classes.radioButton}>
<input
type='radio'
checked={degree === deg}
onChange={handleChange}
value={deg}
className={classes.radio}
// TODO: remove after implementation
disabled
/>
</div>
<Typography variant='body1' className={classes.radioText}>
{deg}
</Typography>
</div>
<Typography variant='body1' className={classes.radioText}>
M.Tech
</Typography>
</div>
))}
{/* // <div
// style={{
// display: 'flex',
// flexDirection: 'row',
// alignItems: 'center',
// }}
// >
// <div className={classes.radioButton}>
// <input
// type='radio'
// checked={degree === 'B.Tech'}
// onChange={handleChange}
// value='B.Tech'
// className={classes.radio}
// />
// </div>
// <Typography variant='body1' className={classes.radioText}>
// B.Tech
// </Typography>
// </div>
// <div
// style={{
// display: 'flex',
// flexDirection: 'row',
// alignItems: 'center',
// }}
// >
// <div className={classes.radioButton}>
// <input
// type='radio'
// checked={degree === 'M.Tech'}
// onChange={handleChange}
// value='M.Tech'
// className={classes.radio}
// />
// </div>
// <Typography variant='body1' className={classes.radioText}>
// M.Tech
// </Typography>
// </div> */}
</div>
</>
) : (
<>
<div className={classes.placementWrapper}>
<div
className={classes.switch}
onClick={() => setDegree('All')}
style={{
backgroundColor: degree === 'B.Tech' ? 'unset' : '#006DCC',
color: degree === 'B.Tech' ? 'black' : 'white',
}}
>
<Typography variant='body1'> All </Typography>
</div>
{/* TODO: implement */}
{/* <div
className={classes.switch}
onClick={() => setDegree('B.Tech')}
style={{
Expand All @@ -86,7 +154,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
}}
>
<Typography variant='body1'> M.Tech </Typography>
</div>
</div> */}
</div>
</>
)}
Expand Down Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 8e66f45

Please sign in to comment.