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

contactsList props

Browse Source
This commit is contained in:
slawk0
2024-10-27 22:14:35 +01:00
parent 73dfeb6e3e
commit cc13bc0f32
5 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ function ContactForm({ InitializeContact }: InitializeContactsProps) {
}, []);
const submitContact: SubmitHandler<Input> = (data) => {
const contact = data.contact;
const contact = data.contact.toLowerCase().trim();
InitializeContact(contact);
reset({ contact: '' });
};

43
client/src/components/chat/ContactsList.tsx
View File

@@ -1,17 +1,26 @@
import { sendRequestContactsList, socket } from '../../socket/socket.tsx';
import { useEffect, useState } from 'react';
type InitializeContactsProps = {
InitializeContact: (contact: string) => void;
};
import { useEffect } from 'react';
type ContactsList = {
username: string;
type ContactsProps = {
usernamecontact: string;
read: boolean;
};
function ContactsList({ InitializeContact }: InitializeContactsProps) {
const [ContactsList, setContactsList] = useState<ContactsList[]>([]);
type ContactsListProps = {
InitializeContact: (contact: string) => void;
setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
contactsList: ContactsProps[]; // Changed from string[] to ContactsProps[]
};
function ContactsList({
InitializeContact,
contactsList,
setContactsList,
}: ContactsListProps) {
function contactHandler(contactsList: ContactsProps[]) {
setContactsList((prevContacts) => [...prevContacts, ...contactsList]);
}
useEffect(() => {
if (!socket) {
console.error('Socket not initialized');
@@ -19,32 +28,34 @@ function ContactsList({ InitializeContact }: InitializeContactsProps) {
}
sendRequestContactsList();
socket.on('get contacts list', (contactsList: ContactsList[]) => {
socket.on('get contacts list', (contactsList: ContactsProps[]) => {
console.log('Received contacts list: ', contactsList);
setContactsList(contactsList);
contactHandler(contactsList);
});
// socket.on('contact', (contactInf) => {
// console.log('received contact: ', contactInf);
// });
return () => {
if (!socket) {
console.error('Socket not initialized');
return;
}
socket.off('contacts list');
socket.off('get contacts list');
socket.off('contact');
};
}, []);
const contactsList = ContactsList.map((contacts: ContactsList, index) => (
const addContactsList = contactsList.map((contact: ContactsProps, index) => (
<li className="hover:bg-green-700 p-2 rounded cursor-pointer" key={index}>
{contacts.usernamecontact}
{contact.usernamecontact}
</li>
));
return (
<div className="flex-grow overflow-y-auto w-64">
<ul className="m-2 flex-grow-1 " onClick={InitializeContact}>
{contactsList}
</ul>
<ul className="m-2 flex-grow-1">{addContactsList}</ul>
</div>
);
}

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

@@ -19,9 +19,14 @@ type ChatMessages = {
message_id: number;
timestamp: string;
};
type ContactsProps = {
usernamecontact: string;
read: boolean;
};
function Chat() {
const [contact, setContact] = useState<string>('');
const [contactsList, setContactsList] = useState<ContactsProps[]>([]);
const [currentContact, setCurrentContact] = useState<string>('');
const [messages, setMessages] = useState<ChatMessages[]>([]);
useEffect(() => {
@@ -35,7 +40,7 @@ function Chat() {
setMessages([]);
sendRequestHistoricalMessages(newContact);
localStorage.setItem('contact', newContact);
setContact(newContact);
setCurrentContact(newContact);
sendContact({ contact: newContact, read: true });
console.log('Contact submitted:', newContact);
}
@@ -48,22 +53,26 @@ function Chat() {
{/*Contact input*/}
<ContactForm InitializeContact={InitializeContact} />
{/*Contact list*/}
<ContactsList InitializeContact={InitializeContact} />
<ContactsList
InitializeContact={InitializeContact}
contactsList={contactsList}
setContactsList={setContactsList}
/>
<hr />
<UserProfile />
</div>
{/*Chat area */}
<div className="text-white bg-[#121212] flex flex-col h-screen w-full">
<div className="flex-shrink-0">
<ContactProfile contact={contact} />
<ContactProfile contact={currentContact} />
</div>
<hr className="flex-shrink-0" />
<div className="flex-grow overflow-x-hidden overflow-y-auto m-2">
<MessagesArea messages={messages} setMessages={setMessages} />
</div>
<div className="flex-shrink-0 mb-2 mt-0">
{contact && contact.length >= 4 ? (
<MessageForm contact={contact} />
{currentContact && currentContact.length >= 4 ? (
<MessageForm contact={currentContact} />
) : null}
</div>
</div>

48
server/db/db.js
View File

@@ -58,7 +58,8 @@ async function createTables() {
CREATE TABLE IF NOT EXISTS contacts (
username VARCHAR(20) NOT NULL,
usernameContact VARCHAR(20) NOT NULL,
read BOOLEAN NOT NULL
read BOOLEAN NOT NULL,
CONSTRAINT unique_username_contact UNIQUE (username, usernameContact)
);
`);
} catch (e) {
@@ -72,8 +73,8 @@ async function insertUser(username, password) {
const created_at = new Date().toLocaleString("pl-PL");
const query = `
INSERT INTO accounts (username, password, user_id, created_at)
VALUES ($1, $2, $3, $4);
INSERT INTO accounts (username, password, user_id, created_at)
VALUES ($1, $2, $3, $4);
`;
try {
await client.query(query, [username, password, user_id, created_at]);
@@ -85,8 +86,8 @@ async function insertUser(username, password) {
async function getUserId(username) {
username = username.trim();
const query = `
SELECT user_id FROM accounts
WHERE username = $1;
SELECT user_id FROM accounts
WHERE username = $1;
`;
try {
const result = await client.query(query, [username]);
@@ -98,9 +99,9 @@ async function getUserId(username) {
}
async function insertMessage(sender, recipient, message, timestamp) {
const query = `
INSERT INTO messages (sender, recipient, message, timestamp)
VALUES ($1, $2, $3, $4)
RETURNING message timestamp, message_id;
INSERT INTO messages (sender, recipient, message, timestamp)
VALUES ($1, $2, $3, $4)
RETURNING message timestamp, message_id;
`;
try {
const results = await client.query(query, [
@@ -118,9 +119,9 @@ async function insertMessage(sender, recipient, message, timestamp) {
async function getMessages(username, recipient) {
console.log(`getMessages for Username: ${username}, recipient: ${recipient}`);
const query = `
SELECT * FROM messages
WHERE (sender = $1 AND recipient = $2) OR (sender = $2 AND recipient = $1)
ORDER BY message_id ASC;
SELECT * FROM messages
WHERE (sender = $1 AND recipient = $2) OR (sender = $2 AND recipient = $1)
ORDER BY message_id ASC;
`;
try {
const results = await client.query(query, [username, recipient]);
@@ -132,8 +133,8 @@ async function getMessages(username, recipient) {
async function checkUserExist(username) {
const query = `
SELECT COUNT(*) FROM accounts
WHERE username = $1;
SELECT COUNT(*) FROM accounts
WHERE username = $1;
`;
try {
@@ -159,9 +160,9 @@ async function getPassword(username) {
async function changePassword(username, newPassword) {
const query = `
UPDATE accounts
SET password = $1
WHERE username = $2;
UPDATE accounts
SET password = $1
WHERE username = $2;
`;
try {
await client.query(query, [newPassword, username]);
@@ -174,9 +175,12 @@ async function insertContact(username, usernameContact, read) {
console.log(
`insertContact username: ${username}, usernameContact: ${usernameContact}, read: ${read}`,
);
const query = `
INSERT INTO contacts (username, usernameContact, read)
VALUES ($1, $2, $3) ;
INSERT INTO contacts (username, usernameContact, read)
VALUES ($1, $2, $3)
ON CONFLICT ON CONSTRAINT unique_username_contact
DO NOTHING;
`;
try {
await client.query(query, [username, usernameContact, read]);
@@ -187,8 +191,8 @@ async function insertContact(username, usernameContact, read) {
async function getContacts(username) {
const query = `
SELECT usernameContact, read FROM contacts
WHERE username = $1;
SELECT usernameContact, read FROM contacts
WHERE username = $1;
`;
try {
const result = await client.query(query, [username]);
@@ -203,8 +207,8 @@ async function removeContact(username, usernameContact) {
usernameContact = usernameContact.trim();
const query = `
DELETE FROM contacts
WHERE (username = $1 AND contact = $2);
DELETE FROM contacts
WHERE (username = $1 AND contact = $2);
`;
try {
await client.query(query, [username, usernameContact]);

6
server/socket/socket.js
View File

@@ -92,8 +92,12 @@ function initializeSocket(io) {
return;
}
}
if (contact) {
contact = contact.trim().toLowerCase();
}
insertContact(username, contact, read);
io.to(username).emit("contact", { contact, read });
io.to(username).emit("contact", [{ contact, read }]);
console.log("(socket) sent on 'contact' socket: ", { contact, read });
});