Merge pull request Vo-Huy-Khoa#120 from Vo-Huy-Khoa/backend

implement layout smartphone
tamutamu-fork-library · May 5, 2023 · a9e26d1 · a9e26d1
2 parents 6602ca6 + c2760eb
commit a9e26d1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 25 deletions.
diff --git a/frontend/src/components/Account.tsx b/frontend/src/components/Account.tsx
@@ -1,7 +1,7 @@
 import moment from "moment";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../redux/reducers/rootReducer";
-import { setCurrentReceiver, setVisibility } from "../redux/actions";
+import { setCurrentReceiver, setVisibility} from "../redux/actions";
 import { useEffect, useRef } from "react";
 import socket from "../socket";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -26,7 +26,7 @@ const AccountItem = ({ ...rest }) => {
 
   return (
     <div
-      className="flex flex-row gap-4 items-center"
+      className="flex flex-row gap-4 items-center cursor-pointer"
       onClick={() => handleSubmit()}
     >
       <img
@@ -60,8 +60,8 @@ const AccountMessage = ({ ...rest }) => {
   }, []);
 
   const handleSubmit = () => {
-    dispatch(setCurrentReceiver(searchUser));
     dispatch(setVisibility("home"));
+    dispatch(setCurrentReceiver(searchUser));
     const data = {
       senderID: senderID,
       receiverID: receiverID,

diff --git a/frontend/src/layouts/dashboard.tsx b/frontend/src/layouts/dashboard.tsx
@@ -1,15 +1,19 @@
 import { Route, Routes } from "react-router-dom";
 import { routes } from "../routes";
 import { Sidebar, Notification } from "../pages/dashboard";
+import { useSelector } from "react-redux";
+import { RootState } from "../redux/reducers/rootReducer";
 
 const Dashboard = () => {
+  const isVisible = useSelector((state: RootState) => state.currentVisibility);
+
   return (
     <div>
       <div className="flex w-full h-full">
-        <div className="fixed bg-primary h-full custom-w-sidebar sm:hidden">
+        <div className={`fixed bg-primary h-full custom-w-sidebar ${isVisible === "sidebar" ? "sm:block sm:w-full" : "sm:hidden"}`}>
           <Sidebar />
         </div>
-        <div className="fixed bg-black h-full custom-w-home sm:w-full sm:left-0">
+        <div className={`fixed bg-black h-full custom-w-home sm:w-full sm:left-0 ${isVisible === "home" ? "sm:block sm:w-full" : "sm:hidden"}`}>
           <Routes>
             {routes.map(
               ({ layout, pages }) =>
@@ -20,7 +24,7 @@ const Dashboard = () => {
             )}
           </Routes>
         </div>
-        <div className="fixed right-0 custom-w-notification h-full bg-primary sm:hidden">
+        <div className={`fixed right-0 custom-w-notification h-full bg-primary ${isVisible === "notification" ? "sm:block sm:w-full" : "sm:hidden"}`}>
           <Notification />
         </div>
       </div>

diff --git a/frontend/src/pages/auth/sign-in.tsx b/frontend/src/pages/auth/sign-in.tsx
@@ -1,9 +1,12 @@
 import { NavLink, useNavigate } from "react-router-dom";
 import { useRef, useState } from "react";
 import { handleLogin } from "../../services/auth";
+import { useDispatch } from "react-redux";
+import { setVisibility } from "../../redux/actions";
 
 const Login = () => {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
   const [validate, setValidate] = useState(false);
@@ -16,6 +19,7 @@ const Login = () => {
     e.preventDefault();
     try {
       await handleLogin(body);
+      dispatch(setVisibility("home"));
       navigate("/dashboard/home");
     } catch (error) {
       console.error(error);

diff --git a/frontend/src/pages/dashboard/home.tsx b/frontend/src/pages/dashboard/home.tsx
@@ -14,7 +14,7 @@ import {
 import { useEffect, useState } from "react";
 import { IMessage } from "../../types";
 import { getProfile } from "../../services";
-import { setCurrentUser, setSelectMessage } from "../../redux/actions";
+import { setCurrentUser, setSelectMessage, setVisibility } from "../../redux/actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../redux/reducers/rootReducer";
 
@@ -51,6 +51,13 @@ const Home = () => {
     emitMessage(":like");
   };
 
+  const handleReturnSidebar = ()=>{
+    dispatch(setVisibility("sidebar"));
+  }
+  const handleReturnNotification = ()=>{
+    dispatch(setVisibility("notification"));
+  }
+
   useEffect(() => {
     const handleNewMessage = (data: any = []) => {
       const sortedMessages = data.sort(
@@ -75,29 +82,27 @@ const Home = () => {
 
   return (
     <div className="h-full w-full">
-      <div className="fixed top-0 custom-w-home sm:w-full h-32 bg-primary flex flex-row items-center justify-around">
-        <div className=" w-3/5 flex flex-row 2xl:justify-end 2xl:items-end xl:justify-end xl:items-center sm:justify-around sm:items-center">
+      <div className="fixed top-0 custom-w-home sm:w-full h-32 bg-primary flex flex-row items-center justify-around sm:left-0 sm:px-2 sm:gap-2">
+        <div className=" w-3/5 flex flex-row 2xl:justify-end 2xl:items-end xl:justify-end xl:items-center sm:justify-around sm:items-center sm:gap-1 sm:w-4/6 sm:text-xl">
                   <FontAwesomeIcon
                     icon={faArrowLeft}
-                    className="w-12 h-12 text-white hidden sm:block"
+                    className="w-12 h-12 text-blue hidden sm:block"
+                    onClick={handleReturnSidebar}
                   />
                   {countMessage !== null && (
-                    <div className="flex flex-row gap-8 items-center">
-                      <Image src={currentReceiver?.avatar} width="50px" height="50px" />
-                        <p className=" text-white text-4xl">{currentReceiver?.fullname}</p>
+                    <div className="flex flex-row gap-8 items-center sm:gap-2">
+                      <img src={currentReceiver?.avatar} className="w-24 h-24 rounded-full object-cover sm:w-20 sm:h-20" alt={currentReceiver?.fullname} />
+                        <p className=" text-white text-4xl sm:text-3xl">{currentReceiver?.fullname}</p>
                     </div>
                   )}
-
-                  <FontAwesomeIcon
-                    icon={faCircleInfo}
-                    className="w-12 h-12 text-white hidden sm:block"
-                  />
         </div>
 
-        <div className="w-2/5 flex flex-row justify-end gap-10  text-blue">
-              <FontAwesomeIcon icon={faPhone} className="w-10 h-10 cursor-pointer" />
-              <FontAwesomeIcon icon={faVideoCamera} className="w-10 h-10 cursor-pointer" />
-              <FontAwesomeIcon icon={faCircleInfo} className="w-10 h-10 cursor-pointer" />
+        <div className="w-2/5 flex flex-row justify-end gap-10  text-blue sm:gap-5 sm:w-1/5">
+              <FontAwesomeIcon icon={faPhone} className="w-10 h-10 cursor-pointer sm:w-9 sm:h-9" />
+              <FontAwesomeIcon icon={faVideoCamera} className="w-10 h-10 cursor-pointer sm:w-9 sm:h-9" />
+              <FontAwesomeIcon icon={faCircleInfo} className="w-10 h-10 cursor-pointer sm:w-9 sm:h-9"
+              onClick={handleReturnNotification}
+              />
           </div>
 
       </div>
@@ -157,7 +162,7 @@ const Home = () => {
       </div>
       (
       {countMessage !== null && (
-        <div className="fixed bottom-0 custom-w-home sm:w-full h-28 bg-primary flex flex-col justify-center">
+        <div className="fixed bottom-0 custom-w-home sm:w-full h-28 bg-primary flex flex-col justify-center sm:left-0">
           <div className="flex flex-row justify-between items-center gap-6 sm:gap-4 sm:px-4">
             <div className="flex flex-row gap-2 items-center">
               <FontAwesomeIcon

diff --git a/frontend/src/pages/dashboard/notification.tsx b/frontend/src/pages/dashboard/notification.tsx
@@ -29,11 +29,11 @@ const Notification = () => {
           <FontAwesomeIcon
             icon={faArrowLeft}
             onClick={handleHome}
-            className="text-white text-4xl"
+            className="text-blue text-4xl"
           />
         )}
         {isVisible === "notification" && (
-          <FontAwesomeIcon icon={faBars} className="text-white text-4xl" />
+          <FontAwesomeIcon icon={faBars} className="text-blue text-4xl" />
         )}
       </div>
       <div className="text-white flex flex-col items-center gap-10">