From f638a13093bca1439894d588579a26ddfbab208f Mon Sep 17 00:00:00 2001
From: Cyrus Cowley <cyficowley@gmail.com>
Date: Fri, 29 Apr 2022 21:33:08 -0700
Subject: [PATCH] adding rental details popup and rendering more nfts

---
 .../src/client/components/ExploreRentals.tsx  | 74 ++++--------------
 .../src/client/components/ListingPanel.tsx    | 12 ++-
 frontend/src/client/components/Popup.tsx      | 26 +++++++
 .../src/client/components/RentDetails.tsx     | 32 ++++++++
 frontend/src/client/lib/fetchNft.ts           | 59 ++++++++++++++
 frontend/src/client/pages/List.tsx            | 76 +++++++++++++++----
 6 files changed, 200 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/client/components/Popup.tsx
 create mode 100644 frontend/src/client/components/RentDetails.tsx
 create mode 100644 frontend/src/client/lib/fetchNft.ts

diff --git a/frontend/src/client/components/ExploreRentals.tsx b/frontend/src/client/components/ExploreRentals.tsx
index e5f685c..b183658 100644
--- a/frontend/src/client/components/ExploreRentals.tsx
+++ b/frontend/src/client/components/ExploreRentals.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { NftWithMetadata, Nft, AvaliabilityStatus, Attribute } from "../../../types/nftTypes.js";
+import { NftWithMetadata, Nft } from "../../../types/nftTypes.js";
 import { ListingPanel } from "./ListingPanel";
+import { Popup } from "./Popup";
+import { RentDetails } from "./RentDetails";
 import { useMoralisQuery } from "react-moralis";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { getNFTs, getNFTMetadata } from "../lib/web3";
