diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 70de8ef..0f774c7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,13 +2,17 @@ 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"; +import WishlistForm from "./components/WishlistForm"; +import { getAllSongbooks, getUserDetails } from "./services/songs"; function App() { const asyncUser = useAsync(getUserDetails, [], { setLoading: (state) => ({ ...state, loading: true }), }); + const asyncSongbooks = useAsync(async () => getAllSongbooks(), []); + const songbooks = asyncSongbooks.result?.data.results; return ( @@ -18,7 +22,20 @@ function App() { element={} /> } /> - } /> + } + > + } /> + } + /> + } + /> + } /> diff --git a/frontend/src/components/SongbookIndexTable.tsx b/frontend/src/components/SongbookIndexTable.tsx deleted file mode 100644 index daf2f8b..0000000 --- a/frontend/src/components/SongbookIndexTable.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import { - Avatar, - AvatarGroup, - Card, - Flex, - Heading, - Kbd, - SimpleGrid, - Skeleton, - Tab, - TabList, - TabPanel, - TabPanels, - Tabs, - Text, - Tooltip, - useColorModeValue, - useDisclosure, -} from "@chakra-ui/react"; -import dayjs from "dayjs"; -import relativeTime from "dayjs/plugin/relativeTime"; -import { BsFillJournalBookmarkFill } from "react-icons/bs"; -import { RxLapTimer } from "react-icons/rx"; -import { useNavigate } from "react-router-dom"; -import CreateNewSongbook from "./CreateEditSongbook"; -import WishlistForm from "./WishlistForm"; - -export default function SongbookIndexTable({ songbooks }) { - const navigate = useNavigate(); - dayjs.extend(relativeTime); - const { isOpen, onOpen, onClose } = useDisclosure(); - const avatarBackgroundStyle = { - color: useColorModeValue("white", "black"), - bg: useColorModeValue("teal.500", "cyan.300"), - }; - - const renderSongbooks = (displayNoodle) => { - if (!songbooks) { - return ( - - - - - - ); - } else { - return ( - - - + - - {songbooks - ?.filter((songbook) => songbook.is_noodle_mode === displayNoodle) - .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 ( - - - - - Wishlist - Songbooks - Sing-Alongs - - - - - - {renderSongbooks(true)} - {renderSongbooks(false)} - - - - ); -} diff --git a/frontend/src/components/ViewAllSongbooks.tsx b/frontend/src/components/ViewAllSongbooks.tsx new file mode 100644 index 0000000..6a30907 --- /dev/null +++ b/frontend/src/components/ViewAllSongbooks.tsx @@ -0,0 +1,206 @@ +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 } from "react-router-dom"; +import { getAllSongbooks } from "../services/songs"; +import CreateEditSongbook from "./CreateEditSongbook"; + +interface ViewAllSongbooksProps { + is_noodle: boolean; +} +const ViewAllSongbooks = ({ is_noodle }: ViewAllSongbooksProps) => { + 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 ( + <> + + {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" + > + + {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..0de106f 100644 --- a/frontend/src/components/WelcomePage.tsx +++ b/frontend/src/components/WelcomePage.tsx @@ -1,22 +1,36 @@ -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 { UseAsyncReturn } from "react-async-hook"; +import { BsFillJournalBookmarkFill } from "react-icons/bs"; +import { FaListUl } from "react-icons/fa"; +import { RxLapTimer } from "react-icons/rx"; +import { Outlet, Link as RouterLink, useNavigate } from "react-router-dom"; import { User } from "../models"; -import { getAllSongbooks } from "../services/songs"; import UserProfile from "./AvatarProfileLink"; -import SongbookIndexTable from "./SongbookIndexTable"; interface WelcomePageProps { asyncUser: UseAsyncReturn, never[]>; + songbooks; } -export default function WelcomePage({ asyncUser }: WelcomePageProps) { +export default function WelcomePage({ + songbooks, + asyncUser, +}: WelcomePageProps) { const [sessionKey, setSessionKey] = useState(""); - const asyncSongbooks = useAsync(async () => getAllSongbooks(), []); - const songbooks = asyncSongbooks.result?.data.results; const activeSingalongs = songbooks?.filter((songbook) => { const currentTime = new Date(Date.now()).getTime(); const songbookTime = new Date(songbook.created_at).getTime(); @@ -29,50 +43,85 @@ export default function WelcomePage({ asyncUser }: WelcomePageProps) { return ( <> - + + + } + variant="outline" + m=".5rem" + /> + + + + Join a Sing-Along + + + setSessionKey(e.target.value.toUpperCase())} + > + + + + + }>My Wishlist + + + }> + My Songbooks + + + + }>My Sing-Alongs + + + + + + livepowerhour.com + - - - - livepowerhour.com - - - Join a Sing-Along - - setSessionKey(e.target.value.toUpperCase())} - > - - - - {activeSingalongs && - activeSingalongs.map((songbook) => ( + + + {activeSingalongs && ( + + {activeSingalongs.map((songbook) => ( ))} - - + + )} + ); diff --git a/frontend/src/components/WishlistForm.tsx b/frontend/src/components/WishlistForm.tsx index 7424cd1..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 ? (