Skip to content

Commit bd697ad

Browse files
OGALEXIOGALEXI
committed
Merge branch 'bubblegum' of https://github.com/usingbrain/QRcheckd into bubblegum
2 parents 4149e10 + 95058b4 commit bd697ad

16 files changed

Lines changed: 25461 additions & 266 deletions

File tree

‎client/package-lock.json‎

Lines changed: 25190 additions & 32 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/src/Assets/PerfectLogo2.svg‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎client/src/Assets/chekcbox-cross.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎client/src/Components/Calendar/CheckboxListHistory.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
3+
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
4+
5+
import { useSessionAttendanceQuery } from '../../generated/graphql';
6+
import User from '../../Types/user';
7+
import { useParams } from 'react-router';
8+
9+
interface Props {
10+
studentList: (User | null | undefined)[];
11+
}
12+
13+
const CheckboxListHistory: React.FC<Props> = ({ studentList }) => {
14+
const sessionId = Number(useParams().sessionId);
15+
const [{ fetching, data, error }] = useSessionAttendanceQuery({
16+
variables: { sessionId },
17+
});
18+
19+
if (fetching) {
20+
} // TODO handle fetching
21+
if (error) {
22+
} // TODO handle error
23+
24+
const studentsAttended = data?.getSessionAttendance?.data;
25+
26+
return (
27+
<div>
28+
{!!studentsAttended &&
29+
studentList?.map((student) => {
30+
if (
31+
studentsAttended.some(
32+
(attendee) => attendee?.email === student?.email
33+
)
34+
) {
35+
return <CheckBoxChecked className="w-10 h-10" />;
36+
}
37+
return <CheckBoxCrossed className="w-10 h-10" />;
38+
})}
39+
</div>
40+
);
41+
};
42+
43+
export default CheckboxListHistory;

‎client/src/Components/Calendar/Overview.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
44
//package for date format
55
import moment from 'moment';
66

7-
const overviewStyle = "flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8";
8-
const headerStyle = "flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl";
9-
const historyStyle = "flex flex-row flex-wrap justify-start w-full";
7+
const overviewStyle =
8+
'flex flex-col m-auto bg-white w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 shadow-xl mt-8';
9+
const headerStyle =
10+
'flex bg-green shadow-md p-4 justify-center text-white text-md sm:text-lg md:text-xl';
11+
const historyStyle = 'flex flex-row flex-wrap justify-start w-full';
1012

