From 677378e86a73a9bf1b49f3d1da5b2c1fc929949b Mon Sep 17 00:00:00 2001
From: Lulox <lulox.eth@protonmail.com>
Date: Sat, 28 Sep 2024 14:43:24 -0300
Subject: [PATCH] Now modal closes after uploading, still doesn't refresh the
 page afterwards

---
 packages/nextjs/app/create/Create.tsx                     | 8 +++++++-
 packages/nextjs/app/create/_components/MintingButtons.tsx | 8 +++++---
 packages/nextjs/app/explore/Explore.tsx                   | 2 +-
 packages/nextjs/app/profile/[address]/page.tsx            | 2 +-
 packages/nextjs/components/Footer.tsx                     | 8 +++++---
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/nextjs/app/create/Create.tsx b/packages/nextjs/app/create/Create.tsx
index bc68495..c9dbffb 100644
--- a/packages/nextjs/app/create/Create.tsx
+++ b/packages/nextjs/app/create/Create.tsx
@@ -8,7 +8,7 @@ import generateTokenURI from "./_components/generateTokenURI";
 
 // import type { NextPage } from "next";
 
-const Create = () => {
+const Create = ({ onClose }: { onClose: any }) => {
   const [description, setDescription] = useState("");
   const [yourJSON, setYourJSON] = useState<object>({});
   const [uploadedImageIpfsPath, setUploadedImageIpfsPath] = useState(""); // NEW: For image IPFS path
@@ -19,6 +19,11 @@ const Create = () => {
     setDescription("");
   };
 
+  const handlePostCreated = () => {
+    resetForm();
+    onClose();
+  };
+
   useEffect(() => {
     const generateTokenURIString = () => {
       const fullImageUrl = `https://ipfs.io/ipfs/${uploadedImageIpfsPath}`;
@@ -57,6 +62,7 @@ const Create = () => {
               image={uploadedImageIpfsPath} // Pass the uploaded image IPFS path to MintingForm
               yourJSON={yourJSON}
               resetForm={resetForm}
+              onPostCreated={handlePostCreated}
             />
           </div>
         </div>
diff --git a/packages/nextjs/app/create/_components/MintingButtons.tsx b/packages/nextjs/app/create/_components/MintingButtons.tsx
index c4809f8..59a2b25 100644
--- a/packages/nextjs/app/create/_components/MintingButtons.tsx
+++ b/packages/nextjs/app/create/_components/MintingButtons.tsx
@@ -9,9 +9,10 @@ interface MintingFormProps {
   image: string;
   yourJSON: object;
   resetForm: () => void;
+  onPostCreated: () => void;
 }
 
-export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm }) => {
+export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm, onPostCreated }) => {
   const { address: connectedAddress } = useAccount();
   const { writeContractAsync } = useScaffoldWriteContract("PunkPosts");
 
@@ -32,7 +33,7 @@ export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm
     }
   };
 
-  const handlePaidMint = async () => {
+  const handleCreatePost = async () => {
     if (!connectedAddress) {
       notification.error("Please connect your wallet");
       return;
@@ -52,6 +53,7 @@ export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm
         notification.success("Posted successfully!");
       }
       resetForm();
+      onPostCreated();
     } catch (error) {
       console.error("Error during posting:", error);
       notification.error("Posting failed, please try again.");
@@ -63,7 +65,7 @@ export const MintingButtons: React.FC<MintingFormProps> = ({ yourJSON, resetForm
   return (
     <div className="flex flex-col justify-center items-center mt-6 gap-3">
       <div className="flex items-center">
-        <button className="cool-button" disabled={loading} onClick={handlePaidMint}>
+        <button className="cool-button" disabled={loading} onClick={handleCreatePost}>
           Create Post
         </button>
       </div>
diff --git a/packages/nextjs/app/explore/Explore.tsx b/packages/nextjs/app/explore/Explore.tsx
index 8031712..2502f73 100644
--- a/packages/nextjs/app/explore/Explore.tsx
+++ b/packages/nextjs/app/explore/Explore.tsx
@@ -96,7 +96,7 @@ export const Explore = () => {
       <div className="flex justify-center">{!isConnected || isConnecting ? <RainbowKitCustomConnectButton /> : ""}</div>
       {listedCollectibles.length === 0 ? (
         <div className="flex justify-center items-center mt-10">
-          <div className="text-2xl text-primary-content">No NFTs found</div>
+          <div className="text-2xl text-primary-content">No posts found</div>
         </div>
       ) : loading ? (
         <LoadingSpinner />
diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
index 3e67a5c..d72d1e5 100644
--- a/packages/nextjs/app/profile/[address]/page.tsx
+++ b/packages/nextjs/app/profile/[address]/page.tsx
@@ -234,7 +234,7 @@ const ProfilePage: NextPage = () => {
 
       {listedCollectibles.length === 0 ? (
         <div className="flex justify-center items-center mt-10">
-          <div className="text-2xl text-primary-content">No NFTs found</div>
+          <div className="text-2xl text-primary-content">No posts found</div>
         </div>
       ) : loading ? (
         <LoadingSpinner />
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
index d66d816..b82789a 100644
--- a/packages/nextjs/components/Footer.tsx
+++ b/packages/nextjs/components/Footer.tsx
@@ -55,9 +55,11 @@ export const Footer = () => {
         <PlusIcon className="h-10 w-10" />
       </div>
 
-      <Modal isOpen={isModalOpen} onClose={closeModal}>
-        <Create />
-      </Modal>
+      {isModalOpen && (
+        <Modal isOpen={isModalOpen} onClose={closeModal}>
+          <Create onClose={closeModal} />
+        </Modal>
+      )}
       <div className="min-h-0 py-5 px-1 lg:mb-0">
         <div className="w-full">
           <ul className="menu menu-horizontal w-full">