chore: use path alias for imports in web

README.md

@@ -86,6 +86,13 @@ pnpm --filter e2e test:ui
 pnpm --filter e2e test:codegen
 ```
 
+### Unit testing
+
+- Run web unit tests
+```bash
+pnpm --filter web test
+```
+
 
 ## Features Roadmap
 

web/src/features/auth/components/AuthFormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '../../../components/Logo'
+import { Logo } from '@/components/Logo'
 
 interface AuthFormWrapperProps {
   title: React.ReactNode

web/src/features/auth/components/LoginForm.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@/components/Button'
+import { Input } from '@/components/Input'
+import { useAuthSetter } from '@/hooks/useAuth'
+import useForm from '@/hooks/useForm'
+import { useToast } from '@/hooks/useToast'
+import { setToken } from '@/utils/token'
+import { isRequired } from '@/utils/validators'
 import { useMutation } from '@tanstack/react-query'
 import { NavLink } from 'react-router-dom'
-import { Button } from '../../../components/Button'
-import { Input } from '../../../components/Input'
-import { useAuthSetter } from '../../../hooks/useAuth'
-import useForm from '../../../hooks/useForm'
-import { useToast } from '../../../hooks/useToast'
-import { setToken } from '../../../utils/token'
-import { isRequired } from '../../../utils/validators'
 import { ILoginVariables, IUserResponse } from '../auth.interface'
 import { login } from '../auth.service'
 

web/src/features/auth/components/SignUpForm.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@/components/Button'
+import { Input } from '@/components/Input'
+import { useAuthSetter } from '@/hooks/useAuth'
+import useForm from '@/hooks/useForm'
+import { useToast } from '@/hooks/useToast'
+import { setToken } from '@/utils/token'
+import { isRequired } from '@/utils/validators'
 import { useMutation } from '@tanstack/react-query'
 import { NavLink } from 'react-router-dom'
-import { Button } from '../../../components/Button'
-import { Input } from '../../../components/Input'
-import { useAuthSetter } from '../../../hooks/useAuth'
-import useForm from '../../../hooks/useForm'
-import { useToast } from '../../../hooks/useToast'
-import { setToken } from '../../../utils/token'
-import { isRequired } from '../../../utils/validators'
 import { ISignUpVariables, IUserResponse } from '../auth.interface'
 import { signup } from '../auth.service'
 

web/src/features/group/components/CreateGroup.tsx

@@ -15,6 +15,7 @@ const CreateGroupForm = ({ onComplete }: { onComplete: () => void }) => {
   const navigate = useNavigate()
   const inputRef = useRef<HTMLInputElement>(null)
   const queryClient = useQueryClient()
+
   const { mutate: createGroup, isPending } = useMutation({
     mutationFn: createNewGroup,
     onSuccess: result => {

web/src/features/group/components/JoinGroup.tsx

@@ -1,11 +1,11 @@
+import { Button } from '@/components/Button'
+import { Dialog } from '@/components/Dialog'
+import { useDisclosure } from '@/hooks/useDisclosure'
+import { useToast } from '@/hooks/useToast'
+import { getSocketIO } from '@/utils/socket'
 import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button } from '../../../components/Button'
-import { Dialog } from '../../../components/Dialog'
-import { useDisclosure } from '../../../hooks/useDisclosure'
-import { useToast } from '../../../hooks/useToast'
-import { getSocketIO } from '../../../utils/socket'
 import { JoinGroupList } from './JoinGroupList'
 
 export const JoinGroup = () => {

web/src/features/group/components/UserGroupItem.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@/utils/style'
 import { NavLink } from 'react-router-dom'
-import { cn } from '../../../utils/style'
 import { IGroup } from '../group.interface'
 
 interface UserGroupItemProps {

web/src/features/group/components/UserGroupList.tsx

@@ -1,8 +1,8 @@
+import { Skeleton } from '@/components/Skeleton'
+import { useAuthState } from '@/hooks/useAuth'
+import { useInView } from '@/hooks/useInView'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { Fragment, useRef } from 'react'
-import { Skeleton } from '../../../components/Skeleton'
-import { useAuthState } from '../../../hooks/useAuth'
-import { useInView } from '../../../hooks/useInView'
 import { fetchUserGroups } from '../group.service'
 import { UserGroupItem } from './UserGroupItem'
 

web/src/features/group/group.interface.ts

@@ -1,4 +1,4 @@
-import { TPaginatedParams } from '../../interfaces/common.interface'
+import { TPaginatedParams } from '@/interfaces/common.interface'
 
 export interface IGroup {
   id: number

web/src/features/group/group.service.ts

@@ -2,7 +2,7 @@ import {
   IPaginatedResult,
   TPaginatedParams,
 } from '@/interfaces/common.interface'
-import { fetcher, getAuthHeaders, stringifyQueryParams } from '@/utils/api'
+import { fetcher, stringifyQueryParams } from '@/utils/api'
 import {
   ICreateGroupArgs,
   IGroup,
@@ -27,6 +27,4 @@ export const createNewGroup = async (args: ICreateGroupArgs): Promise<IGroup> =>
   })
 
 export const fetchGroup = async (groupId: number): Promise<IGroup> =>
-  fetcher(`groups/${groupId}`, {
-    headers: getAuthHeaders(),
-  })
+  fetcher(`groups/${groupId}`, {})

web/src/features/member/components/GroupInfo.tsx

@@ -1,4 +1,4 @@
-import backArrow from '../../../assets/back-svgrepo-com.svg'
+import backArrow from '@/assets/back-svgrepo-com.svg'
 import { MemberList } from './MemberList'
 
 interface MembersListProps {

web/src/features/member/components/MemberItem.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../../utils/style'
+import { cn } from '@/utils/style'
 import { IMember } from '../member.interface'
 
 interface MemberItemProps {

web/src/features/message/components/MessageComposer.tsx

@@ -1,9 +1,9 @@
+import sendSvg from '@/assets/send-svgrepo-com.svg'
+import { Button } from '@/components/Button'
+import { useAutoFocus } from '@/hooks/useAutoFocus'
+import { useToast } from '@/hooks/useToast'
+import { getSocketIO } from '@/utils/socket'
 import { useRef, useState } from 'react'
-import sendSvg from '../../../assets/send-svgrepo-com.svg'
-import { Button } from '../../../components/Button'
-import { useAutoFocus } from '../../../hooks/useAutoFocus'
-import { useToast } from '../../../hooks/useToast'
-import { getSocketIO } from '../../../utils/socket'
 
 interface MessageComposerProps {
   groupId: number

web/src/features/message/components/MessageItem.tsx

@@ -1,5 +1,5 @@
-import { formateChatDate } from '../../../utils/date'
-import { cn } from '../../../utils/style'
+import { formateChatDate } from '@/utils/date'
+import { cn } from '@/utils/style'
 import { IMessage } from '../message.interface'
 
 interface MessageItemProps {

web/src/layouts/ChatLayout.tsx

@@ -1,10 +1,10 @@
+import { PageLoader } from '@/components/PageLoader'
+import { ChatHeader } from '@/features/chat/components'
+import { ChatUser } from '@/features/chat/components/ChatUser'
 import { CreateGroup, GroupList, JoinGroup } from '@/features/group/components'
+import { useSocketConnect } from '@/hooks/useSocketConnect'
+import { cn } from '@/utils/style'
 import { Outlet, useParams } from 'react-router-dom'
-import { PageLoader } from '../components/PageLoader'
-import { ChatHeader } from '../features/chat/components'
-import { ChatUser } from '../features/chat/components/ChatUser'
-import { useSocketConnect } from '../hooks/useSocketConnect'
-import { cn } from '../utils/style'
 
 const ChatLayout = () => {
   const { isConnected } = useSocketConnect()

web/src/utils/api.ts

@@ -1,18 +1,6 @@
 import { config } from '../config'
 import { getToken } from './token'
 
-export const getAuthHeaders = () => {
-  const token = getToken()
-  return {
-    'Content-Type': 'application/json',
-    Authorization: token ? `Bearer ${token}` : '',
-  }
-}
-
-export const getUrl = (path: string) => {
-  return `${config.backendUrl}/api/${path}`
-}
-
 export const stringifyQueryParams = <
   TQueryParams extends Record<string, unknown>,
 >(
@@ -29,10 +17,12 @@ export const stringifyQueryParams = <
 }
 
 export const fetcher = async (path: string, options?: RequestInit) => {
-  const res = await fetch(getUrl(path), {
+  const token = getToken()
+  const res = await fetch(`${config.backendUrl}/api/${path}`, {
     ...options,
     headers: {
-      ...getAuthHeaders(),
+      'Content-Type': 'application/json',
+      Authorization: token ? `Bearer ${token}` : '',
       ...options?.headers,
     },
   })