diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a4925e9..7460d99 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,17 +8,14 @@ "name": "frontend", "version": "0.1.0", "dependencies": { - "@emoji-mart/data": "^1.1.2", - "@emoji-mart/react": "^1.1.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.5.1", - "emoji-mart": "^5.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3", - "react-scripts": "^5.0.1", + "react-router-dom": "^6.16.0", + "react-scripts": "5.0.1", "react-use-websocket": "^4.5.0", "web-vitals": "^2.1.4" } @@ -2404,20 +2401,6 @@ "postcss-selector-parser": "^6.0.10" } }, - "node_modules/@emoji-mart/data": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz", - "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==" - }, - "node_modules/@emoji-mart/react": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz", - "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==", - "peerDependencies": { - "emoji-mart": "^5.2", - "react": "^16.8 || ^17 || ^18" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -3466,9 +3449,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", - "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", "engines": { "node": ">=14.0.0" } @@ -6940,11 +6923,6 @@ "url": "https://github.com/sindresorhus/emittery?sponsor=1" } }, - "node_modules/emoji-mart": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz", - "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==" - }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -14271,11 +14249,11 @@ } }, "node_modules/react-router": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", - "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", "dependencies": { - "@remix-run/router": "1.15.3" + "@remix-run/router": "1.11.0" }, "engines": { "node": ">=14.0.0" @@ -14285,12 +14263,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", - "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", "dependencies": { - "@remix-run/router": "1.15.3", - "react-router": "6.22.3" + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" }, "engines": { "node": ">=14.0.0" @@ -16322,16 +16300,16 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/frontend/package.json b/frontend/package.json index c060d95..711c65e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,17 +3,14 @@ "version": "0.1.0", "private": true, "dependencies": { - "@emoji-mart/data": "^1.1.2", - "@emoji-mart/react": "^1.1.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.5.1", - "emoji-mart": "^5.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3", - "react-scripts": "^5.0.1", + "react-router-dom": "^6.16.0", + "react-scripts": "5.0.1", "react-use-websocket": "^4.5.0", "web-vitals": "^2.1.4" }, diff --git a/frontend/src/App.css b/frontend/src/App.css index 7b70f4f..8d6e691 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -436,200 +436,17 @@ header { @keyframes s4{ 100%{transform: rotate(1turn)} } - - -/* this is the video caller */ -.call-img svg{ - width: 30px; -} - - - -/* Notes */ -/* Code for the callerPage Side */ - - -.caller-page { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - overflow:auto; - height: calc(100vh); - padding: 1%; -} - - -.top{ - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; - width:100%; -} - - -.top img{ - width: 30px; -} - -.top--1{ - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 1px; -} -.top--1 svg{ - width: 30px; - height: 100%; - padding: 3px; -} - -.top--2 { -width: 30px; -height: 100%; -} -/* the h1 of the timer */ - -.timer { - font-size: 15px; -} - - -/* the caller or middle section */ - -.caller--name{ - display: flex; - -} - -.caller--name h1{ -color: black; -font-size: 35px; -} - - - -.end{ - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - border-top: 1px solid black; - padding: 2%; -} - -.end svg{ - width: 40px; - align-items: end; - height: 100%; - border: 2px solid black; - padding: 5px; - border-radius: 15px; - background-color: transparent; - /* animation: hoverIcon 0.5s ease-in; */ -} - -.end svg:hover{ - background-color: rgb(221, 221, 193); -} - - -.dark{ - background-color: rgb(56, 53, 53); -} - -.dark .caller--name h1{ - color: white; -} - -.dark .end svg{ - fill: white; - border: 2px solid white; -} - - -.dark .end{ - border-top: 1px solid white; -} - -.dark .timer { - color: white; -} -.dark .top--2 { - fill: white; -} - - -.dark .chats-container{ - background-color: rgb(56, 53, 53); -} -.dark .chats-container h1 { - color: white; -} - -.dark .chats-container p{ - color: black; -} - -.dark .chats-container .welcome{ - color: white; -} -.dark .call-img svg{ - fill:white -} -.dark .messages-container{ - background-color: rgb(56, 53, 53); -} - -.dark .top--1 svg{ - fill: whitesmoke; -} - - -.dark .end svg:hover{ - background-color: rgb(88, 86, 86); -} - - - -/* Dealing wwith responsiveness */ - - -/* @media (max-width: 760px) { - .chats-container{ - width: 0%; - } - .messages-container{ - width: 100%; - } - -} */ - - - @media (max-width: 900px) { .chats-container { - width: 0px; + width: 300px; } } @media (max-width: 760px) { - /* .responsive { + .responsive { display: none; - } */ + } .chats-container { - width: 0px; + width: 100%; } - } - - - - - - - - - - diff --git a/frontend/src/App.js b/frontend/src/App.js index 8de9190..2fb44e9 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -7,28 +7,19 @@ import ProtectedRoute from './components/auth/ProtectedRoute'; import DefaultChat from './components/core/DefaultChat'; import Messages from './components/core/Messages'; import MessageDetail from './components/core/MessageDetail'; -import CallerPage from './components/core/callerPage'; -import { useState } from 'react'; - - function App() { - const [changeMode, setIsChangeMode] = useState() - const toggleMode = () =>{ - setIsChangeMode(prevMode => !prevMode) -}; - + return ( } /> } /> - }> - } /> - } /> - }/> - + }> + } /> + } /> + ); diff --git a/frontend/src/components/core/MessageDetail.js b/frontend/src/components/core/MessageDetail.js index dfd9164..3cd3ccf 100644 --- a/frontend/src/components/core/MessageDetail.js +++ b/frontend/src/components/core/MessageDetail.js @@ -6,31 +6,21 @@ import userImg from '../../images/user2.svg' import send from '../../images/send.svg' import options from '../../images/options.svg' import useOnScreen from './onScreen'; -import { ReactComponent as VideoSvgIcon} from '../../images/video.svg' - - -// The caller Page - - - - - const WS_DOMAIN = 'wss://reelchat.me/ws'; // const MAX_RETRIES = 3; // Define the maximum number of retries -const MessageDetail = ({changeMode}) => { +const MessageDetail = () => { const { user } = useAuth(); const params = useParams(); const navigate = useNavigate() const other_user = params.username; + const bottomRef = useRef(null); const messageInputRef = useRef(null); const chatLog = useRef(null); const isVisible = useOnScreen(bottomRef) - - const [chatSocket, setChatSocket] = useState(null); const [notificationSocket, setNotificationSocket] = useState(null); @@ -45,8 +35,6 @@ const MessageDetail = ({changeMode}) => { const [showPreviousMessage, setShowPreviousMessage] = useState(true) const [previousMessagePage, setPreviousMessagePage] = useState(2) const [online, setOnline] = useState(null) - // added a new state - const scrollToLatestMessage = () => { @@ -280,14 +268,9 @@ const MessageDetail = ({changeMode}) => { navigate('/'); } - - // const handleSwitchToCallerPage = () => { - // history.push('/caller-page'); - // }; - return ( <> -
+
‹
@@ -298,17 +281,9 @@ const MessageDetail = ({changeMode}) => { {online !== null && (online ? "online" : "offline")}
- - -
navigate('/callerpage')} > - -
-
- - { showOptions && (
@@ -317,7 +292,7 @@ const MessageDetail = ({changeMode}) => { }
-
+
{ loading &&
} { messages.length >= 30 && showPreviousMessage && ( @@ -365,7 +340,7 @@ const MessageDetail = ({changeMode}) => { }
-
+