From f786e307a4e9128227c9229054ebb6ecfbeb785a Mon Sep 17 00:00:00 2001
From: josetano2 <josejonathan.tano@gmail.com>
Date: Fri, 23 Aug 2024 14:05:35 +0700
Subject: [PATCH] final fix

---
 src/ss_frontend/src/components/Navbar.jsx     | 20 +++++++------------
 src/ss_frontend/src/components/User.jsx       |  3 ++-
 .../src/pages/ProfileDetailPage.jsx           | 16 +++++++++++++--
 src/ss_frontend/src/pages/UsersPage.jsx       |  1 -
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/ss_frontend/src/components/Navbar.jsx b/src/ss_frontend/src/components/Navbar.jsx
index 5d2284e..5316d58 100644
--- a/src/ss_frontend/src/components/Navbar.jsx
+++ b/src/ss_frontend/src/components/Navbar.jsx
@@ -77,19 +77,13 @@ const Navbar = () => {
           </Link>
         </div>
         <div className="dropdown dropdown-end">
-          <div
-            tabIndex={0}
-            role="button"
-            className="btn btn-ghost btn-circle avatar"
-          >
-            <div className="w-10 rounded-full flex justify-center items-center">
-              <Link
-                to={"/profile"}
-                className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
-              >
-                <AiOutlineUser alt="profile" className="text-4xl pl-1" />
-              </Link>
-            </div>
+          <div className="w-10 rounded-full flex justify-center items-center">
+            <Link
+              to={"/profile"}
+              className="flex flex-col justify-center items-center cursor-pointer hover:mb-2 hover:transition-all"
+            >
+              <AiOutlineUser className="text-4xl" />
+            </Link>
           </div>
         </div>
       </div>
diff --git a/src/ss_frontend/src/components/User.jsx b/src/ss_frontend/src/components/User.jsx
index 4d6c10c..eca84ab 100644
--- a/src/ss_frontend/src/components/User.jsx
+++ b/src/ss_frontend/src/components/User.jsx
@@ -1,10 +1,11 @@
 import React from "react";
+import profilePlaceholder from "../assets/profilePlaceholder.jpg";
 
 const User = ({ name, username, profileUrl, description }) => {
   return (
     <div className="bg-white shadow-md rounded-lg p-4 flex flex-col items-center">
       <img
-        src={profileUrl}
+        src={profileUrl === "" ? profilePlaceholder : profileUrl}
         alt={`${name}'s profile`}
         className="w-24 h-24 rounded-full object-cover mb-4"
       />
diff --git a/src/ss_frontend/src/pages/ProfileDetailPage.jsx b/src/ss_frontend/src/pages/ProfileDetailPage.jsx
index 00dc82b..e07fcd0 100644
--- a/src/ss_frontend/src/pages/ProfileDetailPage.jsx
+++ b/src/ss_frontend/src/pages/ProfileDetailPage.jsx
@@ -47,13 +47,25 @@ export default function ProfileDetailPage() {
             <AiOutlineUser className="text-6xl"></AiOutlineUser>
           )}
         </div>
-        <div className="mt-4 mb-4 pr-8 pl-8 flex flex-col items-center">
+        <div className="mt-4 mb-4 pr-8 pl-8 flex flex-col items-center gap-2">
           {/* {isAuthenticated} */}
           {isAuthenticated ? (
             <>
               <div className="font-semibold text-2xl">{name}</div>
               <p className="text-lg">{"@" + username}</p>
-              <button className="btn btn-error">Log out</button>
+              <div className="flex gap-5">
+                {data && data.ok && data.ok.username === "" && (
+                  <button
+                    className="btn btn-outline btn-info"
+                    onClick={() => {
+                      navigate(`/profile-form`);
+                    }}
+                  >
+                    Register
+                  </button>
+                )}
+                <button className="btn btn-outline btn-error">Log out</button>
+              </div>
             </>
           ) : (
             <Link
diff --git a/src/ss_frontend/src/pages/UsersPage.jsx b/src/ss_frontend/src/pages/UsersPage.jsx
index 51c0f44..82cd83a 100644
--- a/src/ss_frontend/src/pages/UsersPage.jsx
+++ b/src/ss_frontend/src/pages/UsersPage.jsx
@@ -18,7 +18,6 @@ export default function UsersPage() {
 
   async function fetchUsers() {
     const allUsers = await ss_backend.getAllUsers();
-    console.log(allUsers);
     if (Array.isArray(allUsers.ok) && allUsers.ok) {
       const listItems = allUsers.ok.map((user, idx) => (
         <User