feat: posts can be hidden. closes #10

funmusicplace · Apr 20, 2023 · c587de1 · c587de1
1 parent 97ce65f
commit c587de1
Show file tree

Hide file tree

Showing 21 changed files with 266 additions and 89 deletions.
diff --git a/client/package.json b/client/package.json
@@ -8,7 +8,6 @@
     "@emotion/styled": "^11.10.5",
     "@gumlet/react-hls-player": "^1.0.1",
     "@paypal/react-paypal-js": "^7.8.2",
-    "@remark-embedder/core": "^3.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -19,7 +18,9 @@
     "@types/react-dom": "^18.0.9",
     "b64-to-blob": "^1.2.19",
     "file-saver": "^2.0.5",
+    "hast-util-from-parse5": "^7.1.2",
     "lodash": "^4.17.21",
+    "parse5": "^7.1.2",
     "react": "^18.2.0",
     "react-currency-input-field": "^3.6.10",
     "react-dom": "^18.2.0",
@@ -31,6 +32,7 @@
     "react-scripts": "5.0.1",
     "remark-gfm": "^3.0.1",
     "typescript": "^4.9.4",
+    "unist-util-visit": "^4.1.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -3,7 +3,6 @@ import LoadingSpinner from "components/common/LoadingSpinner";
 import Snackbar from "components/common/Snackbar";
 import Player from "components/Player";
 import React, { useContext, useState } from "react";
-import { Helmet } from "react-helmet";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import api from "services/api";
 import { useGlobalStateContext } from "state/GlobalState";
@@ -145,14 +144,14 @@ function App() {
             type: "setLoggedInUser",
             user: undefined,
           });
-          if (
-            !(
-              location.pathname.includes("login") ||
-              location.pathname.includes("signup")
-            )
-          ) {
-            navigate("/login");
-          }
+          // if (
+          //   !(
+          //     location.pathname.includes("login") ||
+          //     location.pathname.includes("signup")
+          //   )
+          // ) {
+          //   navigate("/login");
+          // }
         }
       }
     };

diff --git a/client/src/components/Artist/ArtistAlbums.tsx b/client/src/components/Artist/ArtistAlbums.tsx
@@ -10,7 +10,11 @@ const ArtistAlbums: React.FC<{ artist: Artist }> = ({ artist }) => {
     <div style={{ marginTop: "1rem" }}>
       <h2>Releases</h2>
       {artist.trackGroups?.map((trackGroup) => (
-        <ArtistTrackGroup trackGroup={trackGroup} artist={artist} />
+        <ArtistTrackGroup
+          key={trackGroup.id}
+          trackGroup={trackGroup}
+          artist={artist}
+        />
       ))}
     </div>
   );

