quick fix crashes with React 18
Change-Id: If877f643fc3e536718400ec35092b50f098501e8
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 5cf0e87..dfba0d1 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -34,7 +34,7 @@
error: true
})
})
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [props.accountId, props.conversationId])
useEffect(() => {
@@ -82,7 +82,7 @@
return {...state}
})
}).catch(e => console.log(e))
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [state, loadingMessages])
const sendMessage = (message) => {
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 914d697..89f8576 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -7,7 +7,8 @@
export default function ConversationsOverviewCard(props) {
const navigate = useNavigate()
const accountId = props.accountId || useParams().accountId
- const [state, setState] = useState({ loaded: false })
+ const [loaded, setLoaded] = useState(false)
+ const [conversations, setConversations] = useState([])
useEffect(() => {
const controller = new AbortController()
@@ -15,9 +16,10 @@
.then(res => res.json())
.then(result => {
console.log(result)
- setState({ loaded: true, conversations: Object.values(result).map(c => Conversation.from(accountId, c)) })
+ setLoaded(true)
+ setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
})
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [accountId])
return (
@@ -28,7 +30,7 @@
Conversations
</Typography>
<Typography gutterBottom variant="h5" component="h2">
- {state.loaded ? state.conversations.length : <CircularProgress size={24} />}
+ {loaded ? conversations.length : <CircularProgress size={24} />}
</Typography>
</CardContent>
</CardActionArea>
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index c9e0753..81eed77 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -17,11 +17,9 @@
const AccountSelection = (props) => {
const navigate = useNavigate()
- const [state, setState] = useState({
- loaded: false,
- error: false,
- accounts: []
- })
+ const [loaded, setLoaded] = useState(false)
+ const [error, setError] = useState(false)
+ const [accounts, setAccounts] = useState([])
useEffect(() => {
const controller = new AbortController()
@@ -32,22 +30,18 @@
if (result.length === 0) {
navigate('/newAccount')
} else {
- setState({
- loaded: true,
- accounts: result.map(account => Account.from(account)),
- })
+ setLoaded(true)
+ setAccounts(result.map(account => Account.from(account)))
}
}, error => {
console.log(`get error ${error}`)
- setState({
- loaded: true,
- error: true
- })
+ setLoaded(true)
+ setError(true)
}).catch(e => console.log(e))
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [])
- if (!state.loaded)
+ if (!loaded)
return <LoadingPage />
return (
<React.Fragment>
@@ -57,7 +51,7 @@
<Card style={{marginTop:32, marginBottom:32}}>
<CardHeader title="Choose an account" />
<List>
- {state.accounts.map(account => <ListItemLink key={account.getId()}
+ {accounts.map(account => <ListItemLink key={account.getId()}
icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
to={`/account/${account.getId()}/settings`}
primary={account.getDisplayName()}
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 597d246..cb7fa4a 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -18,7 +18,7 @@
console.log(result)
setState({loaded: true, account: Account.from(result)})
}).catch(e => console.log(e))
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [accountId])
return (
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 48edb5d..84a4dc5 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -31,7 +31,7 @@
console.log(result)
setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
})
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [accountId])
useEffect(() => {
@@ -53,7 +53,7 @@
}).catch(e => {
setSearchResults(undefined)
})
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [accountId, searchQuery])
console.log("Messenger render")
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index 00251f9..df0ee49 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -18,7 +18,7 @@
console.log(result)
setState({loaded: true, account: Account.from(result)})
}).catch(e => console.log(e))
- return () => controller.abort()
+ // return () => controller.abort() // crash on React18
}, [accountId])
return (