feat: main page chats imprv

frontend/eslint.config.js

@@ -11,6 +11,7 @@ export default tseslint.config(
       '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/consistent-type-definitions': 'off',
       '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-extraneous-class': 'off',
     },
   }
 )

frontend/src/App.tsx

@@ -1,12 +1,14 @@
-import { TanStackProvider, ThemeContext } from '@context'
+import { ThemeContext } from '@context'
 import '@styles/index.scss'
 import { TonConnectUIProvider } from '@tonconnect/ui-react'
 import { checkIsMobile, checkStartAppParams } from '@utils'
 import { useContext, useEffect } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import config from '@config'
+import { AuthService } from '@services'
 import { useUser, useUserActions } from '@store'
+import { useAuthQuery } from '@store-new'
 
 import Routes from './Routes'
 
@@ -17,6 +19,8 @@
   const { darkTheme } = useContext(ThemeContext)
   const navigate = useNavigate()
 
+  // useAuthQuery()
+
   const { authenticateUserAction, fetchUserAction } = useUserActions()
   const { isAuthenticated } = useUser()
 
@@ -90,19 +94,17 @@
     }
   }, [isAuthenticated])
 
-  if (!isAuthenticated) return null
+  // if (!AuthService.isAuth()) return null
 
   return (
-    <TanStackProvider>
-      <TonConnectUIProvider
-        manifestUrl={config.tonConnectManifestUrl}
-        actionsConfiguration={{
-          twaReturnUrl: `https://t.me/${config.botName}/gate?startapp=ch_${clientChatSlug}`,
-        }}
-      >
-        {Routes}
-      </TonConnectUIProvider>
-    </TanStackProvider>
+    <TonConnectUIProvider
+      manifestUrl={config.tonConnectManifestUrl}
+      actionsConfiguration={{
+        twaReturnUrl: `https://t.me/${config.botName}/gate?startapp=ch_${clientChatSlug}`,
+      }}
+    >
+      {Routes}
+    </TonConnectUIProvider>
   )
 }
 

frontend/src/common/hooks/useClipboard.ts

