Publish shot modal UI

JeremyG11 · Jan 19, 2024 · aad5550 · aad5550
1 parent fa8d883
commit aad5550
Show file tree

Hide file tree

Showing 17 changed files with 169 additions and 49 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,8 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { IBM_Plex_Sans } from "next/font/google";
 import { ClerkProvider } from "@clerk/nextjs";
+import { IBM_Plex_Sans } from "next/font/google";
+import { ModalProvider } from "@/components/Providers/modal.provider";
 
 const font = IBM_Plex_Sans({
   subsets: ["cyrillic"],
@@ -21,7 +22,10 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en" suppressHydrationWarning>
-        <body className={font.className}>{children}</body>
+        <body className={font.className}>
+          <ModalProvider />
+          {children}
+        </body>
       </html>
     </ClerkProvider>
   );

diff --git a/components/Profile/BlockDisplayCard.tsx b/components/Profile/BlockDisplayCard.tsx
@@ -6,6 +6,7 @@ import BlockUploader from "./BlockUploader";
 import { useLayoutStore } from "@/hooks/layout";
 import { BlockType, useBlock } from "@/hooks/toggle";
 import GalleryUploader from "./GalleryUploader";
+import { createFileUrl } from "@/libs/utils/createFileUrl";
 
 export default function BlockDisplayCard() {
   const { layout } = useLayoutStore();
@@ -21,21 +22,14 @@ export default function BlockDisplayCard() {
   };
 
   useEffect(() => {}, [layout]);
-  const galleryBlock = boardData["gallery"];
 
   return (
     <div className="w-full h-auto space-y-24">
       {Object.keys(boardData).map((blockKey, index: number) => {
         const block = boardData[blockKey as BlockType];
         if (typeof block === "object" && block !== null && "files" in block) {
           if (blockKey === "gallery") {
-            return (
-              <GalleryUploader
-                key={blockKey}
-                files={block.files}
-                blockType={blockKey as BlockType}
-              />
-            );
+            return <GalleryUploader key={blockKey} files={block.files} />;
           } else if (block.files.length > 0) {
             return block.files.map((file, index) => (
               <div
@@ -52,13 +46,13 @@ export default function BlockDisplayCard() {
                     loop
                     muted
                   >
-                    <source src={file.url} type="video/mp4" />
+                    <source src={createFileUrl(file.file)} type="video/mp4" />
                     Your browser does not support the video tag.
                   </video>
                 ) : (
                   <Image
                     key={`${blockKey}-${index}`}
-                    src={file.url}
+                    src={createFileUrl(file.file)}
                     alt={blockKey}
                     fill
                     className="w-full h-full object-cover rounded-xl"

diff --git a/components/Profile/Blocks/GalleryBlock.tsx b/components/Profile/Blocks/GalleryBlock.tsx
@@ -83,8 +83,7 @@ export const MiniGalleryUploader = ({
       const selectedFile = e.target.files[0];
       setFile(selectedFile);
 
-      const fileUrl = URL.createObjectURL(selectedFile);
-      const fileData = { url: fileUrl, type: "mediaType" };
+      const fileData = { file: selectedFile, type: "mediaType" };
 
       onOpenBlock("gallery");
       if (boardData?.gallery) {

diff --git a/components/Profile/Blocks/ImageBlock.tsx b/components/Profile/Blocks/ImageBlock.tsx
@@ -4,6 +4,7 @@ import { useBlock } from "@/hooks/toggle";
 import AltText from "../../Reusable/AltText";
 import MediaUpload from "../../Reusable/MediaUpload";
 import AdjustLayout from "../../Reusable/AdjustLayout";
+import { createFileUrl } from "@/libs/utils/createFileUrl";
 
 export const ImageBlock = () => {
   const { boardData } = useBlock();
@@ -12,7 +13,7 @@ export const ImageBlock = () => {
   if (Array.isArray(boardData.image)) {
     mediaSrcUrl = boardData.image[0];
   } else if (boardData.image && "files" in boardData.image) {
-    mediaSrcUrl = boardData.image.files[0]?.url;
+    mediaSrcUrl = createFileUrl(boardData.image.files[0].file);
   }
 
   return (

diff --git a/components/Profile/Blocks/MiniGalleryCard.tsx b/components/Profile/Blocks/MiniGalleryCard.tsx
@@ -1,8 +1,9 @@
 "use client";
 import React from "react";
+import Image from "next/image";
 import { FileData } from "@/hooks/toggle";
 import { BsFillTrash3Fill } from "react-icons/bs";
-import Image from "next/image";
+import { createFileUrl } from "@/libs/utils/createFileUrl";
 
 interface MiniGalleryCardProps {
   file: FileData;
@@ -16,7 +17,7 @@ const MiniGalleryCard = ({ file, setSelectedFile }: MiniGalleryCardProps) => {
       onClick={() => setSelectedFile(file)}
     >
       <Image
-        src={file.url}
+        src={createFileUrl(file.file)}
         alt={file.type}
         layout="fill"
         className="w-full h-full object-cover rounded-lg"

diff --git a/components/Profile/Blocks/VideoBlock.tsx b/components/Profile/Blocks/VideoBlock.tsx
@@ -4,6 +4,7 @@ import { useBlock } from "@/hooks/toggle";
 import AltText from "../../Reusable/AltText";
 import MediaUpload from "../../Reusable/MediaUpload";
 import AdjustLayout from "../../Reusable/AdjustLayout";
+import { createFileUrl } from "@/libs/utils/createFileUrl";
 
 export const VideoBlock = () => {
   const { boardData } = useBlock();
@@ -12,7 +13,7 @@ export const VideoBlock = () => {
   if (Array.isArray(boardData?.video)) {
     mediaSrcUrl = boardData?.video[0];
   } else if (boardData?.video && "files" in boardData?.video) {
-    mediaSrcUrl = boardData?.video?.files[0]?.url;
+    mediaSrcUrl = createFileUrl(boardData.video?.files[0].file);
   }
 
   return (

diff --git a/components/Profile/FileUploader.tsx b/components/Profile/FileUploader.tsx
@@ -1,28 +1,44 @@
 "use client";
 import Image from "next/image";
-import React, { ChangeEvent } from "react";
+import { FileWithPath } from "@uploadthing/react";
 import { FileData, useBlock } from "@/hooks/toggle";
+import { useDropzone } from "@uploadthing/react/hooks";
 import imageIcon from "@/public/images/shotUploadIcon.png";
+import { generateClientDropzoneAccept } from "uploadthing/client";
+import React, {
+  ChangeEvent,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+} from "react";
 
 interface FileUploaderProps {
   onFilesChange: (files: File[]) => void;
+  setFiles: Dispatch<SetStateAction<File[]>>;
 }
 
-const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
+const FileUploader = ({ onFilesChange, setFiles }: FileUploaderProps) => {
   const { onOpenBlock, updateFiles, setDrawerOpen } = useBlock();
 
   const createFileData = (file: File): FileData => {
-    const fileUrl = URL.createObjectURL(file);
     const fileType = file.type.split("/")[0];
-    return { url: fileUrl, type: fileType };
+    return { file: file, type: fileType };
   };
 
+  const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
+    setFiles(acceptedFiles);
+  }, []);
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept: "image/*" ? generateClientDropzoneAccept(["image/*"]) : undefined,
+  });
+
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const selectedFiles = Array.from(e.target.files);
 
       const selectedFileData = selectedFiles.map(createFileData);
-
       onFilesChange(selectedFiles);
 
       const fileType = selectedFiles[0].type.split("/")[0];
@@ -33,15 +49,14 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
         onOpenBlock("video");
         updateFiles("video", selectedFileData);
       } else {
-        // Handle edge case where file type is neither "image" nor "video"
         console.error(`Unsupported file type: ${fileType}`);
       }
 
       setDrawerOpen(true);
     }
   };
   return (
-    <div className="relative w-full h-full">
+    <div {...getRootProps()} className="relative w-full h-full">
       <label
         htmlFor="dropzone-file"
         className="relative p-3 flex flex-col justify-center w-full h-screen max-w-5xl mx-auto border-2 border-dashed rounded-lg border-gray-300 cursor-pointer"
@@ -68,6 +83,7 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
         </div>
 
         <input
+          {...getInputProps()}
           id="dropzone-file"
           type="file"
           className="hidden"

diff --git a/components/Profile/GalleryUploader.tsx b/components/Profile/GalleryUploader.tsx
@@ -2,24 +2,20 @@
 
 import Image from "next/image";
 import React, { useState, useEffect } from "react";
-import MiniGalleryCard from "./Blocks/MiniGalleryCard";
-import { MiniGalleryUploader } from "./Blocks/GalleryBlock";
 
+import { FileData } from "@/hooks/toggle";
 import { useLayoutStore } from "@/hooks/layout";
-
-interface File {
-  type: string;
-  url: string;
-}
+import { createFileUrl } from "@/libs/utils/createFileUrl";
+import MiniGalleryCard from "./Blocks/MiniGalleryCard";
+import { MiniGalleryUploader } from "./Blocks/GalleryBlock";
 
 interface GalleryBlockProps {
-  files: File[];
-  blockType: string;
+  files: FileData[];
 }
 
-const GalleryUploader = ({ files, blockType }: GalleryBlockProps) => {
+const GalleryUploader = ({ files }: GalleryBlockProps) => {
   const { layout } = useLayoutStore();
-  const [selectedFile, setSelectedFile] = useState<File>(files[0]);
+  const [selectedFile, setSelectedFile] = useState<FileData>(files[0]);
 
   useEffect(() => {
     setSelectedFile(files[0]);
@@ -34,12 +30,12 @@ const GalleryUploader = ({ files, blockType }: GalleryBlockProps) => {
       >
         <div className="relative h-5/6">
           {selectedFile.type === "video" ? (
-            <video src={selectedFile.url} controls>
+            <video src={createFileUrl(selectedFile.file)} controls>
               Your browser does not support the video tag.
             </video>
           ) : (
             <Image
-              src={selectedFile.url}
+              src={createFileUrl(selectedFile.file)}
               alt={selectedFile.type}
               fill
               className="w-full h-full object-cover rounded-xl"

diff --git a/components/Profile/PublishShotModal.tsx b/components/Profile/PublishShotModal.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Modal from "../Reusable/Modal";
+import { useModal } from "@/hooks/modal";
+
+export function PublishShotModal() {
+  const { isOpen, type } = useModal();
+  const isPublishShotModal = isOpen && type === "publishShotModal";
+
+  return <Modal isOpen={isPublishShotModal}>PublishShotModal</Modal>;
+}
diff --git a/components/Profile/ShotUploadForm.tsx b/components/Profile/ShotUploadForm.tsx
@@ -1,17 +1,25 @@
 "use client";
-import React from "react";
+import { useForm } from "react-hook-form";
+import React, { useEffect, useState } from "react";
 
 import { AddBlock } from "./AddBlock";
+import { useModal } from "@/hooks/modal";
 import SideDrawer from "./SideDrawer";
 import { Button } from "../Reusable/Button";
 import FileUploader from "./FileUploader";
 import { useBlock } from "@/hooks/toggle";
+import { Shot } from "@/schemas/ShotSchema";
 import BlockDisplayCard from "./BlockDisplayCard";
+import { createShot } from "@/libs/actions/shot.actions";
+import { useUploadThing } from "@/libs/uploadthing";
 
 export default function ShotUploadForm() {
   const { isDrawerOpen, boardData } = useBlock();
   const isFileSelected = Object.keys(boardData).length !== 0;
+  const { register, handleSubmit, setValue } = useForm();
 
+  const [files, setFiles] = useState<File[]>([]);
+  const { onOpen, isOpen } = useModal();
   const handleDropZone = (files: File[]) => {
     const selectedFile = files[0];
 
@@ -23,6 +31,25 @@ export default function ShotUploadForm() {
     reader.readAsDataURL(new Blob([selectedFile]));
   };
 
+  const { startUpload } = useUploadThing("imageUploader");
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    // let uploadedImageUrl = values.fileUrl;
+    // if (files.length > 0) {
+    //   if (!uploadedImages) {
+    //     return;
+    //   }
+    // uploadedImageUrl = uploadedImages[0].url;
+    // }
+    // const res = await createShot();
+    if (boardData["gallery"]?.files) {
+      const uploadedImages = await startUpload(
+        boardData["gallery"].files.map((fileData) => fileData.file)
+      );
+      console.log(uploadedImages);
+    }
+  };
+
   return (
     <div className="flex w-full min-w-full max-h-screen">
       <div className="relative flex-grow overflow-y-auto hide-scroll-bar">
@@ -39,7 +66,10 @@ export default function ShotUploadForm() {
             <Button className="py-2 px-5 text-sm font-medium mx-4 bg-zinc-100">
               Save as draft
             </Button>
-            <Button className="px-3 py-1 md:py-2 md:px-5 text-white text-sm mr-4 font-medium bg-black">
+            <Button
+              onClick={() => onOpen("publishShotModal")}
+              className="px-3 py-1 md:py-2 md:px-5 text-white text-sm mr-4 font-medium bg-black"
+            >
               Continue
             </Button>
           </div>
@@ -49,7 +79,7 @@ export default function ShotUploadForm() {
             isDrawerOpen ? "mx-0" : "mx-8 xl:mx-40"
           } pt-14 xl:h-full `}
         >
-          <form onSubmit={() => {}} className="mt-14 w-full xl:h-auto ">
+          <form onSubmit={onSubmit} className="mt-14 w-full xl:h-auto ">
             {isFileSelected ? (
               <span className="py-5 flex items-center text-gray-400 text-2xl font-semibold sm:text-4xl xl:max-w-3xl">
                 <input
@@ -69,7 +99,10 @@ export default function ShotUploadForm() {
               }`}
             >
               {!isFileSelected ? (
-                <FileUploader onFilesChange={handleDropZone} />
+                <FileUploader
+                  setFiles={setFiles}
+                  onFilesChange={handleDropZone}
+                />
               ) : (
                 <BlockDisplayCard />
               )}

diff --git a/components/Providers/modal.provider.tsx b/components/Providers/modal.provider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { PublishShotModal } from "../Profile/PublishShotModal";
+
+export const ModalProvider = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <PublishShotModal />
+    </>
+  );
+};
diff --git a/components/Reusable/MediaUpload.tsx b/components/Reusable/MediaUpload.tsx
@@ -20,8 +20,7 @@ export default function MediaUpload({
       const selectedFile = e.target.files[0];
       setFile(selectedFile);
 
-      const fileUrl = URL.createObjectURL(selectedFile);
-      const fileData = { url: fileUrl, type: mediaType };
+      const fileData = { file: selectedFile, type: mediaType };
 
       if (mediaType === "image") {
         onOpenBlock("image");