added creating tables and many other

client/src/pages/Chat.tsx

@@ -1,4 +1,5 @@
 import { useForm, SubmitHandler } from "react-hook-form";
+import zdjecie from "../../assets/walter.png";
 const messagesArray = [
   {
     content: "widomosc jakas",
@@ -43,7 +44,12 @@ type Input = {
 };
 
 function Chat() {
-  const { register, handleSubmit, reset } = useForm<Input>();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<Input>();
 
   // Sending message
   const submitMessage: SubmitHandler<Input> = (data) => {
@@ -59,11 +65,14 @@ function Chat() {
 
   return (
     <>
-      <div className="flex">
-        <div>
-          <div>
+      <div className="text-white flex h-screen">
+        {/*Sidebar*/}
+        <div className="h-screen bg-[#1E1E1E] flex flex-col">
+          {/*Contact input*/}
+          <div className="text-center">
             <form onSubmit={handleSubmit(submitContact)}>
               <input
+                className="bg-green-100 pl-2 rounded-md shadow-lg h-8 mb-2"
                 type="text"
                 placeholder="Enter contact"
                 {...register("contact", {
@@ -74,12 +83,65 @@ function Chat() {
               />
             </form>
           </div>
-          <div className="bg-amber-300 h-screen w-60">
-            <p className="text-base ">ksksksksksksksksksks [.]</p>
+          {/*Contact list*/}
+          <div className="flex-grow overflow-y-auto w-64">
+            <ul className="ml-2">
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+              <li>jdjskskbkskskaoso</li>
+            </ul>
+          </div>
+          {/*Profile element*/}
+          <div className="flex items-center">
+            <div className="m-3 rounded-full w-12 h-12 overflow-hidden ">
+              <img
+                className="w-full h-full object-cover"
+                src={zdjecie}
+                alt="walter"
+              />
+            </div>
+            <div className="text-center text-gray-200">
+              <p>Walter White</p>
+            </div>
           </div>
         </div>
-
-        <div className="bg-violet-500 flex flex-col h-screen w-full">
+        {/*Chat area */}
+        <div className="text-white bg-[#121212] flex flex-col h-screen w-full">
+          {/*Messages*/}
           <div>
             <p>wiadomosci</p>
             <ul className="ml-5">
@@ -90,24 +152,30 @@ function Chat() {
               ))}
             </ul>
           </div>
-
+          {/*Messages input*/}
           <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>
+              <div className="flex">
+                <input
+                  className="bg-green-100 text-black rounded-md w-full ml-1 mr-1"
+                  type="text"
+                  placeholder="Enter message"
+                  {...register("message", {
+                    maxLength: 500,
+                    minLength: 1,
+                  })}
+                />
+                {errors?.message?.type === "maxLength" && (
+                  <p>Maximum length of the message is 500</p>
+                )}
+
+                <button
+                  className="text-black bg-green-500 hover:bg-green-400 font-bold py-2 px-4 rounded mr-1 w-24 "
+                  type="submit"
+                >
+                  Send
+                </button>
+              </div>
             </form>
           </div>
         </div>

client/src/pages/Login.tsx

@@ -23,10 +23,10 @@ export default function Login() {
   };
   return (
     <>
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
+      <div className="bg-[#121212] flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <img alt="chat" src={icon} className="mx-auto h-10 w-auto" />
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          <h2 className="text-white mt-10 text-center text-2xl font-bold leading-9 tracking-tight">
             Log in to your account
           </h2>
         </div>
@@ -36,7 +36,7 @@ export default function Login() {
             <div>
               <label
                 htmlFor="username"
-                className="block text-sm font-medium leading-6 text-gray-900"
+                className="text-white block text-sm font-medium leading-6"
               >
                 Username
               </label>
@@ -61,7 +61,7 @@ export default function Login() {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="text-white block text-sm font-medium leading-6 "
                 >
                   Password
                 </label>
@@ -82,17 +82,17 @@ export default function Login() {
             <div>
               <button
                 type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                className="text-black bg-green-500 lex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
                 Sign in
               </button>
             </div>
           </form>
-          <p className="mt-10 text-center text-sm text-gray-500">
+          <p className="text-gray-300 mt-10 text-center text-sm">
             Dont have account?{" "}
             <Link
               to="/signup"
-              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+              className="text-green-400 leading-6 hover:text-green-600"
             >
               Sign up
             </Link>

client/src/pages/Signup.tsx

@@ -31,10 +31,10 @@ export default function Signup() {
 
   return (
     <>
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
+      <div className="bg-[#121212] flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
           <img alt="chat" src={icon} className="mx-auto h-10 w-auto" />
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          <h2 className="text-white mt-10 text-center text-2xl font-bold leading-9 tracking-tight">
             Sign up to your account
           </h2>
         </div>
@@ -44,7 +44,7 @@ export default function Signup() {
             <div>
               <label
                 htmlFor="username"
-                className="block text-sm font-medium leading-6 text-gray-900"
+                className="text-white text-sm font-medium leading-6"
               >
                 Username
               </label>
@@ -80,7 +80,7 @@ export default function Signup() {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="text-white text-sm font-medium leading-6"
                 >
                   Password
                 </label>
@@ -114,7 +114,7 @@ export default function Signup() {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor="password"
-                  className="block text-sm font-medium leading-6 text-gray-900"
+                  className="text-white text-sm font-medium leading-6"
                 >
                   Repeat password
                 </label>
@@ -144,17 +144,17 @@ export default function Signup() {
             <div>
               <button
                 type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                className="text-black w-full justify-center rounded-md bg-green-600 px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
                 Sign in
               </button>
             </div>
           </form>
-          <p className="mt-10 text-center text-sm text-gray-500">
+          <p className="text-white mt-10 text-center text-sm">
             Already have account?{" "}
             <Link
               to="/login"
-              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+              className="text-green-400 leading-6 hover:text-green-600"
             >
               Log in
             </Link>

client/vite.config.ts

@@ -3,5 +3,11 @@ import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": "http://localhost:3000",
+      "/socket.io": "http://localhost:3000",
+    },
+  },
   plugins: [react()],
 });

server/.env

@@ -0,0 +1,7 @@
+SERVER_PORT=3000
+
+PG_USER=postgres
+PG_PASSWORD=haslo
+PG_DATABASE=relay
+PG_HOST=192.168.0.47
+PG_PORT=5433

server/db/db.js

@@ -0,0 +1,54 @@
+const { Client } = require("pg");
+require("dotenv").config();
+
+const client = new Client({
+  user: process.env.PG_USER,
+  password: process.env.PG_PASSWORD,
+  database: process.env.PG_DATABASE,
+  host: process.env.PG_HOST,
+  port: process.env.PG_PORT,
+});
+
+async function initializeDatabaseConnection() {
+  await client
+    .connect()
+    .then(() =>
+      console.log(
+        `Successfully connected to database: ${process.env.PG_DATABASE}`,
+      ),
+    )
+    .catch((err) =>
+      console.error(
+        `Failed to connect to database: ${process.env.PG_DATABASE}, ${err}`,
+      ),
+    );
+}
+
+async function createTables() {
+  try {
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS accounts (
+        username VARCHAR(20),
+        password VARCHAR(128),
+        id VARCHAR(128),
+        created_at VARCHAR(100)
+      );
+    `);
+
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS messages (
+        sender_id VARCHAR(128),
+        receiver_id VARCHAR(128),
+        messages VARCHAR(500),
+        created_at VARCHAR(100)
+      );
+    `);
+  } catch (e) {
+    console.error("Failed to create tables ", e);
+  }
+}
+
+module.exports = {
+  initializeDatabaseConnection,
+  createTables,
+};

server/server.js

@@ -1,24 +1,27 @@
 const express = require("express");
-const cors = require("cors");
+const { createServer } = require("http");
+const { Server } = require("socket.io");
 const app = express();
-const port = 3000;
+const server = createServer(app);
+const io = new Server(server);
+require("dotenv").config();
+const PORT = process.env.SERVER_PORT;
 
+const { connectDB } = require("./db/db.js");
+
+app.use("/socket.io", express.static("./node_modules/socket.io/client-dist/"));
 const corsOptions = {
   origin: "http://localhost:5173",
-  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
 };
 
-// Apply CORS middleware
-app.use(cors(corsOptions));
-
-app.post("/api/login", (req, res) => {
-  res.status(200).send("Hello from the server!");
+app.get("/api/signup", (req, res) => {
+  res.send("niger");
 });
 
-app.post("/api/signup", (req, res) => {
-  res.status(200).send("git");
+app.listen(PORT, corsOptions, () => {
+  console.log(`Server is running on port: ${PORT}`);
 });
 
-app.listen(port, () => {
-  console.log(`Example app listening on port ${port}`);
+io.on("connection", (socket) => {
+  console.log(`User: ${socket.id} just connected`);
 });