diff --git a/client/src/components/Artist/ArtistSupport.tsx b/client/src/components/Artist/ArtistSupport.tsx
@@ -21,17 +21,19 @@ const ArtistSupport: React.FC<{ artist: Artist }> = ({ artist }) => {
 
   const checkForSubscription = React.useCallback(async () => {
     try {
-      const { results: subscriptions } =
-        await api.getMany<ArtistUserSubscription>(
-          `users/${userId}/subscriptions?artistId=${artist.id}`
+      if (userId) {
+        const { results: subscriptions } =
+          await api.getMany<ArtistUserSubscription>(
+            `users/${userId}/subscriptions?artistId=${artist.id}`
+          );
+        const subscriptionIds = subscriptions.map(
+          (s) => s.artistSubscriptionTierId
         );
-      const subscriptionIds = subscriptions.map(
-        (s) => s.artistSubscriptionTierId
-      );
-      const hasId = artist.subscriptionTiers.find((tier) =>
-        subscriptionIds.includes(tier.id)
-      );
-      setIsSubscribed(!!hasId);
+        const hasId = artist.subscriptionTiers.find((tier) =>
+          subscriptionIds.includes(tier.id)
+        );
+        setIsSubscribed(!!hasId);
+      }
     } catch (e) {
       console.error(e);
     }

diff --git a/client/src/components/Artist/ArtistTrackGroup.tsx b/client/src/components/Artist/ArtistTrackGroup.tsx
@@ -3,7 +3,7 @@ import Button from "components/common/Button";
 import Modal from "components/common/Modal";
 import Money from "components/common/Money";
 import React from "react";
-import { FaArrowDown, FaCheckCircle } from "react-icons/fa";
+import { FaArrowDown } from "react-icons/fa";
 import api from "services/api";
 import { useGlobalStateContext } from "state/GlobalState";
 import { useSnackbar } from "state/SnackbarContext";
@@ -25,11 +25,14 @@ const ArtistTrackGroup: React.FC<{
 
   const checkForAlbumOwnership = React.useCallback(async () => {
     try {
-      const { results: purchases } = await api.getMany<UserTrackGroupPurchase>(
-        `users/${userId}/purchases?trackGroupId=${trackGroup.id}`
-      );
+      if (userId) {
+        const { results: purchases } =
+          await api.getMany<UserTrackGroupPurchase>(
+            `users/${userId}/purchases?trackGroupId=${trackGroup.id}`
+          );
 
-      setIsOwned(purchases.length > 0);
+        setIsOwned(purchases.length > 0);
+      }
     } catch (e) {
       console.error(e);
     }

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -147,14 +147,22 @@ const Header = () => {
           </menu>
         </div>
       )}
-      <IconButton
-        variant="outlined"
-        onClick={() => {
-          setIsMenuOpen(true);
-        }}
+      <div
+        className={css`
+          display: flex;
+          align-items: center;
+        `}
       >
-        <ImMenu color={theme.colors.text} />
-      </IconButton>
+        <Link to="/profile">{state.user?.name}</Link>
+        <IconButton
+          variant="outlined"
+          onClick={() => {
+            setIsMenuOpen(true);
+          }}
+        >
+          <ImMenu color={theme.colors.text} />
+        </IconButton>
+      </div>
     </header>
   );
 };

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
@@ -2,29 +2,24 @@ import { css } from "@emotion/css";
 import React from "react";
 import { Link } from "react-router-dom";
 import api from "../services/api";
-import { useGlobalStateContext } from "../state/GlobalState";
 import Box from "./common/Box";
 import PostContent from "./common/PostContent";
 
 function Home() {
-  const {
-    state: { user },
-  } = useGlobalStateContext();
   const [posts, setPosts] = React.useState<Post[]>([]);
 
   const fetchPosts = React.useCallback(async () => {
     const fetched = await api.getMany<Post>("posts");
-    setPosts(fetched.results);
+    setPosts(
+      // FIXME: Maybe this should be managed by a filter on the API?
+      fetched.results.filter((p) => !(p.forSubscribersOnly && p.content === ""))
+    );
   }, []);
 
   React.useEffect(() => {
     fetchPosts();
   }, [fetchPosts]);
 
-  if (!user) {
-    return null;
-  }
-
   return (
     <div>
       {posts.map((p) => (

diff --git a/client/src/components/ManageArtist/PostForm.tsx b/client/src/components/ManageArtist/PostForm.tsx
@@ -10,6 +10,7 @@ import { pick } from "lodash";
 import LoadingSpinner from "components/common/LoadingSpinner";
 import api from "../../services/api";
 import { useGlobalStateContext } from "state/GlobalState";
+import { css } from "@emotion/css";
 
 const PostForm: React.FC<{
   existing?: Post;
@@ -32,6 +33,7 @@ const PostForm: React.FC<{
     title: string;
     publishedAt: string;
     content: string;
+    forSubscribersOnly: boolean;
   }>({
     defaultValues: existing
       ? { ...existing, publishedAt: publishedAt.toISOString().slice(0, 16) }
@@ -51,16 +53,22 @@ const PostForm: React.FC<{
           if (existingId) {
             // const timezoneOffset =
             await api.put(`users/${userId}/posts/${existingId}`, {
-              ...pick(data, ["title", "content"]),
+              ...pick(data, ["title", "content", "forSubscribersOnly"]),
               publishedAt: new Date(data.publishedAt + ":00").toISOString(),
               artistId: artist.id,
             });
           } else {
             await api.post<
-              { title?: string; artistId: number; cover?: File[] },
+              {
+                title?: string;
+                artistId: number;
+                cover?: File[];
+                publishedAt: string;
+              },
               { id: number }
             >(`users/${userId}/posts`, {
-              ...pick(data, ["title", "content", "publishedAt"]),
+              ...pick(data, ["title", "content", "forSubscribersOnly"]),
+              publishedAt: new Date(data.publishedAt + ":00").toISOString(),
               artistId: artist.id,
             });
           }
@@ -98,6 +106,22 @@ const PostForm: React.FC<{
       <FormComponent>
         Content: <TextArea {...register("content")} rows={10} />
       </FormComponent>
+      <FormComponent
+        className={css`
+          margin-top: 0.5rem;
+          display: flex;
+        `}
+      >
+        <input
+          id="private"
+          type="checkbox"
+          {...register("forSubscribersOnly")}
+        />{" "}
+        <label htmlFor="private">
+          For subscribers only?
+          <small>Is this post for subscribers only?</small>
+        </label>
+      </FormComponent>
       <Button
         type="submit"
         disabled={isSaving}

diff --git a/client/src/components/Widget/TrackGroupWidget.tsx b/client/src/components/Widget/TrackGroupWidget.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { useLocation, useParams } from "react-router-dom";
+
+const TrackGroupWidget = () => {
+  const params = useParams();
+  const loc = useLocation();
+  console.log("loc", loc, params);
+  return <>Track Group</>;
+};
+
+export default TrackGroupWidget;
diff --git a/client/src/components/Widget/TrackWidget.tsx b/client/src/components/Widget/TrackWidget.tsx
@@ -0,0 +1,70 @@
+import { css } from "@emotion/css";
+import { AudioWrapper } from "components/AudioWrapper";
+import ClickToPlay from "components/common/ClickToPlay";
+import SmallTileDetails from "components/common/SmallTileDetails";
+import React from "react";
+import { useParams } from "react-router-dom";
+import api from "services/api";
+
+const TrackWidget = () => {
+  const params = useParams();
+  const [track, setTrack] = React.useState<Track>();
+
+  React.useEffect(() => {
+    const callback = async () => {
+      try {
+        const results = await api.get<Track>(`tracks/${params.id}`);
+        setTrack(results.result);
+      } catch (e) {
+        console.error("e", e);
+      }
+    };
+
+    callback();
+  }, [params.id]);
+  return (
+    <>
+      {track && (
+        <div
+          className={css`
+            display: flex;
+            padding: 1rem;
+            background: white;
+            border-radius: 1rem;
+          `}
+        >
+          {track.isPreview && (
+            <ClickToPlay
+              trackId={track.id}
+              title={track.title}
+              image={{
+                width: 120,
+                height: 120,
+                url: track.trackGroup.cover?.sizes?.[120] ?? "",
+              }}
+            />
+          )}
+
+          <SmallTileDetails
+            title={track.title}
+            subtitle={track.trackGroup.title}
+            footer={track.trackGroup.artist.name}
+          />
+          <div
+            className={css`
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              flex-grow: 1;
+            `}
+          >
+            <AudioWrapper currentTrack={track} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TrackWidget;
diff --git a/client/src/components/common/PostContent.tsx b/client/src/components/common/PostContent.tsx
@@ -37,14 +37,15 @@ const BlackbirdTransformer = {
   // We want to probably differentiate these from widgets in an
   // iframe and widgets happening inside our own blog posts
   getHTML(url: string) {
-    console.log("transforming");
     const iframeUrl = url.replace("/s/", "/embed/");
 
     return `<iframe src="${iframeUrl}" style="width:100%; height:160px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>`;
   },
 };
 
-const PostContent: React.FC<{ content: string }> = ({ content }) => {
+const PostContent: React.FC<{
+  content: string;
+}> = ({ content }) => {
   return (
     <PostContentWrapper>
       <ReactMarkdown

diff --git a/client/src/components/common/TrackRow.tsx b/client/src/components/common/TrackRow.tsx
@@ -1,7 +1,6 @@
 import { css } from "@emotion/css";
 import React from "react";
 import { FaPause, FaPen, FaPlay, FaSave, FaTrash } from "react-icons/fa";
-import { Link } from "react-router-dom";
 import { useGlobalStateContext } from "state/GlobalState";
 import useDraggableTrack from "utils/useDraggableTrack";
 

diff --git a/client/src/types/index.d.ts b/client/src/types/index.d.ts
@@ -47,6 +47,7 @@ interface Post {
   content: string;
   publishedAt: string;
   artist: Artist;
+  forSubscribersOnly: boolean;
 }
 
 interface Artist {