Changeset ebdd3d4 for frontend

Timestamp:

02/07/26 15:15:12 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

dc30259

Parents:

5938bc9

Message:

add route for viewing own profile

Location:

frontend/src

Files:

• App.tsx (modified) (1 diff)
• pages/Nav.tsx (modified) (1 diff)
• pages/UserDetail.tsx (modified) (3 diffs)

frontend/src/App.tsx

@@ -90 +90 @@
                                 element: <MusicalCollection />,
                         },
+                        {
+                                path: "/me",
+                                element: <UserDetail />,
+                        },
                 ],
         },

frontend/src/pages/Nav.tsx

@@ -105 +105 @@
                                                                         <div className="absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg py-1 z-50">
                                                                                 <Link
-                                                                                        to="#"
+                                                                                        to="/me"
                                                                                         className="block px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
                                                                                         onClick={() => setIsDropdownOpen(false)}

frontend/src/pages/UserDetail.tsx

@@ -5 +5 @@
 import ListenerView from "../components/userProfile/ListenerView";
 import UserListModal from "../components/userProfile/UserListModal";
+import { useAuth } from "../context/authContext";
 import { handleError } from "../utils/error";
 import type {
@@ -35 +36 @@
         // user refers to the selected user NOT to the user from context
         const baseURL = import.meta.env.VITE_API_BASE_URL;
-        const { username } = useParams();
+        const { username: usernameParam } = useParams();
+        // sintaksava dole znaci zemi go user od auth context i preimenuvaj go vo currentUser, za da ne se izmesa so user-ot dole
+        const { user: currentUser } = useAuth();
         const navigate = useNavigate();
         const [user, setUser] = useState<UserProfile | null>(null);
@@ -44 +47 @@
         const [isLoadingModal, setIsLoadingModal] = useState(false);
         const [isFollowing, setIsFollowing] = useState(false);
+
+        // determine which username to use: URL param or current user's username
+        const username = usernameParam || currentUser?.username;
+
+        // if we're on /me route and no user is logged in, show error
+        if (!usernameParam && !currentUser) {
+                return (
+                        <div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
+                                <h2 className="font-bold">Authentication Required</h2>
+                                <p>You must be logged in to view your profile.</p>
+                                <button
+                                        onClick={() => navigate("/login")}
+                                        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
+                                >
+                                        Go to Login
+                                </button>
+                        </div>
+                );
+        }
 
         const handleFollow = async () => {