Skip to content

Commit 8e66f45

Browse files
rutajdashrutajdash
authored
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
1 parent 803a2ff commit 8e66f45

File tree

8 files changed

+352
-127
lines changed

8 files changed

+352
-127
lines changed

‎client/src/assets/placeholder/live.js

+16-10
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,22 @@ import brillio from '../images/live/Brillio.png';
77

88
export const LIVE = Object.freeze({
99
sessions: [
10-
'Autumn 2020-21',
11-
'Spring 2020-21',
12-
'Autumn 2019-20',
13-
'Spring 2019-20',
14-
'Autumn 2018-19',
15-
'Spring 2018-19',
16-
'Autumn 2017-18',
17-
'Spring 2017-18',
18-
'Autumn 2016-17',
19-
'Spring 2016-17',
10+
// 'Spring 2023',
11+
'Autumn 2022',
12+
'Spring 2022',
13+
'Autumn 2021',
14+
'Spring 2021',
15+
'Autumn 2020',
16+
'Spring 2020',
17+
'Autumn 2019',
18+
'Spring 2019',
19+
'Autumn 2018',
20+
'Spring 2018',
21+
'Autumn 2017',
22+
'Spring 2017',
23+
'Autumn 2016',
24+
'Spring 2016',
25+
'Autumn 2015',
2026
],
2127
departments: [
2228
'All Departments',

‎client/src/components/live/companyBanner.js

+44-20
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,55 @@
1-
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
2-
/* eslint-disable jsx-a11y/no-static-element-interactions */
3-
/* eslint-disable jsx-a11y/click-events-have-key-events */
4-
import React, { useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
52

63
// libararies
74
import { Typography } from '@mui/material';
85
import makeStyles from '@mui/styles/makeStyles';
96
import Image from 'next/image';
7+
import getStores from '../../utils/getStores';
108

119
const CompanyBanner = ({ data }) => {
1210
const classes = useStyles();
1311
const [show, setShow] = useState(false);
1412

13+
const [placedData, setPlacedData] = useState([]);
14+
15+
useEffect(() => {
16+
let placed = {};
17+
data.studentsRecruited.forEach((student) => {
18+
if (!placed[student.degree]) {
19+
placed[student.degree] = {};
20+
}
21+
if (!placed[student.degree][student.branch]) {
22+
placed[student.degree][student.branch] = [];
23+
}
24+
placed[student.degree][student.branch].push(student.name);
25+
});
26+
setPlacedData(placed);
27+
}, []);
28+
1529
return (
1630
<>
1731
<div className={classes.active}>
1832
<div className={classes.companyData}>
1933
<div>
20-
<Image
21-
src={data.image}
22-
alt={data.name}
23-
className={classes.activeImage}
24-
/>
34+
{data.company.logo.storePath && (
35+
<Image
36+
src={`${getStores[data.company.logo.store]}${
37+
data.company.logo.storePath
38+
}`}
39+
width={180}
40+
height={180}
41+
alt={data.company.name}
42+
className={classes.activeImage}
43+
/>
44+
)}
2545
<Typography variant='body1' className={classes.companyTitle}>
26-
{data.name}
46+
{data.company.name}
2747
</Typography>
2848
</div>
2949
<div>
3050
<Typography variant='body2' className={classes.companysubTitle}>
3151
<span style={{ color: '#005299' }}>Students Recruited: </span>
32-
{data.students}
52+
{data.recruits}
3353
</Typography>
3454
<Typography variant='body2' className={classes.companysubTitle}>
3555
<span style={{ color: '#005299' }}>CTC: </span>
@@ -44,20 +64,23 @@ const CompanyBanner = ({ data }) => {
4464
</Typography>
4565
</div>
4666
</div>
47-
{show && (
67+
{show && placedData && (
4868
<div className={classes.student}>
49-
{data.placed.map((student) => (
50-
<div key={student} className={classes.studentsData}>
69+
{Object.keys(placedData).map((degree) => (
70+
<div key={degree} className={classes.studentsData}>
5171
<Typography variant='body2' className={classes.course}>
52-
{student.course}
72+
{degree}
5373
</Typography>
54-
{student.branch.map((branches) => (
55-
<div key={{ ...student, ...branches }}>
74+
{Object.keys(placedData[degree]).map((branch) => (
75+
<div key={`${degree}--${branch}`}>
5676
<Typography variant='body2' className={classes.branch}>
57-
{branches.branchName}
77+
{branch}
5878
</Typography>
59-
{branches.students.map((studentName) => (
60-
<Typography variant='body2' key={studentName}>
79+
{placedData[degree][branch].map((studentName) => (
80+
<Typography
81+
variant='body2'
82+
key={`${degree}--${branch}--${studentName}`}
83+
>
6184
{studentName}
6285
</Typography>
6386
))}
@@ -110,6 +133,7 @@ const useStyles = makeStyles((theme) => ({
110133
display: 'flex',
111134
justifyContent: 'flex-start',
112135
padding: '0px 20px 20px 20px',
136+
flexDirection: 'column',
113137
},
114138
course: {
115139
textDecoration: 'underline',

‎client/src/components/live/courseSelector.js

+94-23
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,17 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
1414
const classes = useStyles();
1515
const Desktop = useMediaQuery(theme.breakpoints.up('sm'));
1616

17+
const degrees = [
18+
'B.Tech',
19+
'M.Tech',
20+
'M.Tech (Research)',
21+
'Dual Degree M.Tech',
22+
'M.Sc',
23+
'Integrated M.Sc',
24+
'PhD',
25+
'School Of Management',
26+
];
27+
1728
return (
1829
<>
1930
{Desktop ? (
@@ -23,6 +34,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
2334
</Typography>
2435
<div className={classes.radioWrapper}>
2536
<div
37+
key={'All Degrees'}
2638
style={{
2739
display: 'flex',
2840
flexDirection: 'row',
@@ -32,42 +44,98 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
3244
<div className={classes.radioButton}>
3345
<input
3446
type='radio'
35-
checked={degree === 'B.Tech'}
47+
checked={degree === 'All Degrees'}
3648
onChange={handleChange}
37-
value='B.Tech'
49+
value={'All Degrees'}
3850
className={classes.radio}
3951
/>
4052
</div>
4153
<Typography variant='body1' className={classes.radioText}>
42-
B.Tech
54+
{'All Degrees'}
4355
</Typography>
4456
</div>
45-
<div
46-
style={{
47-
display: 'flex',
48-
flexDirection: 'row',
49-
alignItems: 'center',
50-
}}
51-
>
52-
<div className={classes.radioButton}>
53-
<input
54-
type='radio'
55-
checked={degree === 'M.Tech'}
56-
onChange={handleChange}
57-
value='M.Tech'
58-
className={classes.radio}
59-
/>
57+
{degrees.map((deg) => (
58+
<div
59+
key={deg}
60+
style={{
61+
display: 'flex',
62+
flexDirection: 'row',
63+
alignItems: 'center',
64+
}}
65+
>
66+
<div className={classes.radioButton}>
67+
<input
68+
type='radio'
69+
checked={degree === deg}
70+
onChange={handleChange}
71+
value={deg}
72+
className={classes.radio}
73+
// TODO: remove after implementation
74+
disabled
75+
/>
76+
</div>
77+
<Typography variant='body1' className={classes.radioText}>
78+
{deg}
79+
</Typography>
6080
</div>
61-
<Typography variant='body1' className={classes.radioText}>
62-
M.Tech
63-
</Typography>
64-
</div>
81+
))}
82+
{/* // <div
83+
// style={{
84+
// display: 'flex',
85+
// flexDirection: 'row',
86+
// alignItems: 'center',
87+
// }}
88+
// >
89+
// <div className={classes.radioButton}>
90+
// <input
91+
// type='radio'
92+
// checked={degree === 'B.Tech'}
93+
// onChange={handleChange}
94+
// value='B.Tech'
95+
// className={classes.radio}
96+
// />
97+
// </div>
98+
// <Typography variant='body1' className={classes.radioText}>
99+
// B.Tech
100+
// </Typography>
101+
// </div>
102+
// <div
103+
// style={{
104+
// display: 'flex',
105+
// flexDirection: 'row',
106+
// alignItems: 'center',
107+
// }}
108+
// >
109+
// <div className={classes.radioButton}>
110+
// <input
111+
// type='radio'
112+
// checked={degree === 'M.Tech'}
113+
// onChange={handleChange}
114+
// value='M.Tech'
115+
// className={classes.radio}
116+
// />
117+
// </div>
118+
// <Typography variant='body1' className={classes.radioText}>
119+
// M.Tech
120+
// </Typography>
121+
// </div> */}
65122
</div>
66123
</>
67124
) : (
68125
<>
69126
<div className={classes.placementWrapper}>
70127
<div
128+
className={classes.switch}
129+
onClick={() => setDegree('All')}
130+
style={{
131+
backgroundColor: degree === 'B.Tech' ? 'unset' : '#006DCC',
132+
color: degree === 'B.Tech' ? 'black' : 'white',
133+
}}
134+
>
135+
<Typography variant='body1'> All </Typography>
136+
</div>
137+
{/* TODO: implement */}
138+
{/* <div
71139
className={classes.switch}
72140
onClick={() => setDegree('B.Tech')}
73141
style={{
@@ -86,7 +154,7 @@ const CourseSelector = ({ degree, handleChange, setDegree }) => {
86154
}}
87155
>
88156
<Typography variant='body1'> M.Tech </Typography>
89-
</div>
157+
</div> */}
90158
</div>
91159
</>
92160
)}
@@ -118,10 +186,13 @@ const useStyles = makeStyles(() => ({
118186
width: '8px',
119187
height: '8px',
120188
appearance: 'none',
189+
// TODO: remove after implementation
190+
backgroundColor: 'lightgrey',
121191
'&:checked': {
122192
backgroundColor: theme.palette.primary.blue50,
123193
},
124194
},
195+
125196
radioText: {
126197
marginLeft: '4px',
127198
fontSize: '18px',

0 commit comments

Comments
 (0)