feat: Open CB Review Modal to review entity

metabrainz · Sep 9, 2024 · f11f132 · f11f132
1 parent f1f8002
commit f11f132
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 23 deletions.
diff --git 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<AlbumPageProps>(
     RouteQuery(["album", params], location.pathname)
   );
@@ -468,16 +471,32 @@ export default function AlbumPage(): JSX.Element {
               </a>
             </>
           ) : (
-            <>
-              <p>Be the first to review this album on CritiqueBrainz</p>
-              <a
-                href={`https://critiquebrainz.org/review/write/release_group/${release_group_mbid}`}
-                className="btn btn-outline"
-              >
-                Add my review
-              </a>
-            </>
+            <p>Be the first to review this album on CritiqueBrainz</p>
           )}
+          <button
+            type="button"
+            className="btn btn-info"
+            data-toggle="modal"
+            data-target="#CBReviewModal"
+            onClick={() => {
+              NiceModal.show(CBReviewModal, {
+                entityToReview: [
+                  {
+                    type: "release_group",
+                    mbid: albumMBID,
+                    name: album.name,
+                  },
+                  {
+                    type: "artist",
+                    mbid: artist.artists[0].artist_mbid,
+                    name: artist.artists[0].name,
+                  },
+                ],
+              });
+            }}
+          >
+            Add my review
+          </button>
         </div>
       </div>
     </div>

diff --git 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 {
             </a>
           </>
         ) : (
-          <>
-            <p>Be the first to review this artist on CritiqueBrainz</p>
-            <a
-              href={`https://critiquebrainz.org/review/write/artist/${artist?.artist_mbid}`}
-              className="btn btn-outline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Add my review
-            </a>
-          </>
+          <p>Be the first to review this artist on CritiqueBrainz</p>
         )}
+        <button
+          type="button"
+          className="btn btn-info"
+          data-toggle="modal"
+          data-target="#CBReviewModal"
+          onClick={() => {
+            NiceModal.show(CBReviewModal, {
+              entityToReview: [
+                {
+                  type: "artist",
+                  mbid: artistMBID,
+                  name: artist?.name,
+                },
+              ],
+            });
+          }}
+        >
+          Add my review
+        </button>
       </div>
     </div>
   );

diff --git 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<HTMLSelectElement>) => {
@@ -433,7 +465,7 @@ export default NiceModal.create(({ listen }: CBReviewModalProps) => {
     return (
       <div>
         {/* Show warning when recordingEntity is not available */}
-        {!recordingEntity && (
+        {!recordingEntity && listen && (
           <div className="alert alert-danger">
             We could not find a recording for <b>{getTrackName(listen)}</b>.
           </div>