modal cleanup and fix Project Migrated bug

web/src/components/DeleteProjectModal/DeleteProjectModal.tsx

@@ -12,29 +12,31 @@ import {
 import Button from '../Button/Button'
 import { CellIdString } from '../../types/shared'
 import ToastContext, { ShowToast } from '../../context/ToastContext'
+import { ModalState, OpenModal } from '../../context/ModalContexts'
 
 export type DeleteProjectModalProps = {
-  showModal: boolean
-  projectAppId: string
-  projectCellId: CellIdString
-  projectName: string
+  modalState: ModalState
   onClose: () => void
   redirectToDashboard: () => void
   uninstallProject: (appId: string, cellIdString: CellIdString) => Promise<void>
 }
 
 const DeleteProjectModal: React.FC<DeleteProjectModalProps> = ({
-  showModal,
-  projectAppId,
-  projectCellId,
-  projectName,
+  modalState,
   onClose,
   redirectToDashboard,
   uninstallProject,
 }) => {
   // pull in the toast context
   const { setToastState } = useContext(ToastContext)
 
+  const projectName =
+    modalState.id === OpenModal.DeleteProject && modalState.projectName
+  const projectAppId =
+    modalState.id === OpenModal.DeleteProject && modalState.projectAppId
+  const projectCellId =
+    modalState.id === OpenModal.DeleteProject && modalState.cellId
+
   const uninstall = () => {
     redirectToDashboard()
     uninstallProject(projectAppId, projectCellId)
@@ -47,25 +49,23 @@ const DeleteProjectModal: React.FC<DeleteProjectModalProps> = ({
   }
 
   return (
-    <>
-      <Modal active={showModal} onClose={onClose}>
-        <ProjectModalHeading title="Delete project" />
-        <ProjectModalContentSpacer>
-          <ProjectModalContent>
-            Are you sure you want to delete the project <b>'{projectName}'</b>? This
-            action will delete all the project data and can’t be undone.
-          </ProjectModalContent>
-        </ProjectModalContentSpacer>
-        <div className="modal-buttons-wrapper">
-          <Button
-            text={'Delete this project'}
-            className="warning"
-            onClick={uninstall}
-          />
-          <Button text={'Nevermind'} onClick={onClose} />
-        </div>
-      </Modal>
-    </>
+    <Modal active={modalState.id === OpenModal.DeleteProject} onClose={onClose}>
+      <ProjectModalHeading title="Delete project" />
+      <ProjectModalContentSpacer>
+        <ProjectModalContent>
+          Are you sure you want to delete the project <b>'{projectName}'</b>?
+          This action will delete all the project data and can’t be undone.
+        </ProjectModalContent>
+      </ProjectModalContentSpacer>
+      <div className="modal-buttons-wrapper">
+        <Button
+          text={'Delete this project'}
+          className="warning"
+          onClick={uninstall}
+        />
+        <Button text={'Nevermind'} onClick={onClose} />
+      </div>
+    </Modal>
   )
 }
 

web/src/components/ProfileEditForm/ProfileEditForm.js

@@ -44,10 +44,10 @@ function ProfileEditForm({
       onSubmit({
         firstName,
         lastName,
-        status: 'Online',
         avatarUrl,
-        agentPubKey: agentAddress,
         handle,
+        status: 'Online',
+        agentPubKey: agentAddress,
         isImported: false,
       })
     }

web/src/components/ProfileEditFormModal/ProfileEditFormModal.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import './ProfileEditFormModal.scss'
+import Modal from '../Modal/Modal'
+import ProfileEditForm from '../ProfileEditForm/ProfileEditForm'
+import { Profile } from 'zod-models'
+import { WireRecord } from '../../api/hdkCrud'
+import { AgentPubKeyB64 } from '../../types/shared'
+
+export type ProfileEditFormModalProps = {
+  active: boolean
+  onClose: () => void
+  onProfileSubmit: (profile: Profile) => Promise<void>
+  whoami: WireRecord<Profile>
+  agentAddress: AgentPubKeyB64
+}
+
+const ProfileEditFormModal: React.FC<ProfileEditFormModalProps> = ({
+  active,
+  whoami,
+  agentAddress,
+  onClose,
+  onProfileSubmit,
+}) => {
+  return (
+    <Modal white active={active} onClose={onClose}>
+      <ProfileEditForm
+        onSubmit={onProfileSubmit}
+        whoami={whoami ? whoami.entry : null}
+        pending={false}
+        pendingText={'Submitting...'}
+        titleText={'Profile Settings'}
+        subText={''}
+        submitText={'Save Changes'}
+        agentAddress={agentAddress}
+      />
+    </Modal>
+  )
+}
+
+export default ProfileEditFormModal

web/src/components/ProjectMigratedModal/ProjectMigratedModal.tsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import './ProjectMigratedModal.scss'
 import Modal, { ModalContent } from '../Modal/Modal'
-import { CellIdString, WithActionHash } from '../../types/shared'
+import { WithActionHash } from '../../types/shared'
 import { ProjectMeta } from '../../types'
 
 export type ProjectMigratedModalProps = {
   showModal: boolean
   onClose: () => void
   project?: WithActionHash<ProjectMeta>
-  cellIdString: CellIdString
   onClickUpdateNow: () => void
   onClickOverride: () => void
 }
@@ -17,7 +16,6 @@ const ProjectMigratedModal: React.FC<ProjectMigratedModalProps> = ({
   showModal,
   onClose,
   project = { isMigrated: '' } as WithActionHash<ProjectMeta>,
-  cellIdString,
   onClickUpdateNow,
   onClickOverride,
 }) => {

web/src/components/RemoveSelfProjectModal/RemoveSelfProjectModal.tsx

@@ -11,29 +11,31 @@ import {
 import Button from '../Button/Button'
 import { CellIdString } from '../../types/shared'
 import ToastContext, { ShowToast } from '../../context/ToastContext'
+import { ModalState, OpenModal } from '../../context/ModalContexts'
 
 export type RemoveSelfProjectModalProps = {
-  showModal: boolean
-  projectAppId: string
-  projectCellId: CellIdString
-  projectName: string
+  modalState: ModalState
   onClose: () => void
   redirectToDashboard: () => void
   uninstallProject: (appId: string, cellIdString: CellIdString) => Promise<void>
 }
 
 const RemoveSelfProjectModal: React.FC<RemoveSelfProjectModalProps> = ({
-  showModal,
-  projectAppId,
-  projectCellId,
-  projectName,
+  modalState,
   onClose,
   redirectToDashboard,
   uninstallProject,
 }) => {
   // pull in the toast context
   const { setToastState } = useContext(ToastContext)
 
+  const projectName =
+    modalState.id === OpenModal.RemoveSelfProject && modalState.projectName
+  const projectAppId =
+    modalState.id === OpenModal.RemoveSelfProject && modalState.projectAppId
+  const projectCellId =
+    modalState.id === OpenModal.RemoveSelfProject && modalState.cellId
+
   const uninstall = () => {
     redirectToDashboard()
     uninstallProject(projectAppId, projectCellId)
@@ -47,13 +49,16 @@ const RemoveSelfProjectModal: React.FC<RemoveSelfProjectModalProps> = ({
 
   return (
     <div className="remove-self-modal">
-      <Modal active={showModal} onClose={onClose}>
+      <Modal
+        active={modalState.id === OpenModal.RemoveSelfProject}
+        onClose={onClose}
+      >
         <ProjectModalHeading title="Remove self from project" />
         <ProjectModalContentSpacer>
           <ProjectModalContent>
             Are you sure you want to remove yourself from the shared project '
-            <b>{projectName}</b>'? If you remove yourself from this project you won’t
-            have access to it anymore.
+            <b>{projectName}</b>'? If you remove yourself from this project you
+            won’t have access to it anymore.
             <p />
             You can join this project again later, as long as it still has
             active members that can be found online and if you have access to

web/src/components/UpdateModal/UpdateModal.tsx

@@ -1,34 +1,89 @@
 import React, { useEffect, useState } from 'react'
-import Modal from '../Modal/Modal'
+import { useHistory } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
 import './UpdateModal.scss'
 
-import { useHistory } from 'react-router-dom'
+import Modal from '../Modal/Modal'
 import Button from '../Button/Button'
 import Typography from '../Typography/Typography'
 import Tag from '../Tag/Tag'
+import { ModalState, OpenModal } from '../../context/ModalContexts'
 
 export enum ViewingReleaseNotes {
   ReleaseNotes,
   MainMessage,
 }
 
 export type UpdateModalProps = {
-  // proptypes
   show: boolean
+  modalState: ModalState
+  setModalState: React.Dispatch<React.SetStateAction<ModalState>>
   onClose: () => void
   releaseTag: string
   releaseSize?: string
-  heading: string
-  content: React.ReactElement
+  releaseNotes: string
+  hasMigratedSharedProject: boolean
+}
+
+const Content = ({
+  modalState,
+  releaseNotes,
+  setModalState,
+  hasMigratedSharedProject,
+}: {
+  hasMigratedSharedProject: boolean
+  modalState: ModalState
+  releaseNotes: string
+  setModalState: React.Dispatch<React.SetStateAction<ModalState>>
+}) => {
+  return (
+    <Typography style={'body-modal'}>
+      {modalState.id === OpenModal.UpdateApp &&
+        modalState.section === ViewingReleaseNotes.MainMessage && (
+          <div>
+            {hasMigratedSharedProject ? (
+              <>
+                Update is required to access a shared project brought to the
+                updated version by another team member. You can continue using
+                your personal projects without the update.
+              </>
+            ) : (
+              <>
+                By updating you'll gain access to bug fixes, new features, and
+                other improvements.
+              </>
+            )}{' '}
+            See{' '}
+            <a
+              onClick={() =>
+                setModalState({
+                  id: OpenModal.UpdateApp,
+                  section: ViewingReleaseNotes.ReleaseNotes,
+                })
+              }
+            >
+              Release Notes & Changelog
+            </a>
+            .
+          </div>
+        )}
+      {modalState.id === OpenModal.UpdateApp &&
+        modalState.section === ViewingReleaseNotes.ReleaseNotes && (
+          <ReactMarkdown>{releaseNotes}</ReactMarkdown>
+        )}
+    </Typography>
+  )
 }
 
 const UpdateModal: React.FC<UpdateModalProps> = ({
   show,
+  modalState,
+  setModalState,
   onClose,
   releaseTag,
   releaseSize,
-  heading,
-  content,
+  releaseNotes,
+  hasMigratedSharedProject,
 }) => {
   const history = useHistory()
   const runUpdate = () => {
@@ -58,7 +113,13 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
     if (contentDiv) {
       setContentHeight(contentDiv.clientHeight)
     }
-  }, [contentDiv, content])
+  }, [contentDiv, releaseNotes, modalState, hasMigratedSharedProject])
+
+  const heading =
+    modalState.id === OpenModal.UpdateApp &&
+    modalState.section === ViewingReleaseNotes.MainMessage
+      ? 'Update to newest version of Acorn'
+      : 'Release Notes'
 
   return (
     <div className="update-modal-wrapper">
@@ -91,7 +152,12 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             }`}
           >
             <div className="update-modal-content-text" ref={setContentDiv}>
-              <Typography style={'body-modal'}>{content}</Typography>
+              <Content
+                modalState={modalState}
+                releaseNotes={releaseNotes}
+                setModalState={setModalState}
+                hasMigratedSharedProject={hasMigratedSharedProject}
+              />
             </div>
           </div>
           {/* Buttons */}