From f11f132039e4628b327cf955369c5637b42f744b Mon Sep 17 00:00:00 2001 From: anshg1214 Date: Mon, 9 Sep 2024 11:59:06 +0000 Subject: [PATCH] feat: Open CB Review Modal to review entity --- frontend/js/src/album/AlbumPage.tsx | 37 +++++++++++++++----- frontend/js/src/artist/ArtistPage.tsx | 33 ++++++++++++------ frontend/js/src/cb-review/CBReviewModal.tsx | 38 +++++++++++++++++++-- 3 files changed, 85 insertions(+), 23 deletions(-) diff --git a/frontend/js/src/album/AlbumPage.tsx b/frontend/js/src/album/AlbumPage.tsx index cf108c48ae..91e0a67b0d 100644 --- a/frontend/js/src/album/AlbumPage.tsx +++ b/frontend/js/src/album/AlbumPage.tsx @@ -12,6 +12,7 @@ import tinycolor from "tinycolor2"; import { Helmet } from "react-helmet"; import { useQuery } from "@tanstack/react-query"; import { Link, useLocation, useParams } from "react-router-dom"; +import NiceModal from "@ebay/nice-modal-react"; import { getRelIconLink, ListeningStats, @@ -29,6 +30,7 @@ import ListenCard from "../common/listens/ListenCard"; import OpenInMusicBrainzButton from "../components/OpenInMusicBrainz"; import { RouteQuery } from "../utils/Loader"; import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerContext"; +import CBReviewModal from "../cb-review/CBReviewModal"; // not the same format of tracks as what we get in the ArtistPage props type AlbumRecording = { @@ -62,6 +64,7 @@ export default function AlbumPage(): JSX.Element { const { APIService } = React.useContext(GlobalAppContext); const location = useLocation(); const params = useParams() as { albumMBID: string }; + const { albumMBID } = params; const { data } = useQuery( RouteQuery(["album", params], location.pathname) ); @@ -468,16 +471,32 @@ export default function AlbumPage(): JSX.Element { ) : ( - <> -

Be the first to review this album on CritiqueBrainz

- - Add my review - - +

Be the first to review this album on CritiqueBrainz

)} + diff --git a/frontend/js/src/artist/ArtistPage.tsx b/frontend/js/src/artist/ArtistPage.tsx index 9617250893..ccbff5ccf7 100644 --- a/frontend/js/src/artist/ArtistPage.tsx +++ b/frontend/js/src/artist/ArtistPage.tsx @@ -18,6 +18,7 @@ import { } from "react-router-dom"; import { Helmet } from "react-helmet"; import { useQuery } from "@tanstack/react-query"; +import NiceModal from "@ebay/nice-modal-react"; import GlobalAppContext from "../utils/GlobalAppContext"; import { getReviewEventContent } from "../utils/utils"; import TagsComponent from "../tags/TagsComponent"; @@ -37,6 +38,7 @@ import ReleaseCard from "../explore/fresh-releases/components/ReleaseCard"; import { RouteQuery } from "../utils/Loader"; import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerContext"; import SimilarArtistComponent from "../explore/music-neighborhood/components/SimilarArtist"; +import CBReviewModal from "../cb-review/CBReviewModal"; export type ArtistPageProps = { popularRecordings: PopularRecording[]; @@ -454,18 +456,27 @@ export default function ArtistPage(): JSX.Element { ) : ( - <> -

Be the first to review this artist on CritiqueBrainz

- - Add my review - - +

Be the first to review this artist on CritiqueBrainz

)} + ); diff --git a/frontend/js/src/cb-review/CBReviewModal.tsx b/frontend/js/src/cb-review/CBReviewModal.tsx index 2846c51461..c408be71a7 100644 --- a/frontend/js/src/cb-review/CBReviewModal.tsx +++ b/frontend/js/src/cb-review/CBReviewModal.tsx @@ -26,7 +26,8 @@ import Loader from "../components/Loader"; import { ToastMsg } from "../notifications/Notifications"; export type CBReviewModalProps = { - listen: Listen; + listen?: Listen; + entityToReview?: ReviewableEntity[]; }; iso.registerLocale(eng); // library requires language of the language list to be initiated @@ -39,13 +40,15 @@ const MBBaseUrl = "https://metabrainz.org"; // only used for href // gets all iso-639-1 languages and codes for dropdown const allLanguagesKeyValue = Object.entries(iso.getNames("en")); -export default NiceModal.create(({ listen }: CBReviewModalProps) => { +export default NiceModal.create((props: CBReviewModalProps) => { + const { listen, entityToReview: entityToReviewProps } = props; const modal = useModal(); const navigate = useNavigate(); const closeModal = React.useCallback(() => { modal.hide(); document?.body?.classList?.remove("modal-open"); + document?.body?.getElementsByClassName("modal-backdrop")[0]?.remove(); setTimeout(modal.remove, 200); }, [modal]); @@ -160,6 +163,9 @@ export default NiceModal.create(({ listen }: CBReviewModalProps) => { React.useEffect(() => { /* determine entity functions */ + if (!listen) { + return; + } const getAllEntities = async () => { if (!listen) { return; @@ -235,6 +241,32 @@ export default NiceModal.create(({ listen }: CBReviewModalProps) => { } }, [listen, getGroupMBIDFromRelease, getRecordingMBIDFromTrack, handleError]); + React.useEffect(() => { + if (!entityToReviewProps || !entityToReviewProps.length) { + return; + } + + const recordingEntityToSet = entityToReviewProps.find( + (entity) => entity.type === "recording" + ); + + const releaseGroupEntityToSet = entityToReviewProps.find( + (entity) => entity.type === "release_group" + ); + + const artistEntityToSet = entityToReviewProps.find( + (entity) => entity.type === "artist" + ); + + setRecordingEntity(recordingEntityToSet!); + setReleaseGroupEntity(releaseGroupEntityToSet!); + setArtistEntity(artistEntityToSet!); + + setEntityToReview( + recordingEntityToSet! || releaseGroupEntityToSet! || artistEntityToSet! + ); + }, [entityToReviewProps]); + /* input handling */ const handleLanguageChange = React.useCallback( (event: React.ChangeEvent) => { @@ -433,7 +465,7 @@ export default NiceModal.create(({ listen }: CBReviewModalProps) => { return (
{/* Show warning when recordingEntity is not available */} - {!recordingEntity && ( + {!recordingEntity && listen && (
We could not find a recording for {getTrackName(listen)}.