Fix song preview dark mode, only load user's memos

samdatkins · Dec 24, 2024 · 982c853 · 982c853
1 parent 10ead53
commit 982c853
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/api/serializers/song.py b/api/serializers/song.py
@@ -54,7 +54,7 @@ def get_song_memo(self, obj):
         if not include_song_memos or request is None:
             return None
 
-        memos = obj.song_memos.all()  # Access the prefetch directly
+        memos = obj.filtered_memos  # Access the prefetch directly
         if memos:
             memo = memos[0]  # Assuming you only care about the first memo
             return SongMemoSerializer(memo).data

diff --git a/api/views/songbook.py b/api/views/songbook.py
@@ -7,7 +7,7 @@
 from rest_framework.decorators import action
 from rest_framework.response import Response
 
-from api.models import Membership, Songbook, SongEntry
+from api.models import Membership, Song, Songbook, SongEntry, SongMemo
 from api.serializers.songbook import (
     SongbookDetailSerializer,
     SongbookListSerializer,
@@ -66,18 +66,25 @@ def get_queryset(self):
         queryset = self.queryset.filter(members__id=self.request.user.id)
 
         if self.action == "songbook_details":
-            return (
-                queryset.prefetch_related(
-                    Prefetch(
-                        "song_entries",
-                        queryset=SongEntry.objects.order_by(
-                            "created_at"
-                        ).prefetch_related("song"),
-                    )
+            return queryset.prefetch_related(
+                Prefetch(
+                    "song_entries",
+                    queryset=SongEntry.objects.order_by("created_at").prefetch_related(
+                        Prefetch(
+                            "song",
+                            queryset=Song.objects.prefetch_related(
+                                Prefetch(
+                                    "song_memos",
+                                    queryset=SongMemo.objects.filter(
+                                        user=self.request.user
+                                    ),  # Filter by the request user
+                                    to_attr="filtered_memos",  # Store in a custom attribute
+                                )
+                            ),
+                        ),
+                    ),
                 )
-                .prefetch_related("song_entries__song__song_memos")
-                .all()
-            )
+            ).all()
 
         queryset = queryset.prefetch_related("song_entries").prefetch_related(
             "membership_set__user__social_auth"

diff --git a/frontend/src/components/SongPreviewCard.tsx b/frontend/src/components/SongPreviewCard.tsx
@@ -1,5 +1,12 @@
 import { useState, useEffect } from "react";
-import { Card, Flex, Heading, Icon, Text } from "@chakra-ui/react";
+import {
+  Card,
+  Flex,
+  Heading,
+  Icon,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { FaFlag, FaRegFlag } from "react-icons/fa";
 import { toggleSongMemoPending } from "../services/songs";
 
@@ -55,31 +62,38 @@ export default function SongPreviewCard({
     ? optimisticMemo.text
     : "No memo";
 
+  const iconColor = useColorModeValue("blue.300", "blue.700");
+  const bgColor = useColorModeValue("gray.100", "gray.700");
+  const bgActiveColor = useColorModeValue("gray.50", "gray.900");
+  const textColor = useColorModeValue("black", "white");
+
   return (
     <Card
       p="4"
       m="4"
       borderRadius="lg"
-      bgColor={!isHighlighted ? "gray.100" : ""}
+      bgColor={!isHighlighted ? bgActiveColor : bgColor}
       minH={isHighlighted ? "30vh" : "16vh"}
     >
       <Flex direction={"row"} justifyContent={"space-between"}>
-        <Heading size="md" mb="4">
+        <Heading size="md" mb="4" textColor={textColor}>
           "{entry.song.title}" by {entry.song.artist}
         </Heading>
         {(!hasSongMemo || hasPendingSongMemo) && (
           <Icon
             as={hasPendingSongMemo ? FaFlag : FaRegFlag}
-            color="blue.300"
+            color={iconColor}
             fontSize={"48px"}
             onClick={handleToggleMemo}
           />
         )}
       </Flex>
       {hasSongMemo && !hasPendingSongMemo ? (
-        <Text fontSize="xl">{songMemoText}</Text>
+        <Text fontSize="xl" textColor={textColor}>
+          {songMemoText}
+        </Text>
       ) : (
-        <Text fontSize="xl" fontStyle="italic">
+        <Text fontSize="xl" fontStyle="italic" textColor={textColor}>
           {songMemoText}
         </Text>
       )}