Remvoe localStorage caching and show "me" on InviteMembersForm (#4)

components/NewRealmWizard/PageTemplate.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import useLocalStorageState from '@hooks/useLocalStorageState'
 import { isWizardValid } from '@utils/formValidation'
 
 import CreateDAOWizard from '@components/NewRealmWizard/CreateDAOWizard'
@@ -19,28 +18,18 @@ export const Section = ({ children }) => {
 
 export default function FormPage({
   type,
-  ssFormKey,
   steps,
   handleSubmit,
   submissionPending,
 }) {
   const { connected, current: wallet } = useWalletStore((s) => s)
   const userAddress = wallet?.publicKey?.toBase58()
-  const [formData, setFormData] = useLocalStorageState<any>(ssFormKey, {
+  const [formData, setFormData] = useState<any>({
     memberAddresses: userAddress ? [userAddress] : undefined,
   })
   const { query, push } = useRouter()
   const currentStep = formData?.currentStep || 0
 
-  useEffect(() => {
-    window.addEventListener('beforeunload', promptUserBeforeLeaving)
-    window.addEventListener('unload', purgeFormData)
-    return () => {
-      window.removeEventListener('beforeunload', promptUserBeforeLeaving)
-      window.removeEventListener('unload', purgeFormData)
-    }
-  }, [])
-
   useEffect(() => {
     async function tryToConnect() {
       try {
@@ -64,17 +53,6 @@ export default function FormPage({
     }
   }, [currentStep])
 
-  function promptUserBeforeLeaving(ev) {
-    ev.preventDefault()
-    if (formData) {
-      ev.returnValue = true
-    }
-  }
-
-  function purgeFormData() {
-    setFormData({})
-  }
-
   function handleNextButtonClick({ step: fromStep, data }) {
     const updatedFormState = {
       ...formData,
@@ -109,7 +87,6 @@ export default function FormPage({
     )
 
     if (fromStep === 0) {
-      purgeFormData()
       push(
         {
           pathname: '/realms/new/',

components/NewRealmWizard/components/steps/InviteMembersForm.tsx

@@ -4,6 +4,7 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import * as yup from 'yup'
 import clsx from 'clsx'
 
+import useWalletStore from 'stores/useWalletStore'
 import FormHeader from '@components/NewRealmWizard/components/FormHeader'
 import FormField from '@components/NewRealmWizard/components/FormField'
 import FormFooter from '@components/NewRealmWizard/components/FormFooter'
@@ -124,6 +125,8 @@ export default function InviteMembersForm({
   currentStep,
   totalSteps,
 }) {
+  const { current } = useWalletStore((s) => s)
+  const userAddress = current?.publicKey?.toBase58()
   const inputElement = useRef<HTMLInputElement>(null)
   const [inviteList, setInviteList] = useState<string[]>([])
   const [invalidAddresses, setInvalidAddresses] = useState<string[]>([])
@@ -249,6 +252,7 @@ export default function InviteMembersForm({
                 <InviteAddress
                   key={address}
                   address={address}
+                  currentUser={address === userAddress}
                   index={index + 1}
                   onRemoveClick={() => removeAddressFromInviteList(address)}
                 />

pages/realms/new/multisig/index.tsx

@@ -103,7 +103,6 @@ export default function MultiSigWizard() {
   return (
     <FormPage
       type={FORM_NAME}
-      ssFormKey={SESSION_STORAGE_FORM_KEY}
       steps={steps}
       handleSubmit={handleSubmit}
       submissionPending={requestPending}

pages/realms/new/nft/index.tsx

@@ -136,7 +136,6 @@ export default function NFTWizard() {
   return (
     <FormPage
       type={FORM_NAME}
-      ssFormKey={SESSION_STORAGE_FORM_KEY}
       steps={steps}
       handleSubmit={handleSubmit}
       submissionPending={requestPending}

pages/realms/new/tokenized/index.tsx

@@ -146,7 +146,6 @@ export default function GovTokenWizard() {
   return (
     <FormPage
       type={FORM_NAME}
-      ssFormKey={SESSION_STORAGE_FORM_KEY}
       steps={steps}
       handleSubmit={handleSubmit}
       submissionPending={requestPending}