From 274e53a3ae037e4860ed4e91d838026cf2928377 Mon Sep 17 00:00:00 2001 From: Aseer KT Date: Wed, 3 Jul 2024 19:26:03 +0530 Subject: [PATCH] chore: use path alias for imports in web --- README.md | 7 +++++++ .../auth/components/AuthFormWrapper.tsx | 2 +- web/src/features/auth/components/LoginForm.tsx | 14 +++++++------- .../features/auth/components/SignUpForm.tsx | 14 +++++++------- .../features/group/components/CreateGroup.tsx | 1 + .../features/group/components/JoinGroup.tsx | 10 +++++----- .../group/components/UserGroupItem.tsx | 2 +- .../group/components/UserGroupList.tsx | 6 +++--- web/src/features/group/group.interface.ts | 2 +- web/src/features/group/group.service.ts | 6 ++---- .../features/member/components/GroupInfo.tsx | 2 +- .../features/member/components/MemberItem.tsx | 2 +- .../message/components/MessageComposer.tsx | 10 +++++----- .../message/components/MessageItem.tsx | 4 ++-- web/src/layouts/ChatLayout.tsx | 10 +++++----- web/src/utils/api.ts | 18 ++++-------------- 16 files changed, 53 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 97c8f9f..9656c73 100644 --- a/README.md +++ b/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 diff --git a/web/src/features/auth/components/AuthFormWrapper.tsx b/web/src/features/auth/components/AuthFormWrapper.tsx index 4553b6a..fd0006e 100644 --- a/web/src/features/auth/components/AuthFormWrapper.tsx +++ b/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 diff --git a/web/src/features/auth/components/LoginForm.tsx b/web/src/features/auth/components/LoginForm.tsx index 1c168ab..dd0fc50 100644 --- a/web/src/features/auth/components/LoginForm.tsx +++ b/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' diff --git a/web/src/features/auth/components/SignUpForm.tsx b/web/src/features/auth/components/SignUpForm.tsx index 305a7f6..5901904 100644 --- a/web/src/features/auth/components/SignUpForm.tsx +++ b/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' diff --git a/web/src/features/group/components/CreateGroup.tsx b/web/src/features/group/components/CreateGroup.tsx index 5891004..7d40dfe 100644 --- a/web/src/features/group/components/CreateGroup.tsx +++ b/web/src/features/group/components/CreateGroup.tsx @@ -15,6 +15,7 @@ const CreateGroupForm = ({ onComplete }: { onComplete: () => void }) => { const navigate = useNavigate() const inputRef = useRef(null) const queryClient = useQueryClient() + const { mutate: createGroup, isPending } = useMutation({ mutationFn: createNewGroup, onSuccess: result => { diff --git a/web/src/features/group/components/JoinGroup.tsx b/web/src/features/group/components/JoinGroup.tsx index c7247fc..41bc1cc 100644 --- a/web/src/features/group/components/JoinGroup.tsx +++ b/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 = () => { diff --git a/web/src/features/group/components/UserGroupItem.tsx b/web/src/features/group/components/UserGroupItem.tsx index 6c3cb84..b7ebbca 100644 --- a/web/src/features/group/components/UserGroupItem.tsx +++ b/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 { diff --git a/web/src/features/group/components/UserGroupList.tsx b/web/src/features/group/components/UserGroupList.tsx index c8c062c..85cba58 100644 --- a/web/src/features/group/components/UserGroupList.tsx +++ b/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' diff --git a/web/src/features/group/group.interface.ts b/web/src/features/group/group.interface.ts index 47f0056..792c22a 100644 --- a/web/src/features/group/group.interface.ts +++ b/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 diff --git a/web/src/features/group/group.service.ts b/web/src/features/group/group.service.ts index 30075bb..9dbaeaf 100644 --- a/web/src/features/group/group.service.ts +++ b/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 => }) export const fetchGroup = async (groupId: number): Promise => - fetcher(`groups/${groupId}`, { - headers: getAuthHeaders(), - }) + fetcher(`groups/${groupId}`, {}) diff --git a/web/src/features/member/components/GroupInfo.tsx b/web/src/features/member/components/GroupInfo.tsx index 06fb0c7..5378201 100644 --- a/web/src/features/member/components/GroupInfo.tsx +++ b/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 { diff --git a/web/src/features/member/components/MemberItem.tsx b/web/src/features/member/components/MemberItem.tsx index 4c68e36..4eeadc6 100644 --- a/web/src/features/member/components/MemberItem.tsx +++ b/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 { diff --git a/web/src/features/message/components/MessageComposer.tsx b/web/src/features/message/components/MessageComposer.tsx index 9ff17e5..102700d 100644 --- a/web/src/features/message/components/MessageComposer.tsx +++ b/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 diff --git a/web/src/features/message/components/MessageItem.tsx b/web/src/features/message/components/MessageItem.tsx index 3b1c0f3..8a7ae50 100644 --- a/web/src/features/message/components/MessageItem.tsx +++ b/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 { diff --git a/web/src/layouts/ChatLayout.tsx b/web/src/layouts/ChatLayout.tsx index 1445948..4a3de99 100644 --- a/web/src/layouts/ChatLayout.tsx +++ b/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() diff --git a/web/src/utils/api.ts b/web/src/utils/api.ts index a4e0c3b..fcbf636 100644 --- a/web/src/utils/api.ts +++ b/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, >( @@ -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, }, })