Merge pull request #33 from QuickBlox/develop

Release v4.0.0

README.md

@@ -27,6 +27,11 @@ REACT_APP_API_BASE_URL=
 REACT_APP_API_AUTH_PATH=
 ```
 
+## Q-Municate Server
+
+For the application to work correctly, you must use [Q-Municate Server](https://github.com/QuickBlox/q-municate-server).
+With its help, user authentication and the operation of all AI features take place.
+
 ## Available Scripts
 
 In the project directory, you can run:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "q-municate",
-  "version": "4.0.0-alpha.13",
+  "version": "4.0.0",
   "private": true,
   "devDependencies": {
     "@types/node": "^16.18.28",
@@ -24,7 +24,7 @@
     "@firebase/auth": "^1.5.1",
     "classnames": "^2.3.2",
     "quickblox": "^2.16.1",
-    "quickblox-react-ui-kit": "0.2.8-beta.19",
+    "quickblox-react-ui-kit": "0.2.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-phone-number-input": "^3.3.7",

src/components/modals/SettingModal.tsx

@@ -5,7 +5,11 @@ import { type QBUser } from 'quickblox/quickblox'
 import { AvatarBig, Close, Remove } from '../../assets/img'
 import Button from '../Button'
 import Input from '../Field/Input'
-import { QBCreateContent, QBUserUpdate } from '../../qb-api-calls'
+import {
+  QBCreateContent,
+  QBDeleteUserAvatar,
+  QBUserUpdate,
+} from '../../qb-api-calls'
 
 interface SettingModalProps {
   user?: QBUser | null
@@ -42,6 +46,7 @@ export default function SettingModal(props: SettingModalProps) {
   }
 
   const handleOnCancelClick = () => {
+    if (!name || !regex.test(name)) return
     setSelectedValue('')
     setAvatarFile(null)
     setName(user!.full_name)
@@ -71,10 +76,10 @@ export default function SettingModal(props: SettingModalProps) {
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
-    if (user?.blob_id && avatarUrl && !avatarFile) {
+    if (user?.blob_id && !avatarUrl) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      QBDeleteUserAvatar(user.blob_id).catch(() => null)
+      await QBDeleteUserAvatar(user.blob_id).catch(() => null)
     }
 
     if (Object.keys(updates).length > 0) {
@@ -97,9 +102,7 @@ export default function SettingModal(props: SettingModalProps) {
 
   return (
     <div className="wrapper">
-      <form
-        onSubmit={handleUpdateUser}
-      >
+      <form onSubmit={handleUpdateUser}>
         <div className={cn('content', 'setting')}>
           <div className="close">
             <span>
@@ -155,7 +158,8 @@ export default function SettingModal(props: SettingModalProps) {
                 }}
               />
               <span className="hint-info">
-                Start with a letter, use only a-z, A-Z, hyphens, underscores, and spaces. Length: 3-50 characters.
+                Start with a letter, use only a-z, A-Z, hyphens, underscores,
+                and spaces. Length: 3-50 characters.
               </span>
             </div>
             <div className={cn('buttons', 'buttons-setting')}>

src/screens/RootScreen/index.tsx

@@ -29,7 +29,6 @@ const RootScreen = (props: RootScreenProps) => {
   } = useModal()
 
   const [user, setUser] = useState<QBUser | null>(null)
-  // const [userName, setUserName] = useState<string>('')
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
 
   const findUserById = async (userId: QBUser['id']) => {
@@ -54,26 +53,33 @@ const RootScreen = (props: RootScreenProps) => {
       if ((user && !user?.full_name) || (user && !regex.test(user.full_name))) {
         setSelectedValue('settings')
       }
-      // else {
-      //   setUserName(user.full_name)
-      // }
+    }
+  }
 
+  const handleUserAvatar = async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    if (user?.blob_id) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      if (user?.blob_id) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        const userAvatarUrl = await QBGetUserAvatar(user.blob_id)
-        setAvatarUrl(userAvatarUrl)
-      }
+      const userAvatarUrl = await QBGetUserAvatar(user.blob_id)
+      setAvatarUrl(userAvatarUrl)
+    } else {
+      setAvatarUrl('')
     }
   }
 
   useEffect(() => {
     if (session?.user_id) {
       void handleReceiveUser()
     }
-  }, [session?.user_id])
+  }, [session.user_id])
+
+  useEffect(() => {
+    void handleUserAvatar()
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+  }, [user?.blob_id])
 
   if (!user) {
     return <LoaderComponent />