Skip to content

Commit

Permalink
playlist name modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@jopedroliveira
jopedroliveira committed Jun 21, 2023
1 parent 89824b1 commit 46e9380
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 72 deletions.
163 changes: 91 additions & 72 deletions src/components/elements/FileManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import UploadToIPFS from "./UploadToIPFS";
import { useSignMessage } from "wagmi";
import { Polybase } from "@polybase/client";
import { Icon } from "@iconify/react";
import Modal from "./Modal";

interface Props {
publicKey: `0x${string}`;
Expand All @@ -29,6 +30,10 @@ const FileManager = ({ publicKey }: Props) => {
const sign = useSignMessage();

const [songs, setSongs] = useState<Song[]>([]);
const [modalIsOpen, setModalIsOpen] = useState<boolean>(true);
const [playlistName, setPlaylistName] = useState<string>(
"My Amazing Playlist"
);

const songsCollection = db.collection<Song>("Song");

Expand Down Expand Up @@ -58,7 +63,8 @@ const FileManager = ({ publicKey }: Props) => {
setSongs(newSongs);
};

const handleAddToPlaylist = async () => {
const handleCreatePlaylist = async () => {
setModalIsOpen(false);
db.signer(async (data) => {
return {
h: "eth-personal-sign",
Expand All @@ -74,92 +80,105 @@ const FileManager = ({ publicKey }: Props) => {

await db
.collection("Playlist")
.record("My Amazing Playlist")
.record(playlistName)
.call("setSongs", [songIds]);

setPlaylistName("");
};

return (
<div className="m-1 h-full">
<div className="flex flex-row place-content-between items-center group py-2">
<h1 className="text-white text-2xl mb-5">Files</h1>
<Button
type="button"
disabled={songs.length === 0}
handleClick={() => {
void handleAddToPlaylist();
}}
>
<span className="text-slate-900">Create playlist</span>
</Button>
</div>

<div className="grid grid-cols-3 gap-4 w-full">
<div className="col-span-1"></div>
<div className="col-span-2">
<div className="flex m-1 px-6 items-center ">
{songs.length > 0 && (
<>
<input
id=""
type="checkbox"
value=""
className="w-4 h-4focus:ring-2 accent-transparent"
onChange={handleSelectAllCheckboxChange}
/>
<label
htmlFor="vue-checkbox"
className="w-full py-3 ml-2 text-sm font-light text-gray-100"
>
Select all
</label>
</>
)}
</div>
<>
<Modal
modalIsOpen={modalIsOpen}
setPlaylistName={setPlaylistName}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
commitPlaylist={handleCreatePlaylist}
closeModal={() => {
setModalIsOpen(false);
}}
/>
<div className="m-1 h-full">
<div className="flex flex-row place-content-between items-center group py-2">
<h1 className="text-white text-2xl mb-5">Files</h1>
<Button
type="button"
disabled={songs.length === 0}
handleClick={() => {
setModalIsOpen(true);
}}
>
<span className="text-slate-900">Create playlist</span>
</Button>
</div>
</div>
<div className="grid grid-cols-3 gap-4 w-full h-[70%]">
<UploadToIPFS publicKey={publicKey} />

<div className="col-span-2 rounded-md border border-[#424242] overflow-y overflow-y-auto">
{songs.length === 0 && (
<div className="flex flex-col items-center justify-center pt-5 pb-6 h-full">
<Icon
icon="pixelarticons:mood-sad"
className="w-8 h-8 text-white m-6"
/>
<p className="mb-2 text-sm text-gray-100 text-center w-[70%]">
Ops, it looks like you don’t have any files yet. Upload files to
get started.
</p>
</div>
)}
<div>
<ul className="w-full h-full">
{songs.map((song) => (
<li
key={song.id}
className="w-full flex items-center py-3 hover:bg-[#424242] hover:bg-opacity-50 cursor-pointer pl-7"
>

<div className="grid grid-cols-3 gap-4 w-full">
<div className="col-span-1"></div>
<div className="col-span-2">
<div className="flex m-1 px-6 items-center ">
{songs.length > 0 && (
<>
<input
id={song.id}
id="select-all"
type="checkbox"
checked={song.checked}
onChange={handleAddToPlaylistButtonClick}
className="w-4 h-4 focus:ring-2 accent-transparent"
value=""
className="w-4 h-4focus:ring-2 accent-transparent"
onChange={handleSelectAllCheckboxChange}
/>
<label
htmlFor={song.id}
htmlFor="select-all"
className="w-full py-3 ml-2 text-sm font-light text-gray-100"
>
{song.filename}
Select all
</label>
</li>
))}
</ul>
</>
)}
</div>
</div>
</div>
<div className="grid grid-cols-3 gap-4 w-full h-[70%]">
<UploadToIPFS publicKey={publicKey} />

<div className="col-span-2 rounded-md border border-[#424242] overflow-y overflow-y-auto">
{songs.length === 0 && (
<div className="flex flex-col items-center justify-center pt-5 pb-6 h-full">
<Icon
icon="pixelarticons:mood-sad"
className="w-8 h-8 text-white m-6"
/>
<p className="mb-2 text-sm text-gray-100 text-center w-[70%]">
Ops, it looks like you don’t have any files yet. Upload files
to get started.
</p>
</div>
)}
<div>
<ul className="w-full h-full">
{songs.map((song) => (
<li
key={song.id}
className="w-full flex items-center py-3 hover:bg-[#424242] hover:bg-opacity-50 cursor-pointer pl-7"
>
<input
id={song.id}
type="checkbox"
checked={song.checked}
onChange={handleAddToPlaylistButtonClick}
className="w-4 h-4 focus:ring-2 accent-transparent"
/>
<label
htmlFor={song.id}
className="w-full py-3 ml-2 text-sm font-light text-gray-100"
>
{song.filename}
</label>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</>
);
};

Expand Down
68 changes: 68 additions & 0 deletions src/components/elements/Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from "react";
import Button from "./Button";

interface Props {
modalIsOpen: boolean;
setPlaylistName: (name: string) => void;
commitPlaylist: () => void;
closeModal: () => void;
}

const Modal = ({
modalIsOpen,
setPlaylistName,
commitPlaylist,
closeModal,
}: Props) => {
if (modalIsOpen) {
return (
<div
id="defaultModal"
aria-hidden="true"
className="fixed flex items-center justify-center top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full backdrop-blur-sm"
>
<div
className="h-full w-full bg-red absolute"
onClick={closeModal}
></div>
<div
className="relative w-fit max-w-2xl max-h-full z-8"
onClick={() => {}}
>
<div
className="z-10 relative rounded-lg bg-black h-60 w-96 py-4 px-2 flex justify-center items-center"
style={{
boxShadow: "0px 0px 15px 2px rgba(255,255,255,0.3)",
}}
>
<div className="flex flex-col gap-8 items-start justify-between w-full p-4 px-6 rounded-t border-gray-600">
<span className="text-white text-center w-full">
How do you wanna call it?
</span>
<input
type="text"
className="bg-transparent border border-[#424242] text-[#d9d9d9] text-sm rounded-lg focus:ring-slate-100 focus:border-slate-100 block w-full p-2.5"
placeholder=""
required
onChange={(e) => {
setPlaylistName(e.target.value);
}}
/>
<Button
type="button"
extraClass="w-full bg-[#d9d9d9] w-full flex justify-center items-center"
handleClick={commitPlaylist}
>
<span className="w-full text-center text-slate-900">
Create playlist
</span>
</Button>
</div>
</div>
</div>
</div>
);
}
};

export default Modal;

0 comments on commit 46e9380

Please sign in to comment.