3 - Custom <ChatList /> and search

frontend/src/App.css

@@ -81,6 +81,7 @@
   border: none;
   margin: 6px 12px 6px 12px;
   outline: none;
+  width: calc(100% - 24px);
 }
 .search-bar::placeholder {
   color: white;
@@ -207,14 +208,14 @@
   background-color: #4e426d !important;
 }
 
-.multi-chat-window {
-  position: absolute;
-  top: calc(10vh + 64px);
-  left: 10vw;
-  height: calc(80vh - 64px);
-  width: 80vw;
-  border: 1px solid black;
+.ce-chat-engine {
+  position: absolute !important;
+  top: calc(10vh + 64px) !important;
+  left: 10vw !important;
+  height: calc(80vh - 64px) !important;
+  width: 80vw !important;
+  border: 1px solid black !important;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
     rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
-    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
 }

frontend/src/App.js

@@ -2,8 +2,8 @@ import { useContext } from "react";
 
 import "./App.css";
 
-import AuthPage from "./pages/auth";
-import ChatsPage from "./pages/chats";
+import AuthPage from "./authPage";
+import ChatsPage from "./chatsPage";
 
 import { Context } from "./context";
 

frontend/src/pages/auth/Login/index.js → frontend/src/authPage/Login/index.js

@@ -3,7 +3,7 @@ import { useState, useContext } from "react";
 import { Col, Row, Form, Input, Button, Checkbox, notification } from "antd";
 
 import { login } from "./login";
-import { Context } from "../../../context";
+import { Context } from "../../context";
 
 const Login = () => {
   const [error, setError] = useState("");

frontend/src/pages/auth/Register/index.js → frontend/src/authPage/Register/index.js

@@ -3,7 +3,7 @@ import { useState, useContext } from "react";
 import { Col, Row, Form, Input, Button, notification } from "antd";
 
 import { createUser } from "./createUser";
-import { Context } from "../../../context";
+import { Context } from "../../context";
 
 const Register = () => {
   const [error, setError] = useState("");

frontend/src/chatsPage/ChatList/fetchUserList.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const fetchUserList = (onSuccess, onError) => {
+  axios
+    .get("http://127.0.0.1:8000/users/", {})
+    .then((r) => onSuccess(r))
+    .catch((e) => onError(e.response.data));
+};

frontend/src/chatsPage/ChatList/getOrCreateChat.js

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+export const getOrCreateChat = (user, otherUsername, onSuccess, onError) => {
+  axios
+    .put(
+      "https://api.chatengine.io/chats/",
+      {
+        usernames: [user.username, otherUsername],
+        is_direct_chat: true,
+      },
+      {
+        headers: {
+          "Project-Id": "70049943-b572-4372-9f3c-fbdeca940e0f",
+          "User-Name": user.username,
+          "User-Secret": user.hashed_password,
+        },
+      }
+    )
+    .then((r) => onSuccess(r))
+    .catch((e) => onError(e.response.data));
+};

frontend/src/chatsPage/ChatList/index.js

@@ -0,0 +1,122 @@
+import { useContext, useState, useEffect, useRef } from "react";
+
+import { fetchUserList } from "./fetchUserList";
+import { getOrCreateChat } from "./getOrCreateChat";
+
+import { Context } from "../../context";
+import { Input, ChatCard } from "react-chat-engine-advanced";
+
+const ChatList = (props) => {
+  const didMountRef = useRef(false);
+  const { user, userList, setUserList } = useContext(Context);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      fetchUserList(
+        (r) => {
+          console.log(r.data.results);
+          setUserList(r.data.results);
+        },
+        (e) => console.log(e)
+      );
+    }
+  });
+
+  const getOtherUser = (chat) => {
+    let username = "";
+    chat.people.map((person) => {
+      if (person.person.username !== user.username) {
+        username = person.person.first_name + " " + person.person.last_name;
+      }
+    });
+    return username;
+  };
+
+  const renderChats = () => {
+    return props.chats.map((chat, index) => {
+      return (
+        <ChatCard
+          key={`chat-card-${index}`}
+          title={getOtherUser(chat)}
+          description={
+            chat.last_message.text ? chat.last_message.text : "Say hello!"
+          }
+          timeStamp={
+            chat.last_message.created
+              ? chat.last_message.created.substr(5, 5)
+              : chat.created.substr(5, 5)
+          }
+          isActive={props.activeChatId === chat.id}
+          hasNotification={user.username !== chat.last_message.sender_username}
+          style={{ margin: "6px 12px 6px 12px" }}
+          onClick={() => props.onChatCardClick(chat.id)}
+          avatarUsername={chat.last_message.sender?.username}
+          avatarUrl={
+            chat.last_message.sender
+              ? chat.last_message.sender.avatar
+              : "https://chat-engine-assets.s3.amazonaws.com/empty-chat-thumb.png"
+          }
+        />
+      );
+    });
+  };
+
+  const renderSearch = () => {
+    return userList.map((otherUser, index) => {
+      const userStr = `${otherUser.username} ${otherUser.email} ${otherUser.first_name} ${otherUser.last_name}`;
+
+      if (
+        userStr.indexOf(search) !== -1 &&
+        otherUser.username !== user.username &&
+        otherUser.username !== "admin"
+      ) {
+        return (
+          <ChatCard
+            key={`chat-card-${index}`}
+            title={`${otherUser.first_name} ${otherUser.last_name}`}
+            description={otherUser.username}
+            style={{ margin: "6px 12px 6px 12px" }}
+            avatarUsername={otherUser.username}
+            avatarUrl={otherUser.avatar}
+            onClick={() =>
+              getOrCreateChat(
+                user,
+                otherUser.username,
+                (r) => {
+                  setSearch("");
+                  props.onChatCardClick(r.data.id);
+                },
+                (e) => console.log(e)
+              )
+            }
+          />
+        );
+      } else {
+        return <div />;
+      }
+    });
+  };
+
+  return (
+    <div
+      style={{
+        height: "100%",
+        backgroundColor: "#4e426d",
+        overflowY: "scroll",
+      }}
+    >
+      <Input
+        label="Search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className="search-bar"
+      />
+
+      {search.length > 0 ? renderSearch() : renderChats()}
+    </div>
+  );
+};
+
+export default ChatList;

