Now modal closes after uploading, still doesn't refresh the page afte…

…rwards
luloxi · Sep 28, 2024 · 677378e · 677378e
1 parent e38f48b
commit 677378e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">