Merge pull request #171 from VKCOM/o.shcherbakov/snackbar/QA-16708

feat(ui): add global error toast

Author: oshcherbakovv

ui/src/api/auth/auth-client.ts

@@ -2,7 +2,14 @@ import axios from 'axios'
 
 import { variablesConfig } from '@/config/variables.config'
 
+import { extractMessageOnErrorResponse } from '../interceptors'
+
 export const authClient = axios.create({
   baseURL: variablesConfig[import.meta.env.MODE].openStfApiHostUrl,
   withCredentials: true,
 })
+
+authClient.interceptors.response.use(
+  (response) => response,
+  (error) => extractMessageOnErrorResponse(error)
+)

ui/src/api/interceptor.ts

@@ -0,0 +1,44 @@
+import { authStore } from '@/store/auth-store'
+import { globalToast } from '@/store/global-toast'
+
+import type { AxiosError, InternalAxiosRequestConfig } from 'axios'
+import type { ErrorResponse, UnexpectedErrorResponse } from '@/generated/types'
+
+export const attachTokenOnRequest = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
+  const { jwt } = authStore
+
+  config.headers.Authorization = `Bearer ${jwt}`
+
+  return config
+}
+
+export const logoutOnErrorResponse = async (error: AxiosError<ErrorResponse>): Promise<AxiosError<ErrorResponse>> => {
+  const originalRequest = error.config
+
+  if (originalRequest && error.response?.status === 401) {
+    authStore.logout()
+  }
+
+  return Promise.reject(error)
+}
+
+export const extractMessageOnErrorResponse = async (
+  error: AxiosError<UnexpectedErrorResponse | ErrorResponse>
+): Promise<AxiosError<UnexpectedErrorResponse | ErrorResponse>> => {
+  const { response } = error
+
+  // NOTE: Errors can be filtered
+  if (response?.data && 'description' in response.data) {
+    globalToast.setMessage(response.data.description)
+  }
+
+  if (response?.data && 'message' in response.data) {
+    globalToast.setMessage(response.data.message)
+  }
+
+  if (response) {
+    return Promise.reject(response)
+  }
+
+  return Promise.reject(error)
+}

ui/src/api/interceptors.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 import { variablesConfig } from '@/config/variables.config'
 
