add redirect; add footer with assets link; add not found page#95
Conversation
Reviewer's GuideThis PR enhances user routing and UI elements by implementing client/server redirects based on authentication, refining page layouts with responsive flex and Next Image components, simplifying search auth logic, adding a global footer, and introducing a custom 404 page. Sequence diagram for client-side redirect on Home page based on authenticationsequenceDiagram
actor User
participant HomePage
participant AuthLib as getToken()
participant Router
User->>HomePage: Visit /
HomePage->>AuthLib: getToken()
AuthLib-->>HomePage: token or null
alt token exists
HomePage->>Router: push('/trips')
Router-->>User: Redirect to /trips
else token missing
HomePage-->>User: Show landing page
end
Sequence diagram for server-side redirect on auth pagessequenceDiagram
actor User
participant AuthLayout as (auth)/layout.tsx
participant Cookies
participant Router
User->>AuthLayout: Request auth page (e.g., /sign-up)
AuthLayout->>Cookies: cookies.get('token')
Cookies-->>AuthLayout: token or null
alt token exists
AuthLayout->>Router: redirect('/trips')
Router-->>User: Redirect to /trips
else token missing
AuthLayout-->>User: Render auth page
end
Class diagram for new NotFound page componentclassDiagram
class NotFound {
+render(): JSX.Element
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @abartczak01, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request focuses on enhancing the application's user experience and structural integrity. It introduces intelligent routing for authenticated users, a dedicated page for handling 404 errors, and a global footer for necessary attributions. Additionally, it includes minor UI adjustments to existing pages and streamlines the authentication process for the search feature.
Highlights
- User Experience Enhancements: Implemented redirects for authenticated users on the home page and authentication routes, ensuring a smoother navigation flow and preventing access to irrelevant pages once logged in.
- Error Handling Improvement: Introduced a custom 404 'Not Found' page to provide a more user-friendly experience for invalid URLs, guiding users back to the main site.
- UI/UX Refinements: Added a global footer for asset attribution across the application and made minor layout adjustments to the trips and home pages for improved responsiveness and visual appeal.
- Authentication Flow Adjustment: Simplified the search functionality by removing explicit token handling, suggesting a more streamlined or cookie-based authentication approach for this endpoint.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @abartczak01 - I've reviewed your changes - here's some feedback:
- Consider moving the client-side redirect in Home to a server-side redirect (using Next.js redirect) to avoid flash of the landing page and improve UX.
- You’re nesting inside a , which is semantically invalid—either style the Link as a button or wrap the button in the Link to maintain correct HTML structure.
- The search page removed manual Authorization headers but no global interceptor was added; ensure your axios instance or middleware consistently attaches the token or handles unauthorized cases.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider moving the client-side redirect in Home to a server-side redirect (using Next.js redirect) to avoid flash of the landing page and improve UX.
- You’re nesting <Link> inside a <button>, which is semantically invalid—either style the Link as a button or wrap the button in the Link to maintain correct HTML structure.
- The search page removed manual Authorization headers but no global interceptor was added; ensure your axios instance or middleware consistently attaches the token or handles unauthorized cases.
## Individual Comments
### Comment 1
<location> `frontend/app/page.tsx:28` </location>
<code_context>
+ FareShare. From destinations to shared expenses — make every trip
+ effortless and unforgettable, together.
+ </p>
+ <button className="primary-btn text-heading4-medium px-16 py-3 mt-4">
+ <Link href="/sign-up">Get Started</Link>
+ </button>
+ </div>
</code_context>
<issue_to_address>
Button should wrap Link for accessibility and semantics.
Nesting a Link inside a button can cause accessibility and semantic problems. Refactor to avoid placing interactive elements inside each other.
</issue_to_address>
### Comment 2
<location> `frontend/app/not-found.tsx:16` </location>
<code_context>
+ <br />
+ Let's get you back on track.
+ </p>
+ <Link href="/">
+ <button className="primary-btn text-heading4-medium px-16 py-3 mt-6">
+ Go to Homepage
+ </button>
</code_context>
<issue_to_address>
Button should not be nested inside Link for accessibility.
Use a Link styled as a button, or a button with navigation logic, to avoid these issues.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| <button className="primary-btn text-heading4-medium px-16 py-3 mt-4"> | ||
| <Link href="/sign-up">Get Started</Link> |
There was a problem hiding this comment.
issue: Button should wrap Link for accessibility and semantics.
Nesting a Link inside a button can cause accessibility and semantic problems. Refactor to avoid placing interactive elements inside each other.
| <Link href="/"> | ||
| <button className="primary-btn text-heading4-medium px-16 py-3 mt-6"> |
There was a problem hiding this comment.
issue: Button should not be nested inside Link for accessibility.
Use a Link styled as a button, or a button with navigation logic, to avoid these issues.
Code Coverage
|
| useEffect(() => { | ||
| const token = getToken(); | ||
| if (token) { | ||
| router.push('/trips'); | ||
| } | ||
| }, [router]); |
There was a problem hiding this comment.
Consider performing the redirect on the server side to avoid UI flicker. Using useEffect for redirection can cause a brief display of the original page content before redirecting. A server-side redirect would be more efficient.
| try { | ||
| const response = await axiosInstance.get(`user-info/search`, { | ||
| params: { name: query, page: 0, size: 20 }, | ||
| headers: { Authorization: `Bearer ${token}` }, | ||
| }); |
There was a problem hiding this comment.
The Authorization header is no longer being set on the request. Ensure that the backend does not require this header, or that authentication is being handled in a different way.
| <button className="primary-btn text-heading4-medium px-16 py-3 mt-6"> | ||
| Go to Homepage | ||
| </button> |
There was a problem hiding this comment.
Nesting a <button> inside a <Link> is invalid HTML. The <Link> component renders an <a> tag, and <a> tags should not contain <button> elements1. Style the <Link> to look like a button instead.
<Link
href="/"
className="primary-btn text-heading4-medium px-16 py-3 mt-6">
Go to Homepage
</Link>Style Guide References
Footnotes
| <Link href="/sign-up">Get Started</Link> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Nesting a <Link> inside a <button> is invalid HTML. Interactive elements like buttons should not contain other interactive elements like links1. Style the <Link> to look like a button instead.
<Link href="/sign-up" className="primary-btn text-heading4-medium px-16 py-3 mt-4">
Get Started
</Link>Style Guide References
Footnotes
| return ( | ||
| <div> | ||
| <div className="flex justify-between"> | ||
| <div className="flex justify-between gap-4 sm:p-0 p-2 sm:flex-row flex-col "> |
There was a problem hiding this comment.
Consider using flex-row and flex-col classes with the sm: prefix to control the layout at different screen sizes, instead of sm:flex-row flex-col1.
<div className="flex justify-between gap-4 p-2 sm:p-0 sm:flex-row flex-col">Style Guide References
Footnotes
| </Link> | ||
| {trips && trips.length > 0 && ( | ||
| <div className="flex flex-col items-center text-gray-700 md:flex-row gap-4"> | ||
| <div className="flex items-center text-gray-700 gap-4"> |
There was a problem hiding this comment.
The md:flex-row class has been removed. Ensure that the layout is still responsive and works as expected on larger screens.
Code Coverage
|
Code Coverage
|
1 participant
Summary by Sourcery
Implement client-side redirects based on authentication state, introduce a styled 404 page and auth layout guard, and refine the homepage, footer, search, and trips UI for consistency and responsiveness
New Features:
Enhancements: