feat: add featured image upload button

funmusicplace · Dec 12, 2024 · 7211672 · 7211672
1 parent a97716a
commit 7211672
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/client/src/components/ManageArtist/Posts/PostForm.tsx b/client/src/components/ManageArtist/Posts/PostForm.tsx
@@ -118,6 +118,7 @@ const PostForm: React.FC<{
 
           snackbar(t("postUpdated"), { type: "success" });
           reload(postId);
+          reloadImages();
           onClose?.();
         } catch (e) {
           errorHandler(e);
@@ -134,6 +135,7 @@ const PostForm: React.FC<{
     try {
       await api.put(`manage/posts/${existingId}/publish`, {});
       reload(existingId);
+      reloadImages();
     } catch (e) {
       console.error(e);
     }
@@ -185,13 +187,11 @@ const PostForm: React.FC<{
               );
             }}
           />
-          {images && images.length > 0 && (
-            <ImagesInPostManager
-              postId={post.id}
-              images={images}
-              reload={reloadImages}
-            />
-          )}
+          <ImagesInPostManager
+            postId={post.id}
+            images={images}
+            reload={reloadImages}
+          />
         </FormComponent>
         <FormComponent
           className={css`

diff --git a/client/src/components/Post/PostCard.tsx b/client/src/components/Post/PostCard.tsx
@@ -63,7 +63,6 @@ const PostCard: React.FC<{
     () => getHtmlExcerpt(post.content).slice(0, 8),
     [post.content]
   );
-  console.log("p", post);
 
   return (
     <PostContainer {...postContainerProps}>

diff --git a/client/src/components/common/TextEditor/ImagesInPostManager.tsx b/client/src/components/common/TextEditor/ImagesInPostManager.tsx
@@ -5,14 +5,16 @@ import { useTranslation } from "react-i18next";
 import { FaCheckCircle } from "react-icons/fa";
 import api from "services/api";
 import { InputEl } from "../Input";
+import { useSnackbar } from "state/SnackbarContext";
 
 const ImagesInPostManager: React.FC<{
-  images: PostImage[];
+  images?: PostImage[];
   reload: () => void;
   postId: number;
 }> = ({ postId, reload, images }) => {
   const { t } = useTranslation("translation", { keyPrefix: "postForm" });
   const [isSaving, setIsSaving] = React.useState(false);
+  const snackbar = useSnackbar();
 
   const markImageAsFeatured = React.useCallback(
     async (imageId: string) => {
@@ -31,12 +33,14 @@ const ImagesInPostManager: React.FC<{
         const file = e.target.files?.[0];
         if (file) {
           const jobInfo = await api.uploadFile(
-            `${buildRootUrl(existing)}${imageType}`,
+            `manage/posts/${postId}/images`,
             [file]
           );
-          setUploadJobs([
-            { jobId: jobInfo.result.jobId, jobStatus: "waiting" },
-          ]);
+          const splitUrl = jobInfo.result.jobId.split("/");
+          const imgName = splitUrl[splitUrl.length - 1].split(".");
+          const imageId = imgName[0];
+
+          markImageAsFeatured(imageId);
         }
       } catch (e) {
         snackbar("Something went wrong", { type: "warning" });
@@ -70,8 +74,9 @@ const ImagesInPostManager: React.FC<{
             className={css`
               display: inline-block;
               position: relative;
-              margin: 0.2rem;
+              margin: 0 0.2rem;
               cursor: pointer;
+              height: 100%;
             `}
             key={image.id}
             onClick={() => markImageAsFeatured(image.id)}
@@ -108,6 +113,7 @@ const ImagesInPostManager: React.FC<{
         <div
           className={css`
             display: inline-block;
+            height: 100px;
           `}
         >
           <label htmlFor={`featuredImage`}>
@@ -122,6 +128,7 @@ const ImagesInPostManager: React.FC<{
             id={`featuredImage`}
             accept="image/*"
             onChange={callback}
+            style={{ display: "none" }}
           />
         </div>
       </div>

diff --git a/src/auth/passport.ts b/src/auth/passport.ts
@@ -13,7 +13,6 @@ import {
   doesMerchPurchaseBelongToUser,
   doesTrackGroupBelongToUser,
 } from "../utils/ownership";
-import { doesPostBelongToUser } from "../utils/post";
 
 const JWTStrategy = passportJWT.Strategy;