chat retrieval is done

src/pages/Home.jsx

@@ -4,10 +4,14 @@ import ChatsList from "../components/home/ChatsList.jsx";
 import Header from "../components/home/Header.jsx";
 import {displayMessage} from "../backend/notifications/notifications";
 import {MessageType} from "../backend/notifications/message";
-import {get} from "../backend/api";
+import {get, post} from "../backend/api";
+import InputField from "../components/reg/InputField.jsx";
+import Search from "../components/home/Search.jsx";
+import {URLs} from "../__data__/urls";
 
 const Home = () => {
     const [chats, setChats] = useState([])
+    const [interlocutor, setInterlocutor] = useState("")
 
     async function retrieveChats() {
         const username = localStorage.getItem("username");
@@ -24,6 +28,23 @@ const Home = () => {
         setChats(data.chats);
     }
 
+    async function createChat(alias) {
+        const username = localStorage.getItem("username");
+        if (!username) {
+            displayMessage("You're not logged in!", MessageType.WARN);
+            return;
+        }
+
+        const {ok, data} = await post('/chat/item/' + username + '/' + alias);
+        if (!ok) {
+            displayMessage(data.message, MessageType.ERROR);
+        } else {
+            localStorage.setItem('message', 'Successfully opened chat!');
+            localStorage.setItem('interlocutorId', alias);
+            window.location.href = URLs.chat.url;
+        }
+    }
+
     useEffect(() => {retrieveChats().then()}, [])
 
     return (
@@ -33,6 +54,15 @@ const Home = () => {
           </div>
 
           <HomeTitle/>
+
+          <InputField
+              title="Create new chat"
+              value={interlocutor}
+              setValue={setInterlocutor}
+              placeholder="Enter the username (id)"
+          />
+          <Search search={createChat} item={interlocutor}/>
+
           <p>Your chats</p>
           <ChatsList chats={chats} />
       </div>