frontend/src/pages/chats/Header/MyAccount/DeleteAccount/index.js → frontend/src/chatsPage/Header/MyAccount/DeleteAccount/index.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { Button } from "antd";
 
 import { deleteUser } from "./deleteUser";
-import { Context } from "../../../../../context";
+import { Context } from "../../../../context";
 
 const DeleteAccount = () => {
   const { user, setUser } = useContext(Context);

frontend/src/pages/chats/Header/MyAccount/UpdateAccount/index.js → frontend/src/chatsPage/Header/MyAccount/UpdateAccount/index.js

@@ -3,7 +3,7 @@ import { useState, useContext } from "react";
 import { Col, Row, Button, Form, Input, notification } from "antd";
 
 import { updateUser } from "./updateUser";
-import { Context } from "../../../../../context";
+import { Context } from "../../../../context";
 
 const EditAccount = (props) => {
   const [error, setError] = useState("");

frontend/src/pages/chats/Header/index.js → frontend/src/chatsPage/Header/index.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 
-import { Context } from "../../../context";
+import { Context } from "../../context";
 
 import MyAccount from "./MyAccount";
 

frontend/src/pages/chats/index.js → frontend/src/chatsPage/index.js

@@ -1,8 +1,9 @@
 import { useContext } from "react";
 
-import { Context } from "../../context";
+import { Context } from "../context";
 
 import Header from "./Header";
+import ChatList from "./ChatList";
 
 import {
   MultiChatWindow,
@@ -36,7 +37,15 @@ const ChatsPage = () => {
           <div className="bubble-4" />
 
           <MultiChatSocket {...chatProps} />
-          <MultiChatWindow {...chatProps} className="multi-chat-window" />
+          <MultiChatWindow
+            {...chatProps}
+            renderChatList={(props) => (
+              <ChatList
+                {...props}
+                onChatCardClick={chatProps.onChatCardClick}
+              />
+            )}
+          />
         </div>
       </div>
     );

frontend/src/context.js

@@ -4,7 +4,9 @@ export const Context = createContext();
 
 export const ContextProvider = (props) => {
   const [user, setUser] = useState(undefined);
-  const value = { user, setUser };
+  const [userList, setUserList] = useState([]);
+
+  const value = { user, setUser, userList, setUserList };
 
   return <Context.Provider value={value}>{props.children}</Context.Provider>;
 };