From dfd065adeef3083b3d73ac8ff375777a22773ad3 Mon Sep 17 00:00:00 2001 From: slawk0 Date: Sat, 19 Oct 2024 17:53:34 +0200 Subject: [PATCH] dropdown menu on user profile --- client/.prettierrc | 2 +- client/index.html | 3 +- client/package-lock.json | 20 ++++++++ client/package.json | 1 + client/src/components/chat/ContactForm.tsx | 20 ++++---- client/src/components/chat/UserProfile.tsx | 57 ++++++++++++++-------- client/tailwind.config.js | 8 ++- 7 files changed, 76 insertions(+), 35 deletions(-) diff --git a/client/.prettierrc b/client/.prettierrc index 0967ef4..6d0cddc 100644 --- a/client/.prettierrc +++ b/client/.prettierrc @@ -1 +1 @@ -{} +{ "singleQuote": true} diff --git a/client/index.html b/client/index.html index db39c5e..6a8999d 100644 --- a/client/index.html +++ b/client/index.html @@ -18,6 +18,7 @@
- + + diff --git a/client/package-lock.json b/client/package-lock.json index b660eb9..3c0363c 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -13,6 +13,7 @@ "@types/socket.io-client": "^1.4.36", "axios": "^1.7.7", "js-cookie": "^3.0.5", + "preline": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", @@ -1065,6 +1066,16 @@ "node": ">=14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", @@ -3575,6 +3586,15 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "license": "MIT" }, + "node_modules/preline": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/preline/-/preline-2.5.1.tgz", + "integrity": "sha512-fEXOsz0xLfTm5sJmNanourrMjwjcgGtaVNg8Pt6GzUbZ/oXHIdcR94LBdeE0Ea0pBPFOOHzEL5LQwSbAvCJEfw==", + "license": "Licensed under MIT and Preline UI Fair Use License", + "dependencies": { + "@popperjs/core": "^2.11.2" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/client/package.json b/client/package.json index e822349..e8f5031 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "@types/socket.io-client": "^1.4.36", "axios": "^1.7.7", "js-cookie": "^3.0.5", + "preline": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", diff --git a/client/src/components/chat/ContactForm.tsx b/client/src/components/chat/ContactForm.tsx index 0a4e051..c4e42dc 100644 --- a/client/src/components/chat/ContactForm.tsx +++ b/client/src/components/chat/ContactForm.tsx @@ -1,6 +1,6 @@ -import { useForm, SubmitHandler } from "react-hook-form"; -import { sendContact, sendRequestHistorical } from "../../socket/socket.tsx"; -import { Dispatch, SetStateAction, useEffect } from "react"; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { sendContact, sendRequestHistorical } from '../../socket/socket.tsx'; +import { Dispatch, SetStateAction, useEffect } from 'react'; type Input = { contact: string; @@ -21,9 +21,9 @@ interface ContactInputProps { function ContactForm({ contact, setContact, setMessages }: ContactInputProps) { const { register, handleSubmit, reset } = useForm(); - let storedContact: string | null = ""; + let storedContact: string | null = ''; useEffect(() => { - storedContact = storedContact = localStorage.getItem("contact"); + storedContact = storedContact = localStorage.getItem('contact'); if (storedContact) { setContact(storedContact); sendRequestHistorical(storedContact); @@ -33,11 +33,11 @@ function ContactForm({ contact, setContact, setMessages }: ContactInputProps) { const submitContact: SubmitHandler = (data) => { setMessages([]); sendRequestHistorical(data.contact); - localStorage.setItem("contact", data.contact); + localStorage.setItem('contact', data.contact); setContact(data.contact); sendContact(data.contact); //TODO zapisz w bazie danych te kontakty - console.log("Contact submitted:", data.contact); - reset({ contact: "" }); + console.log('Contact submitted:', data.contact); + reset({ contact: '' }); }; return ( @@ -45,11 +45,11 @@ function ContactForm({ contact, setContact, setMessages }: ContactInputProps) {
-
- user profile + +

{username}

-
- -
); } diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 9d8fc83..ce238b4 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -1,8 +1,12 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + "node_modules/preline/dist/*.js", + ], theme: { extend: {}, }, - plugins: [require("@tailwindcss/forms")], + plugins: [require("@tailwindcss/forms"), require("preline/plugin")], };