Skip to content

Commit 916fe81

Browse files
OGALEXIOGALEXI
authored
Merge pull request #63 from usingbrain/main
Pull from main
2 parents 822cc52 + 7592c0b commit 916fe81

11 files changed

Lines changed: 161 additions & 30 deletions

File tree

‎client/package-lock.json‎

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

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@types/react-dom": "^17.0.11",
1414
"graphql": "^15.0.0",
1515
"lottie-web": "^5.8.1",
16+
"moment": "^2.29.1",
1617
"react": "^17.0.2",
1718
"react-dom": "^17.0.2",
1819
"react-lottie": "^1.2.3",

‎client/src/App.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import ClassView from './Components/ClassView/ClassView';
1313
import StudentDashboard from './Components/StudentView/StudentDashboard';
1414
import AddForm from './Components/TeacherDashboard/AddForm';
1515
import QrView from './Components/QrView/QrView';
16+
import Overview from './Components/Calendar/Overview';
17+
import SessionHistory from './Components/Calendar/SessionHistory';
1618

1719
const client = createClient({
1820
url: 'http://localhost:4000/graphql',
@@ -34,10 +36,16 @@ function App() {
3436
element={<Instruction />}
3537
></Route>
3638
<Route path="/homepage/new-course" element={<AddForm />}></Route>
37-
<Route
38-
path="/homepage/classes/:courseId"
39-
element={<ClassView />}
40-
></Route>
39+
<Route path="/homepage/classes/:courseId" element={<ClassView />}>
40+
<Route
41+
path="/homepage/classes/:courseId/history"
42+
element={<Overview />}
43+
></Route>
44+
<Route
45+
path="/homepage/classes/:courseId/:sessionId"
46+
element={<SessionHistory />}
47+
></Route>
48+
</Route>
4149
</Route>
4250
<Route>
4351
<Route path="/login" element={<Login />} />

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { Link, useParams } from 'react-router-dom';
3+
import { useCourseOverviewQuery } from '../../generated/graphql';
4+
//package for date format
5+
import moment from 'moment';
6+
7+
const Overview: React.FC = () => {
8+
const courseId = Number(useParams().courseId);
9+
const [{ fetching, data, error }] = useCourseOverviewQuery({
10+
variables: { courseId },
11+
});
12+
13+
if (fetching) {
14+
} // TODO handle fetching
15+
if (error) {
16+
} // TODO handle error
17+
18+
const history = data?.getCourseOverview?.data;
19+
const total = history?.studentTotal;
20+
const sessions = history?.sessions;
21+
22+
console.log('history: ', history);
23+
return (
24+
<div>
25+
<h3>Students assigned to this course: {total}</h3>
26+
<section className="flex flex-row flex-wrap justify-evenly w-5/6">
27+
{!!sessions &&
28+
sessions.map((session) => {
29+
if (session) {
30+
const date = new Date(Number(session.createdAt));
31+
const UTCdate = date.toUTCString();
32+
return (
33+
<div className="w-1/3 p-2 text-center">
34+
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
35+
<div>
36+
<h5 className="text-lg">{session.attendance}</h5>
37+
<p>{moment(UTCdate).format('L')}</p>
38+
</div>
39+
</Link>
40+
</div>
41+
);
42+
}
43+
})}
44+
</section>
45+
</div>
46+
);
47+
};
48+
49+
export default Overview;

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { useParams } from 'react-router';
3+
import { Link } from 'react-router-dom';
4+
import { useSessionAttendanceQuery } from '../../generated/graphql';
5+
6+
const SessionHistory: React.FC = () => {
7+
const courseId = Number(useParams().courseId);
8+
const sessionId = Number(useParams().sessionId);
9+
10+
const [{ fetching, data, error }] = useSessionAttendanceQuery({
11+
variables: { sessionId },
12+
});
13+
14+
if (fetching) {
15+
} // TODO handle fetching
16+
if (error) {
17+
} // TODO handle error
18+
19+
const studentsAttended = data?.getSessionAttendance?.data;
20+
21+
return (
22+
<div>
23+
{/* button back to overview */}
24+
<Link to={`/homepage/classes/${courseId}/history`}>
25+
<button>Back to history overview</button>
26+
</Link>
27+
{/* student list for this session */}
28+
{/* each student is clickable to get individual attendance */}
29+
</div>
30+
);
31+
};
32+
33+
export default SessionHistory;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const StudentHistory: React.FC = () => {
4+
return <div></div>;
5+
};
6+
7+
export default StudentHistory;

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import StudentsList from './StudentsList';
3+
import SessionBtn from './SessionBtn';
4+
import RegisterBtn from './RegisterBtn';
5+
6+
const viewStyle =
7+
'flex flex-col justify-start items-left content-center pt-4 w-1/2 pl-4 h-full';
8+
9+
const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
10+
return (
11+
<div className={viewStyle}>
12+
<RegisterBtn courseId={courseId} />
13+
<SessionBtn courseId={courseId} />
14+
<StudentsList courseId={courseId} />
15+
{/* TODO: add DELETE COURSE BUTTON */}
16+
</div>
17+
);
18+
};
19+
20+
export default ClassDashboard;

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
import React from 'react';
2-
import { Link } from 'react-router-dom';
2+
import { Link, Outlet } from 'react-router-dom';
33
import { useSelector, useDispatch } from 'react-redux';
4-
import { setSelected } from '../../store/actions';
4+
import { setSelected, setHistory } from '../../store/actions';
55
import Course from '../../Types/course';
6-
import StudentsList from './StudentsList';
7-
import SessionBtn from './SessionBtn';
8-
import RegisterBtn from './RegisterBtn';
96
import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.svg';
7+
import ClassDashboard from './ClassDashboard';
8+
import Overview from '../Calendar/Overview';
109

1110
const headerStyle =
1211
'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
13-
const viewStyle =
14-
'flex flex-col justify-start items-left content-center pt-4 w-1/2 pl-4 h-full';
1512

1613
const ClassView: React.FC = () => {
1714
const dispatch = useDispatch();
1815
const course = useSelector(
1916
(state: { selectedCourse: Course | null }) => state.selectedCourse
2017
);
18+
const history = useSelector((state: { history: boolean }) => state.history);
2119
const courseId = course?.id;
2220

21+
const link = history
22+
? `/homepage/classes/${courseId}`
23+
: `/homepage/classes/${courseId}/history`;
24+
2325
if (course && courseId) {
2426
return (
2527
<section className="h-screen flex flex-col justify-start w-3/4">
@@ -31,10 +33,16 @@ const ClassView: React.FC = () => {
3133
</button>
3234
</Link>
3335
</div>
34-
<div className={viewStyle}>
35-
<RegisterBtn courseId={courseId} />
36-
<SessionBtn courseId={courseId} />
37-
<StudentsList courseId={courseId} />
36+
<div>
37+
<Link to={link}>
38+
<h3
39+
className="text-lg"
40+
onClick={() => dispatch(setHistory(history))}
41+
>
42+
{history ? 'back to dashboard' : 'attendance history'}
43+
</h3>
44+
</Link>
45+
{history ? <Outlet /> : <ClassDashboard courseId={courseId} />}
3846
</div>
3947
</section>
4048
);

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { useAssignStudentMutation } from '../../generated/graphql';
32

43
const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
54
function openQR() {

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

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import {
33
useCreateSessionMutation,
44
useEndSessionMutation,
@@ -20,17 +20,6 @@ const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
2020
(state: { session: Session | null }) => state.session
2121
);
2222

23-
useEffect(() => {
24-
// render QR
25-
if (session) {
26-
window.open(
27-
window.location.origin + `/attend/${session.id}`,
28-
'_blank',
29-
'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500'
30-
);
31-
}
32-
}, [session]);
33-
3423
const btnText = running ? 'End Session' : 'Start Session';
3524

3625
const createSessionDB = async () => {
@@ -40,6 +29,12 @@ const SessionBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
4029
// dispatch session data
4130
if (sessionData) {
4231
dispatch(setSession(sessionData));
32+
// open QR code in new window
33+
window.open(
34+
window.location.origin + `/attend/${sessionData.id}`,
35+
'_blank',
36+
'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500'
37+
);
4338
}
4439
};
4540

0 commit comments

Comments
 (0)