Empty msg fix, unread after opening msg fix

src/pages/_app.js

@@ -7,7 +7,7 @@ import Layout from '../components/layout'
 import '../defaultStyles.css'
 import constants from '../constants.json'
 
-const queryClient = new QueryClient({
+export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: Infinity,
@@ -44,20 +44,12 @@ const getGlobalProps = () => {
 }
 
 function App({ Component, pageProps, router }) {
-  const [userId, setUserId] = useState()
-  const [motd, setMotd] = useState()
-  const [unreads, setUnreads] = useState()
   const [globalState, setGlobalState] = useState({})
-  const { data } = useQuery('hasNewMsgs', () => getGlobalProps(), {
+  const { data } = useQuery(['infos'], () => getGlobalProps(), {
     refetchOnWindowFocus: true,
   })
 
-  useEffect(() => {
-    if (!data) return
-    setUserId(data.uid)
-    setMotd(data.motd)
-    setUnreads(data.unreads)
-  }, [data])
+  const { motd, uid: userId, unreads } = data || {}
 
   useEffect(() => {
     getGlobalProps()

src/pages/chat.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import Head from 'next/head'
 import io from 'socket.io-client'
-
 import linkifyString from 'linkify-string'
 
 import constants from '../constants.json'
 import LoadingIndicator from '../components/LoadingIndicator'
+import { queryClient } from '../pages/_app'
+
 import styles from './chat.module.css'
 
 const byDate = (a, b) => {
@@ -277,7 +278,8 @@ export default class Chat extends React.Component {
   sendMsg(currMsg, type) {
     this.chatInputRef.current.style.height = '40px'
     const { msgs, selectedUser, user } = this.state
-    if (!currMsg) {
+
+    if (!currMsg || !currMsg.trim()) {
       return
     }
     if (this.socket && selectedUser) {
@@ -386,6 +388,10 @@ export default class Chat extends React.Component {
     } catch (e) {
       // e
     }
+    queryClient.setQueryData('infos', (oldData) => ({
+      ...oldData,
+      unreads: oldData.unreads.filter((x) => x !== val),
+    }))
   }
 
   renderChatInput() {
@@ -649,7 +655,7 @@ export default class Chat extends React.Component {
     )
   }
 
-  renderSidebarEntryes() {
+  renderSidebarEntries() {
     const { msgs } = this.state
     const sorted = Object.keys(msgs).sort((a, b) => {
       return msgs[b].lastMessage.date - msgs[a].lastMessage.date
@@ -692,7 +698,7 @@ export default class Chat extends React.Component {
                   <div>Új beszélgetés</div>
                 </div>
                 <hr />
-                {msgs && this.renderSidebarEntryes()}
+                {msgs && this.renderSidebarEntries()}
               </div>
               <span className={styles.spacer} />
               <div></div>