From 6db8d2d5747217473361b8bf45cc7eae3eb02bdf Mon Sep 17 00:00:00 2001 From: slawk0 Date: Thu, 2 Jan 2025 00:33:29 +0100 Subject: [PATCH] code refactor, created separate file for types --- client/src/api/contactsApi.tsx | 4 +- .../chat/chatArea/AnimatedMessage.tsx | 3 +- .../components/chat/chatArea/MessageForm.tsx | 37 ++++++---------- .../components/chat/chatArea/MessagesArea.tsx | 9 ++-- .../chat/chatHeader/AddGroupMember.tsx | 2 +- .../chat/chatHeader/ContactProfile.tsx | 2 +- .../chat/leftSidebar/ContactForm.tsx | 2 +- .../chat/leftSidebar/ContactsList.tsx | 2 +- .../chat/leftSidebar/LastActiveTime.tsx | 3 +- .../chat/leftSidebar/UserProfile.tsx | 3 +- .../chat/rightSidebar/ParticipantsBar.tsx | 3 +- client/src/context/ContactContext.tsx | 0 client/src/pages/Chat.tsx | 30 +------------ client/src/pages/Login.tsx | 2 +- client/src/types/types.ts | 44 +++++++++++++++++++ client/src/utils/ProtectedRoutes.tsx | 8 +--- client/tailwind.config.js | 1 - 17 files changed, 81 insertions(+), 74 deletions(-) create mode 100644 client/src/context/ContactContext.tsx create mode 100644 client/src/types/types.ts diff --git a/client/src/api/contactsApi.tsx b/client/src/api/contactsApi.tsx index b86b144..1e63c7b 100644 --- a/client/src/api/contactsApi.tsx +++ b/client/src/api/contactsApi.tsx @@ -1,6 +1,6 @@ import { axiosClient } from '../App.tsx'; -import { ChatMessagesProps } from '../pages/Chat.tsx'; -import { ContactsProps } from '../pages/Chat.tsx'; + +import { ChatMessagesProps, ContactsProps } from '@/types/types.ts'; export async function getContactsList(): Promise { try { diff --git a/client/src/components/chat/chatArea/AnimatedMessage.tsx b/client/src/components/chat/chatArea/AnimatedMessage.tsx index 340712d..bc9956b 100644 --- a/client/src/components/chat/chatArea/AnimatedMessage.tsx +++ b/client/src/components/chat/chatArea/AnimatedMessage.tsx @@ -1,7 +1,8 @@ import { useState } from 'react'; import { Trash2 } from 'lucide-react'; import AttachmentPreview from './AttachmentPreview.tsx'; -import { ChatMessagesProps } from '@/pages/Chat.tsx'; + +import { ChatMessagesProps } from '@/types/types.ts'; type AnimatedMessageProps = { message: ChatMessagesProps; diff --git a/client/src/components/chat/chatArea/MessageForm.tsx b/client/src/components/chat/chatArea/MessageForm.tsx index a47dfa8..740762f 100644 --- a/client/src/components/chat/chatArea/MessageForm.tsx +++ b/client/src/components/chat/chatArea/MessageForm.tsx @@ -1,37 +1,28 @@ -import { useRef, useCallback, useEffect, useState } from 'react'; -import { useForm, SubmitHandler } from 'react-hook-form'; import type { KeyboardEventHandler } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { SubmitHandler, useForm } from 'react-hook-form'; import { socket } from '../../../socket/socket.tsx'; -import { ChatMessagesProps, ContactsProps } from '../../../pages/Chat.tsx'; import { axiosClient } from '../../../App.tsx'; import { File, Paperclip, Send, X } from 'lucide-react'; import LoadingWheel from '@/components/chat/LoadingWheel.tsx'; -type Input = { - message: string; - attachments: FileList | null; -}; - -type MessageFormProps = { - contact: ContactsProps; - messages: ChatMessagesProps[]; -}; - -type FileWithPreview = { - file: File; - preview: string | null; -}; +import { + FileWithPreviewProps, + InputProps, + MessageFormProps, +} from '@/types/types.ts'; const MessageForm = ({ contact }: MessageFormProps) => { - const [files, setFiles] = useState([]); + const [files, setFiles] = useState([]); const [isUploading, setIsUploading] = useState(false); const [isSending, setIsSending] = useState(false); const [errorMessage, setErrorMessage] = useState(null); const fileInputRef = useRef(null); - const { register, handleSubmit, reset, watch, setValue } = useForm({ - mode: 'onChange', - }); + const { register, handleSubmit, reset, watch, setValue } = + useForm({ + mode: 'onChange', + }); const message = watch('message', ''); const textareaRef = useRef(null); @@ -114,7 +105,7 @@ const MessageForm = ({ contact }: MessageFormProps) => { } }; - const submitMessage: SubmitHandler = async (data) => { + const submitMessage: SubmitHandler = async (data) => { if ((!data.message && files.length === 0) || isSending) return; setErrorMessage(null); setIsSending(true); @@ -172,7 +163,7 @@ const MessageForm = ({ contact }: MessageFormProps) => { const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { - const newFiles: FileWithPreview[] = Array.from(e.target.files).map( + const newFiles: FileWithPreviewProps[] = Array.from(e.target.files).map( (file) => ({ file, preview: file.type.startsWith('image/') diff --git a/client/src/components/chat/chatArea/MessagesArea.tsx b/client/src/components/chat/chatArea/MessagesArea.tsx index 3a1d834..6adc663 100644 --- a/client/src/components/chat/chatArea/MessagesArea.tsx +++ b/client/src/components/chat/chatArea/MessagesArea.tsx @@ -3,10 +3,13 @@ import { socket } from '@/socket/socket.tsx'; import { useOutletContext } from 'react-router-dom'; import { sendContact } from '@/api/contactsApi.tsx'; import LoadingWheel from '../LoadingWheel.tsx'; -import { ChatMessagesProps, MeProps } from '@/pages/Chat.tsx'; -import { ContactsProps } from '@/pages/Chat.tsx'; -import { UsernameType } from '@/utils/ProtectedRoutes.tsx'; import AnimatedMessage from '@/components/chat/chatArea/AnimatedMessage.tsx'; +import { + ChatMessagesProps, + ContactsProps, + MeProps, + UsernameType, +} from '@/types/types.ts'; type MessagesAreaProps = { messages: ChatMessagesProps[]; diff --git a/client/src/components/chat/chatHeader/AddGroupMember.tsx b/client/src/components/chat/chatHeader/AddGroupMember.tsx index d755d0a..48dadb1 100644 --- a/client/src/components/chat/chatHeader/AddGroupMember.tsx +++ b/client/src/components/chat/chatHeader/AddGroupMember.tsx @@ -2,10 +2,10 @@ import LoadingWheel from '../LoadingWheel.tsx'; import { useEffect, useRef, useState } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { axiosClient } from '../../../App.tsx'; -import { ContactsProps } from '../../../pages/Chat.tsx'; import { socket } from '../../../socket/socket.tsx'; import { UserRoundPlus } from 'lucide-react'; import { Button } from '@/components/ui/button.tsx'; +import { ContactsProps } from '@/types/types.ts'; type Inputs = { username: string; diff --git a/client/src/components/chat/chatHeader/ContactProfile.tsx b/client/src/components/chat/chatHeader/ContactProfile.tsx index 093159e..c492719 100644 --- a/client/src/components/chat/chatHeader/ContactProfile.tsx +++ b/client/src/components/chat/chatHeader/ContactProfile.tsx @@ -1,8 +1,8 @@ import profile from '../../../../assets/profile.svg'; import CreateGroupButton from './CreateGroupButton.tsx'; import AddGroupMember from './AddGroupMember.tsx'; -import { ContactsProps } from '@/pages/Chat.tsx'; import { UsersRound } from 'lucide-react'; +import { ContactsProps } from '@/types/types.ts'; type ContactProfileProps = { contact: ContactsProps | null; diff --git a/client/src/components/chat/leftSidebar/ContactForm.tsx b/client/src/components/chat/leftSidebar/ContactForm.tsx index e6d2ddf..a3b6eb3 100644 --- a/client/src/components/chat/leftSidebar/ContactForm.tsx +++ b/client/src/components/chat/leftSidebar/ContactForm.tsx @@ -1,10 +1,10 @@ import { useForm, SubmitHandler } from 'react-hook-form'; -import { ContactsProps } from '../../../pages/Chat.tsx'; import { axiosClient } from '../../../App.tsx'; import { AxiosResponse } from 'axios'; import { useEffect, useState } from 'react'; import LoadingWheel from '../LoadingWheel.tsx'; import { Search } from 'lucide-react'; +import { ContactsProps } from '@/types/types.ts'; type Input = { contact: string; diff --git a/client/src/components/chat/leftSidebar/ContactsList.tsx b/client/src/components/chat/leftSidebar/ContactsList.tsx index 113f6d8..c78ceff 100644 --- a/client/src/components/chat/leftSidebar/ContactsList.tsx +++ b/client/src/components/chat/leftSidebar/ContactsList.tsx @@ -1,5 +1,4 @@ import React, { useEffect } from 'react'; -import { ChatMessagesProps, ContactsProps } from '@/pages/Chat.tsx'; import { socket } from '@/socket/socket.tsx'; import GroupIcon from '../../../../assets/group.svg'; import { @@ -16,6 +15,7 @@ import { import { axiosClient } from '@/App.tsx'; import { Dot } from 'lucide-react'; import LastActiveTime from '@/components/chat/leftSidebar/LastActiveTime.tsx'; +import { ChatMessagesProps, ContactsProps } from '@/types/types.ts'; type ContactsListProps = { initializeContact: (contact: ContactsProps) => void; diff --git a/client/src/components/chat/leftSidebar/LastActiveTime.tsx b/client/src/components/chat/leftSidebar/LastActiveTime.tsx index 1ee0562..ccdb93b 100644 --- a/client/src/components/chat/leftSidebar/LastActiveTime.tsx +++ b/client/src/components/chat/leftSidebar/LastActiveTime.tsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react'; import { formatDistanceToNow, differenceInSeconds } from 'date-fns'; -import { ContactsProps } from '@/pages/Chat.tsx'; + +import { ContactsProps } from '@/types/types.ts'; type LastActiveTimeProps = { contact: ContactsProps; diff --git a/client/src/components/chat/leftSidebar/UserProfile.tsx b/client/src/components/chat/leftSidebar/UserProfile.tsx index 563f473..7b1692a 100644 --- a/client/src/components/chat/leftSidebar/UserProfile.tsx +++ b/client/src/components/chat/leftSidebar/UserProfile.tsx @@ -2,7 +2,8 @@ import zdjecie from '../../../../assets/turtleProfileImg3.webp'; import logoutIcon from '../../../../assets/logout.svg'; import Cookies from 'js-cookie'; import { useOutletContext } from 'react-router-dom'; -import { UsernameType } from '../../../utils/ProtectedRoutes.tsx'; + +import { UsernameType } from '@/types/types.ts'; function UserProfile() { const user: UsernameType = useOutletContext(); diff --git a/client/src/components/chat/rightSidebar/ParticipantsBar.tsx b/client/src/components/chat/rightSidebar/ParticipantsBar.tsx index 1852a42..5280f40 100644 --- a/client/src/components/chat/rightSidebar/ParticipantsBar.tsx +++ b/client/src/components/chat/rightSidebar/ParticipantsBar.tsx @@ -1,6 +1,5 @@ import { useContext, useEffect, useMemo, useState } from 'react'; import { axiosClient } from '@/App.tsx'; -import { ContactsProps, MeProps } from '@/pages/Chat.tsx'; import { socket } from '@/socket/socket.tsx'; import { Crown, Sword } from 'lucide-react'; import { @@ -9,9 +8,9 @@ import { ContextMenuItem, ContextMenuTrigger, } from '@/components/ui/context-menu.tsx'; -import { UsernameType } from '@/utils/ProtectedRoutes.tsx'; import { useOutletContext } from 'react-router-dom'; import zdjecie from '../../../../assets/turtleProfileImg3.webp'; +import { ContactsProps, MeProps, UsernameType } from '@/types/types.ts'; type ParticipantsProps = { user_id: string; username: string; diff --git a/client/src/context/ContactContext.tsx b/client/src/context/ContactContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/pages/Chat.tsx b/client/src/pages/Chat.tsx index f3808e5..c8f6eca 100644 --- a/client/src/pages/Chat.tsx +++ b/client/src/pages/Chat.tsx @@ -10,35 +10,7 @@ import Cookies from 'js-cookie'; import { getMessages, setContactStatus } from '../api/contactsApi.tsx'; import axios from 'axios'; import ParticipantsBar from '@/components/chat/rightSidebar/ParticipantsBar.tsx'; - -export type MeProps = { - isGroupAdmin: boolean; - isGroupOwner: boolean; -}; - -export type ChatMessagesProps = { - sender: string; - message: string; - recipient: string; // conversation_id - message_id: number; - attachment_urls: string[] | null; - sender_id: string; - conversation_id: string; - sent_at: Date; -}; - -export type ContactsProps = { - read: boolean; - username: string; - user_id: string; - id: number; - type: 'direct' | 'group'; - conversation_id: string; - last_active: string; - last_message: string; - last_message_time: string; - last_message_sender: string; -}; +import { ChatMessagesProps, ContactsProps, MeProps } from '@/types/types.ts'; function Chat() { const meDefaultValue = { diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx index 119484c..b2042db 100644 --- a/client/src/pages/Login.tsx +++ b/client/src/pages/Login.tsx @@ -6,7 +6,7 @@ import { AuthContext } from '../utils/AuthProvider.tsx'; import LoadingWheel from '../components/chat/LoadingWheel.tsx'; import { axiosClient } from '../App.tsx'; -type Inputs = { +export type Inputs = { username: string; password: string; }; diff --git a/client/src/types/types.ts b/client/src/types/types.ts new file mode 100644 index 0000000..3d3ff83 --- /dev/null +++ b/client/src/types/types.ts @@ -0,0 +1,44 @@ +import { File } from 'lucide-react'; + +export type MeProps = { + isGroupAdmin: boolean; + isGroupOwner: boolean; +}; +export type ChatMessagesProps = { + sender: string; + message: string; + recipient: string; // conversation_id + message_id: number; + attachment_urls: string[] | null; + sender_id: string; + conversation_id: string; + sent_at: Date; +}; +export type ContactsProps = { + read: boolean; + username: string; + user_id: string; + id: number; + type: 'direct' | 'group'; + conversation_id: string; + last_active: string; + last_message: string; + last_message_time: string; + last_message_sender: string; +}; +export type InputProps = { + message: string; + attachments: FileList | null; +}; +export type MessageFormProps = { + contact: ContactsProps; + messages: ChatMessagesProps[]; +}; +export type FileWithPreviewProps = { + file: File; + preview: string | null; +}; +export type UsernameType = { + username: string | null; + user_id: string | null; +}; diff --git a/client/src/utils/ProtectedRoutes.tsx b/client/src/utils/ProtectedRoutes.tsx index f289cd4..af39a3e 100644 --- a/client/src/utils/ProtectedRoutes.tsx +++ b/client/src/utils/ProtectedRoutes.tsx @@ -1,13 +1,9 @@ import { Navigate, Outlet } from 'react-router-dom'; -import { useState, useEffect, useContext } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { AuthContext } from './AuthProvider.tsx'; import LoadingScreen from '../components/LoadingScreen.tsx'; import { axiosClient } from '../App.tsx'; - -export type UsernameType = { - username: string | null; - user_id: string | null; -}; +import { UsernameType } from '@/types/types.ts'; function ProtectedRoutes() { const { authorized, isLoading } = useContext(AuthContext); diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 17a195c..3689267 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -1,6 +1,5 @@ /** @type {import('tailwindcss').Config} */ export default { - important: true, darkMode: ['class'], content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: {