Skip to content

Commit 3cb9997

Browse files
Archer-KeyArcher-Key
authored
Merge pull request #16 from codersforcauses/timetable-fixes
various fixes
2 parents 3359809 + d065b56 commit 3cb9997

10 files changed

Lines changed: 115 additions & 42 deletions

File tree

‎client/src/components/task_form.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
5151

5252
const handleSubmit = async (e: React.FormEvent) => {
5353
e.preventDefault();
54+
55+
const token = localStorage.getItem("access");
56+
if (!token) {
57+
console.error("No access token");
58+
return;
59+
}
60+
5461
try {
5562
const existing_topic_ids = topics
5663
.filter((t) => t.type === "existing")
@@ -63,6 +70,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
6370
method: "POST",
6471
headers: {
6572
"Content-Type": "application/json",
73+
Authorization: `Bearer ${token}`,
6674
},
6775
body: JSON.stringify({
6876
name: taskName,

‎client/src/components/task_item.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ export function TaskItem({
8282

8383
async function saveEdit() {
8484
setSaving(true);
85+
86+
const token = localStorage.getItem("access");
87+
8588
try {
8689
const existing_topic_ids = draftTopics
8790
.filter((t) => t.type === "existing")
@@ -98,7 +101,10 @@ export function TaskItem({
98101
`http://localhost:8000/api/planner/tasks/${item.id}/`,
99102
{
100103
method: "PUT",
101-
headers: { "Content-Type": "application/json" },
104+
headers: {
105+
"Content-Type": "application/json",
106+
Authorization: `Bearer ${token}`,
107+
},
102108
body: JSON.stringify({
103109
name: draftName,
104110
description: draftDescription,

‎client/src/components/timetable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
374374
>
375375
<div
376376
id="timetable-content"
377-
className="h-full w-full overflow-auto overscroll-none"
377+
className="h-full w-full overflow-auto overscroll-none scrollbar"
378378
onScroll={resizeAndPositionTimetableElements}
379379
>
380380
<div

‎client/src/components/ui/focus/taskDisplay.tsx‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,40 @@ interface Time {
1616
export default function TaskDisplay({
1717
task,
1818
time,
19-
current
19+
current,
2020
}: {
2121
task: Task;
2222
time: Time;
23-
current: Boolean;
23+
current: boolean;
2424
}) {
2525
return (
26-
<div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
27-
<div className="flex flex-auto flex-row gap-4 px-3">
28-
<div>{task.name}:</div>
29-
<div>
30-
{time.start_time} - {time.end_time}
31-
</div>
26+
<div
27+
className={
28+
current
29+
? "px-auto outline-3 m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline outline-slate-50"
30+
: "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"
31+
}
32+
>
33+
<div className="font-bold">{task.name}</div>
34+
<div>
35+
{time.day === 1
36+
? "Mon"
37+
: time.day === 2
38+
? "Tue"
39+
: time.day === 3
40+
? "Wed"
41+
: time.day === 4
42+
? "Thu"
43+
: time.day === 5
44+
? "Fri"
45+
: time.day === 6
46+
? "Sat"
47+
: time.day === 7
48+
? "Sun"
49+
: ""}{" "}
50+
- {time.start_time} - {time.end_time}
3251
</div>
33-
<div className="px-3 italic">{task.description}</div>
52+
<div className="italic">{task.description}</div>
3453
</div>
3554
);
3655
}

‎client/src/components/ui/focus/timer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
2424
};
2525

2626
return (
27-
<div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
27+
<div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
2828
{formatTime(timeRemaining)}
2929
</div>
3030
);

‎client/src/pages/focus.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const CountdownTimer = () => {
152152
}
153153

154154
return (
155-
<div className="h-screen bg-slate-800 p-8 font-inter">
155+
<div className="h-[calc(100vh-64px)] bg-slate-800 p-8 font-inter">
156156
<div className="flex flex-col items-center justify-start rounded-xl bg-slate-700 p-8 font-mono text-white shadow-inner shadow-slate-900">
157157
<p className="p-4 font-inter text-4xl font-semibold">focus</p>
158158
<div className="flex flex-row justify-center">

‎client/src/pages/login.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ export default function Login() {
7373

7474
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
7575
<form onSubmit={handleSubmit} className="space-y-6">
76-
<label className="block text-sm/6 font-medium text-gray-100">
77-
Username
78-
</label>
7976
<div className="mt-2">
77+
<label className="block text-sm/6 font-medium text-gray-100">
78+
Username
79+
</label>
8080
<input
8181
id="username"
8282
type="text"
@@ -87,10 +87,10 @@ export default function Login() {
8787
/>
8888
</div>
8989

90-
<label className="block text-sm/6 font-medium text-gray-100">
91-
Email
92-
</label>
9390
<div className="mt-2">
91+
<label className="block text-sm/6 font-medium text-gray-100">
92+
Email
93+
</label>
9494
<input
9595
id="email"
9696
type="email"
@@ -102,17 +102,17 @@ export default function Login() {
102102
</div>
103103

104104
<div>
105-
<div className="flex items-center justify-between">
106-
<label className="block text-sm/6 font-medium text-gray-100">
107-
Password
108-
</label>
109-
<div className="text-sm">
110-
<a className="font-semibold text-indigo-400 hover:text-indigo-300">
111-
Forgot password?
112-
</a>
113-
</div>
114-
</div>
115105
<div className="mt-2">
106+
<div className="flex items-center justify-between">
107+
<label className="block text-sm/6 font-medium text-gray-100">
108+
Password
109+
</label>
110+
<div className="text-sm">
111+
<a className="font-semibold text-indigo-400 hover:text-indigo-300">
112+
Forgot password?
113+
</a>
114+
</div>
115+
</div>
116116
<input
117117
id="password"
118118
type="password"

‎client/src/pages/schedule.tsx‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Timetable, {
55
resizeAndPositionTimetableElements,
66
} from "@/components/timetable";
77
import { TimetableTaskProps } from "@/components/timetable_task";
8+
import { useRouter } from "next/router";
89

910
/*
1011
Database representation of Time.
@@ -59,6 +60,8 @@ Page containing a Timetable to visually represent the times that tasks have been
5960
assigned.
6061
*/
6162
function Schedule() {
63+
64+
const router = useRouter();
6265
const [timetableTasksProps, setTimetableTasksProps] = useState<
6366
TimetableTaskProps[]
6467
>([]);
@@ -82,13 +85,35 @@ function Schedule() {
8285
to be displayed. Sets the timetableTasksProps State variable once finished.
8386
*/
8487
async function fetchTasks() {
85-
const API_URL = "http://localhost:8000/api/planner/tasks/";
88+
8689
try {
87-
const response = await fetch(API_URL);
88-
if (!response.ok) {
89-
throw new Error(`Response status: ${response.status}`);
90+
const token = localStorage.getItem("access");
91+
if (!token) {
92+
router.push("/login"); //redirect to login if unauthorised
93+
return;
94+
}
95+
const auth = await fetch(
96+
"http://localhost:8000/api/planner/protected/",
97+
{
98+
headers: {
99+
Authorization: `Bearer ${token}`,
100+
},
101+
},
102+
);
103+
if (!auth.ok) {
104+
router.push("/login"); //redirect to login if unauthorised
105+
return;
90106
}
91-
const data = await response.json();
107+
const tasksFetch = await fetch(
108+
`http://localhost:8000/api/planner/tasks/`,
109+
{
110+
headers: {
111+
Authorization: `Bearer ${token}`,
112+
},
113+
},
114+
);
115+
116+
const data = await tasksFetch.json();
92117
let timetable_task_props =
93118
await formatTaskDataToTimetableTaskProps(data);
94119
timetable_task_props =
@@ -269,12 +294,12 @@ function Schedule() {
269294
return () => {
270295
removeEventListeners();
271296
};
272-
}, []);
297+
}, [router]);
273298
/* This should be dependent on timetableTasksProps however doing so causes it
274299
to run in an infinite loop. */
275300

276301
return (
277-
<div className="content-container min-w-screen min-h-screen flex w-full flex-row bg-slate-950">
302+
<div className="content-container min-w-screen h-[calc(100vh-64px)] flex w-full flex-row bg-slate-950">
278303
<div className="timetable-container max-h-[90vh] w-full p-3">
279304
<Timetable timetable_tasks_props={timetableTasksProps} />
280305
</div>

‎client/src/pages/tasks.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ export default function TasksPage() {
4949
router.push("/login"); //redirect to login if unauthorised
5050
return;
5151
}
52-
const auth = await fetch( "http://localhost:8000/api/planner/protected/",
52+
const auth = await fetch(
53+
"http://localhost:8000/api/planner/protected/",
5354
{
5455
headers: {
5556
Authorization: `Bearer ${token}`,
@@ -102,13 +103,16 @@ export default function TasksPage() {
102103
const task = items.find((t) => t.id === id);
103104
if (!task) return;
104105

106+
const token = localStorage.getItem("access");
107+
105108
try {
106109
const response = await fetch(
107110
`http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
108111
{
109112
method: "PATCH",
110113
headers: {
111114
"Content-Type": "application/json",
115+
Authorization: `Bearer ${token}`,
112116
},
113117
body: JSON.stringify({ completed: !task.completed }),
114118
},
@@ -135,10 +139,17 @@ export default function TasksPage() {
135139
async function handleTaskDeleted(id: number) {
136140
if (!window.confirm("Delete this task?")) return;
137141

142+
const token = localStorage.getItem("access");
143+
138144
try {
139145
const response = await fetch(
140146
`http://localhost:8000/api/planner/tasks/${id}/`,
141-
{ method: "DELETE" },
147+
{
148+
method: "DELETE",
149+
headers: {
150+
Authorization: `Bearer ${token}`,
151+
},
152+
},
142153
);
143154

144155
if (!response.ok) {
@@ -152,7 +163,7 @@ export default function TasksPage() {
152163
}
153164

154165
return (
155-
<div className="content-container min-w-screen min-h-screen relative flex flex-row items-center justify-center bg-slate-500">
166+
<div className="content-container min-w-screen relative flex min-h-[calc(100vh-64px)] flex-row items-center justify-center bg-slate-500">
156167
<div className="task-list-container h-full w-full">
157168
<div className="task-list-content flex h-full w-full flex-col items-center justify-center rounded-lg p-3 text-slate-200">
158169
<div className="task-list-top mb-3 hidden h-[10%] w-full rounded-t-lg">
@@ -163,10 +174,10 @@ export default function TasksPage() {
163174
<div className="task-list-bottom flex w-full flex-row justify-center gap-6">
164175
<div
165176
className="task-list-wrapper flex w-fit flex-row justify-center"
166-
style={{
167-
scrollbarWidth: "thin",
177+
style={{
178+
scrollbarWidth: "thin",
168179
scrollbarColor: "grey white",
169-
display: !(showAddTask && items.length === 0) ? "flex" : "none"
180+
display: !(showAddTask && items.length === 0) ? "flex" : "none",
170181
}}
171182
>
172183
<TaskList

‎client/src/styles/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
@layer base {
88
:root {
9+
10+
@apply font-inter;
911
--background: 0 0% 100%;
1012
--foreground: 222.2 84% 4.9%;
1113

@@ -91,6 +93,8 @@
9193

9294
@layer base {
9395
body {
96+
@apply font-inter;
9497
@apply bg-background text-foreground;
98+
@apply font-inter;
9599
}
96100
}

0 commit comments

Comments
 (0)