fix: move handling server error to container

TryQuiet · Apr 5, 2024 · 7f28330 · 7f28330
1 parent 2ff58f7
commit 7f28330
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/...sktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx b/...sktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.stories.tsx
@@ -11,6 +11,7 @@ const Template: ComponentStory<typeof PerformCommunityActionComponent> = args =>
 }
 
 export const Component = Template.bind({})
+export const ServerError = Template.bind({})
 
 const args: PerformCommunityActionProps = {
   open: true,
@@ -28,7 +29,16 @@ const args: PerformCommunityActionProps = {
   revealInputValue: false,
 }
 
+const serverErrorArgs: PerformCommunityActionProps = {
+  ...args,
+  serverErrorMessage: 'Could not connect to the server',
+  clearServerError: function (): void {
+    console.log('Clearing server error message')
+  },
+}
+
 Component.args = args
+ServerError.args = serverErrorArgs
 
 const component: ComponentMeta<typeof PerformCommunityActionComponent> = {
   title: 'Components/JoinCommunity',

diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/JoinCommunity/JoinCommunity.tsx
@@ -6,6 +6,7 @@ import PerformCommunityActionComponent from '../../../components/CreateJoinCommu
 import { useModal } from '../../../containers/hooks'
 import { ModalName } from '../../../sagas/modals/modals.types'
 import { socketSelectors } from '../../../sagas/socket/socket.selectors'
+import { errors as errorsState } from '@quiet/state-manager'
 
 const JoinCommunity = () => {
   const dispatch = useDispatch()
@@ -25,6 +26,7 @@ const JoinCommunity = () => {
   )
 
   const [revealInputValue, setRevealInputValue] = useState<boolean>(false)
+  const [serverErrorMessage, setServerErrorMessage] = useState<string>('')
 
   useEffect(() => {
     if (isConnected && !currentCommunity && !joinCommunityModal.open) {
@@ -51,6 +53,19 @@ const JoinCommunity = () => {
     }
   }
 
+  useEffect(() => {
+    if (downloadInviteDataError?.message) {
+      setServerErrorMessage(downloadInviteDataError.message)
+    }
+  }, [downloadInviteDataError])
+
+  const clearServerError = () => {
+    if (downloadInviteDataError) {
+      dispatch(errorsState.actions.clearError(downloadInviteDataError))
+      setServerErrorMessage('')
+    }
+  }
+
   const handleClickInputReveal = () => {
     revealInputValue ? setRevealInputValue(false) : setRevealInputValue(true)
   }
@@ -66,7 +81,8 @@ const JoinCommunity = () => {
       hasReceivedResponse={Boolean(currentIdentity && !currentIdentity.userCertificate)}
       revealInputValue={revealInputValue}
       handleClickInputReveal={handleClickInputReveal}
-      downloadInviteDataError={downloadInviteDataError}
+      serverErrorMessage={serverErrorMessage}
+      clearServerError={clearServerError}
     />
   )
 }

diff --git a/...s/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx b/...s/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
@@ -21,8 +21,7 @@ import { IconButton, InputAdornment } from '@mui/material'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import Visibility from '@mui/icons-material/Visibility'
 import { parseName } from '@quiet/common'
-import { getInvitationCodes, errors as errorsState } from '@quiet/state-manager'
-import { useDispatch } from 'react-redux'
+import { getInvitationCodes } from '@quiet/state-manager'
 
 const PREFIX = 'PerformCommunityActionComponent'
 
@@ -138,7 +137,8 @@ export interface PerformCommunityActionProps {
   hasReceivedResponse: boolean
   revealInputValue?: boolean
   handleClickInputReveal?: () => void
-  downloadInviteDataError?: ErrorPayload | null
+  serverErrorMessage?: string
+  clearServerError?: () => void
 }
 
 export const PerformCommunityActionComponent: React.FC<PerformCommunityActionProps> = ({
@@ -152,9 +152,9 @@ export const PerformCommunityActionComponent: React.FC<PerformCommunityActionPro
   hasReceivedResponse,
   revealInputValue,
   handleClickInputReveal,
-  downloadInviteDataError,
+  serverErrorMessage,
+  clearServerError,
 }) => {
-  const dispatch = useDispatch()
   const [formSent, setFormSent] = useState(false)
 
   const [communityName, setCommunityName] = useState('...')
@@ -179,12 +179,12 @@ export const PerformCommunityActionComponent: React.FC<PerformCommunityActionPro
   })
 
   useEffect(() => {
-    if (downloadInviteDataError) {
-      setError('name', { message: downloadInviteDataError.message })
+    if (serverErrorMessage) {
+      setError('name', { message: serverErrorMessage })
       setFormSent(false)
-      dispatch(errorsState.actions.clearError(downloadInviteDataError))
+      clearServerError?.()
     }
-  }, [dispatch, downloadInviteDataError])
+  }, [serverErrorMessage])
 
   const onSubmit = (values: PerformCommunityActionFormValues) => submitForm(handleCommunityAction, values, setFormSent)