added update application logic and ui

Author: chin-flags

app/applications/[applicationId]/page.tsx

@@ -21,11 +21,7 @@ const ApplicationPage = async ({ params: { applicationId } }: PageProps) => {
 
   return (
     <div>
-      <AppHeader
-        title={application.title}
-        logo={application.logo}
-        applicationUrl={application.applicationUrl}
-      />
+      <AppHeader application={application} />
 
       <AppDetails application={application} />
     </div>

components/AppHeader.tsx

@@ -1,23 +1,26 @@
 "use client";
 
+import { useState } from "react";
 import Image from "next/image";
 import Button from "./Button";
 import LinkIcon from "./icons/LinkIcon";
 import EditIcon from "./icons/EditIcon";
-import { useState } from "react";
+import { useAccount } from "wagmi";
+import UpadateApplication from "./ApplicationForm";
 
 type AppHeaderProps = {
-  title: string;
-  logo?: string;
-  applicationUrl?: string;
+  application: IApplication;
 };
 
-const AppHeader: React.FC<AppHeaderProps> = ({
-  title,
-  logo,
-  applicationUrl,
-}) => {
+const AppHeader: React.FC<AppHeaderProps> = ({ application }) => {
   const [error, setError] = useState(false);
+
+  const [open, setOpen] = useState(false);
+  const { address } = useAccount();
+  const { title, logo, applicationUrl, user } = application;
+
+  const isMyApplication = user === address;
+
   return (
     <header className="flex items-center justify-between px-2 py-2 mt-8">
       <div className="flex items-center justify-start sm:justify-center">
@@ -38,17 +41,20 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         </h1>
       </div>
       <div className="flex gap-2 lg:gap-4">
-        <Button
-          variant="borderless"
-          href={applicationUrl}
-          className="px-4 rounded-3xl lg:rounded-full md:px-7 cursor-not-allowed opacity-40 dark:opacity-100 dark:border-gray-400"
-        >
-          <EditIcon />
-          <span className="hidden lg:block dark:text-gray-400">
-            {" "}
-            Edit Application
-          </span>
-        </Button>
+        {isMyApplication ? (
+          <Button
+            onClick={() => setOpen(true)}
+            variant="borderless"
+            href={applicationUrl}
+            className="px-4 rounded-3xl lg:rounded-full md:px-7 dark:border-white"
+          >
+            <EditIcon />
+            <span className="hidden lg:block dark:text-gray-400">
+              {" "}
+              Edit Application
+            </span>
+          </Button>
+        ) : null}
 
         {applicationUrl && (
           <Button
@@ -64,6 +70,12 @@ const AppHeader: React.FC<AppHeaderProps> = ({
           </Button>
         )}
       </div>
+      <UpadateApplication
+        modalOpen={open}
+        closeModal={() => setOpen(false)}
+        isEditMode={true}
+        application={application}
+      />
     </header>
   );
 };

components/NewApplication/Steps/BasicInfo.tsx components/ApplicationForm/Steps/BasicInfo.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { FC, useState, useTransition } from "react";
+
+import { FC, useEffect, useState, useTransition } from "react";
 import cn from "classnames";
 import { useAccount } from "wagmi";
 import { Tab } from "@headlessui/react";
@@ -17,21 +18,80 @@ import Button from "../../Button";
 import { FormProvider, useForm } from "react-hook-form";
 import { submitApplication } from "../../../lib/actions";
 
-type NewApplicationStepsProps = {
+interface ApplicationFormStepsProps {
   closeModal: () => void;
-};
+}
+
+interface CreateApplicationFormStepsProps extends ApplicationFormStepsProps {
+  isEditMode: false;
+}
 
-const NewApplicationSteps: FC<NewApplicationStepsProps> = ({ closeModal }) => {
+interface EditApplicationFormStepsProps extends ApplicationFormStepsProps {
+  isEditMode: true;
+  application: IApplication;
+}
+
+const ApplicationFormSteps: FC<
+  CreateApplicationFormStepsProps | EditApplicationFormStepsProps
+> = ({ closeModal, ...otherProps }) => {
   const TOTAL_STEPS = 3;
   const [currentStep, setCurrentStep] = useState(0);
   const { address } = useAccount();
   const [isPending, startTransition] = useTransition();
+
   const methods = useForm<IApplicationInput>({
     defaultValues: {
       category: [],
     },
   });
 
+  const createFileFromImageUrl = async (
+    imageUrl: string,
+    fileName: string
+  ): Promise<File> => {
+    const response = await fetch(imageUrl);
+    const blob = await response.blob();
+    return new File([blob], fileName);
+  };
+
+  const getDefaultValues = async () => {
+    if (otherProps.isEditMode === true) {
+      const {
+        id,
+        logo: logoUrl,
+        screenshots: screenshotUrls,
+        ...otherApplicationProps
+      } = otherProps.application;
+
+      let logo: File | undefined = undefined;
+      let screenshots: { value: File }[] | undefined = undefined;
+
+      // logo and screenshot we receive from the db are just the CIDs
+      // converting those to File objects here
+      if (logoUrl) {
+        logo = await createFileFromImageUrl(logoUrl, "logo");
+      }
+
+      if (screenshotUrls?.length) {
+        screenshots = await Promise.all(
+          screenshotUrls.map(async (url, index) => ({
+            value: await createFileFromImageUrl(url, `screenshot-${index}`),
+          }))
+        );
+      }
+
+      methods.reset({
+        logo,
+        screenshots,
+        ...otherApplicationProps,
+      });
+    }
+  };
+
+  useEffect(() => {
+    getDefaultValues();
+  }, []);
+
   const [steps] = useState<Steps>({
     basicInfo: {
       id: 1,
@@ -59,27 +119,39 @@ const NewApplicationSteps: FC<NewApplicationStepsProps> = ({ closeModal }) => {
     setCurrentStep((currentStep) => currentStep - 1);
   };
 
-  const submit = methods.handleSubmit(({ screenshots, logo, ...rest }) => {
-    const formData = new FormData();
+  const submit = methods.handleSubmit(
+    ({ screenshots, logo, ...otherApplicationProps }) => {
+      const formData = new FormData();
 
-    if (screenshots && screenshots.length > 0) {
-      screenshots.forEach((image) => {
-        formData.append("screenshots", image.value);
-      });
-    }
+      if (screenshots && screenshots.length > 0) {
+        screenshots.forEach((image) => {
+          formData.append("screenshots", image.value);
+        });
+      }
 
-    if (logo) {
-      formData.append("logo", logo);
-    }
+      if (logo) {
+        formData.append("logo", logo);
+      }
+
+      const isEditMode = otherProps.isEditMode;
+
+      // If there is an id in the application data,
+      // the application in the  db will  be overwritten with the latest data
+      // because we have a js Map
+      // see the `addNode` in the database implementation.
+      const id: string | undefined = isEditMode
+        ? otherProps.application.id
+        : undefined;
 
-    startTransition(() => {
-      submitApplication({
-        images: formData,
-        data: JSON.stringify({ ...rest, user: address }),
+      startTransition(() => {
+        submitApplication({
+          images: formData,
+          data: JSON.stringify({ id, user: address, ...otherApplicationProps }),
+        });
+        closeModal();
       });
-      closeModal();
-    });
-  });
+    }
+  );
 
   return (
     <Tab.Group selectedIndex={currentStep} as="div" className="px-2">
@@ -169,4 +241,4 @@ const NewApplicationSteps: FC<NewApplicationStepsProps> = ({ closeModal }) => {
   );
 };
 
-export default NewApplicationSteps;
+export default ApplicationFormSteps;

components/NewApplication/Steps/ExternalLinks.tsx components/ApplicationForm/Steps/ExternalLinks.tsx

@@ -1,16 +1,25 @@
 import { FC, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import Steps from "./Steps";
+import { IApplicationInput } from "./types";
 
-interface NewApplicationProps {
+interface ApplicationFormProps {
   modalOpen: boolean;
   closeModal: () => void;
 }
 
-const NewApplication: FC<NewApplicationProps> = ({
-  modalOpen,
-  closeModal,
-}) => {
+interface ApplicationFormCreateProps extends ApplicationFormProps {
+  isEditMode: false;
+}
+
+interface ApplicationFormEditProps extends ApplicationFormProps {
+  isEditMode: true;
+  application: IApplication;
+}
+
+const ApplicationForm: FC<
+  ApplicationFormCreateProps | ApplicationFormEditProps
+> = ({ closeModal, modalOpen, ...rest }) => {
   return (
     <Transition.Root show={modalOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={closeModal}>
@@ -38,7 +47,7 @@ const NewApplication: FC<NewApplicationProps> = ({
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-xl sm:p-6">
-                <Steps closeModal={closeModal} />
+                <Steps closeModal={closeModal} {...rest} />
               </Dialog.Panel>
             </Transition.Child>
           </div>
@@ -48,4 +57,4 @@ const NewApplication: FC<NewApplicationProps> = ({
   );
 };
 
-export default NewApplication;
+export default ApplicationForm;

components/NewApplication/Steps/Media.tsx components/ApplicationForm/Steps/Media.tsx

@@ -4,7 +4,7 @@ import { Fragment, useState } from "react";
 import { useAccount } from "wagmi";
 import { Menu, Transition } from "@headlessui/react";
 import { Bars4Icon } from "@heroicons/react/24/outline";
-import NewApplication from "./NewApplication";
+import ApplicationForm from "./ApplicationForm";
 import Link from "next/link";
 import PolisLogo from "./icons/PolisLogo";
 import { ConnectButton } from "./ConnectButton";
@@ -91,7 +91,11 @@ export const Nav = () => {
             </Transition>
           </Menu>
         </div>
-        <NewApplication modalOpen={open} closeModal={() => setOpen(false)} />
+        <ApplicationForm
+          modalOpen={open}
+          closeModal={() => setOpen(false)}
+          isEditMode={false}
+        />
       </nav>
     </>
   );

components/NewApplication/Steps/index.tsx components/ApplicationForm/Steps/index.tsx

@@ -60,7 +60,7 @@ import ora from "ora";
 
   console.log("\n");
 
-  const spinner = ora("Adding a empty database to IPFS...\n").start();
+  const spinner = ora("Adding an empty database to IPFS...\n").start();
 
   const { infuraUrl, infurakey, infuraSecret } = answers;