From 3df69ba4aed092553859a283f2a01cf82e56f540 Mon Sep 17 00:00:00 2001 From: Jack Conway Date: Wed, 24 Jan 2024 12:22:52 -0700 Subject: [PATCH 1/4] add hamburg menu to welcome, refactor songbook list --- frontend/src/App.tsx | 5 + frontend/src/components/ViewAllSongbooks.tsx | 193 +++++++++++++++++++ frontend/src/components/WelcomePage.tsx | 74 +++++-- 3 files changed, 254 insertions(+), 18 deletions(-) create mode 100644 frontend/src/components/ViewAllSongbooks.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 70de8ef..642d6ea 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,6 +2,7 @@ import { useAsync } from "react-async-hook"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import AddSongPage from "./components/AddSongPage"; import CurrentSongView from "./components/CurrentSongView"; +import ViewAllSongbooks from "./components/ViewAllSongbooks"; import WelcomePage from "./components/WelcomePage"; import { getUserDetails } from "./services/songs"; @@ -18,6 +19,10 @@ function App() { element={} /> } /> + } + /> } /> } /> diff --git a/frontend/src/components/ViewAllSongbooks.tsx b/frontend/src/components/ViewAllSongbooks.tsx new file mode 100644 index 0000000..130b1a7 --- /dev/null +++ b/frontend/src/components/ViewAllSongbooks.tsx @@ -0,0 +1,193 @@ +import { + Avatar, + AvatarGroup, + Card, + Flex, + Heading, + Kbd, + SimpleGrid, + Skeleton, + Text, + Tooltip, + useColorModeValue, + useDisclosure, +} from "@chakra-ui/react"; +import dayjs from "dayjs"; +import relativeTime from "dayjs/plugin/relativeTime"; +import { useAsync } from "react-async-hook"; +import { BsFillJournalBookmarkFill } from "react-icons/bs"; +import { RxLapTimer } from "react-icons/rx"; +import { useNavigate, useParams } from "react-router-dom"; +import { getAllSongbooks } from "../services/songs"; +import CreateEditSongbook from "./CreateEditSongbook"; + +const ViewAllSongbooks = () => { + const is_noodle = useParams()["is_noodle"] === "true"; + dayjs.extend(relativeTime); + const { isOpen, onOpen, onClose } = useDisclosure(); + const asyncSongbooks = useAsync(async () => getAllSongbooks(), []); + const songbooks = asyncSongbooks.result?.data.results; + const navigate = useNavigate(); + const avatarBackgroundStyle = { + color: useColorModeValue("white", "black"), + bg: useColorModeValue("teal.500", "cyan.300"), + }; + const renderSongbooks = (is_noodle) => { + if (!songbooks) { + return ( + + + + + + ); + } else { + return ( + + + + + + + + {is_noodle ? ( + + ) : ( + + )} + + + {songbooks + ?.filter((songbook) => songbook.is_noodle_mode === is_noodle) + .map((songbook, idx) => { + return ( + { + navigate(`/live/${songbook.session_key}/`); + }} + cursor="pointer" + > + + {songbook.is_noodle_mode ? ( + <> + + + + + + + ) : ( + + + + + + )} + + + {songbook.session_key.split("").map((char, keyIdx) => ( + {char} + ))} + + 20 ? "sm" : "md"} + textAlign="center" + mb="1rem" + > + {songbook.title} + + {songbook.is_songbook_owner && ( + + {songbook.membership_set?.length && + songbook.membership_set.map((member) => { + return ( + + ); + })} + + )} + + + {songbook.total_songs === 0 && <>no songs yet} + {songbook.total_songs === 1 && <>1 song} + {songbook.total_songs > 1 && ( + <>{songbook.total_songs} songs + )} + + + {songbook.is_noodle_mode ? ( + + + last updated {dayjs(songbook.updated_at).fromNow()} + + + ) : ( + + + created {dayjs(songbook.created_at).fromNow()} + + + )} + + + ); + })} + + ); + } + }; + + return ( + <> + + + {renderSongbooks(is_noodle)} + + + ); +}; +export default ViewAllSongbooks; diff --git a/frontend/src/components/WelcomePage.tsx b/frontend/src/components/WelcomePage.tsx index aa8313e..b3a4523 100644 --- a/frontend/src/components/WelcomePage.tsx +++ b/frontend/src/components/WelcomePage.tsx @@ -1,9 +1,22 @@ -import { WarningIcon } from "@chakra-ui/icons"; -import { Button, Flex, Heading, Input, Text } from "@chakra-ui/react"; +import { HamburgerIcon, WarningIcon } from "@chakra-ui/icons"; +import { + Button, + Flex, + Heading, + IconButton, + Input, + Menu, + MenuButton, + MenuItem, + MenuList, + Text, +} from "@chakra-ui/react"; import { AxiosResponse } from "axios"; import { useState } from "react"; import { UseAsyncReturn, useAsync } from "react-async-hook"; -import { useNavigate } from "react-router-dom"; +import { BsFillJournalBookmarkFill } from "react-icons/bs"; +import { RxLapTimer } from "react-icons/rx"; +import { Link as RouterLink, useNavigate } from "react-router-dom"; import { User } from "../models"; import { getAllSongbooks } from "../services/songs"; import UserProfile from "./AvatarProfileLink"; @@ -29,9 +42,49 @@ export default function WelcomePage({ asyncUser }: WelcomePageProps) { return ( <> + + } + variant="outline" + m=".5rem" + /> + + + + Join a Sing-Along + + + setSessionKey(e.target.value.toUpperCase())} + > + + + + + }> + My Songbooks + + + + }>My Sing-Alongs + + + + livepowerhour.com - - Join a Sing-Along - - setSessionKey(e.target.value.toUpperCase())} - > - - - {activeSingalongs && activeSingalongs.map((songbook) => ( + + + } + variant="outline" + m=".5rem" + /> + + + + Join a Sing-Along + + + setSessionKey(e.target.value.toUpperCase())} + > + + - - - }> - My Songbooks - - - - }>My Sing-Alongs - - - - + + }>My Wishlist + + + }> + My Songbooks + + + + }>My Sing-Alongs + + + + + + livepowerhour.com + + {/* This is currently where the add to wishlist lives: */} - - - - livepowerhour.com - + + {activeSingalongs && activeSingalongs.map((songbook) => ( ))} - + ); From 49eed1083aa87a63a40ac0f8b74b1b765552ef11 Mon Sep 17 00:00:00 2001 From: Jack Conway Date: Mon, 12 Feb 2024 09:23:44 -0700 Subject: [PATCH 3/4] add a heading to each welcome page --- frontend/src/components/ViewAllSongbooks.tsx | 263 ++++++++++--------- frontend/src/components/WelcomePage.tsx | 19 +- frontend/src/components/WishlistForm.tsx | 2 +- 3 files changed, 144 insertions(+), 140 deletions(-) diff --git a/frontend/src/components/ViewAllSongbooks.tsx b/frontend/src/components/ViewAllSongbooks.tsx index 58ed479..6a30907 100644 --- a/frontend/src/components/ViewAllSongbooks.tsx +++ b/frontend/src/components/ViewAllSongbooks.tsx @@ -25,7 +25,6 @@ interface ViewAllSongbooksProps { is_noodle: boolean; } const ViewAllSongbooks = ({ is_noodle }: ViewAllSongbooksProps) => { - // const is_noodle = useParams()["is_noodle"] === "true"; dayjs.extend(relativeTime); const { isOpen, onOpen, onClose } = useDisclosure(); const asyncSongbooks = useAsync(async () => getAllSongbooks(), []); @@ -39,143 +38,153 @@ const ViewAllSongbooks = ({ is_noodle }: ViewAllSongbooksProps) => { const renderSongbooks = (is_noodle) => { if (!songbooks) { return ( - - - - - + <> + + {is_noodle ? "My Songbooks" : "My Sing-Alongs"} + + + + + + + ); } else { return ( - - + + {is_noodle ? "My Songbooks" : "My Sing-Alongs"} + + - - - + - - {is_noodle ? ( - - ) : ( - - )} - - - {songbooks - ?.filter((songbook) => songbook.is_noodle_mode === is_noodle) - .map((songbook, idx) => { - return ( - { - navigate(`/live/${songbook.session_key}/`); - }} - cursor="pointer" - > - + + + + + + {is_noodle ? ( + + ) : ( + + )} + + + {songbooks + ?.filter((songbook) => songbook.is_noodle_mode === is_noodle) + .map((songbook, idx) => { + return ( + { + navigate(`/live/${songbook.session_key}/`); + }} + cursor="pointer" > - {songbook.is_noodle_mode ? ( - <> - + + {songbook.is_noodle_mode ? ( + <> + + + + + + + ) : ( + - + - - ) : ( - - - - - - )} - - - {songbook.session_key.split("").map((char, keyIdx) => ( - {char} - ))} - - 20 ? "sm" : "md"} - textAlign="center" - mb="1rem" - > - {songbook.title} - - {songbook.is_songbook_owner && ( - - {songbook.membership_set?.length && - songbook.membership_set.map((member) => { - return ( - - ); - })} - - )} - - - {songbook.total_songs === 0 && <>no songs yet} - {songbook.total_songs === 1 && <>1 song} - {songbook.total_songs > 1 && ( - <>{songbook.total_songs} songs )} - - - {songbook.is_noodle_mode ? ( - - - last updated {dayjs(songbook.updated_at).fromNow()} - - - ) : ( - + + {songbook.session_key.split("").map((char, keyIdx) => ( + {char} + ))} + + 20 ? "sm" : "md"} + textAlign="center" + mb="1rem" + > + {songbook.title} + + {songbook.is_songbook_owner && ( + - - created {dayjs(songbook.created_at).fromNow()} - - + {songbook.membership_set?.length && + songbook.membership_set.map((member) => { + return ( + + ); + })} + )} - - - ); - })} - + + + {songbook.total_songs === 0 && <>no songs yet} + {songbook.total_songs === 1 && <>1 song} + {songbook.total_songs > 1 && ( + <>{songbook.total_songs} songs + )} + + + {songbook.is_noodle_mode ? ( + + + last updated {dayjs(songbook.updated_at).fromNow()} + + + ) : ( + + + created {dayjs(songbook.created_at).fromNow()} + + + )} + + + ); + })} + + ); } }; diff --git a/frontend/src/components/WelcomePage.tsx b/frontend/src/components/WelcomePage.tsx index 1540b56..c52f3a6 100644 --- a/frontend/src/components/WelcomePage.tsx +++ b/frontend/src/components/WelcomePage.tsx @@ -92,25 +92,19 @@ export default function WelcomePage({ - + livepowerhour.com - {/* This is currently where the add to wishlist lives: */} - - {activeSingalongs && - activeSingalongs.map((songbook) => ( + {activeSingalongs && ( + + {activeSingalongs.map((songbook) => ( ))} - + + )} diff --git a/frontend/src/components/WishlistForm.tsx b/frontend/src/components/WishlistForm.tsx index 7424cd1..a70886f 100644 --- a/frontend/src/components/WishlistForm.tsx +++ b/frontend/src/components/WishlistForm.tsx @@ -30,7 +30,7 @@ const WishlistForm = () => { return ( - + Add to Wishlist: Date: Tue, 13 Feb 2024 09:59:14 -0700 Subject: [PATCH 4/4] adjust index route --- frontend/src/App.tsx | 2 +- frontend/src/components/WelcomePage.tsx | 7 ++++++- frontend/src/components/WishlistForm.tsx | 6 +++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0a15af0..0f774c7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -26,7 +26,7 @@ function App() { path="/live/" element={} > - } /> + } /> } diff --git a/frontend/src/components/WelcomePage.tsx b/frontend/src/components/WelcomePage.tsx index c52f3a6..0de106f 100644 --- a/frontend/src/components/WelcomePage.tsx +++ b/frontend/src/components/WelcomePage.tsx @@ -92,7 +92,12 @@ export default function WelcomePage({ - + livepowerhour.com diff --git a/frontend/src/components/WishlistForm.tsx b/frontend/src/components/WishlistForm.tsx index a70886f..df73b21 100644 --- a/frontend/src/components/WishlistForm.tsx +++ b/frontend/src/components/WishlistForm.tsx @@ -29,9 +29,9 @@ const WishlistForm = () => { return ( - + - Add to Wishlist: + Add to My Wishlist: { {asyncWishlist && asyncWishlist.result && asyncWishlist?.result?.data?.results?.length > 0 - ? `Wishlist Songs:` + ? `My Wishlist Songs:` : `No Wishlist Songs`} {asyncWishlist && asyncWishlist?.result?.data?.results ? (