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

added provisional messages page

Browse Source
This commit is contained in:
slawk0
2024-09-27 22:05:27 +02:00
parent 4e1bf18f45
commit b7adb17647
3 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/index.html
View File

@@ -1,10 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<style>
body{
font-family: "Roboto Mono", monospace;
}
</style>
</head>
<body>
<div id="root"></div>

5
client/src/App.tsx
View File

@@ -1,8 +1,9 @@
import Login from "./pages/Login.tsx";
import Signup from "./pages/Signup.tsx";
import Chat from "./pages/Chat.tsx";
function App() {
const loggedIn = true;
return <>{loggedIn ? <Login /> : <Signup />}</>;
return <>{loggedIn ? <Chat /> : <Login />}</>;
}
export default App;

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

@@ -1,7 +1,117 @@
import { useForm, SubmitHandler } from "react-hook-form";
const messagesArray = [
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
{
content: "widomosc jakas",
username: "wyslal wiadomosc",
recipient: "jakis odbiorca",
},
];
type Input = {
message: string;
contact: string;
};
function Chat() {
const { register, handleSubmit, reset } = useForm<Input>();
// Sending message
const submitMessage: SubmitHandler<Input> = (data) => {
console.log("wiadomoscs: " + data.message + "zostala wyslana");
reset();
};
// Sending contact
const submitContact: SubmitHandler<Input> = (data) => {
console.log("Kontakt: " + data.contact + "zostal wyslany");
reset();
};
return (
<>
<h1>Chat</h1>
<div className="flex">
<div>
<div>
<form onSubmit={handleSubmit(submitContact)}>
<input
type="text"
placeholder="Enter contact"
{...register("contact", {
// valid username length (validated on signup)
minLength: 4,
maxLength: 20,
})}
/>
</form>
</div>
<div className="bg-amber-300 h-screen w-60">
<p className="text-base ">ksksksksksksksksksks [.]</p>
</div>
</div>
<div className="bg-violet-500 flex flex-col h-screen w-full">
<div>
<p>wiadomosci</p>
<ul className="ml-5">
{messagesArray.map((message, index) => (
<li key={index}>
{message.username}: {message.content}
</li>
))}
</ul>
</div>
<div className="mt-auto">
<form onSubmit={handleSubmit(submitMessage)}>
<input
className="rounded"
type="text"
placeholder="Enter message"
{...register("message", {
maxLength: 500,
minLength: 1,
})}
/>
<button
className="bg-green-500 hover:bg-green-400 font-bold py-2 px-4 rounded"
type="submit"
>
Send
</button>
</form>
</div>
</div>
</div>
</>
);
}