+import { mergeNftsWithMetadata } from "../lib/fetchNft";
 
 export const ExploreRentals = () => {
   const [dateFilterVisible, setDateFilterVisible] = useState(false);
@@ -13,64 +15,11 @@ export const ExploreRentals = () => {
   const [costFilterVisible, setCostFilterVisible] = useState(false);
   const [startCost, setStartCost] = useState<null | number>(null);
   const [endCost, setEndCost] = useState<null | number>(null);
-  const { data: rawNftListings, error, isLoading } = useMoralisQuery("Listing", query => query.limit(8), [], {});
 
+  const { data: rawNftListings, error, isLoading } = useMoralisQuery("Listing", query => query.limit(8), [], {});
   const [nfts, setNfts] = useState<NftWithMetadata[]>([]);
 
-  const getMetadataForAllNfts = async (nfts: Nft[]) => {
-    const awaitables = [];
-    for (const nft of nfts) {
-      awaitables.push(getNFTMetadata(nft.specification.collection, nft.specification.id));
-    }
-    return Promise.all(awaitables);
-  };
-
-  const calculateAvaliabiltyStatus = (nft: Nft) => {
-    const now = new Date();
-    if (nft.listing.datesForRent.some(date => date.startDate <= now && date.endDate >= now)) {
-      return AvaliabilityStatus.Avaliabile;
-    } else {
-      return AvaliabilityStatus.Unavaliabile;
-    }
-  };
-
-  const mapIpfsToUrl = (ipfs: string) => {
-    return `https://ipfs.io/ipfs/${ipfs.slice(7)}`;
-  };
-
-  const mergeNftsWithMetadata = async (nfts: Nft[]) => {
-    let nftsWithMetadata = [];
-    const metadatas = await getMetadataForAllNfts(nfts);
-    for (let i = 0; i < nfts.length; i++) {
-      const metadata = metadatas[i].metadata!;
-
-      let attributes: Attribute[] = [];
-      if (metadata.attributes) {
-        attributes = metadata.attributes.map(attribute => {
-          return {
-            traitType: attribute.trait_type,
-            value: attribute.value,
-          };
-        });
-      }
-
-      let image = metadata.image!;
-
-      if (image.startsWith("ipfs://")) {
-        image = mapIpfsToUrl(image);
-      }
-
-      const nftWithMetadata = {
-        nft: nfts[i],
-        name: metadata.name!,
-        image,
-        attributes,
-        avaliability: { status: calculateAvaliabiltyStatus(nfts[i]) },
-      };
-      nftsWithMetadata.push(nftWithMetadata);
-    }
-    setNfts(nftsWithMetadata);
-  };
+  const [selectedNft, setSelectedNft] = useState<NftWithMetadata | null>(null);
 
   useEffect(() => {
     const nftListings: Nft[] = rawNftListings.map(nft => {
@@ -79,7 +28,7 @@ export const ExploreRentals = () => {
         specification: nft.attributes.nftSpecification,
       };
     });
-    mergeNftsWithMetadata(nftListings);
+    mergeNftsWithMetadata(nftListings).then(nftsWithMetadata => setNfts(nftsWithMetadata));
   }, [rawNftListings]);
 
   if (isLoading) {
@@ -197,6 +146,11 @@ export const ExploreRentals = () => {
 
   return (
     <>
+      {selectedNft && (
+        <Popup closeHandler={() => setSelectedNft(null)}>
+          <RentDetails nft={selectedNft} />
+        </Popup>
+      )}
       <div className="container">
         <div className="flex pb-3">
           <div className="mr-4">{renderDateFilter()}</div>
@@ -204,7 +158,9 @@ export const ExploreRentals = () => {
         </div>
         <div className="grid grid-cols-4 gap-4 w-full">
           {filteredList.map((nft, index) => (
-            <ListingPanel nft={nft} key={index} />
+            <div onClick={() => setSelectedNft(nft)} key={index}>
+              <ListingPanel nft={nft} />
+            </div>
           ))}
         </div>
       </div>
diff --git a/frontend/src/client/components/ListingPanel.tsx b/frontend/src/client/components/ListingPanel.tsx
index 7cce071..9393fd2 100644
--- a/frontend/src/client/components/ListingPanel.tsx
+++ b/frontend/src/client/components/ListingPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { NftWithMetadata, Avaliability, AvaliabilityStatus } from "../../../types/nftTypes.js";
 
-export const ListingPanel = ({ nft }: { nft: NftWithMetadata }) => {
+export const ListingPanel = ({ nft, pureNft = false }: { nft: NftWithMetadata; pureNft?: boolean }) => {
   const renderAvaliability = (availability: Avaliability) => {
     let statusText;
     switch (availability.status) {
@@ -41,7 +41,7 @@ export const ListingPanel = ({ nft }: { nft: NftWithMetadata }) => {
         <div className="w-full flex items-center pb-2">
           <h1 className="text-lg font-bold">{nft.name}</h1>
           <div className="flex-grow pl-1"></div>
-          <p>ETH({nft.nft.listing.pricePerDay}) / day</p>
+          {!pureNft && <p>ETH({nft.nft.listing.pricePerDay}) / day</p>}
         </div>
         {nft.attributes.map(attribute => (
           <div
@@ -51,8 +51,12 @@ export const ListingPanel = ({ nft }: { nft: NftWithMetadata }) => {
             <span className="font-bold">{attribute.traitType}</span>: {attribute.value}
           </div>
         ))}
-        <p>{nft.nft.listing.description}</p>
-        <div className="pt-2">{renderAvaliability(nft.avaliability)}</div>
+        {!pureNft && (
+          <>
+            <p>{nft.nft.listing.description}</p>
+            <div className="pt-2">{renderAvaliability(nft.avaliability)}</div>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/client/components/Popup.tsx b/frontend/src/client/components/Popup.tsx
new file mode 100644
index 0000000..d2d5c09
--- /dev/null
+++ b/frontend/src/client/components/Popup.tsx
@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+
+export const Popup = ({ closeHandler, children }: { closeHandler: () => void; children: ReactNode }) => {
+  return (
+    <div
+      className="fixed h-screen w-screen top-0 left-0 flex justify-center items-center z-10"
+      style={{ backgroundColor: "rgba(0,0,0,.2)" }}
+      onClick={e => {
+        if (e.target === e.currentTarget) {
+          closeHandler();
+        }
+      }}
+    >
+      <div className="bg-white shadow relative p-4">
+        <div
+          className="absolute right-0 top-0 cursor-pointer p-3 text-xl"
+          style={{ fontFamily: "Arial" }}
+          onClick={closeHandler}
+        >
+          &#x2716;
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/client/components/RentDetails.tsx b/frontend/src/client/components/RentDetails.tsx
new file mode 100644
index 0000000..01e1160
--- /dev/null
+++ b/frontend/src/client/components/RentDetails.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { NftWithMetadata } from "../../../types/nftTypes.js";
+import DatePicker from "react-datepicker";
+
+export const RentDetails = ({ nft }: { nft: NftWithMetadata }) => {
+  const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);
+  const [startDate, endDate] = dateRange;
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold">{nft.name}</h1>
+      <p className="text-lg">{nft.nft.listing.description}</p>
+      <h3 className="text-xl">Pick your date:</h3>
+      <DatePicker
+        selectsRange={true}
+        startDate={startDate}
+        endDate={endDate}
+        onChange={(update: any) => {
+          setDateRange(update);
+        }}
+        minDate={new Date()}
+        showDisabledMonthNavigation
+        inline
+      />
+      <h3 className="text-xl">Price per day: {nft.nft.listing.pricePerDay} ETH</h3>
+      <h3 className="text-xl">Collateral: {nft.nft.listing.collateral} ETH</h3>
+      <button className="mt-2 w-48 bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md">
+        Rent!
+      </button>
+    </div>
+  );
+};
diff --git a/frontend/src/client/lib/fetchNft.ts b/frontend/src/client/lib/fetchNft.ts
new file mode 100644
index 0000000..47816bb
--- /dev/null
+++ b/frontend/src/client/lib/fetchNft.ts
@@ -0,0 +1,59 @@
+
+import { getNFTMetadata } from "./web3";
+import { NftWithMetadata, Nft, AvaliabilityStatus, Attribute } from "../../../types/nftTypes.js";
+
+
+const getMetadataForAllNfts = async (nfts: Nft[]) => {
+  const awaitables = [];
+  for (const nft of nfts) {
+    awaitables.push(getNFTMetadata(nft.specification.collection, nft.specification.id));
+  }
+  return Promise.all(awaitables);
+};
+
+const calculateAvaliabiltyStatus = (nft: Nft) => {
+  const now = new Date();
+  if (nft.listing.datesForRent.some(date => date.startDate <= now && date.endDate >= now)) {
+    return AvaliabilityStatus.Avaliabile;
+  } else {
+    return AvaliabilityStatus.Unavaliabile;
+  }
+};
+
+const mapIpfsToUrl = (ipfs: string) => {
+  return `https://ipfs.io/ipfs/${ipfs.slice(7)}`;
+};
+
+export const mergeNftsWithMetadata = async (nfts: Nft[]) => {
+  let nftsWithMetadata = [];
+  const metadatas = await getMetadataForAllNfts(nfts);
+  for (let i = 0; i < nfts.length; i++) {
+    const metadata = metadatas[i].metadata!;
+
+    let attributes: Attribute[] = [];
+    if (metadata.attributes) {
+      attributes = metadata.attributes.map(attribute => {
+        return {
+          traitType: attribute.trait_type,
+          value: attribute.value,
+        };
+      });
+    }
+
+    let image = metadata.image!;
+
+    if (image.startsWith("ipfs://")) {
+      image = mapIpfsToUrl(image);
+    }
+
+    const nftWithMetadata: NftWithMetadata = {
+      nft: nfts[i],
+      name: metadata.name!,
+      image,
+      attributes,
+      avaliability: { status: calculateAvaliabiltyStatus(nfts[i]) },
+    };
+    nftsWithMetadata.push(nftWithMetadata);
+  }
+  return nftsWithMetadata;
+};
\ No newline at end of file
diff --git a/frontend/src/client/pages/List.tsx b/frontend/src/client/pages/List.tsx
index 9bf7061..da4c963 100644
--- a/frontend/src/client/pages/List.tsx
+++ b/frontend/src/client/pages/List.tsx
@@ -1,13 +1,16 @@
 import { useFormik } from "formik";
-import React from "react";
+import React, { useState } from "react";
 import { Footer } from "../components/Footer";
 import { Navbar } from "../components/Navbar";
 import { DayPicker } from "react-day-picker";
-import { Nft } from "../../../types/nftTypes.js";
+import { ListingPanel } from "../components/ListingPanel";
+import { mergeNftsWithMetadata } from "../lib/fetchNft";
 import { useMoralis } from "react-moralis";
+import { NftWithMetadata, Nft } from "../../../types/nftTypes.js";
+
 import "react-day-picker/dist/style.css";
 
-const buttonStyle = "w-48 bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md";
+const buttonBaseStyle = "w-48 bg-indigo-800 text-white font-bold py-2 px-4 rounded-md";
 const inputStyle = "border-2 flex-grow border-slate-500 p-2 rounded-md";
 const labelStyle = "font-bold w-40";
 const FormSection: React.FC<{ center?: boolean }> = ({ center, children }) => {
@@ -18,6 +21,8 @@ const Divider = () => <hr className="border-slate-300" />;
 
 const List = () => {
   const { Moralis } = useMoralis();
+  const [nft, setNft] = useState<NftWithMetadata | null>(null);
+  const [validNft, setValidNft] = useState(false);
 
   // A complex subclass of Moralis.Object
   const Listing = Moralis.Object.extend(
@@ -39,7 +44,7 @@ const List = () => {
     });
   };
 
-  const formik = useFormik({
+  const { handleSubmit, handleChange, values, touched } = useFormik({
     initialValues: {
       collection: "",
       id: "",
@@ -63,10 +68,47 @@ const List = () => {
     },
   });
 
+  const handleBlur = async () => {
+    if (values.collection.trim() !== "" && values.id.trim() !== "") {
+      try {
+        const NftsWithMetadata = await mergeNftsWithMetadata([
+          {
+            listing: {
+              description: values.description,
+              datesForRent: [],
+              pricePerDay: values.pricePerDay,
+              collateral: values.collateral,
+            },
+            specification: {
+              collection: values.collection,
+              id: values.id,
+            },
+          },
+        ]);
+        setNft(NftsWithMetadata[0]);
+        setValidNft(true);
+      } catch (e) {
+        console.log("BAD NFT");
+        setValidNft(false);
+      }
+    }
+  };
+
+  let buttonStyle = buttonBaseStyle;
+
+  if (validNft) {
+    buttonStyle += " hover:bg-indigo-700";
+  }
+
   return (
     <div className="flex bg-white-100 items-center flex-col justify-between h-screen">
       <Navbar />
-      <form onSubmit={formik.handleSubmit} className="flex w-2/3 mr-auto p-8 flex-col gap-8">
+      {nft && (
+        <div className="w-96">
+          <ListingPanel nft={nft} pureNft={true} />
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="flex w-2/3 mr-auto p-8 flex-col gap-8">
         <h1 className="font-extrabold text-slate-800 sm:text-5xl md:text-6xl">List a Rental</h1>
         {/* <div className="flex flex-row">
           <button className={`${buttonStyle} rounded-tr-none rounded-br-none`}>Connect Wallet</button>
@@ -87,15 +129,17 @@ const List = () => {
           <input
             id="collection"
             name="collection"
-            onChange={formik.handleChange}
-            value={formik.values.collection}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            value={values.collection}
             className={`${inputStyle}`}
           ></input>
           <input
             id="id"
             name="id"
-            onChange={formik.handleChange}
-            value={formik.values.id}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            value={values.id}
             className={`${inputStyle}`}
           ></input>
         </FormSection>
@@ -106,8 +150,8 @@ const List = () => {
           <textarea
             id="description"
             name="description"
-            onChange={formik.handleChange}
-            value={formik.values.description}
+            onChange={handleChange}
+            value={values.description}
             className={`${inputStyle} h-48`}
           ></textarea>
         </FormSection>
@@ -126,8 +170,8 @@ const List = () => {
             type="number"
             step="any"
             min="0"
-            onChange={formik.handleChange}
-            value={formik.values.pricePerDay}
+            onChange={handleChange}
+            value={values.pricePerDay}
             className={inputStyle}
           ></input>
           <input
@@ -136,8 +180,8 @@ const List = () => {
             type="number"
             step="any"
             min="0"
-            onChange={formik.handleChange}
-            value={formik.values.collateral}
+            onChange={handleChange}
+            value={values.collateral}
             className={inputStyle}
           ></input>
         </FormSection>
@@ -149,7 +193,7 @@ const List = () => {
           <label className={labelStyle}>Collateral Payback</label>
           <input type="text" className={inputStyle}></input>
         </FormSection> */}
-        <button className={buttonStyle} type="submit">
+        <button className={buttonStyle} disabled={!validNft} type="submit">
           List my Rental!
         </button>
       </form>