From b646ddfd2bf08fca65180aac273e6b53f9c28d08 Mon Sep 17 00:00:00 2001
From: Simon <contact@vansintjan.net>
Date: Tue, 7 Jun 2022 18:29:52 -0400
Subject: [PATCH] feat: wip on adding cover editing to playlists

to do with #98
---
 src/assets/playlist-cover.png           | Bin 0 -> 13630 bytes
 src/components/AddPlaylist.tsx          |   2 +-
 src/components/PlaylistTitleEditing.tsx | 129 +++++++++++++++++-------
 src/services/Api.ts                     |  17 ++++
 4 files changed, 110 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/playlist-cover.png

diff --git a/src/assets/playlist-cover.png b/src/assets/playlist-cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..1467aed4e4e44f9090c4fbf8e1aaa04f46f94807
GIT binary patch
literal 13630
zcmeI2F-yZx6opS?D4{fBp@Rs8R~-Baf-Y%^)GS3xXRYAkCI}+5U=;@i35biLlOUZG
zSGR0k9qr`OMT|~P;^2K37k_}1$|;2Vc%&I_&OP6~j~uVmYkqDf2f&Y(!v>HI?B!);
zr<{*_65Q=-)b!-n@ivYCgD9*tcdybx#ZL^9;CwB-KDjXE&G+KR^Fx1OLjEJS4cjGM
zVCypD=xR7^GzKv@Y$BKs$^l?C&>d(7^g?<ey^xKORsqd`W<WEb8PE(kB=XF_Rsn}Z
z4v8WIHb#mBR>NOb!&f@k&r6;Yv-jHW+?*n#N#AijjrX&G#%}576gTyzbfZ=4YQ&=B
z>f)(jG$t`0!CZj409Ydc{Q~q(fE)qHRIoV!#;`efL~kA_zSwU8w8<mcNH!4y$wsnS
zKOosiHj%*?lFh1@bDHFUa~f$TGT@vxLYf6{zs_O{@;*2)5i24Co~Dx0RtBUrDJ?P}
hrAJ6<TZhE*zs9n&IyZT{et7n2-*vQ95AUk2gKw1e-R%GX

literal 0
HcmV?d00001

diff --git a/src/components/AddPlaylist.tsx b/src/components/AddPlaylist.tsx
index f7d1983..57b5271 100644
--- a/src/components/AddPlaylist.tsx
+++ b/src/components/AddPlaylist.tsx
@@ -25,7 +25,7 @@ export const AddPlaylist: React.FC<{ refresh: (id: string) => void }> = ({
       const trackgroup = await createTrackGroup({
         // FIXME: the POST trackgroup API endpoint requires a cover id,
         // which doesn't really make sense in this flow.
-        cover: "4903e433-f429-4ad1-9ab2-5ba962acbbd1",
+        cover: "ba6c693f-e2c8-44f8-8d1b-742c81a1c551",
         title: newPlaylistName,
         type: "playlist",
       });
diff --git a/src/components/PlaylistTitleEditing.tsx b/src/components/PlaylistTitleEditing.tsx
index 0f7d319..50296ca 100644
--- a/src/components/PlaylistTitleEditing.tsx
+++ b/src/components/PlaylistTitleEditing.tsx
@@ -2,13 +2,17 @@ import { css } from "@emotion/css";
 import React from "react";
 import { FaTrash } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
-import { deleteUserTrackGroup, updateTrackGroup } from "../services/Api";
+import {
+  deleteUserTrackGroup,
+  updateTrackGroup,
+  uploadTrackGroupCover,
+} from "../services/Api";
 import Button from "./common/Button";
 import Input from "./common/Input";
 import TextArea from "./common/TextArea";
 
 const PlaylistTitleEditing: React.FC<{
-  playlist: Trackgroup;
+  playlist: Release;
   onDone: (update?: boolean) => void;
 }> = ({ playlist, onDone }) => {
   const navigate = useNavigate();
@@ -39,6 +43,10 @@ const PlaylistTitleEditing: React.FC<{
     [playlist, playlistTitle, onDone, isPrivate, about]
   );
 
+  const replaceImage = React.useCallback(async (e) => {
+    await uploadTrackGroupCover(e.target.files[0]);
+  }, []);
+
   const onDelete = React.useCallback(async () => {
     await deleteUserTrackGroup(playlist.id);
     navigate("/library");
@@ -52,55 +60,102 @@ const PlaylistTitleEditing: React.FC<{
     <div
       className={css`
         display: flex;
-        flex-direction: column;
         margin-bottom: 1rem;
       `}
     >
       <div
         className={css`
-          display: flex;
-          align-items: center;
-          margin-bottom: 1rem;
-
-          > input:not([type="checkbox"]) {
-            margin-bottom: 0;
-            margin-right: 1rem;
-          }
-
-          > div {
-            padding: 0.5rem 1rem;
-            min-width: 140px;
-            text-align: right;
-          }
+          position: relative;
         `}
       >
-        <Input value={playlistTitle} onChange={onChangeTitle} name="title" />
-        <div>
-          <label>is private? </label>
-          <input type="checkbox" checked={isPrivate} onChange={togglePrivate} />
-        </div>
+        <img src={playlist.cover} alt="Cover" width="300" />
+        <label
+          htmlFor="uploadCoverImage"
+          className={css`
+            position: absolute;
+            left: 0;
+            height: 100%;
+            cursor: pointer;
+            width: 100%;
+            text-align: center;
+            padding-top: 48%;
+            transition: 0.25s;
+            &:hover {
+              background-color: rgba(0, 0, 0, 0.4);
+              color: white;
+            }
+          `}
+        >
+          Replace
+        </label>
+        <input
+          type="file"
+          id="uploadCoverImage"
+          accept="image/png, image/jpeg"
+          onChange={replaceImage}
+          className={css`
+            display: none;
+          `}
+        />
       </div>
-      <TextArea
-        value={about}
-        className={css`
-          margin-bottom: 1rem;
-        `}
-        onChange={onChangeAbout}
-      ></TextArea>
       <div
         className={css`
+          padding-left: 1rem;
           display: flex;
-          justify-content: flex-end;
+          flex-grow: 1;
+          flex-direction: column;
         `}
       >
-        <Button onClick={() => onDone()} variant="outlined">
-          Cancel changes
-        </Button>
-        <Button onClick={onDelete} startIcon={<FaTrash />} variant="outlined">
-          Delete
-        </Button>
+        <div
+          className={css`
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
+
+            > input:not([type="checkbox"]) {
+              margin-bottom: 0;
+              margin-right: 1rem;
+            }
 
-        <Button onClick={onSave}>Save</Button>
+            > div {
+              padding: 0.5rem 1rem;
+              min-width: 140px;
+              text-align: right;
+            }
+          `}
+        >
+          <Input value={playlistTitle} onChange={onChangeTitle} name="title" />
+          <div>
+            <label>is private? </label>
+            <input
+              type="checkbox"
+              checked={isPrivate}
+              onChange={togglePrivate}
+            />
+          </div>
+        </div>
+        <TextArea
+          value={about}
+          className={css`
+            margin-bottom: 1rem;
+          `}
+          onChange={onChangeAbout}
+        ></TextArea>
+        <div
+          className={css`
+            display: flex;
+            justify-content: flex-end;
+          `}
+        >
+          <Button onClick={() => onDone()} variant="outlined">
+            Cancel changes
+          </Button>
+          <Button onClick={onDelete} startIcon={<FaTrash />} variant="outlined">
+            Delete
+          </Button>
+
+          <Button onClick={onSave}>Save</Button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/services/Api.ts b/src/services/Api.ts
index 61bd21e..133a53d 100644
--- a/src/services/Api.ts
+++ b/src/services/Api.ts
@@ -218,6 +218,23 @@ export const deleteUserTrackGroup = async (id: string) => {
   });
 };
 
+export const uploadTrackGroupCover = async (file: File) => {
+  var data = new FormData();
+  const { token } = getToken();
+  data.append("file", file);
+  return fetch("https://dash.resonate.coop/api/user/upload", {
+    method: "POST",
+    body: data,
+    headers: {
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+  });
+};
+
+/**
+ * Misc user info
+ */
+
 export const fetchUserStats = async (
   from: string,
   to: string