From 39acaa55b1e66b8d90c846231ce81fb9dd225411 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Wed, 20 Apr 2022 14:51:57 -0700 Subject: [PATCH 01/10] Custom ChatList and search --- frontend/src/context.js | 4 +- .../src/pages/chats/ChatList/fetchUserList.js | 8 ++ .../pages/chats/ChatList/getOrCreateChat.js | 21 +++ frontend/src/pages/chats/ChatList/index.js | 122 ++++++++++++++++++ frontend/src/pages/chats/index.js | 12 +- 5 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 frontend/src/pages/chats/ChatList/fetchUserList.js create mode 100644 frontend/src/pages/chats/ChatList/getOrCreateChat.js create mode 100644 frontend/src/pages/chats/ChatList/index.js diff --git a/frontend/src/context.js b/frontend/src/context.js index a9ac358..fde52bb 100644 --- a/frontend/src/context.js +++ b/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 {props.children}; }; diff --git a/frontend/src/pages/chats/ChatList/fetchUserList.js b/frontend/src/pages/chats/ChatList/fetchUserList.js new file mode 100644 index 0000000..e56587f --- /dev/null +++ b/frontend/src/pages/chats/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)); +}; diff --git a/frontend/src/pages/chats/ChatList/getOrCreateChat.js b/frontend/src/pages/chats/ChatList/getOrCreateChat.js new file mode 100644 index 0000000..48aed7e --- /dev/null +++ b/frontend/src/pages/chats/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)); +}; diff --git a/frontend/src/pages/chats/ChatList/index.js b/frontend/src/pages/chats/ChatList/index.js new file mode 100644 index 0000000..c855bc8 --- /dev/null +++ b/frontend/src/pages/chats/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 ( + 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 ( + + getOrCreateChat( + user, + otherUser.username, + (r) => { + setSearch(""); + props.onChatCardClick(r.data.id); + }, + (e) => console.log(e) + ) + } + /> + ); + } else { + return
; + } + }); + }; + + return ( +
+ setSearch(e.target.value)} + className="search-bar" + /> + + {search.length > 0 ? renderSearch() : renderChats()} +
+ ); +}; + +export default ChatList; diff --git a/frontend/src/pages/chats/index.js b/frontend/src/pages/chats/index.js index 1844275..6a77075 100644 --- a/frontend/src/pages/chats/index.js +++ b/frontend/src/pages/chats/index.js @@ -3,6 +3,7 @@ import { useContext } from "react"; import { Context } from "../../context"; import Header from "./Header"; +import ChatList from "./ChatList"; import { MultiChatWindow, @@ -36,7 +37,16 @@ const ChatsPage = () => {
- + ( + + )} + className="multi-chat-window" + />
); From 703e2fabe1415968653d0e3a85d178ed5d867b6f Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Wed, 20 Apr 2022 14:52:22 -0700 Subject: [PATCH 02/10] Custom style for search-bar --- frontend/src/App.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 052ca83..8c0c536 100644 --- a/frontend/src/App.css +++ b/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; From 5ea945f81eb24d80d26c6b32de759c10c963e6ac Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Thu, 21 Apr 2022 15:33:48 -0700 Subject: [PATCH 03/10] Create users script --- backend/Dockerfile | 4 +- backend/scripts/create_example_users.py | 57 +++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 backend/scripts/create_example_users.py diff --git a/backend/Dockerfile b/backend/Dockerfile index a1eb533..8d8b436 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -6,9 +6,9 @@ COPY requirements.txt /app/requirements.txt RUN pip install --upgrade pip RUN pip install -r requirements.txt COPY . /app/ -# --- start: For this app --- +# --- start: For this tutorial --- RUN python manage.py migrate -RUN echo "from django.contrib.auth.models import User; User.objects.create_superuser('admin', 'admin@example.com', 'pass1234')" | python manage.py shell +RUN cat scripts/create_example_users.py | python manage.py shell # --- end --- CMD gunicorn -b :8080 server.wsgi:application EXPOSE ${PORT} \ No newline at end of file diff --git a/backend/scripts/create_example_users.py b/backend/scripts/create_example_users.py new file mode 100644 index 0000000..509c1a9 --- /dev/null +++ b/backend/scripts/create_example_users.py @@ -0,0 +1,57 @@ +from django.contrib.auth.models import User + +example_users = [ + { + "username": "albert-einstein", + "email": "albert@einstein.me", + "first_name": "Albert", + "last_name": "Einstein", + "secret": "pass1234" + }, + { + "username": "bill_hader", + "email": "bill@hader.com", + "first_name": "Bill", + "last_name": "Hader", + "secret": "pass1234" + }, + { + "username": "conan-obrian", + "email": "conan@conan.com", + "first_name": "Conan", + "last_name": "O Brian", + "secret": "pass1234" + }, + { + "username": "dwayne-the-rock", + "email": "dwayne@rock.com", + "first_name": "Dwayne", + "last_name": "Jhonson", + "secret": "pass1234" + }, + { + "username": "EugeneLevy", + "email": "eagene@levy.me", + "first_name": "Eugene", + "last_name": "Levy", + "secret": "pass1234" + }, +] + +for example_user in example_users: + user = User.objects.create( + username=example_user['username'], + email=example_user['email'], + first_name=example_user['first_name'], + last_name=example_user['last_name'], + password=example_user['secret'] + ) + +# Create the one superuser +User.objects.create_superuser( + username='admin', + email='admin@mail.com', + first_name='Admin', + last_name='User', + password='pass1234' +) \ No newline at end of file From fa06141de60c8caa4e46b3bfdd894550ef972a9e Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Thu, 21 Apr 2022 15:46:53 -0700 Subject: [PATCH 04/10] create_user --- backend/scripts/create_example_users.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/scripts/create_example_users.py b/backend/scripts/create_example_users.py index 509c1a9..b43ec4e 100644 --- a/backend/scripts/create_example_users.py +++ b/backend/scripts/create_example_users.py @@ -39,7 +39,7 @@ ] for example_user in example_users: - user = User.objects.create( + user = User.objects.create_user( username=example_user['username'], email=example_user['email'], first_name=example_user['first_name'], From 8cfacde36da7b8114c3b687a2a9b6d9d5e371f54 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Thu, 21 Apr 2022 16:05:06 -0700 Subject: [PATCH 05/10] CSS rename --- frontend/src/App.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 8c0c536..a7e81f4 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -208,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; } From bcfd15ab58fc152da2af671f0b16309ab5ac7760 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Thu, 21 Apr 2022 16:06:23 -0700 Subject: [PATCH 06/10] No classname --- frontend/src/pages/chats/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/chats/index.js b/frontend/src/pages/chats/index.js index 6a77075..b4fa3c5 100644 --- a/frontend/src/pages/chats/index.js +++ b/frontend/src/pages/chats/index.js @@ -45,7 +45,6 @@ const ChatsPage = () => { onChatCardClick={chatProps.onChatCardClick} /> )} - className="multi-chat-window" /> From 1fb1ef7503a0f70635a4eaf4d1eb596ebad6d977 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Thu, 21 Apr 2022 20:06:39 -0700 Subject: [PATCH 07/10] Johnson --- backend/scripts/create_example_users.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/scripts/create_example_users.py b/backend/scripts/create_example_users.py index b43ec4e..e6fa614 100644 --- a/backend/scripts/create_example_users.py +++ b/backend/scripts/create_example_users.py @@ -26,7 +26,7 @@ "username": "dwayne-the-rock", "email": "dwayne@rock.com", "first_name": "Dwayne", - "last_name": "Jhonson", + "last_name": "Johnson", "secret": "pass1234" }, { From fab83fcc04f5ae7010058cfda16154e6c6ea2e88 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Fri, 22 Apr 2022 14:50:01 -0700 Subject: [PATCH 08/10] pages refactor --- frontend/src/App.js | 4 ++-- frontend/src/{pages/auth => authPage}/Login/index.js | 2 +- frontend/src/{pages/auth => authPage}/Login/login.js | 0 frontend/src/{pages/auth => authPage}/Register/createUser.js | 0 frontend/src/{pages/auth => authPage}/Register/index.js | 2 +- frontend/src/{pages/auth => authPage}/index.js | 0 .../Header/MyAccount/DeleteAccount/deleteUser.js | 0 .../Header/MyAccount/DeleteAccount/index.js | 2 +- .../Header/MyAccount/UpdateAccount/index.js | 2 +- .../Header/MyAccount/UpdateAccount/updateUser.js | 0 .../src/{pages/chats => chatsPage}/Header/MyAccount/index.js | 0 frontend/src/{pages/chats => chatsPage}/Header/index.js | 2 +- frontend/src/{pages/chats => chatsPage}/index.js | 2 +- 13 files changed, 8 insertions(+), 8 deletions(-) rename frontend/src/{pages/auth => authPage}/Login/index.js (98%) rename frontend/src/{pages/auth => authPage}/Login/login.js (100%) rename frontend/src/{pages/auth => authPage}/Register/createUser.js (100%) rename frontend/src/{pages/auth => authPage}/Register/index.js (98%) rename frontend/src/{pages/auth => authPage}/index.js (100%) rename frontend/src/{pages/chats => chatsPage}/Header/MyAccount/DeleteAccount/deleteUser.js (100%) rename frontend/src/{pages/chats => chatsPage}/Header/MyAccount/DeleteAccount/index.js (91%) rename frontend/src/{pages/chats => chatsPage}/Header/MyAccount/UpdateAccount/index.js (98%) rename frontend/src/{pages/chats => chatsPage}/Header/MyAccount/UpdateAccount/updateUser.js (100%) rename frontend/src/{pages/chats => chatsPage}/Header/MyAccount/index.js (100%) rename frontend/src/{pages/chats => chatsPage}/Header/index.js (96%) rename frontend/src/{pages/chats => chatsPage}/index.js (88%) diff --git a/frontend/src/App.js b/frontend/src/App.js index dfadcca..91ff40b 100644 --- a/frontend/src/App.js +++ b/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"; diff --git a/frontend/src/pages/auth/Login/index.js b/frontend/src/authPage/Login/index.js similarity index 98% rename from frontend/src/pages/auth/Login/index.js rename to frontend/src/authPage/Login/index.js index 4453e49..b2b9402 100644 --- a/frontend/src/pages/auth/Login/index.js +++ b/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(""); diff --git a/frontend/src/pages/auth/Login/login.js b/frontend/src/authPage/Login/login.js similarity index 100% rename from frontend/src/pages/auth/Login/login.js rename to frontend/src/authPage/Login/login.js diff --git a/frontend/src/pages/auth/Register/createUser.js b/frontend/src/authPage/Register/createUser.js similarity index 100% rename from frontend/src/pages/auth/Register/createUser.js rename to frontend/src/authPage/Register/createUser.js diff --git a/frontend/src/pages/auth/Register/index.js b/frontend/src/authPage/Register/index.js similarity index 98% rename from frontend/src/pages/auth/Register/index.js rename to frontend/src/authPage/Register/index.js index daa0051..ce809f7 100644 --- a/frontend/src/pages/auth/Register/index.js +++ b/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(""); diff --git a/frontend/src/pages/auth/index.js b/frontend/src/authPage/index.js similarity index 100% rename from frontend/src/pages/auth/index.js rename to frontend/src/authPage/index.js diff --git a/frontend/src/pages/chats/Header/MyAccount/DeleteAccount/deleteUser.js b/frontend/src/chatsPage/Header/MyAccount/DeleteAccount/deleteUser.js similarity index 100% rename from frontend/src/pages/chats/Header/MyAccount/DeleteAccount/deleteUser.js rename to frontend/src/chatsPage/Header/MyAccount/DeleteAccount/deleteUser.js diff --git a/frontend/src/pages/chats/Header/MyAccount/DeleteAccount/index.js b/frontend/src/chatsPage/Header/MyAccount/DeleteAccount/index.js similarity index 91% rename from frontend/src/pages/chats/Header/MyAccount/DeleteAccount/index.js rename to frontend/src/chatsPage/Header/MyAccount/DeleteAccount/index.js index e1d4e7d..f2e9c4c 100644 --- a/frontend/src/pages/chats/Header/MyAccount/DeleteAccount/index.js +++ b/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); diff --git a/frontend/src/pages/chats/Header/MyAccount/UpdateAccount/index.js b/frontend/src/chatsPage/Header/MyAccount/UpdateAccount/index.js similarity index 98% rename from frontend/src/pages/chats/Header/MyAccount/UpdateAccount/index.js rename to frontend/src/chatsPage/Header/MyAccount/UpdateAccount/index.js index 771d062..862e700 100644 --- a/frontend/src/pages/chats/Header/MyAccount/UpdateAccount/index.js +++ b/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(""); diff --git a/frontend/src/pages/chats/Header/MyAccount/UpdateAccount/updateUser.js b/frontend/src/chatsPage/Header/MyAccount/UpdateAccount/updateUser.js similarity index 100% rename from frontend/src/pages/chats/Header/MyAccount/UpdateAccount/updateUser.js rename to frontend/src/chatsPage/Header/MyAccount/UpdateAccount/updateUser.js diff --git a/frontend/src/pages/chats/Header/MyAccount/index.js b/frontend/src/chatsPage/Header/MyAccount/index.js similarity index 100% rename from frontend/src/pages/chats/Header/MyAccount/index.js rename to frontend/src/chatsPage/Header/MyAccount/index.js diff --git a/frontend/src/pages/chats/Header/index.js b/frontend/src/chatsPage/Header/index.js similarity index 96% rename from frontend/src/pages/chats/Header/index.js rename to frontend/src/chatsPage/Header/index.js index 9e365c8..922124f 100644 --- a/frontend/src/pages/chats/Header/index.js +++ b/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"; diff --git a/frontend/src/pages/chats/index.js b/frontend/src/chatsPage/index.js similarity index 88% rename from frontend/src/pages/chats/index.js rename to frontend/src/chatsPage/index.js index 5fb8a41..cbbf739 100644 --- a/frontend/src/pages/chats/index.js +++ b/frontend/src/chatsPage/index.js @@ -1,6 +1,6 @@ import { useContext } from "react"; -import { Context } from "../../context"; +import { Context } from "../context"; import Header from "./Header"; From 59130d5d1823769b0043c69477bbabe65e253220 Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Wed, 27 Apr 2022 20:17:05 -0400 Subject: [PATCH 09/10] Delete create_example_users.py --- backend/scripts/create_example_users.py | 57 ------------------------- 1 file changed, 57 deletions(-) delete mode 100644 backend/scripts/create_example_users.py diff --git a/backend/scripts/create_example_users.py b/backend/scripts/create_example_users.py deleted file mode 100644 index e6fa614..0000000 --- a/backend/scripts/create_example_users.py +++ /dev/null @@ -1,57 +0,0 @@ -from django.contrib.auth.models import User - -example_users = [ - { - "username": "albert-einstein", - "email": "albert@einstein.me", - "first_name": "Albert", - "last_name": "Einstein", - "secret": "pass1234" - }, - { - "username": "bill_hader", - "email": "bill@hader.com", - "first_name": "Bill", - "last_name": "Hader", - "secret": "pass1234" - }, - { - "username": "conan-obrian", - "email": "conan@conan.com", - "first_name": "Conan", - "last_name": "O Brian", - "secret": "pass1234" - }, - { - "username": "dwayne-the-rock", - "email": "dwayne@rock.com", - "first_name": "Dwayne", - "last_name": "Johnson", - "secret": "pass1234" - }, - { - "username": "EugeneLevy", - "email": "eagene@levy.me", - "first_name": "Eugene", - "last_name": "Levy", - "secret": "pass1234" - }, -] - -for example_user in example_users: - user = User.objects.create_user( - username=example_user['username'], - email=example_user['email'], - first_name=example_user['first_name'], - last_name=example_user['last_name'], - password=example_user['secret'] - ) - -# Create the one superuser -User.objects.create_superuser( - username='admin', - email='admin@mail.com', - first_name='Admin', - last_name='User', - password='pass1234' -) \ No newline at end of file From 7d603e9c161a6e464eb9dd2f97dfacc6ad19b5ef Mon Sep 17 00:00:00 2001 From: Adam La Morre Date: Wed, 27 Apr 2022 20:17:27 -0400 Subject: [PATCH 10/10] Delete Dockerfile --- backend/Dockerfile | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 backend/Dockerfile diff --git a/backend/Dockerfile b/backend/Dockerfile deleted file mode 100644 index 8d8b436..0000000 --- a/backend/Dockerfile +++ /dev/null @@ -1,14 +0,0 @@ -FROM python:3.9.10 -ENV PYTHONBUFFERED=1 -ENV PORT 8080 -WORKDIR /app -COPY requirements.txt /app/requirements.txt -RUN pip install --upgrade pip -RUN pip install -r requirements.txt -COPY . /app/ -# --- start: For this tutorial --- -RUN python manage.py migrate -RUN cat scripts/create_example_users.py | python manage.py shell -# --- end --- -CMD gunicorn -b :8080 server.wsgi:application -EXPOSE ${PORT} \ No newline at end of file