1113
const Overview: React.FC = () => {
1214
const courseId = Number(useParams().courseId);
@@ -20,30 +22,30 @@ const Overview: React.FC = () => {
2022
} // TODO handle error
2123

2224
const history = data?.getCourseOverview?.data;
23-
const total = history?.studentTotal;
2425
const sessions = history?.sessions;
2526

2627
console.log('history: ', history);
2728
return (
2829
<div>
2930
<div className={overviewStyle}>
30-
<header>
31-
<h3 className={headerStyle}>Students assigned to this course: {total}</h3>
32-
</header>
33-
<article className="flex flex-col justify-center">
34-
<p className="m-auto text-xl">Attendance</p>
31+
<article className='flex flex-col justify-center'>
32+
<p className='m-auto text-xl'>Attendance</p>
3533
<section className={historyStyle}>
3634
{!!sessions &&
3735
sessions.map((session) => {
3836
if (session) {
3937
const date = new Date(Number(session.createdAt));
4038
const UTCdate = date.toUTCString();
4139
return (
42-
<div className="w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight">
40+
<div className='w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight'>
4341
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
4442
<div>
45-
<h5 className="text-lg sm:text-xl">{session.attendance}</h5>
46-
<p className="text-sm sm:text-md">{moment(UTCdate).format('L')}</p>
43+
<h5 className='text-lg sm:text-xl'>
44+
{session.attendance}
45+
</h5>
46+
<p className='text-sm sm:text-md'>
47+
{moment(UTCdate).format('L')}
48+
</p>
4749
</div>
4850
</Link>
4951
</div>

‎client/src/Components/Calendar/SessionHistory.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import React from 'react';
22
import { useParams } from 'react-router';
33
import { Link } from 'react-router-dom';
4-
import { useSessionAttendanceQuery } from '../../generated/graphql';
4+
import StudentsList from '../ClassView/StudentsList';
5+
6+
// const listStyle = 'flex flex-col justify-start items-start';
57

68
const btnStyle = "bg-green text-white p-4 shadow-md";
79

810
const SessionHistory: React.FC = () => {
911
const courseId = Number(useParams().courseId);
10-
const sessionId = Number(useParams().sessionId);
11-
12-
const [{ fetching, data, error }] = useSessionAttendanceQuery({
13-
variables: { sessionId },
14-
});
15-
16-
if (fetching) {
17-
} // TODO handle fetching
18-
if (error) {
19-
} // TODO handle error
20-
21-
const studentsAttended = data?.getSessionAttendance?.data;
2212

2313
return (
2414
<div>
@@ -29,7 +19,8 @@ const SessionHistory: React.FC = () => {
2919
</Link>
3020
</footer>
3121
{/* student list for this session */}
32-
{/* each student is clickable to get individual attendance */}
22+
<StudentsList courseId={courseId} />
23+
{/* TODO: each student is clickable to get individual attendance */}
3324
</div>
3425
);
3526
};

client/src/Components/ClassView/CheckboxList.tsx renamed to client/src/Components/ClassView/CheckboxListSession.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,22 @@ interface Props {
1111
sessionId: number;
1212
}
1313

14-
const CheckboxList: React.FC<Props> = ({ studentList, sessionId }) => {
14+
const CheckboxListSession: React.FC<Props> = ({ studentList, sessionId }) => {
1515
const [{ fetching, data, error }, refetchAttendance] =
1616
useSessionAttendanceQuery({
1717
variables: { sessionId },
1818
requestPolicy: 'network-only',
1919
});
2020

21+
if (fetching) {
22+
} // TODO handle fetching
23+
if (error) {
24+
} // TODO handle error
25+
2126
useEffect(() => {
2227
const socket = socketIOClient(ENDPOINT);
2328
socket.on('ATTENDANCE_CHANGE', () => refetchAttendance());
24-
}, []);
29+
}, [refetchAttendance]);
2530

2631
return (
2732
<div>
@@ -31,12 +36,12 @@ const CheckboxList: React.FC<Props> = ({ studentList, sessionId }) => {
3136
(attendee) => attendee?.email === student.email
3237
)
3338
) {
34-
return <CheckBoxChecked className='w-10 h-10' />;
39+
return <CheckBoxChecked className="w-10 h-10" />;
3540
}
36-
return <CheckBoxEmpty className='w-10 h-10' />;
41+
return <CheckBoxEmpty className="w-10 h-10" />;
3742
})}
3843
</div>
3944
);
4045
};
4146

42-
export default CheckboxList;
47+
export default CheckboxListSession;

‎client/src/Components/ClassView/ClassDashboard.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,16 @@ import StudentsList from './StudentsList';
33
import SessionBtn from './SessionBtn';
44
import RegisterBtn from './RegisterBtn';
55

6-
const viewStyle =
7-
'flex flex-row justify-between items-left content-center pt-4 w-full px-8 h-full';
8-
const listStyle = "rounded-sm shadow-xl w-1/2";
9-
const listHeader = "bg-green p-2 text-white text-bold text-lg rounded-t-sm";
6+
const viewStyle = 'flex flex-row justify-around';
7+
const listStyle = 'rounded-sm shadow-xl w-1/2';
108

119
const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
1210
return (
1311
<div className={viewStyle}>
1412
<section className={listStyle}>
15-
<div className={listHeader}>Students</div>
1613
<StudentsList courseId={courseId} />
1714
</section>
18-
<article>
15+
<article className='w-2/6'>
1916
<SessionBtn courseId={courseId} />
2017
<RegisterBtn courseId={courseId} />
2118
</article>

‎client/src/Components/ClassView/ClassView.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,25 @@ import Course from '../../Types/course';
66
import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.svg';
77
import ClassDashboard from './ClassDashboard';
88
import Overview from '../Calendar/Overview';
9+
import User from '../../Types/user';
910

1011
const headerStyle =
1112
'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
12-
const attendanceStyle = 'flex justify-center bg-black hover:bg-green-light py-4 rounded-sm font-bold text-lg mb-4 w-1/3 text-white ';
13+
const attendanceStyle =
14+
'flex justify-center bg-black py-4 rounded-sm font-bold text-lg w-1/3 text-white mb-4';
15+
const listHeader =
16+
'w-1/2 bg-green p-2 text-white text-bold text-lg rounded-t-sm';
1317

1418
const ClassView: React.FC = () => {
1519
const dispatch = useDispatch();
1620
const course = useSelector(
1721
(state: { selectedCourse: Course | null }) => state.selectedCourse
1822
);
1923
const history = useSelector((state: { history: boolean }) => state.history);
24+
const students = useSelector(
25+
(state: { currentList: User[] }) => state.currentList
26+
);
27+
2028
const courseId = course?.id;
2129

2230
const link = history
@@ -34,17 +42,23 @@ const ClassView: React.FC = () => {
3442
</button>
3543
</Link>
3644
</div>
37-
<article className="flex self-end">
38-
<Link to={link} className={attendanceStyle}>
39-
<h3
40-
className="text-lg"
41-
onClick={() => dispatch(setHistory(history))}
42-
>
43-
{history ? 'Back to dashboard' : 'Attendance history'}
44-
</h3>
45-
</Link>
45+
<article className="flex flex-col px-10">
46+
<div className="flex flex-row justify-around w-full">
47+
<div className={listHeader}>
48+
Students{' '}
49+
{history && `assigned to this course: ${students.length}`}
50+
</div>
51+
<Link to={link} className={attendanceStyle}>
52+
<h3
53+
className="text-lg"
54+
onClick={() => dispatch(setHistory(history))}
55+
>
56+
{history ? 'Back to dashboard' : 'Attendance history'}
57+
</h3>
58+
</Link>
59+
</div>
60+
{history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
4661
</article>
47-
{history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
4862
</section>
4963
);
5064
}

0 commit comments

Comments
 (0)