slawk0/relay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor, created separate file for types

Browse Source
This commit is contained in:
slawk0
2025-01-02 00:33:29 +01:00
parent 81aeb5a926
commit 6db8d2d574
17 changed files with 81 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/api/contactsApi.tsx
View File

@@ -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<ContactsProps[]> {
try {

3
client/src/components/chat/chatArea/AnimatedMessage.tsx
View File

@@ -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;

37
client/src/components/chat/chatArea/MessageForm.tsx
View File

@@ -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<FileWithPreview[]>([]);
const [files, setFiles] = useState<FileWithPreviewProps[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [isSending, setIsSending] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null);
const { register, handleSubmit, reset, watch, setValue } = useForm<Input>({
mode: 'onChange',
});
const { register, handleSubmit, reset, watch, setValue } =
useForm<InputProps>({
mode: 'onChange',
});
const message = watch('message', '');
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -114,7 +105,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
}
};
const submitMessage: SubmitHandler<Input> = async (data) => {
const submitMessage: SubmitHandler<InputProps> = 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<HTMLInputElement>) => {
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/')

9
client/src/components/chat/chatArea/MessagesArea.tsx
View File

@@ -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[];

2
client/src/components/chat/chatHeader/AddGroupMember.tsx
View File

@@ -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;

2
client/src/components/chat/chatHeader/ContactProfile.tsx
View File

@@ -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;

2
client/src/components/chat/leftSidebar/ContactForm.tsx
View File

@@ -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;

2
client/src/components/chat/leftSidebar/ContactsList.tsx
View File

@@ -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;

3
client/src/components/chat/leftSidebar/LastActiveTime.tsx
View File

@@ -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;

3
client/src/components/chat/leftSidebar/UserProfile.tsx
View File

@@ -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();

3
client/src/components/chat/rightSidebar/ParticipantsBar.tsx
View File

@@ -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;

0
client/src/context/ContactContext.tsx Normal file
View File

30
client/src/pages/Chat.tsx
View File

@@ -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 = {

2
client/src/pages/Login.tsx
View File

@@ -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;
};

44
client/src/types/types.ts Normal file
View File

@@ -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;
};

8
client/src/utils/ProtectedRoutes.tsx
View File

@@ -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);

1
client/tailwind.config.js
View File

@@ -1,6 +1,5 @@
/** @type {import('tailwindcss').Config} */
export default {
important: true,
darkMode: ['class'],
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {