Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

playlist name modal #24

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

playlist name modal #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46e9380
playlist name modal
jopedroliveira Jun 21, 2023
76a8bfa
set modal closed by default
jopedroliveira Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 91 additions & 72 deletions src/components/elements/FileManager.tsx
View file
Open in desktop
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>(false);
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
Open in desktop
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;