Fixes Organization data display on edit (header and view)

src/components/Account/EditProfile.tsx

@@ -20,7 +20,7 @@ import {
   Textarea,
 } from '@chakra-ui/react'
 import { useOrganizationModal } from '@components/Organization/OrganizationModalProvider'
-import { errorToString, useClient } from '@vocdoni/react-providers'
+import { errorToString, useClient, useOrganization } from '@vocdoni/react-providers'
 import { Account } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -36,8 +36,9 @@ interface EditFormFields {
 
 const REGEX_AVATAR = /^(https?:\/\/|ipfs:\/\/)/i
 
-const EditProfile = () => {
-  const { account, client } = useClient()
+const EditProfile = ({ callback }: { callback?: any }) => {
+  const { account } = useClient()
+  const { update } = useOrganization()
   const { t } = useTranslation()
 
   const [loading, setLoading] = useState(false)
@@ -83,7 +84,8 @@ const EditProfile = () => {
     setLoading(true)
 
     try {
-      await client.updateAccountInfo(new Account({ ...account?.account, ...values }))
+      await update(new Account({ ...account?.account, ...values }))
+      if (typeof callback === 'function') callback()
       onClose()
     } catch (err: any) {
       setError(errorToString(err))

src/components/Organization/OrganizationModalProvider.tsx

@@ -1,5 +1,6 @@
 import { useDisclosure } from '@chakra-ui/react'
 import EditProfile from '@components/Account/EditProfile'
+import { OrganizationProvider, useClient } from '@vocdoni/react-providers'
 import { createContext, useContext } from 'react'
 
 type OrganizationModalState = Pick<ReturnType<typeof useDisclosure>, 'isOpen' | 'onOpen' | 'onClose'>
@@ -8,6 +9,7 @@ const OrganizationModalContext = createContext<OrganizationModalState | undefine
 
 export const OrganizationModalProvider = ({ children }: { children: React.ReactNode | React.ReactNode[] }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { account, fetchAccount } = useClient()
 
   const modalValues = {
     isOpen,
@@ -16,10 +18,12 @@ export const OrganizationModalProvider = ({ children }: { children: React.ReactN
   }
 
   return (
-    <OrganizationModalContext.Provider value={modalValues}>
-      <EditProfile />
-      {children}
-    </OrganizationModalContext.Provider>
+    <OrganizationProvider organization={account}>
+      <OrganizationModalContext.Provider value={modalValues}>
+        <EditProfile callback={fetchAccount} />
+        {children}
+      </OrganizationModalContext.Provider>
+    </OrganizationProvider>
   )
 }
 

src/components/Organization/View.tsx

@@ -26,7 +26,7 @@ import user from '/assets/empty-list-user.png'
 const OrganizationView = () => {
   const { t } = useTranslation()
   const { client, account } = useClient()
-  const { organization } = useOrganization()
+  const { organization, fetch } = useOrganization()
 
   const [electionsList, setElectionsList] = useState<(PublishedElection | InvalidElection)[]>([])
   const [loading, setLoading] = useState<boolean>(false)
@@ -38,6 +38,10 @@ const OrganizationView = () => {
   const [page, setPage] = useState<number>(-1)
   useObserver(refObserver, setPage)
 
+  useEffect(() => {
+    fetch()
+  }, [account])
+
   // resets fields on account change
   useEffect(() => {
     setElectionsList([])