Skip to content

Modified Routing Options in Index Page #177

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

Open
Jaswanth-Kumar-2007 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Modified Routing Options in Index Page #177

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
2a62320
Modified Routing Option in Index Page
Jaswanth-Kumar-2007 Jul 9, 2026
e6fb173
Updated Edit Profile Section
Jaswanth-Kumar-2007 Jul 12, 2026
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
2 changes: 1 addition & 1 deletion src/common/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Footer() {
<a href='https://www.instagram.com/openlake_iitbhilai/' target='_blank' rel='noopener noreferrer'>
<BsInstagram size={'1.6em'} />
</a>
<a href='https://discord.gg/eDYPDK2y' target='_blank' rel='noopener noreferrer'>
<a href='https://discord.gg/e33H6gQmes' target='_blank' rel='noopener noreferrer'>
<BsDiscord size={'1.6em'} />
</a>
</div>
Expand Down
32 changes: 28 additions & 4 deletions src/common/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,24 @@ import Image from "next/image";
import * as ROUTES from "../../../constants/routes";
import NotificationBell from "../NotificationBell/NotificationBell";
import styles from "./Header.module.css";
import { useState,useEffect } from "react";

export default function Header() {

const [userDetails , setUserdetails] = useState<any>(null);

useEffect(() => {
try{
const data = localStorage.getItem("authUser");

if(data){
setUserdetails(JSON.parse(data));
};
}catch (e){
console.log(e);
}
},[])

Comment on lines +7 to +24

@coderabbitai coderabbitai Bot Jul 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

Stale auth state — Header won't reflect logout without a page refresh.

The useEffect reads authUser from localStorage only on mount. If the user logs out elsewhere (e.g., via onAuthStateChanged in _app.tsx which calls localStorage.removeItem("authUser")), the Header will continue displaying "Dashboard : displayName" until a full page reload. Consider syncing with the Firebase auth listener or listening to storage events for cross-tab updates.

Additionally, console.log should be console.error for caught exceptions, and the setter setUserdetails has inconsistent casing vs the state variable userDetails.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/common/components/Header/Header.tsx` around lines 7 - 24, The Header
component currently reads auth state only once on mount, so it won’t update when
`authUser` is removed elsewhere; update `Header` to subscribe to auth changes
(for example via the Firebase listener used in `_app.tsx`) or handle `storage`
events so `userDetails` stays in sync after logout. Also change the
caught-exception logging in `useEffect` from `console.log` to `console.error`,
and rename `setUserdetails` to match the `userDetails` state casing for
consistency.

return (
<>
<div className={`relative flex w-10/12 p-5 fc-black font-light max-w-screen-2xl mx-auto items-center`}>
Expand All @@ -31,10 +47,18 @@ export default function Header() {
</div>

<div className="flex items-center gap-10">
<ul className="flex flex-row items-center gap-8 pr-20">
<li> <Link href={ROUTES.SIGNUP}> Signup </Link> </li>
<li> <Link href={ROUTES.LOGIN}> Login </Link> </li>
</ul>
{(userDetails)?
(
<ul className="flex flex-row items-center gap-8 pr-20">
<li className="text-gray-dark hover:text-black transform hover:-translate-y-0.5"><Link href={ROUTES.DASHBOARD}> Dashboard : {userDetails.displayName} </Link></li>
</ul>
) :
(<ul className="flex flex-row items-center gap-8 pr-20">
<li> <Link href={ROUTES.LOGIN}> Login </Link> </li>
<li> <Link href={ROUTES.SIGNUP}> Signup </Link> </li>
</ul>
)
}
</div>
</nav>
</div>
Expand Down
45 changes: 45 additions & 0 deletions src/common/components/Profile/Profile.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,51 @@
font-family: ui-monospace, SFMono-Regular, Monaco, monospace;
}

/* Edit Profile CSS */
.editOverlay{
border:2px solid black;
border-radius:30px;
padding:15px;
}

.formGroup{
margin:5px;
}

.formGroup input{
border:1px solid black;
margin-left: 5px;
border-radius: 25px;
padding:5px;
width:100%;
}

.cancelBtn{
border: 1px solid black;
padding:5px;
margin:5px;
border-radius: 30px;
}

.cancelBtn:hover{
background-color: lightcoral;
}

.saveBtn{
border: 1px solid black;
padding:5px;
margin:5px;
border-radius: 30px;
}

.saveBtn:hover{
background-color: lightgreen;
}

.errorMessage{
color:lightcoral;
}

/* Responsiveness */
@media (max-width: 1280px) {
.topSection {
Expand Down
4 changes: 2 additions & 2 deletions src/common/components/Profile/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
<div className={styles.identityLeft}>
<div className={styles.avatarWrapper}>
<div className={styles.avatar}>
<img

Check warning on line 246 in src/common/components/Profile/Profile.tsx

View workflow job for this annotation

GitHub Actions / lint 

Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element
src={previewUrl || profilePhotoUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(user.fullname || user.username)}&background=f59e0b&color=fff&bold=true`}
alt="Profile"
className={styles.avatarImage}
Expand All @@ -269,7 +269,7 @@

{isOwnProfile && (
<button className={styles.editButton} onClick={handleEditToggle}>
<HiPencilSquare size={16} /> EDIT
{(isEditing) ? (<>Scroll Down 👇</>):<><HiPencilSquare size={16} /> EDIT</>}
</button>
Comment on lines 271 to 273

@coderabbitai coderabbitai Bot Jul 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use an action-accurate label for the edit toggle.

While editing, this button still calls handleEditToggle, so clicking “Scroll Down 👇” closes the editor instead of scrolling. Use a label such as “Cancel Edit,” or make scrolling a separate control.

Proposed fix 
- {(isEditing) ? (<>Scroll Down 👇</>):<><HiPencilSquare size={16} /> EDIT</>}
+ {isEditing ? 'Cancel Edit' : <><HiPencilSquare size={16} /> EDIT</>}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button className={styles.editButton} onClick={handleEditToggle}>
<HiPencilSquare size={16} /> EDIT
{(isEditing) ? (<>Scroll Down 👇</>):<><HiPencilSquare size={16} /> EDIT</>}
</button>
<button className={styles.editButton} onClick={handleEditToggle}>
{isEditing ? 'Cancel Edit' : <><HiPencilSquare size={16} /> EDIT</>}
</button>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/common/components/Profile/Profile.tsx` around lines 271 - 273, Update the
button label in the Profile component’s handleEditToggle control so its
editing-state text accurately describes the action, such as “Cancel Edit,”
instead of “Scroll Down 👇”; keep the existing edit icon and “EDIT” label for
the non-editing state.

)}
</div>
Expand Down Expand Up @@ -304,7 +304,7 @@

{/* Mascot column */}
<div className={styles.mascotWrapper}>
<img

Check warning on line 307 in src/common/components/Profile/Profile.tsx

View workflow job for this annotation

GitHub Actions / lint 

Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element
src="/images/foldHands.png"
alt="Mascot"
className={styles.separateAccentImg}
Expand Down Expand Up @@ -451,7 +451,7 @@
<div className={styles.formActions}>
<button className={styles.cancelBtn} onClick={handleEditToggle} disabled={loading}>Abort</button>
<button className={styles.saveBtn} onClick={handleSave} disabled={loading}>
{loading ? 'UPLOADING...' : 'SAVE CHANGES'}
{loading ? 'Uploading...' : 'Save Changes'}
</button>
</div>
</div>
Expand Down
21 changes: 19 additions & 2 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import dynamic from "next/dynamic";
import Loading from "../common/components/Loading/Loading";
import Link from "next/link";

import { useState,useEffect } from "react";

const DynamicHeader = dynamic(() => import("../common/components/Header/Header"), {
loading: () => <Loading />
});
Expand All @@ -23,6 +25,21 @@ const DynamicFooter = dynamic(() => import("../common/components/Footer/Footer")
});

export default function Home() {

const [userDetail, setUserDetail] = useState<any>(null);

useEffect(() => {
try {
const data = localStorage.getItem("authUser");

if (data) {
setUserDetail(JSON.parse(data));
}
} catch (e) {
console.log(e);
}
}, []);

return (
<div className="flex flex-col w-full items-center">
<DynamicHeader />
Expand All @@ -45,14 +62,14 @@ export default function Home() {
</p>
<div className="flex flex-row gap-5 w-full">
{/* Explore Button*/}
<Link href="/signup">
<Link href={(userDetail)?"/dashboard":"/login"}>
<button className={`${styles.button_blue} px-8 py-3 rounded-xl shadow-lg transition-all duration-200 hover:scale-105`}>
Explore
</button>
</Link>

{/* Dashboard Button*/}
<Link href="/signup" className="w-1/2">
<Link href={(userDetail)?"/dashboard":"/login"} className="w-1/2">
<button className="w-full bg-white hover:bg-gray-50 text-gray-900 border border-gray-100 font-bold px-8 py-3 rounded-xl shadow-sm transition-all duration-200 hover:scale-105 flex items-center justify-center gap-3 group">
Dashboard
<BsArrowRightCircle size={"1.3em"} className="transition-transform duration-200 group-hover:translate-x-1" />
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = {
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
'black':'#000000',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
Expand Down
Loading