Changeset 615dcee for frontend/src/components

Timestamp:

02/18/26 22:33:00 (5 months ago)

Author:

Dimitar Arsov <dimitararsov04@…>

Branches:

main

Children:

ed8f998

Parents:

d1ee039

Message:

hide actions from unauthenticated users

Location:

frontend/src/components

Files:

• SongItem.tsx (modified) (5 diffs)
• userProfile/ArtistView.tsx (modified) (1 diff)
• userProfile/UserListModal.tsx (modified) (3 diffs)

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>
             ))