chore: some improvements

MetaFam · May 12, 2024 · f2fb267 · f2fb267
1 parent 9294437
commit f2fb267
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/app/create-profile/page.tsx b/app/create-profile/page.tsx
@@ -6,10 +6,8 @@ import { Suspense } from "react";
 
 const ProfileCreationComponent = () => {
   return (
-    <main>
-      <div className="mt-16">
+    <main className="mt-16">
         <ProfileCreationForm />
-      </div>
     </main>
   );
 };

diff --git a/components/ProfileCreationForm/ProfileCreationForm.tsx b/components/ProfileCreationForm/ProfileCreationForm.tsx
@@ -1,12 +1,8 @@
 "use client";
 
 // TODO:
-// 1) Only upload image to IPFS (DONE)
-// 2) Call to supabase (add trpc?)
-// 3) Use react hook form (DONE)
-// Fix color schemes
-// Add connect to wallet while creating profile and get address (DONE)
-//
+// While uploading profile picture, optimize the profile picture and add limit.
+// FIX: Connect to wallet flow before creating profile picture
 
 import React, { useState } from "react";
 
@@ -23,13 +19,15 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 const formSchema = z.object({
-  username: z.string(),
-  bio: z.string(),
-  profileImage: z.any(),
-  backgroundImage: z.any(),
+  username: z.string().min(4, "username should be atlease 4 characters"),
+  bio: z.string().optional().default(""),
+  profileImage: z.custom<File>((v) => v instanceof File, {
+    message: "Profile Image is required",
+  }),
+  backgroundImage: z.custom<File>((v) => v instanceof File).optional().nullable(),
   links: z.array(
     z.object({
-      icon: z.any(),
+      icon: z.any().optional(),
       name: z.string(),
       url: z.string(),
     })
@@ -40,15 +38,18 @@ const ProfileCreationForm = () => {
   const { uploadFileToWeb3Storage } = useWeb3StorageUtilities();
   const { isConnected, handleConnectWallet, isSignedIn, handleSignIn } =
     useConnectWallet();
+  const [errorMsg, setErrorMsg]=useState<string | undefined>()
 
-  const [isSubmitLinksSection, setIsSubmitLinksSection] = useState(false);
+  const [step, setStep] = useState<"userDetails" | "submitLinks">(
+    "userDetails"
+  );
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       username: "",
       bio: "",
-      profileImage: null,
+      profileImage: undefined,
       backgroundImage: null,
       links: [
         {
@@ -60,13 +61,12 @@ const ProfileCreationForm = () => {
     },
   });
 
+  const t = form.getValues();
+
   const handleFormSubmit = async () => {
     try {
       if (!isConnected) {
-        handleConnectWallet();
-      }
-      if (!isSignedIn) {
-        await handleSignIn();
+        setErrorMsg("You must be connected to wallet")
       }
 
       const { backgroundImage, profileImage, links } = form.getValues();
@@ -84,6 +84,7 @@ const ProfileCreationForm = () => {
       });
       const ipfsUrl = `ipfs://${cid}`;
       console.log("ipfsUrl:", ipfsUrl);
+      // TODO: Create a DB entry in supabase (create tRPC endpoint)
     } catch (error) {
       console.log("error", error);
     }
@@ -96,16 +97,14 @@ const ProfileCreationForm = () => {
           className="my-8 relative"
           onSubmit={form.handleSubmit(handleFormSubmit)}
         >
-          {!isSubmitLinksSection ? (
+          {step === "userDetails" ? (
             <UserMetaDetailsSection
-              onClickNextBtn={() => setIsSubmitLinksSection(true)}
-              form={form}
+              onClickNextBtn={() => setStep("submitLinks")}
             />
           ) : (
             <>
               <SubmitLinksSection
-                onClickPrevBtn={() => setIsSubmitLinksSection(false)}
-                form={form}
+                onClickPrevBtn={() => setStep("userDetails")}
               />
               <button
                 className={cn(
@@ -118,6 +117,7 @@ const ProfileCreationForm = () => {
               </button>
             </>
           )}
+          {!!errorMsg && <p className="text-md text-red-500 text-center" >{errorMsg}</p>}
         </form>
       </Form>
     </div>

diff --git a/components/ProfileCreationForm/SubmitLinksSection.tsx b/components/ProfileCreationForm/SubmitLinksSection.tsx
@@ -1,4 +1,5 @@
 "use client";
+// TODO: maybe use useFieldArray for links
 
 import { Label } from "@radix-ui/react-label";
 import { GradiantSeparatorLine } from "./GradiantComponents";
@@ -13,6 +14,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { useFormContext } from "react-hook-form";
 
 export type TLink = {
   icon: any;
@@ -22,11 +24,11 @@ export type TLink = {
 
 const SubmitLinksSection = ({
   onClickPrevBtn,
-  form,
 }: {
   onClickPrevBtn: () => void;
-  form: any;
 }) => {
+  const form = useFormContext();
+
   return (
     <>
       <div className="flex flex-col space-y-4 w-full">

diff --git a/components/ProfileCreationForm/UserMetaDetailsSection.tsx b/components/ProfileCreationForm/UserMetaDetailsSection.tsx
@@ -11,6 +11,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { useFormContext } from "react-hook-form";
 
 export type TUserMetaDetails = {
   username: string;
@@ -21,11 +22,10 @@ export type TUserMetaDetails = {
 
 const UserMetaDetailsSection = ({
   onClickNextBtn,
-  form,
 }: {
   onClickNextBtn: () => void;
-  form: any;
 }) => {
+  const form = useFormContext();
   return (
     <>
       <div className="mb-8 relative">
@@ -102,6 +102,7 @@ const UserMetaDetailsSection = ({
                     />
                   </FormControl>
                 </FormLabel>
+                <FormMessage />
               </div>
             </FormItem>
           )}
@@ -115,10 +116,9 @@ const UserMetaDetailsSection = ({
           render={({ field }) => (
             <FormItem>
               <FormLabel htmlFor="username" className="font-bold text-xs">
-                UserName
+                Username
               </FormLabel>
               <FormControl>
-                {/* <Input type="text" placeholder="Tyler" {...field} /> */}
                 <Input
                   id="username"
                   placeholder="Tyler"
@@ -146,7 +146,7 @@ const UserMetaDetailsSection = ({
                     id="bio"
                     placeholder="Durden"
                     {...field}
-                    className="py-4 px-4 rounded-md border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    className="py-4 px-4 rounded-md border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring border-input sm:text-sm bg-transparent"
                   />
                 </FormControl>
               </LabelInputContainer>