Skip to content

Commit e5f0932

Browse files
usingbrainusingbrain
authored
Merge pull request #82 from usingbrain/nobrain
feat: delete button
2 parents d0eb7a7 + ef73fac commit e5f0932

8 files changed

Lines changed: 161 additions & 31 deletions

File tree

‎client/src/App.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,10 @@ function App() {
3030
<BrowserRouter>
3131
<div className='App'>
3232
<Routes>
33-
<Route exact path='/' element={<Welcome />} />
34-
<Route path='/homepage' element={<Homepage />}>
35-
<Route
36-
path='/homepage/dashboard'
37-
element={<Instruction />}
38-
></Route>
39-
<Route path='/homepage/new-course' element={<AddForm />}></Route>
40-
<Route path='/homepage/classes/:courseId' element={<ClassView />}>
33+
<Route exact path="/" element={<Welcome />} />
34+
<Route path="/homepage" element={<Homepage />}>
35+
<Route path="/homepage/new-course" element={<AddForm />}></Route>
36+
<Route path="/homepage/classes/:courseId" element={<ClassView />}>
4137
<Route
4238
path='/homepage/classes/:courseId/history'
4339
element={<Overview />}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import StudentsList from './StudentsList';
33
import SessionBtn from './SessionBtn';
44
import RegisterBtn from './RegisterBtn';
5+
import DeleteBtn from './DeleteBtn';
56

67
const viewStyle = 'flex flex-row justify-around';
78
const listStyle = 'rounded-sm shadow-sm w-1/2';
@@ -12,11 +13,11 @@ const ClassDashboard: React.FC<{ courseId: number }> = ({ courseId }) => {
1213
<section className={listStyle}>
1314
<StudentsList courseId={courseId} />
1415
</section>
15-
<article className='w-2/6'>
16+
<article className="w-2/6">
1617
<SessionBtn courseId={courseId} />
1718
<RegisterBtn courseId={courseId} />
19+
<DeleteBtn courseId={courseId} />
1820
</article>
19-
{/* TODO: add DELETE COURSE BUTTON */}
2021
</div>
2122
);
2223
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ReactComponent as CloseBtn } from '../../Assets/window-close-regular.sv
77
import ClassDashboard from './ClassDashboard';
88
import Overview from '../Calendar/Overview';
99
import User from '../../Types/user';
10+
import DeleteBtn from './DeleteBtn';
1011

1112
const headerStyle =
1213
'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import { useNavigate } from 'react-router';
4+
import { useDeleteCourseMutation } from '../../generated/graphql';
5+
import { setCourses } from '../../store/actions';
6+
import Course from '../../Types/course';
7+
8+
const btnStyle = {
9+
box: 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-4 text-white h-16',
10+
button:
11+
'invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full',
12+
ptag: 'visible md:invisible md:w-0 md:h-0',
13+
};
14+
15+
const alertStyle =
16+
'text-white text-center flex flex-col items-center justify-evenly h-56 w-96 fixed top-2/3 inset-x-1/2 bg-black p-12';
17+
18+
const alertBtnStyle = 'hover:bg-white hover:text-black border-white p-4';
19+
20+
const DeleteBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
21+
const navigate = useNavigate();
22+
const dispatch = useDispatch();
23+
let success = false;
24+
const [askIfSure, setAskIfSure] = useState(false);
25+
26+
const courses = useSelector(
27+
(state: { courses: Course[] | null }) => state.courses
28+
);
29+
30+
const [, deleteCourse] = useDeleteCourseMutation();
31+
32+
const handleDelete = async (courseId: number) => {
33+
const response = await deleteCourse({ courseId });
34+
if (response.error) {
35+
} // TODO: handle error
36+
if (response.data) {
37+
success = true;
38+
// filter the list, dispatch new one
39+
const coursesAfterDelete = courses?.filter(
40+
(course) => course.id !== courseId
41+
);
42+
// @ts-ignore
43+
dispatch(setCourses(coursesAfterDelete));
44+
setTimeout(() => navigate('/homepage'), 1000);
45+
}
46+
};
47+
48+
const handleClick = () => {
49+
// ask if sure!!!
50+
setAskIfSure(true);
51+
};
52+
53+
// TODO: success message??
54+
55+
return (
56+
<div className={btnStyle.box}>
57+
<button onClick={handleClick} className={btnStyle.button}>
58+
Delete course
59+
</button>
60+
{askIfSure && (
61+
<div className={alertStyle}>
62+
<h2>Are you sure you want to delete this course?</h2>
63+
<div className="flex flex-row justify-evenly w-full mt-4">
64+
<button
65+
onClick={() => handleDelete(courseId)}
66+
className={alertBtnStyle}
67+
>
68+
YES
69+
</button>
70+
<button
71+
onClick={() => setAskIfSure(false)}
72+
className={alertBtnStyle}
73+
>
74+
CANCEL
75+
</button>
76+
</div>
77+
</div>
78+
)}
79+
{success && (
80+
<div className={alertStyle}>
81+
<h2>Course successfully deleted</h2>
82+
</div>
83+
)}
84+
</div>
85+
);
86+
};
87+
88+
export default DeleteBtn;

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
import React from 'react';
22