@@ -3,17 +3,17 @@
 export function useClipboard() {
   const { showToast } = useToast()
 
-  const webApp = window.Telegram.WebApp
+  const webApp = window.Telegram?.WebApp
 
   return {
     copy: (text: string, message: string) => {
-      webApp.HapticFeedback.notificationOccurred('success')
+      webApp?.HapticFeedback.notificationOccurred('success')
       navigator.clipboard
         .writeText(text.toString())
         .then(() => {
           showToast({ message, type: 'copy', time: 2000 })
         })
         .catch((err) => {
           showToast({ type: 'error', message: 'Unable to copy' })
         })
     },

frontend/src/common/utils/constants.ts

@@ -1,16 +1,20 @@
-import { ChatsPopularSortBy } from '@types'
+import { ChatsPopularOrderBy } from '@types'
 
 export const API_VALIDATION_ERROR = 'Fill fields correctly'
 
 export const API_ERRORS = {}
 
 export const TANSTACK_KEYS = {
-  CHATS_POPULAR: (sortBy: ChatsPopularSortBy) => ['chats', 'popular', sortBy],
+  AUTH: ['auth'],
+  USER: ['user'],
+  CHATS_POPULAR: (sortBy: ChatsPopularOrderBy) => ['chats', 'popular', sortBy],
   CHAT: (slug: string) => ['chat', slug],
   ADMIN_CHATS: ['admin', 'chats'],
 }
 
 export const TANSTACK_TTL = {
+  AUTH: 5 * 60 * 1000, // 5 minute
+  USER: 1 * 60 * 1000, // 1 minute
   CHATS_POPULAR: 5 * 60 * 1000, // 5 minute
   ADMIN_CHATS: 5 * 60 * 1000, // 5 minute
   CHAT: 5 * 60 * 1000, // 5 minute

frontend/src/common/utils/goTo.ts

@@ -1,9 +1,9 @@
 export const goTo = (link: string) => {
-  const webApp = window.Telegram.WebApp
+  const webApp = window.Telegram?.WebApp
 
   if (link.includes('t.me')) {
-    webApp.openTelegramLink(link)
+    webApp?.openTelegramLink(link)
   } else {
-    webApp.openLink(link)
+    webApp?.openLink(link)
   }
 }

frontend/src/common/utils/index.ts

@@ -11,3 +11,4 @@ export * from './createMembersCount'
 export * from './createConditionDescription'
 export * from './checkIsMobile'
 export * from './hapticFeedback'
+export * from './pluralize'

frontend/src/common/utils/pluralize.ts

@@ -0,0 +1,17 @@
+export const pluralize = (
+  textForms: [string, string, string], // [one, few, many]
+  multiplier: number // number of items
+): string => {
+  const mod10 = multiplier % 10
+  const mod100 = multiplier % 100
+
+  const prettifiedMultiplier = multiplier.toLocaleString()
+
+  if (mod10 === 1 && mod100 !== 11) {
+    return `${prettifiedMultiplier} ${textForms[0]}`
+  }
+  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) {
+    return `${prettifiedMultiplier} ${textForms[1]}`
+  }
+  return `${prettifiedMultiplier} ${textForms[2]}`
+}

frontend/src/components/BlockNew/BlockNew.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import styles from './BlockNew.module.scss'
 
 interface BlockNewProps {
+  id?: string
   children: React.ReactNode
   margin?: string
   defaultWidth?: boolean
@@ -50,6 +51,7 @@ interface BlockNewProps {
 }
 
 export const BlockNew = ({
+  id,
   children,
   fixed,
   row,
@@ -65,6 +67,7 @@ export const BlockNew = ({
 }: BlockNewProps) => {
   return (
     <div
+      id={id}
       onClick={onClick}
       style={{
         padding,

frontend/src/components/ListToggler/ListToggler.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames'
 
 import styles from './ListToggler.module.scss'
 
-const webApp = window.Telegram.WebApp
+const webApp = window.Telegram?.WebApp
 
 interface ListTogglerProps {
   isEnabled: boolean

frontend/src/components/PageLayoutNew/PageLayoutNew.module.scss

@@ -1,8 +1,9 @@
 .root {
   overflow-y: auto;
-  height: 100vh;
+  min-height: 100vh;
   animation: fadeIn 0.3s ease-in-out;
   padding: 16px 0;
+  overflow: hidden;
 }
 
 // .isMobile {

frontend/src/components/TelegramMainButton/TelegramMainButton.tsx

@@ -69,19 +69,19 @@ export const TelegramMainButton = memo(
     }, [disabled, loading, text])
 
     useEffect(() => {
-      if (webApp.MainButton && onClick) {
-        webApp.MainButton.onClick(onClick)
+      if (webApp?.MainButton && onClick) {
+        webApp?.MainButton.onClick(onClick)
 
         return () => {
-          if (webApp.MainButton) {
-            webApp.MainButton.offClick(onClick)
+          if (webApp?.MainButton) {
+            webApp?.MainButton.offClick(onClick)
           }
         }
       }
     }, [onClick])
 
     if (
-      webApp.platform === 'unknown' &&
+      webApp?.platform === 'unknown' &&
       process.env.NODE_ENV !== 'production' &&
       isVisible
     ) {

frontend/src/components/Toast/ToastElement.tsx

@@ -17,7 +17,7 @@ export interface ToastOptions {
     | 'warning'
 }
 
-const webApp = window.Telegram.WebApp
+const webApp = window.Telegram?.WebApp
 
 export const ToastElement = ({
   children,
@@ -52,11 +52,11 @@ export const ToastElement = ({
   useEffect(() => {
     setTimeout(() => {
       if (type === 'error') {
-        webApp.HapticFeedback.notificationOccurred('error')
+        webApp?.HapticFeedback.notificationOccurred('error')
       }
 
       if (type === 'success') {
-        webApp.HapticFeedback.notificationOccurred('success')
+        webApp?.HapticFeedback.notificationOccurred('success')
       }
       setIsOpen(true)
     }, 50)

frontend/src/context/TanStackProvider/TanStackProvider.tsx

@@ -2,9 +2,11 @@ import { useToast } from '@components'
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
 import { QueryClient, QueryCache, MutationCache } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
-import { API_ERRORS } from '@utils'
+import { API_ERRORS, TANSTACK_KEYS } from '@utils'
 import { PropsWithChildren, useMemo } from 'react'
 
+import { AuthService } from '@services'
+
 const HIDDEN_ERRORS = ['user_forbidden', 'synced_recently', 'TON_CONNECT']
 
 export const TanStackProvider = (props: PropsWithChildren) => {
@@ -53,10 +55,19 @@ export const TanStackProvider = (props: PropsWithChildren) => {
             retryOnMount: false,
             refetchOnWindowFocus: false,
             refetchOnReconnect: false,
+            enabled: (query) => {
+              if (query.queryKey === TANSTACK_KEYS.AUTH) return true
+              return AuthService.isAuth()
+            },
           },
           mutations: {
             retry: false,
             throwOnError: false,
+            onMutate: () => {
+              if (!AuthService.isAuth()) {
+                throw new Error('Authorization required')
+              }
+            },
           },
         },
       }),

frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import { ToastProvider } from '@components'
-import { ThemeProvider } from '@context'
+import { TanStackProvider, ThemeProvider } from '@context'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
@@ -8,12 +8,14 @@ import App from './App'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
-    <BrowserRouter>
-      <ToastProvider>
-        <ThemeProvider>
-          <App />
-        </ThemeProvider>
-      </ToastProvider>
-    </BrowserRouter>
+    <TanStackProvider>
+      <BrowserRouter>
+        <ToastProvider>
+          <ThemeProvider>
+            <App />
+          </ThemeProvider>
+        </ToastProvider>
+      </BrowserRouter>
+    </TanStackProvider>
   </StrictMode>
 )

frontend/src/pages/admin/AddBotToChatPage/AddBotToChatPage.tsx

@@ -18,7 +18,7 @@ import { AdminChat, useChatActions } from '@store'
 
 import { findNewChat } from './helpers'
 
-const webApp = window.Telegram.WebApp
+const webApp = window.Telegram?.WebApp
 
 export const AddBotToChatPage = () => {
   const { appNavigate } = useAppNavigation()
@@ -39,7 +39,7 @@ export const AddBotToChatPage = () => {
   }, [appNavigate])
 
   const addGatewayBot = useCallback(() => {
-    webApp.openTelegramLink(
+    webApp?.openTelegramLink(
       `${config.botLink}?startgroup=&admin=restrict_members+invite_users`
     )
     setIsCheckingNewChat(true)

frontend/src/pages/admin/BotAddedSuccessPage/BotAddedSuccessPage.tsx

@@ -15,7 +15,7 @@ import { useParams } from 'react-router-dom'
 
 import { useChatActions, useApp, useAppActions } from '@store'
 
-const webApp = window.Telegram.WebApp
+const webApp = window.Telegram?.WebApp
 
 export const BotAddedSuccessPage = () => {
   const { chatSlug } = useParams<{ chatSlug: string }>()
@@ -30,7 +30,7 @@ export const BotAddedSuccessPage = () => {
     if (!chatSlug) return
     try {
       await fetchChatAction(chatSlug)
-      webApp.HapticFeedback.notificationOccurred('success')
+      webApp?.HapticFeedback.notificationOccurred('success')
     } catch (error) {
       console.error(error)
       adminChatNotFound()

frontend/src/pages/admin/ChatPage/components/ChatConditions/ChatConditions.tsx

@@ -36,7 +36,7 @@ import { DraggableCondition } from '../DraggableCondition'
 import { DroppableGroup } from '../DroppableGroup'
 import styles from './ChatConditions.module.scss'
 
-const webApp = window.Telegram.WebApp
+const webApp = window.Telegram?.WebApp
 
 export const ChatConditions = () => {
   const { appNavigate } = useAppNavigation()
@@ -69,7 +69,7 @@ export const ChatConditions = () => {
         order: order,
         chatSlug: chat?.slug || '',
       })
-      webApp.HapticFeedback.impactOccurred('soft')
+      webApp?.HapticFeedback.impactOccurred('soft')
     } catch (error) {
       console.error(error)
       showToast({
@@ -137,7 +137,7 @@ export const ChatConditions = () => {
   const handleDragStart = (event: DragStartEvent) => {
     if (!canDrag) return
     setActiveId(event.active.id as string)
-    webApp.HapticFeedback.impactOccurred('light')
+    webApp?.HapticFeedback.impactOccurred('light')
   }
 
   const handleDragEnd = (event: DragEndEvent) => {

frontend/src/pages/admin/ChatPage/components/ChatHeader/ChatHeader.tsx

@@ -23,9 +23,9 @@ export const ChatHeader = () => {
   const [description, setDescription] = useState(chat?.description ?? '')
 
   const isMobile =
-    webApp.platform === 'ios' ||
-    webApp.platform === 'android' ||
-    webApp.platform === 'android_x'
+    webApp?.platform === 'ios' ||
+    webApp?.platform === 'android' ||
+    webApp?.platform === 'android_x'
 
   const handleChangeDescription = (value: string) => {
     setDescription(value)
@@ -40,12 +40,12 @@ export const ChatHeader = () => {
 
   const handleShareLink = () => {
     if (!chat?.slug) return
-    webApp.HapticFeedback.impactOccurred('soft')
+    webApp?.HapticFeedback.impactOccurred('soft')
 
     const url = `${config.miniAppLink}?startapp=ch_${chat?.slug}`
 
     if (isMobile) {
-      webApp.openTelegramLink(
+      webApp?.openTelegramLink(
         `https://t.me/share/url?url=${encodeURI(url)}&text=${chat.title}`
       )
     } else {
@@ -56,7 +56,7 @@ export const ChatHeader = () => {
   const handleCopyLink = () => {
     if (!chat?.slug) return
     const url = `${config.miniAppLink}?startapp=ch_${chat?.slug}`
-    webApp.HapticFeedback.impactOccurred('soft')
+    webApp?.HapticFeedback.impactOccurred('soft')
     copy(url, 'Link copied!')
   }