Skip to content

Refactoring and Responsiveness #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
T-Rops merged 2 commits into from
Dec 19, 2024
Merged

Refactoring and Responsiveness #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62029d4
Refactoring and Responsiveness
T-Rops Dec 19, 2024
31dc616
Update RegisterDriver.tsx
T-Rops Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions backend/src/__tests__/driver.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe("Drivers API", () => {
});

expect(response.status).toBe(500);
expect(response.body.title).toBe("Server Error");
expect(response.body.title).toBe("Unknown Error");
});
});

Expand Down Expand Up @@ -160,7 +160,7 @@ describe("Drivers API", () => {
});

expect(response.status).toBe(500);
expect(response.body.title).toBe("Server Error");
expect(response.body.title).toBe("Unknown Error");
});
});

Expand Down
46 changes: 37 additions & 9 deletions backend/src/__tests__/profile.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,60 @@ describe("GET /profile/get/:id", () => {
id: 1,
first_name: "John",
last_name: "Doe",
user_id: "123"
user_id: "123",
};

const mockViolations = [
{
violation_id: 1,
description: "Speeding"
{
violation_id: 1,
description: "Speeding",
},
{
{
violation_id: 2,
description: "Red Light"
}
description: "Red Light",
},
];

const mockCars = [
{
id: "123",
driver_id: "1233",
car_model: "Civic",
color: "Blue",
license_plate: "123-123",
license_number: "123-123-123",
brand: "Honda",
},
{
id: "124",
driver_id: "1244",
car_model: "Civic",
color: "Red",
license_plate: "123-1232",
license_number: "123-123-1232",
brand: "Honda",
},
];

// Mocking database responses
pool.query = vi
.fn()
.mockResolvedValueOnce({ rows: [mockDriver] }) // Mock driver query
.mockResolvedValueOnce({ rows: mockViolations }); // Mock violations query
.mockResolvedValueOnce({ rows: mockViolations })
.mockResolvedValueOnce({ rows: mockCars }); // Mock violations query

const response = await request(app).get("/profile/get/123");

expect(response.status).toBe(200);
expect(response.body.first_name).toBe(mockDriver.first_name);
expect(response.body.violations.length).toBe(2);
expect(response.body.violations[0].description).toBe(mockViolations[0].description);
expect(response.body.cars.length).toBe(2);
expect(response.body.violations[0].description).toBe(
mockViolations[0].description
);
expect(response.body.cars[0].car_model).toBe(
mockCars[0].car_model
);
});

