home page is done

src/pages/Chat.jsx

@@ -1,8 +1,20 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 const Chat = () => {
+    const [interlocutorId, setInterlocutorId] = useState(0); // State to hold the interlocutorId
+
+    function getInterlocutorId() {
+      const id = localStorage.getItem('interlocutorId');
+      return id ? id : 0;
+    }
+
+    useEffect(() => {
+      const id = getInterlocutorId();
+      setInterlocutorId(id);
+    }, []);
+
   return (
-      <h2>Chat with ...</h2>
+      <h2>Chat with ... (id = {interlocutorId})</h2>
   );
 };
 

src/pages/Home.jsx

@@ -1,9 +1,69 @@
 import React from "react";
+import HomeTitle from "../components/home/HomeTitle.jsx";
+import ChatsList from "../components/home/ChatsList.jsx";
 
 const Home = () => {
-  return (
-      <div>
 
+    // temp for testing
+    const chats = [
+        {
+            name: "Alice Johnson",
+            id: 123456,
+            lastMessage: "See you later!"
+        },
+        {
+            name: "Bob Smith",
+            id: 654321,
+            lastMessage: "Got it, thanks!"
+        },
+        {
+            name: "Charlie Brown",
+            id: 234567,
+            lastMessage: "How's the project going? How's the project going? How's the project going?" +
+                "How's the project going? How's the project going?"
+        },
+        {
+            name: "David Clark",
+            id: 765432,
+            lastMessage: "I'll send the files."
+        },
+        {
+            name: "Eve Adams",
+            id: 345678,
+            lastMessage: "Let's meet tomorrow."
+        },
+        {
+            name: "Frank Wright",
+            id: 876543,
+            lastMessage: "Can you review this?"
+        },
+        {
+            name: "Grace Lee",
+            id: 456789,
+            lastMessage: "Thanks for your help!"
+        },
+        {
+            name: "Hannah Scott",
+            id: 987654,
+            lastMessage: "See you at the meeting."
+        },
+        {
+            name: "Ian Davis",
+            id: 567890,
+            lastMessage: "Let me know when you're free."
+        },
+        {
+            name: "Jill Thompson",
+            id: 678901,
+            lastMessage: "I'll catch up with you later."
+        }
+    ];
+
+    return (
+      <div className="homeWrapper">
+        <HomeTitle/>
+        <p>Your chats</p>
+        <ChatsList chats={chats} />
       </div>
   )
 }

src/pages/css/home.css

@@ -0,0 +1,25 @@
+.homeWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.homeWrapper p {
+    font-size: 2.5vw;
+    font-weight: 500;
+    margin-top: 0;
+}
+
+@media only screen and (max-width: 800px) {
+    .homeWrapper p {
+        font-size: 3vh;
+    }
+}
+
+.ChatsList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    margin: 3rem;
+}

src/pages/index.css

@@ -1 +1,2 @@
 @import url("css/init.css");
+@import url("css/home.css");