Skip to content

Commit

Permalink
Final change
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeromemccree
jeromemccree committed Aug 4, 2023
1 parent b9b740a commit 969abcb
Show file tree
Hide file tree
Showing 14 changed files with 240 additions and 192 deletions.
10 changes: 3 additions & 7 deletions src/Components/Buttons/DeleteButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Trash } from "../Icons/Icons";
import { RedTrash, Trash } from "../Icons/Icons";
import { Fragment, useRef, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { useSession } from "next-auth/react";
import { api } from "~/utils/api";

Expand Down Expand Up @@ -66,11 +65,8 @@ export default function DeleteButton({
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
<div className="mx-auto flex !h-12 !w-12">
<RedTrash aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<Dialog.Title
Expand Down
36 changes: 28 additions & 8 deletions src/Components/Buttons/EditButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,21 @@ interface EditButtonProps {
}

export function EditButton({ video, refetch }: EditButtonProps) {
// ! Step 1 start
const [open, setOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const cancelButtonRef = useRef(null);

// ! Step 1 End
// ! Step 2 start
const [currentPage, setCurrentPage] = useState(1);
// ! Step 2 End
// ! Step 3 start
const [image, setImage] = useState<File | null>(null);
const [croppedImage, setCroppedImage] = useState<string | null>(null);
// ! Step 3 End

// user form
// ! Step 2 start
const [user, setUser] = useState({
title: video.title,
description: video.description,
Expand All @@ -40,7 +49,9 @@ export function EditButton({ video, refetch }: EditButtonProps) {
[event.target.name]: event.target.value,
}));
};
// ! Step 2 Stop

// ! step 4
const handleSubmit = () => {
type UploadResponse = {
secure_url: string;
Expand Down Expand Up @@ -95,22 +106,28 @@ export function EditButton({ video, refetch }: EditButtonProps) {
console.error("An error occurred:", error);
});
};
//! step 4 end
//user form end
// ! Step 2 start

const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
setImage(e.target.files[0] ? e.target.files[0] : null);
setCurrentPage(2);
}
};
// ! Step 2 Stop

// ! Step 1 start
const handleClick = () => {
setCurrentPage(1);
setOpen(true);
};
// ! Step 1 End

return (
<>
{/* ! step 1 start */}
<button onClick={() => handleClick()}>
<Edit className="mr-2 h-5 w-5 shrink-0 stroke-gray-600" />
</button>
Expand Down Expand Up @@ -146,6 +163,8 @@ export function EditButton({ video, refetch }: EditButtonProps) {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
{/* ! step 1 End */}
{/* step 2 start */}
{currentPage === 1 && (
<>
<div className="sm:flex sm:items-start ">
Expand All @@ -156,11 +175,9 @@ export function EditButton({ video, refetch }: EditButtonProps) {
>
Edit Video
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Edit your thumbnail, title, or description
</p>
</div>
<p className="mt-2 text-sm text-gray-500">
Edit your thumbnail, title, or description
</p>
<div className="col-span-full">
<label
htmlFor="cover-photo"
Expand All @@ -173,7 +190,7 @@ export function EditButton({ video, refetch }: EditButtonProps) {
{croppedImage ? (
<img src={croppedImage} alt="Cropped" />
) : (
<div>
<>
<div className="mt-4 flex text-sm leading-6 text-gray-600">
<label
htmlFor="file-upload"
Expand All @@ -193,7 +210,7 @@ export function EditButton({ video, refetch }: EditButtonProps) {
<p className="text-xs leading-5 text-gray-600">
PNG, JPG, GIF up to 10MB
</p>
</div>
</>
)}
</div>
</div>
Expand Down Expand Up @@ -254,6 +271,7 @@ export function EditButton({ video, refetch }: EditButtonProps) {
</div>
</>
)}
{/* step 2 End */}

{currentPage === 2 && (
<>
Expand All @@ -273,6 +291,7 @@ export function EditButton({ video, refetch }: EditButtonProps) {
</>
);
}
// step 3
export function ImageCropper({
setCurrentPage,
setCroppedImage,
Expand Down Expand Up @@ -341,3 +360,4 @@ export function ImageCropper({
</div>
);
}
// step 3 end
30 changes: 26 additions & 4 deletions src/Components/Buttons/SaveButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ export default function SaveButton({ videoId }: { videoId: string }) {
const [checkedStatus, setCheckedStatus] = useState<{
[key: string]: boolean;
}>({});

const { data: sessionData } = useSession();

// ! 4 start
const { data: playlists, refetch: refetchPlaylists } =
api.playlist.getSavePlaylistData.useQuery(sessionData?.user?.id as string, {
enabled: false, // this query will not run automatically
Expand All @@ -28,7 +31,9 @@ export default function SaveButton({ videoId }: { videoId: string }) {
setCheckedStatus(initialCheckedStatus);
}
}, [open]);
// ! 4 end

//! 6 start
const addVideoToPlaylistMutation = api.video.addVideoToPlaylist.useMutation();
const handleCheckmarkToggle = (
event: React.ChangeEvent<HTMLInputElement>,
Expand All @@ -43,7 +48,9 @@ export default function SaveButton({ videoId }: { videoId: string }) {
[input.playlistId]: event.target.checked,
});
};
//! 6 End

//! 8 Start
const [newPlaylistName, setNewPlaylistName] = useState("");
const createPlaylistMutation = api.playlist.addPlaylist.useMutation();
const handleCreatePlaylist = () => {
Expand All @@ -62,12 +69,14 @@ export default function SaveButton({ videoId }: { videoId: string }) {
);
}
};
//! 8 End

if (!videoId) {
return <div>Loading...</div>;
}

return (
<>
{/* 1 Start */}
<Button
variant="secondary-gray"
size="2xl"
Expand All @@ -77,6 +86,9 @@ export default function SaveButton({ videoId }: { videoId: string }) {
<FolderPlus className="mr-2 h-5 w-5 shrink-0 stroke-gray-600" />
Save
</Button>
{/* 1 End */}

{/* 2 Start */}
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={setOpen}>
<Transition.Child
Expand All @@ -90,12 +102,13 @@ export default function SaveButton({ videoId }: { videoId: string }) {
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>

{/* 2 End */}
{/* 3 Start */}
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enter="ease-out duration-100"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
Expand All @@ -121,10 +134,14 @@ export default function SaveButton({ videoId }: { videoId: string }) {
Save Video To Playlist
</Dialog.Title>
</div>
{/* 3 End */}
{/* 5 start */}
<fieldset className="w-full">
{playlists?.map((playlist) => (
<div key={playlist.id} className=" space-y-5 py-1 ">
<div className="relative flex items-start justify-start text-left">
{/* 5 skip here */}
{/* 7 start */}
<div className="flex h-6 items-center">
<input
id="comments"
Expand All @@ -141,6 +158,9 @@ export default function SaveButton({ videoId }: { videoId: string }) {
className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
/>
</div>
{/* 7 start End */}
{/* 5 skip stop */}

<div className="ml-3 text-sm leading-6">
<label
htmlFor="comments"
Expand All @@ -153,7 +173,8 @@ export default function SaveButton({ videoId }: { videoId: string }) {
</div>
))}
</fieldset>

{/* 5 start stop */}
{/* 9 Start */}
<div className="mt-5 flex w-full flex-col gap-2 text-left">
<div>
<label
Expand Down Expand Up @@ -188,6 +209,7 @@ export default function SaveButton({ videoId }: { videoId: string }) {
Create New Playlist
</Button>
</div>
{/* 9 End */}
</Dialog.Panel>
</Transition.Child>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/Components/Icons/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export { default as Trash } from "./Trash";
export { ChevronUp, ChevronDown } from "./Chevron";
export { default as Search } from "./Search";
export { default as Menu } from "./Menu";
export { RedTrash } from "./RedTrash";
export {
GreenPlay,
GreenHorn,
Expand Down
30 changes: 30 additions & 0 deletions src/Components/Icons/RedTrash.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
export function RedTrash(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
width="56"
height="56"
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="4" y="4" width="48" height="48" rx="24" fill="#FEE4E2" />
<path
d="M32 22V21.2C32 20.0799 32 19.5198 31.782 19.092C31.5903 18.7157 31.2843 18.4097 30.908 18.218C30.4802 18 29.9201 18 28.8 18H27.2C26.0799 18 25.5198 18 25.092 18.218C24.7157 18.4097 24.4097 18.7157 24.218 19.092C24 19.5198 24 20.0799 24 21.2V22M26 27.5V32.5M30 27.5V32.5M19 22H37M35 22V33.2C35 34.8802 35 35.7202 34.673 36.362C34.3854 36.9265 33.9265 37.3854 33.362 37.673C32.7202 38 31.8802 38 30.2 38H25.8C24.1198 38 23.2798 38 22.638 37.673C22.0735 37.3854 21.6146 36.9265 21.327 36.362C21 35.7202 21 34.8802 21 33.2V22"
stroke="#D92D20"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<rect
x="4"
y="4"
width="48"
height="48"
rx="24"
stroke="#FEF3F2"
stroke-width="8"
/>
</svg>
);
}
25 changes: 11 additions & 14 deletions src/Components/PlaylistComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export const PlaylistPage: React.FC<PlaylistPageProps> = ({
authors,
user,
}) => {
// console.log(playlist);
if (!playlist || !videos || !authors || !user) {
return <></>;
}
Expand All @@ -57,17 +56,15 @@ export const PlaylistPage: React.FC<PlaylistPageProps> = ({
</Head>
<main className="mx-auto gap-4 lg:flex">
<div className="lg:w-1/2 lg:px-0 lg:pl-6">
<Link href={`/video/${playlist.id}`} key={playlist.id}>
<SinglePlaylist
playlist={{
id: playlist?.id || "",
title: playlist?.title || "",
videoCount: playlist?.videoCount || 0,
playlistThumbnail: playlist?.playlistThumbnail || "",
createdAt: playlist?.createdAt || new Date(),
}}
/>
</Link>
<SinglePlaylist
playlist={{
id: playlist?.id || "",
title: playlist?.title || "",
videoCount: playlist?.videoCount || 0,
playlistThumbnail: playlist?.playlistThumbnail || "",
createdAt: playlist?.createdAt || new Date(),
}}
/>
<Description
text={playlist.description || ""}
length={250}
Expand All @@ -77,15 +74,15 @@ export const PlaylistPage: React.FC<PlaylistPageProps> = ({
<Link href={`/${user.id}/ProfileVideos`} key={user.id}>
<div className="mt-4 flex flex-row gap-2 ">
<UserImage image={user.image || ""} />
<button className="flex flex-col ">
<div className="flex flex-col ">
<p className="w-max text-sm font-semibold leading-6 text-gray-900">
{user.name || ""}
</p>
<p className=" text-sm text-gray-600">
{user.followers}
<span> Followers</span>
</p>
</button>
</div>
</div>
</Link>
</div>
Expand Down
Loading

0 comments on commit 969abcb

Please sign in to comment.