Changeset ed8f998 for frontend

Timestamp:

02/19/26 20:23:01 (5 months ago)

Author:

Filip Gavrilovski <filipgavrilovski28@…>

Branches:

main

Children:

765e166

Parents:

c807e22 (diff), 615dcee (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent.

Message:

Merge branch 'main' of ​https://github.com/gavro081/finkwave

Location:

frontend/src

Files:

• components/SongItem.tsx (modified) (5 diffs)
• components/userProfile/ArtistView.tsx (modified) (1 diff)
• components/userProfile/UserListModal.tsx (modified) (3 diffs)
• pages/LandingPage.tsx (modified) (4 diffs)
• pages/SongDetail.tsx (modified) (1 diff)
• pages/UserDetail.tsx (modified) (1 diff)

frontend/src/components/SongItem.tsx

@@ -1 @@
-import { useRef, useState } from "react";
+import { use, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { baseURL } from "../api/axiosInstance";
@@ -5 +5 @@
 import { toEmbedUrl } from "../utils/utils";
 import PlaylistDropdown from "./playlist/PlaylistDropdown";
+import { useAuth } from "../context/authContext";
 
 export interface SongItemData {
@@ -50 +51 @@
   const navigate = useNavigate();
   const { play, currentSong } = usePlayer();
+  const { user } = useAuth();
   const [internalOpen, setInternalOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
@@ -165 +167 @@
 
       {/* Like button */}
-      {onLikeToggle && (
+      {user && onLikeToggle && (
         <button
           onClick={(e) => {
@@ -187 +189 @@
 
       {/* Three-dot menu */}
-      <div className="relative">
-        <button
-          ref={buttonRef}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (playlistOpen) {
-              setPlaylistOpen(false);
-            } else {
-              if (buttonRef.current) {
-                const rect = buttonRef.current.getBoundingClientRect();
-                const spaceBelow = window.innerHeight - rect.bottom;
-                const dropdownHeight = 260;
-
-                if (spaceBelow < dropdownHeight) {
-                  setDropdownDirection("above");
-                  setDropdownPosition({
-                    top: rect.top - 8,
-                    left: rect.right - 224,
-                  });
-                } else {
-                  setDropdownDirection("below");
-                  setDropdownPosition({
-                    top: rect.bottom + 8,
-                    left: rect.right - 224,
-                  });
+      {user && (
+        <div className="relative">
+          <button
+            ref={buttonRef}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (playlistOpen) {
+                setPlaylistOpen(false);
+              } else {
+                if (buttonRef.current) {
+                  const rect = buttonRef.current.getBoundingClientRect();
+                  const spaceBelow = window.innerHeight - rect.bottom;
+                  const dropdownHeight = 260;
+
+                  if (spaceBelow < dropdownHeight) {
+                    setDropdownDirection("above");
+                    setDropdownPosition({
+                      top: rect.top - 8,
+                      left: rect.right - 224,
+                    });
+                  } else {
+                    setDropdownDirection("below");
+                    setDropdownPosition({
+                      top: rect.bottom + 8,
+                      left: rect.right - 224,
+                    });
+                  }
                 }
+                setPlaylistOpen(true);
               }
-              setPlaylistOpen(true);
-            }
-          }}
-          className="p-2 hover:bg-white/10 rounded-full transition-colors cursor-pointer text-gray-400 hover:text-white"
-          aria-label="More options"
-        >
-          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-            <circle cx="12" cy="5" r="1.5" />
-            <circle cx="12" cy="12" r="1.5" />
-            <circle cx="12" cy="19" r="1.5" />
-          </svg>
-        </button>
-
-        <PlaylistDropdown
-          songId={song.id}
-          isOpen={playlistOpen}
-          onClose={() => setPlaylistOpen(false)}
-          position={dropdownPosition}
-          usePortal={true}
-          direction={dropdownDirection}
-        />
-      </div>
+            }}
+            className="p-2 hover:bg-white/10 rounded-full transition-colors cursor-pointer text-gray-400 hover:text-white"
+            aria-label="More options"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <circle cx="12" cy="5" r="1.5" />
+              <circle cx="12" cy="12" r="1.5" />
+              <circle cx="12" cy="19" r="1.5" />
+            </svg>
+          </button>
+
+          <PlaylistDropdown
+            songId={song.id}
+            isOpen={playlistOpen}
+            onClose={() => setPlaylistOpen(false)}
+            position={dropdownPosition}
+            usePortal={true}
+            direction={dropdownDirection}
+          />
+        </div>
+      )}
+
+      {/* Three-dot menu */}
     </div>
   );

frontend/src/components/userProfile/ArtistView.tsx

@@ -6 +6 @@
 import type { ArtistContribution } from "../../utils/types";
 import SongItem from "../SongItem";
+import { useAuth } from "../../context/authContext";
 
 interface ArtistViewProps {

frontend/src/components/userProfile/UserListModal.tsx

@@ -3 +3 @@
 import type { BaseNonAdminUser } from "../../utils/types";
 import { useEffect } from "react";
+import { useAuth } from "../../context/authContext";
 
 interface ModalProps {
@@ -18 +19 @@
 }: ModalProps) => {
   const navigate = useNavigate();
+  const { user } = useAuth();
   useEffect(() => {
     document.body.style.overflow = "hidden";
@@ -72 +74 @@
                   </div>
                 </div>
-
-                <button
-                  onClick={() => onFollowToggle(u.username)}
-                  className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
-                    u.isFollowedByCurrentUser
-                      ? "bg-white/10 text-white hover:bg-white/20"
-                      : "bg-[#1db954] text-black hover:bg-[#1ed760]"
-                  }`}
-                >
-                  {u.isFollowedByCurrentUser ? "Following" : "Follow"}
-                </button>
+                {user && (
+                  <button
+                    onClick={() => onFollowToggle(u.username)}
+                    className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
+                      u.isFollowedByCurrentUser
+                        ? "bg-white/10 text-white hover:bg-white/20"
+                        : "bg-[#1db954] text-black hover:bg-[#1ed760]"
+                    }`}
+                  >
+                    {u.isFollowedByCurrentUser ? "Following" : "Follow"}
+                  </button>
+                )}
               </div>
             ))

frontend/src/pages/LandingPage.tsx

@@ -14 +14 @@
 } from "../utils/types";
 import { toEmbedUrl } from "../utils/utils";
+import { useAuth } from "../context/authContext";
 
 const CATEGORIES: { value: SearchCategory; label: string }[] = [
@@ -25 +26 @@
   const navigate = useNavigate();
   const { play, currentSong } = usePlayer();
+  const { user } = useAuth();
   const [songs, setSongs] = useState<Song[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
-  // search state
   const [searchInput, setSearchInput] = useState("");
   const [activeQuery, setActiveQuery] = useState("");
@@ -36 +37 @@
   const [hasSearched, setHasSearched] = useState(false);
 
-  // playlist dropdown state
   const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState<
     number | null
@@ -415 +415 @@
                             {song.releasedBy}
                           </p>
-                          <div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
-                            {/* Like button */}
-                            <button
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                toggleLike(song.id);
-                              }}
-                              className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
-                              aria-label={
-                                song.isLikedByCurrentUser
-                                  ? "Unlike song"
-                                  : "Like song"
-                              }
-                            >
-                              {song.isLikedByCurrentUser ? (
-                                <svg
-                                  className="w-6 h-6 fill-[#1db954]"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-                                </svg>
-                              ) : (
-                                <svg
-                                  className="w-6 h-6"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                                  />
-                                </svg>
-                              )}
-                            </button>
-
-                            {/* Add to playlist button */}
-                            <div className="relative">
+                          {user && (
+                            <div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
+                              {/* Like button */}
                               <button
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  togglePlaylistDropdown(song.id);
+                                  toggleLike(song.id);
                                 }}
                                 className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
-                                aria-label="Add to playlist"
+                                aria-label={
+                                  song.isLikedByCurrentUser
+                                    ? "Unlike song"
+                                    : "Like song"
+                                }
                               >
-                                <svg
-                                  className="w-6 h-6"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  viewBox="0 0 24 24"
+                                {song.isLikedByCurrentUser ? (
+                                  <svg
+                                    className="w-6 h-6 fill-[#1db954]"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                                  </svg>
+                                ) : (
+                                  <svg
+                                    className="w-6 h-6"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                                    />
+                                  </svg>
+                                )}
+                              </button>
+
+                              {/* Add to playlist button */}
+                              <div className="relative">
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    togglePlaylistDropdown(song.id);
+                                  }}
+                                  className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
+                                  aria-label="Add to playlist"
                                 >
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M12 4v16m8-8H4"
-                                  />
-                                </svg>
-                              </button>
-
-                              <PlaylistDropdown
-                                songId={song.id}
-                                isOpen={openPlaylistDropdown === song.id}
-                                onClose={() => setOpenPlaylistDropdown(null)}
-                                direction="above"
-                              />
+                                  <svg
+                                    className="w-6 h-6"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M12 4v16m8-8H4"
+                                    />
+                                  </svg>
+                                </button>
+
+                                <PlaylistDropdown
+                                  songId={song.id}
+                                  isOpen={openPlaylistDropdown === song.id}
+                                  onClose={() => setOpenPlaylistDropdown(null)}
+                                  direction="above"
+                                />
+                              </div>
                             </div>
-                          </div>
+                          )}
                         </div>
                       </div>

frontend/src/pages/SongDetail.tsx

@@ -407 +407 @@
               )}
             </h2>
-            <button
-              onClick={() => setShowReviewModal(true)}
-              className="flex items-center gap-2 bg-[#1db954] hover:bg-[#1ed760] text-black text-sm font-semibold px-4 py-2 rounded-full transition-colors"
-            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
+            {user != null && (
+              <button
+                onClick={() => setShowReviewModal(true)}
+                className="flex items-center gap-2 bg-[#1db954] hover:bg-[#1ed760] text-black text-sm font-semibold px-4 py-2 rounded-full transition-colors"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 4v16m8-8H4"
-                />
-              </svg>
-              Add Review
-            </button>
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 4v16m8-8H4"
+                  />
+                </svg>
+                Add Review
+              </button>
+            )}
           </div>
 

frontend/src/pages/UserDetail.tsx

@@ -259 +259 @@
 
             {/* Follow button - hidden on own profile */}
-            {!isOwnProfile && (
+            {currentUser && !isOwnProfile && (
               <div className="mt-4">
                 <button