UI improvements not made on a rush, looking better now

luloxi · Sep 29, 2024 · b655fa5 · b655fa5
1 parent 0dfc267
commit b655fa5
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 62 deletions.
diff --git a/packages/nextjs/app/explore/_components/ProfileAddress.tsx b/packages/nextjs/app/explore/_components/ProfileAddress.tsx
@@ -1,12 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { Address as AddressType, getAddress, isAddress } from "viem";
 import { hardhat } from "viem/chains";
-import { normalize } from "viem/ens";
-import { useEnsAvatar, useEnsName } from "wagmi";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
@@ -31,10 +28,10 @@ const blockieSizeMap = {
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
 export const ProfileAddress = ({ address, disableAddressLink, format, size = "base" }: AddressProps) => {
-  // const [ens, setEns] = useState<string | null>();
-  const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const checkSumAddress = address ? getAddress(address) : undefined;
 
+  const defaultProfilePicture = "/guest-profile.jpg";
+
   const { targetNetwork } = useTargetNetwork();
 
   const { data: profileInfo } = useScaffoldReadContract({
@@ -44,31 +41,6 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba
     watch: true,
   });
 
-  const { data: fetchedEns } = useEnsName({
-    address: checkSumAddress,
-    chainId: 1,
-    query: {
-      enabled: isAddress(checkSumAddress ?? ""),
-    },
-  });
-  const { data: fetchedEnsAvatar } = useEnsAvatar({
-    name: fetchedEns ? normalize(fetchedEns) : undefined,
-    chainId: 1,
-    query: {
-      enabled: Boolean(fetchedEns),
-      gcTime: 30_000,
-    },
-  });
-
-  // We need to apply this pattern to avoid Hydration errors.
-  // useEffect(() => {
-  //   setEns(fetchedEns);
-  // }, [fetchedEns]);
-
-  useEffect(() => {
-    setEnsAvatar(fetchedEnsAvatar);
-  }, [fetchedEnsAvatar]);
-
   // Skeleton UI
   if (!checkSumAddress) {
     return (
@@ -87,10 +59,6 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba
 
   let displayAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
 
-  // else if (ens) {
-  //   displayAddress = ens;
-  // }
-
   if (profileInfo && profileInfo[0] !== "") {
     displayAddress = profileInfo[0];
   } else if (format === "long") {
@@ -100,11 +68,23 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba
   return (
     <div className="flex items-center flex-shrink-0">
       <div className="flex-shrink-0">
-        <BlockieAvatar
-          address={checkSumAddress}
-          ensImage={ensAvatar}
-          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-        />
+        {profileInfo && profileInfo[2] ? (
+          <Image
+            src={profileInfo[2]}
+            alt="Profile Picture"
+            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+            className="rounded-full"
+          />
+        ) : (
+          <Image
+            src={defaultProfilePicture}
+            alt="Profile Picture"
+            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+            className="rounded-full"
+          />
+        )}
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>

diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
@@ -83,8 +83,11 @@ const ProfilePage: NextPage = () => {
   };
 
   useEffect(() => {
-    const fetchListedNFTs = async () => {
-      if (!createEvents) return;
+    const fetchPosts = async () => {
+      if (!createEvents) {
+        // setLoading(false);
+        return;
+      }
 
       const postsUpdate: Post[] = [];
 
@@ -113,9 +116,10 @@ const ProfilePage: NextPage = () => {
       }
 
       setListedPosts(postsUpdate);
+      setLoading(false);
     };
 
-    fetchListedNFTs();
+    fetchPosts();
   }, [createEvents, address, connectedAddress]);
 
   useEffect(() => {
@@ -235,16 +239,16 @@ const ProfilePage: NextPage = () => {
           )}
         </div>
       </div>
-      {loading && <LoadingSpinner />}
+      {/* {loading && <LoadingSpinner />} */}
 
-      {listedPosts.length === 0 ? (
+      {loading ? (
+        <LoadingSpinner />
+      ) : listedPosts.length !== 0 ? (
+        <NewsFeed filteredPosts={listedPosts} />
+      ) : (
         <div className="flex justify-center items-center mt-10">
           <div className="text-2xl text-primary-content">No posts found</div>
         </div>
-      ) : loading ? (
-        <LoadingSpinner />
-      ) : (
-        <NewsFeed filteredPosts={listedPosts} />
       )}
     </>
   );

diff --git a/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { uploadToPinata } from "~~/utils/pinata-upload";
 import { notification } from "~~/utils/scaffold-eth";
@@ -18,13 +18,19 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
 }) => {
   const defaultProfilePicture = "/guest-profile.jpg";
 
-  const [previewImage, setPreviewImage] = useState<string | null>(
-    profilePicture != "" ? profilePicture : defaultProfilePicture,
-  );
+  const [previewImage, setPreviewImage] = useState<string>("");
   const [dragActive, setDragActive] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hovered, setHovered] = useState(false);
 
+  useEffect(() => {
+    if (profilePicture) {
+      setPreviewImage(profilePicture);
+    } else {
+      setPreviewImage("");
+    }
+  }, [profilePicture]);
+
   // Handle file drop or selection
   const handleFileUpload = async (file: File) => {
     const reader = new FileReader();
@@ -73,7 +79,7 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
   // Handle remove image
   const handleRemoveImage = () => {
     setProfilePicture("");
-    setPreviewImage(null);
+    setPreviewImage("");
   };
 
   return (
@@ -88,10 +94,66 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
       onMouseLeave={() => setHovered(false)}
     >
       <input type="file" onChange={handleFileInputChange} className="hidden" />
-      {previewImage ? (
+      {isEditing ? (
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
+          {previewImage ? (
+            <>
+              <Image
+                src={previewImage}
+                alt="Profile Picture"
+                className="rounded-full object-cover w-32 h-32"
+                width={128}
+                height={128}
+              />
+              <button
+                className="absolute top-5 right-5 bg-red-500 text-white w-6 h-6 flex items-center justify-center rounded-full"
+                onClick={handleRemoveImage}
+              >
+                ✕
+              </button>
+            </>
+          ) : (
+            <label className="w-32 h-32 flex flex-col items-center justify-center cursor-pointer text-xs m-0 border border-dashed border-gray-400 rounded-full">
+              <span className="text-5xl h-auto rounded-full">+</span>
+              <span className="font-bold">Upload image</span>
+              <input type="file" accept="image/*" className="hidden" onChange={handleFileInputChange} />
+            </label>
+          )}
+        </div>
+      ) : (
+        <Image
+          src={profilePicture ? profilePicture : defaultProfilePicture}
+          alt="Profile Picture"
+          className="rounded-full object-cover w-32 h-32"
+          width={128}
+          height={128}
+        />
+      )}
+      {hovered && previewImage && (
+        <button
+          className="absolute top-5 right-5 bg-red-500 text-white w-6 h-6 flex items-center justify-center rounded-full"
+          onClick={handleRemoveImage}
+        >
+          ✕
+        </button>
+      )}
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-75 text-white">
+          Uploading...
+        </div>
+      )}
+      {/* {hovered && !isEditing && (
+        <button
+          className="absolute top-5 right-5 bg-red-500 text-white w-6 h-6 flex items-center justify-center rounded-full"
+          onClick={() => setIsEditing(true)}
+        >
+          ✎
+        </button>
+      )} */}
+      {/* {previewImage ? (
         <div className="relative w-full h-full flex items-center justify-center">
           <Image
-            src={previewImage}
+            src={previewImage ? profilePicture : defaultProfilePicture}
             alt="Profile Pixar Preview"
             className="rounded-full object-cover"
             width={128}
@@ -133,7 +195,7 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
         <div className="absolute inset-0 flex items-center justify-center bg-gray-700 bg-opacity-75 text-white">
           Uploading...
         </div>
-      )}
+      )} */}
     </div>
   );
 };

diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
@@ -14,11 +14,6 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
-};
-
-module.exports = nextConfig;
-
-module.exports = {
   images: {
     remotePatterns: [
       {
@@ -27,6 +22,33 @@ module.exports = {
         port: "",
         pathname: "/ipfs/**",
       },
+      {
+        protocol: "https",
+        hostname: "gateway.pinata.cloud",
+        port: "",
+        pathname: "/ipfs/**",
+      },
     ],
   },
 };
+
+module.exports = nextConfig;
+
+// module.exports = {
+//   images: {
+//     remotePatterns: [
+//       {
+//         protocol: "https",
+//         hostname: "ipfs.io",
+//         port: "",
+//         pathname: "/ipfs/**",
+//       },
+//       {
+//         protocol: "https",
+//         hostname: "gateway.pinata.cloud",
+//         port: "",
+//         pathname: "/ipfs/**",
+//       },
+//     ],
+//   },
+// };