-import { attachTokenOnRequest, logoutOnErrorResponse } from '../interceptor'
+import { attachTokenOnRequest, extractMessageOnErrorResponse, logoutOnErrorResponse } from '../interceptors'
 
 export const openstfApiClient = axios.create({
   baseURL: `${variablesConfig[import.meta.env.MODE].openStfApiHostUrl}/api/v1`,
@@ -11,3 +11,7 @@ export const openstfApiClient = axios.create({
 
 openstfApiClient.interceptors.request.use((config) => attachTokenOnRequest(config))
 openstfApiClient.interceptors.response.use((response) => response, logoutOnErrorResponse)
+openstfApiClient.interceptors.response.use(
+  (response) => response,
+  (error) => extractMessageOnErrorResponse(error)
+)

ui/src/api/openstf-api/openstf-api-client.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 import { variablesConfig } from '@/config/variables.config'
 
-import { attachTokenOnRequest, logoutOnErrorResponse } from '../interceptor'
+import { attachTokenOnRequest, extractMessageOnErrorResponse, logoutOnErrorResponse } from '../interceptors'
 
 export const openstfClient = axios.create({
   baseURL: variablesConfig[import.meta.env.MODE].openStfApiHostUrl,
@@ -11,3 +11,7 @@ export const openstfClient = axios.create({
 
 openstfClient.interceptors.request.use((config) => attachTokenOnRequest(config))
 openstfClient.interceptors.response.use((response) => response, logoutOnErrorResponse)
+openstfClient.interceptors.response.use(
+  (response) => response,
+  (error) => extractMessageOnErrorResponse(error)
+)

ui/src/api/openstf/openstf-client.ts

@@ -1,17 +1,43 @@
+import { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { useTranslation } from 'react-i18next'
 import { AdaptivityProvider, AppRoot, ConfigProvider } from '@vkontakte/vkui'
 
+import { ConditionalRender } from '@/components/lib/conditional-render'
+
 import { useTheme } from '@/lib/hooks/use-theme.hook'
 
+import { globalToast } from './store/global-toast'
+import { ErrorToast } from './components/lib/error-toast'
+
 import type { ReactNode } from 'react'
 
-export const AppWrapper = ({ children }: { children: ReactNode }) => {
+export const AppWrapper = observer(({ children }: { children: ReactNode }) => {
   const { theme } = useTheme()
+  const { t } = useTranslation()
+  const [isToastVisible, setIsToastVisible] = useState(false)
+
+  useEffect(() => {
+    if (globalToast.message && !isToastVisible) {
+      setIsToastVisible(true)
+    }
+  }, [globalToast.message])
 
   return (
     <ConfigProvider colorScheme={theme === 'system' ? undefined : theme} platform='vkcom'>
       <AdaptivityProvider>
         <AppRoot>{children}</AppRoot>
+        <ConditionalRender conditions={[isToastVisible]}>
+          <ErrorToast
+            text={globalToast.message}
+            title={t('Error')}
+            onClose={() => {
+              globalToast.setMessage('')
+              setIsToastVisible(false)
+            }}
+          />
+        </ConditionalRender>
       </AdaptivityProvider>
     </ConfigProvider>
   )
-}
+})

ui/src/app-wrapper.tsx

@@ -0,0 +1,32 @@
+import { Input } from '@vkontakte/vkui'
+
+import type { ReactNode } from 'react'
+
+const emailRegex = '.+\\@.+\\..+'
+
+type EmailInputProps = {
+  value: string
+  onChange: (value: string) => void
+  onError: (error: string) => void
+  placeholder?: string
+  before?: ReactNode
+}
+
+export const EmailInput = ({ before, value, placeholder, onChange, onError }: EmailInputProps) => (
+  <Input
+    before={before}
+    placeholder={placeholder}
+    type='email'
+    value={value}
+    required
+    onChange={(event) => {
+      onError('')
+
+      if (!new RegExp(emailRegex, 'i').test(event.target.value)) {
+        onError('Invalid email')
+      }
+
+      onChange(event.target.value)
+    }}
+  />
+)

ui/src/components/lib/email-input/email-input.tsx

@@ -0,0 +1 @@
+export { EmailInput } from './email-input'

ui/src/components/lib/email-input/index.ts

@@ -0,0 +1,19 @@
+import { Snackbar } from '@vkontakte/vkui'
+import { Icon28ErrorCircleOutline } from '@vkontakte/icons'
+
+type ErrorToastProps = {
+  title: string
+  text: string
+  onClose: () => void
+}
+
+export const ErrorToast = ({ title, text, onClose }: ErrorToastProps) => (
+  <Snackbar
+    before={<Icon28ErrorCircleOutline fill='var(--vkui--color_accent_orange_fire)' />}
+    placement='bottom-end'
+    subtitle={text}
+    onClose={onClose}
+  >
+    {title}
+  </Snackbar>
+)

ui/src/components/lib/error-toast/error-toast.tsx

@@ -0,0 +1 @@
+export { ErrorToast } from './error-toast'

ui/src/components/lib/error-toast/index.ts

@@ -65,6 +65,7 @@ export const ListItem = observer(
     return (
       <div className={styles.listItem}>
         <Cell
+          activated={isOpen}
           after={after}
           before={onIsSelectedChange && <Checkbox checked={isSelected} onChange={onIsSelectedChange} />}
           extraSubtitle={extraSubtitle}

ui/src/components/lib/list-item/list-item.tsx

@@ -2,15 +2,15 @@ import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useTranslation } from 'react-i18next'
 import { Icon56UserAddBadgeOutline } from '@vkontakte/icons'
-import { Button, FormItem, FormLayoutGroup, Input } from '@vkontakte/vkui'
+import { Button, FormItem, FormLayoutGroup, Input, Spacing } from '@vkontakte/vkui'
 
 import { BaseModal } from '@/components/lib/base-modal'
+import { EmailInput } from '@/components/lib/email-input'
 
 import { useCreateUser } from '@/lib/hooks/use-create-user.hook'
 
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, FormEvent } from 'react'
 
-const emailRegex = '.+\\@.+\\..+'
 const nameRegex = '^[0-9a-zA-Z\\-_\\. ]{1,50}$'
 
 type CreateUserModalProps = {
@@ -36,17 +36,9 @@ export const CreateUserModal = observer(({ isOpen, onClose }: CreateUserModalPro
     setName(event.target.value)
   }
 
-  const onEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setEmailError('')
+  const onSave = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
 
-    if (!new RegExp(emailRegex, 'i').test(event.target.value)) {
-      setEmailError('Invalid email')
-    }
-
-    setEmail(event.target.value)
-  }
-
-  const onSave = () => {
     createUser({ email, name })
 
     setName('')
@@ -56,24 +48,31 @@ export const CreateUserModal = observer(({ isOpen, onClose }: CreateUserModalPro
   }
 
   return (
-    <BaseModal
-      icon={<Icon56UserAddBadgeOutline />}
-      isOpen={isOpen}
-      title={t('Create new user')}
-      actions={
-        <Button disabled={!name || !email} mode='primary' size='l' type='submit' stretched onClick={onSave}>
-          {t('Save')}
-        </Button>
-      }
-      onClose={onClose}
-    >
-      <form>
+    <BaseModal icon={<Icon56UserAddBadgeOutline />} isOpen={isOpen} title={t('Create new user')} onClose={onClose}>
+      <form onSubmit={onSave}>
         <FormLayoutGroup>
           <FormItem bottom={nameError} status={nameError ? 'error' : undefined} top={t('Name')}>
             <Input placeholder='E.g. User' value={name} required onChange={onNameChange} />
           </FormItem>
           <FormItem bottom={emailError} status={emailError ? 'error' : undefined} top={t('Email')}>
-            <Input placeholder='E.g. user@mail.com' type='email' value={email} required onChange={onEmailChange} />
+            <EmailInput
+              placeholder='E.g. user@mail.com'
+              value={email}
+              onChange={(value) => setEmail(value)}
+              onError={(error) => setEmailError(error)}
+            />
+          </FormItem>
+          <Spacing />
+          <FormItem>
+            <Button
+              disabled={!name || !email || !!nameError || !!emailError}
+              mode='primary'
+              size='l'
+              type='submit'
+              stretched
+            >
+              {t('Save')}
+            </Button>
           </FormItem>
         </FormLayoutGroup>
       </form>