3-
const registerStyle = 'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-8 text-white h-16';
3+
const registerStyle =
4+
'flex justify-center bg-green hover:bg-green-light py-4 rounded-sm text-lg mb-4 text-white h-16';
45

56
const RegisterBtn: React.FC<{ courseId: number }> = ({ courseId }) => {
67
function openQR() {
78
window.open(
89
window.location.origin + `/register/${courseId}`,
910
'_blank',
10-
'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500',
11+
'toolbar=0,location=0,menubar=0, resizable=yes, width=500, height=500'
1112
);
1213
}
1314

14-
return <div className={registerStyle}>
15-
<button onClick={openQR} className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full">Register students</button>
16-
<p className="visible md:invisible md:w-0 md:h-0">Register</p>
17-
</div>;
15+
return (
16+
<div className={registerStyle}>
17+
<button
18+
onClick={openQR}
19+
className="invisible md:visible w-0 md:w-full flex justify-center h-0 md:h-full"
20+
>
21+
Register students
22+
</button>
23+
<p className="visible md:invisible md:w-0 md:h-0">Register</p>
24+
</div>
25+
);
1826
};
1927

2028
export default RegisterBtn;

‎client/src/Components/TeacherDashboard/CourseList.tsx‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,62 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import { setCourses } from '../../store/actions';
24
import { Link } from 'react-router-dom';
35
import Course from './Course';
46
import { useCoursesQuery } from '../../generated/graphql';
7+
import CourseType from '../../Types/course';
58

6-
const listStyle = "w-full text-left";
9+
const listStyle = 'w-full text-left';
710

811
const CourseList: React.FC = () => {
12+
const dispatch = useDispatch();
913
const [{ fetching, data, error }] = useCoursesQuery({ variables: {} });
1014
const courses = data?.getCourses?.data;
1115

16+
const coursesState = useSelector(
17+
(state: { courses: CourseType[] | null }) => state.courses // initialze with empty array instead of null
18+
);
19+
// const [state, setState] = useState(coursesState);
20+
21+
// useEffect(() => {
22+
// setState(coursesState);
23+
// }, [coursesState]);
24+
25+
useEffect(() => {
26+
if (courses) {
27+
// @ts-ignore
28+
dispatch(setCourses(courses));
29+
}
30+
}, []);
31+
1232
if (fetching) {
1333
} // TODO handle fetching
1434
if (error) {
1535
} // TODO handle error
16-
if (courses) {
17-
return (
18-
<div className={listStyle}>
19-
{courses.map((course) => {
36+
37+
// if (courses) {
38+
// // @ts-ignore
39+
// dispatch(setCourses(courses));
40+
41+
return (
42+
<div className={listStyle}>
43+
{
44+
// useredux state here instead of DB response
45+
coursesState!.map((course) => {
2046
return (
2147
<article key={course?.id}>
2248
<Link to={`/homepage/classes/${course?.id}`}>
2349
{!!course && <Course course={course} />}
2450
</Link>
2551
</article>
2652
);
27-
})}
28-
</div>
29-
);
30-
}
31-
32-
return <article></article>;
53+
})
54+
}
55+
</div>
56+
);
3357
};
3458

59+
// return <article></article>;
60+
// };
61+
3562
export default CourseList;

‎client/src/Components/TeacherHomepage/Homepage.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,20 @@ import { Outlet } from 'react-router-dom';
44
import Sidemenu from '../TeacherDashboard/Sidemenu';
55
import Navbar from './Navbar';
66
import User from '../../Types/user';
7+
import Course from '../../Types/course';
8+
import Instruction from './Instruction';
79

810
const Homepage: React.FC = () => {
11+
const selectedCourse = useSelector(
12+
(state: { selectedCourse: Course | null }) => state.selectedCourse
13+
);
14+
915
return (
1016
<div>
1117
<Navbar />
1218
<main className='flex flex-row justify-start w-full'>
1319
<Sidemenu />
14-
<Outlet />
20+
{selectedCourse ? <Outlet /> : <Instruction />}
1521
</main>
1622
</div>
1723
);

‎client/src/Components/TeacherHomepage/Instruction.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import React from 'react';
22

33
const Instruction = () => {
44
return (
5-
<div className="font-bold text-center w-2/5 h-2/4 my-auto">
6-
<h1>&lt;-- Please choose a class or add a new one</h1>
5+
<div className="text-center text-lg flex flex-col justify-evenly h-48">
6+
<h2 className="p-8">
7+
&lt;-- Click here to add a new course to your list
8+
</h2>
9+
<h2 className="p-8">&lt;-- or choose one that already exists</h2>
710
</div>
811
);
912
};

0 commit comments

Comments
 (0)