it("should return 404 if driver is not found", async () => {
Expand Down
3 changes: 1 addition & 2 deletions backend/src/routes/registration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@ router.post("/add", async (req: Request, res: Response) => {
driver_type,
} = req.body as Registration;

console.log(req.body);
if (
![
license_number,
school_email,
first_name,
sex,
last_name,
middle_name,
date_of_birth,
driver_type,
].every(Boolean)
Expand All @@ -65,7 +65,6 @@ router.post("/add", async (req: Request, res: Response) => {
return;
}

console.log(user_id);
await pool.query(
`
INSERT INTO registrations (user_id, license_number, school_email, first_name, last_name, middle_name, date_of_birth, driver_type, sex)
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/AdminHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ const AdminHeader = () => {
alt="Logo"
className="z-50 object-contain md:w-16 md:h-16 w-12 h-12 transition-transform duration-300 hover:scale-105"
/>
<h1 className="text-md z-50 text-left md:text-xl hover:text-textgreen text-white">
<h1
onClick={handleHomePage}
className="text-md z-50 text-left md:text-xl hover:text-textgreen text-white">
CodeGreen Gateway
</h1>
</div>
Expand Down
191 changes: 92 additions & 99 deletions frontend/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,25 +89,86 @@ const Header = () => {
}, []);

return (
<div>
<header className="flex items-center space-x-[15rem] font-syke-medium justify-start w-full p-4">
<div className="flex items-center">
<button
<div className="flex w-screen">
<header className="flex relative items-center md:justify-evenly font-syke-medium w-full p-4 z-50">
<div className="flex items-center md:w-auto w-full">
<img
onClick={handleHomePage}
className="flex items-center w-[3rem] gap-4 text-white sm:text-xl"
>
<img
src="../assets/5.png"
alt="Logo"
className="w-15 h-15 object-contain md:w-[4rem] md:h-[4rem] transition-transform duration-300 hover:scale-105"
/>
<h1 className="text-md text-left md:text-xl hover:text-textgreen">CodeGreen Gateway</h1>
</button>
src="../assets/5.png"
alt="Logo"
className="z-50 object-contain md:w-16 md:h-16 w-12 h-12 transition-transform duration-300 hover:scale-105"
/>
<h1
onClick={handleHomePage}
className="text-md z-50 text-left md:text-xl hover:text-textgreen text-white">
CodeGreen Gateway
</h1>
</div>

{!isWideScreen && (
{isWideScreen ? (
<nav className="flex flex-row space-x-20 text-white font-syke-medium z-50">
<Link
to="/about"
className="hover:text-textgreen transition-colors">
About
</Link>

<div
className="relative"
ref={droopdownRefPolicies}>
<button
onClick={toggleDropdownPolicies}
className="hover:text-textgreen transition-colors z-50">
Policies
</button>
{isDropdownOpenPolicies && (
<div className="absolute mt-2 w-48 bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProtocols}
className="z-50 block px-4 py-2 hover:bg-buttongreen rounded-t-md cursor-pointer">
Protocols
</span>
<span
onClick={handleRules}
className="z-50 block px-4 py-2 hover:bg-buttongreen rounded-b-md cursor-pointer">
Rules and Regulations
</span>
</div>
)}
</div>

<div
className="relative z-50"
ref={dropdownRef}>
<button
onClick={toggleDropdown}
className="hover:text-textgreen transition-colors">
Account
</button>
{isDropdownOpen && (
<div className="absolute mt-2 w-48 bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProfile}
className="block px-4 py-2 hover:bg-buttongreen rounded-t-md cursor-pointer transition-colors">
Profile
</span>
<span
onClick={handleChangePassword}
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors">
Change Password
</span>
<span
onClick={handleLogOut}
className="block px-4 py-2 hover:bg-buttongreen rounded-b-md cursor-pointer transition-colors">
Log Out
</span>
</div>
)}
</div>
</nav>
) : (
<button
title="button"
title="menu"
onClick={toggleMobileMenu}
className="text-white md:hidden focus:outline-none block z-50"
>
Expand All @@ -116,8 +177,7 @@ const Header = () => {
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -127,121 +187,54 @@ const Header = () => {
</svg>
</button>
)}

<nav className="hidden md:flex flex-row items-center space-x-[5rem] text-white">
<Link to="/homepagedriver" className="hover:text-textgreen transition-colors">
Inbox
</Link>
<Link to="/about" className="hover:text-textgreen transition-colors">
About
</Link>

<div className="relative z-50" ref={droopdownRefPolicies}>
<button
onClick={toggleDropdownPolicies}
className="hover:text-textgreen transition-colors z-50"
>
Policies
</button>
{isDropdownOpenPolicies && (
<div className="z-50 absolute mt-2 w-48 bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProtocols}
className="block px-4 py-2 hover:bg-buttongreen rounded-t-md cursor-pointer"
>
Protocols
</span>
<span
onClick={handleRules}
className="z-50 block px-4 py-2 hover:bg-buttongreen rounded-b-md cursor-pointer"
>
Rules and Regulations
</span>
</div>
)}
</div>

<div className="relative" ref={dropdownRef}>
<button onClick={toggleDropdown} className="z-50 hover:text-textgreen transition-colors">
Account
</button>
{isDropdownOpen && (
<div className="absolute mt-2 w-48 z-50 bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProfile}
className="block px-4 py-2 z-50 hover:bg-buttongreen rounded-t-md cursor-pointer transition-colors"
>
Profile
</span>
<span
onClick={handleChangePassword}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer transition-colors"
>
Change Password
</span>
<span
onClick={handleLogOut}
className="block px-4 py-2 z-50 hover:bg-buttongreen rounded-b-md cursor-pointer transition-colors"
>
Log Out
</span>
</div>
)}
</div>
</nav>
</header>

{isMobileMenuOpen && !isWideScreen && (
<nav className="flex flex-col font-syke-medium items-center space-y-5 text-white bg-hoverbutton p-4 rounded">
<Link to="/homepagedriver" className="hover:text-textgreen transition-colors">
Inbox
</Link>
<Link to="/about" className="hover:text-textgreen transition-colors">
{!isWideScreen && isMobileMenuOpen && (
<nav className="flex flex-col absolute font-syke-medium items-center space-y-5 text-white bg-hoverbutton p-4 rounded right-2 top-16 z-50">
<Link
to="/about"
className="hover:text-textgreen transition-colors">
About
</Link>
<button
onClick={toggleDropdownPolicies}
className="hover:text-textgreen transition-colors"
>
className="hover:text-textgreen transition-colors">
Policies
</button>
{isDropdownOpenPolicies && (
<div className="w-full bg-hoverbutton text-white rounded-md shadow-lg">
<span
onClick={handleProtocols}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer transition-colors"
>
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors">
Protocols
</span>
<span
onClick={handleRules}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer transition-colors"
>
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors">
Rules and Regulations
</span>
</div>
)}
<button onClick={toggleDropdown} className=" z-50 hover:text-textgreen">
<button
onClick={toggleDropdown}
className="hover:text-textgreen">
Account
</button>
{isDropdownOpen && (
<div className="absolute right-0 mt-4 w-48 bg-hoverbutton text-white rounded-md shadow-lg z-10">
<div className="absolute right-0 mt-4 w-48 bg-hoverbutton text-white rounded-md shadow-lg z-10">
<span
onClick={handleProfile}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer transition-colors"
>
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors">
Profile
</span>
<span
onClick={handleChangePassword}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer transition-colors"
>
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer transition-colors">
Change Password
</span>
<span
onClick={handleLogOut}
className="block px-4 py-2 z-50 hover:bg-buttongreen cursor-pointer"
>
className="block px-4 py-2 hover:bg-buttongreen cursor-pointer">
Log Out
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/hooks/driver-hooks/useGetDriver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
navigate,
refresh,
auth,
auth?.isAdmin ? `/driver/get/${id}` : `/profile/get/${id}`,
auth?.isAdmin ? `/driver/get/${id}` : `/profile/get/${auth?.id}`,
"get"
);

Expand All @@ -45,7 +45,7 @@
}
};
fetchDriver(id);
}, [auth]);

Check warning on line 48 in frontend/src/hooks/driver-hooks/useGetDriver.ts

View workflow job for this annotation

GitHub Actions / build (18.x) 

React Hook useEffect has missing dependencies: 'id', 'navigate', and 'refresh'. Either include them or remove the dependency array

Check warning on line 48 in frontend/src/hooks/driver-hooks/useGetDriver.ts

View workflow job for this annotation

GitHub Actions / build (20.x) 

React Hook useEffect has missing dependencies: 'id', 'navigate', and 'refresh'. Either include them or remove the dependency array

Check warning on line 48 in frontend/src/hooks/driver-hooks/useGetDriver.ts

View workflow job for this annotation

GitHub Actions / build (22.x) 

React Hook useEffect has missing dependencies: 'id', 'navigate', and 'refresh'. Either include them or remove the dependency array

return { driver, loading };
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const LoginPage = () => {
id="email"
value={email}
onChange={(e) => {
if (e.target.value.length <= 20) {
if (e.target.value.length <= 50) {
setEmail(e.target.value);
}
}}
Expand Down
Loading
Loading