From 7309b7073b303681ffc4d4e33279c3a9a2aba239 Mon Sep 17 00:00:00 2001
From: bank1333 <natchapol.pat@gmail.com>
Date: Fri, 11 Dec 2020 20:23:07 +0700
Subject: [PATCH] bug fix

---
 backend/config/config.json                    |  2 +-
 frontend/src/App.css                          | 40 ++++++++++++++++++-
 frontend/src/components/ChatRoom/Home.js      |  2 +-
 .../src/components/core/header/Header.css     |  3 ++
 frontend/src/components/core/header/Header.js | 20 ++++++----
 .../src/components/pages/home/Swap-page.js    | 14 ++++---
 .../private-routes/PrivateRoutes.js           |  3 +-
 7 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/backend/config/config.json b/backend/config/config.json
index 69c71649..f103463e 100644
--- a/backend/config/config.json
+++ b/backend/config/config.json
@@ -1,7 +1,7 @@
 {
   "development": {
     "username": "postgres",
-    "password": "kao2542",
+    "password": "bank1333",
     "database": "DD-Dinner-Dog",
     "host": "127.0.0.1",
     "dialect": "postgres",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 433d6a77..e0bf145f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -258,4 +258,42 @@ html, body, #root {
   height: 20px;
   
   
-}
\ No newline at end of file
+}
+
+.linktool .tooltip{
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  width: 120px;
+  margin-left: -93px; /* Use half of the width (120/2 = 60), to center the tooltip */
+  margin-top: 70px;
+  
+  
+}
+
+
+.linktool .tooltip::after  {
+  content: " ";
+  position: absolute;
+  bottom: 100%;  /* At the top of the tooltip */
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+/* Show the tooltip text when you mouse over the tooltip container */
+.linktool:hover .tooltip{
+visibility: visible;
+}
+.home .linktool {
+  background-color: red;
+  }
\ No newline at end of file
diff --git a/frontend/src/components/ChatRoom/Home.js b/frontend/src/components/ChatRoom/Home.js
index 1af080e6..bb0ede6c 100644
--- a/frontend/src/components/ChatRoom/Home.js
+++ b/frontend/src/components/ChatRoom/Home.js
@@ -31,7 +31,7 @@ const User = (props) => {
       </div>
       <div style={{ display: 'flex', flex: 1, justifyContent: 'space-between', margin: '0 10px' }}>
         <span style={{ fontWeight: 500 }}>{user.name}</span>
-
+        
       </div>
     </div>
   );
diff --git a/frontend/src/components/core/header/Header.css b/frontend/src/components/core/header/Header.css
index a623f9f2..f51a49fa 100644
--- a/frontend/src/components/core/header/Header.css
+++ b/frontend/src/components/core/header/Header.css
@@ -16,3 +16,6 @@
   color:#696969;
 }
 
+.ico:after {
+  background-color: red !important;
+}
\ No newline at end of file
diff --git a/frontend/src/components/core/header/Header.js b/frontend/src/components/core/header/Header.js
index fa99f7eb..d3bff5e9 100644
--- a/frontend/src/components/core/header/Header.js
+++ b/frontend/src/components/core/header/Header.js
@@ -14,35 +14,41 @@ function Header({backButton}) {
     
     return (
         <div className = "container">
-            <Link to="/home">
+            <Link to="/home" className="linktool">
                 <IconButton>
                     <AiFillHome className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Home</span>
             </Link>
-            <Link to="/premium">
+            <Link onClick={()=>alert("Coming Soon")} className="linktool">
                 <IconButton>
                     <GiCutDiamond className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Premium</span>
             </Link>
-            <Link to="/chat">
+            <Link to="/chat" className="linktool">
                 <IconButton>
                     <AiOutlineWechat className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Chat</span>
             </Link>
-            <Link to="/profile">
+            <Link to="/profile" className="linktool">
                 <IconButton>
                     <MdPets className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Profile</span>
             </Link>
-            <Link to="/notification">
-                <IconButton>
+            <Link onClick={()=>alert("Coming Soon")} className="linktool">
+                <IconButton className="ico">
                     <IoNotifications className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Notification</span>
             </Link>
-            <Link to="/setting">
+            <Link to="/setting" className="linktool">
                 <IconButton>
                     <IoIosSettings className="iconContainer" />
                 </IconButton>
+                <span className="tooltip">Setting</span>
             </Link>
 
 
diff --git a/frontend/src/components/pages/home/Swap-page.js b/frontend/src/components/pages/home/Swap-page.js
index 0cde930d..59073127 100644
--- a/frontend/src/components/pages/home/Swap-page.js
+++ b/frontend/src/components/pages/home/Swap-page.js
@@ -23,19 +23,21 @@ const alreadyRemoved = []
 
 const Ppic = (props) => {
   let m = ((Math.random() > 0.5) ? 1 : -1) * Math.round(Math.random() * 15);
-  console.log(props.data)
+  
   const [prc, setPrc] = useState(null);
+  const [name, setName] = useState("");
 
   useEffect(() => {
     axios.post('/doginfo/getinfo', { id: props.data.id }).then(
       (res) => {
         setPrc((res !== undefined) ? res.data : '')
+        setName(res.data.name)
       })
   }, [])
 
  
-    return prc ? (<div style={{ backgroundImage: `url(${prc.profilePicture})`, transform: `rotate(${m}deg)` }}
-      className="card"><h3>name</h3></div>) : <div></div>
+    return prc ? (<div style={{ backgroundImage: `url(${prc.profilePicture})`, backgroundRepeat:"no-repeat",  backgroundSize:"cover", transform: `rotate(${m}deg)` }}
+      className="card"><h3>{name}</h3></div>)  : <div></div>
   
 }
 
@@ -49,7 +51,7 @@ const Swap = (props) => {
   const user = useSelector(state => state.user);
   let charactersState = user.users;
   const [dog, setCharacters] = useState(user.users)
-  console.log({dog})
+  
   let unsubscribe;
   const [lastDirection, setLastDirection] = useState()
   // const [name, setName] = useState("")
@@ -69,7 +71,7 @@ const Swap = (props) => {
   //   }
   // }, [])
   useEffect(() => {
-
+    
     unsubscribe = dispatch(getRealtimeUsers(auth.uid))
       .then(unsubscribe => {
         return unsubscribe;
@@ -147,7 +149,7 @@ const Swap = (props) => {
       </div>
       <div className="swipeButtons">
         <IconButton className="swipeButtons_repeat" onClick={() => refresh()} style={{ width: "50px", height: "50px" }}>
-          <Link to="/"><ReplayIcon fontSize="large" /></Link>
+          <Link id="rp" to="/"><ReplayIcon fontSize="large" /></Link>
 
         </IconButton>
         <IconButton className="swipeButtons_left" onClick={() => swipe('left')} style={{ width: "50px", height: "50px" }}>
diff --git a/frontend/src/components/private-routes/PrivateRoutes.js b/frontend/src/components/private-routes/PrivateRoutes.js
index 025619ee..afb4d3a7 100644
--- a/frontend/src/components/private-routes/PrivateRoutes.js
+++ b/frontend/src/components/private-routes/PrivateRoutes.js
@@ -21,8 +21,9 @@ function PrivateRoutes(props) {
                 >
                     <div>
                         {(() => {
+                            console.log(route.url.slice(1, route.url.length))
                             if (route.url !== "/login" && route.url !== "/register") {
-                                return <Header />
+                                return <Header className={route.url.slice(1, route.url.length)} />
                             }
                         })()}