Merge pull request #11 from FluxonApps/nn/new-header-and-search-page-…

…changes Nn/new header and search page changes
FluxonApps · Jun 6, 2024 · fb879aa · fb879aa
2 parents b7c5083 + d7a3dc2
commit fb879aa
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 51 deletions.
diff --git a/src/assets/search.png b/src/assets/search.png
diff --git a/src/assets/star.png b/src/assets/star.png
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -24,4 +24,11 @@
     margin-left: 20px;
     width: 100px;
     height: 30px;
-}
+}
+
+.image {
+  height: 50px;
+  margin: 10px;
+  border: 2.5px solid #444A6E;
+  border-radius: 100px;
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,14 +1,39 @@
 import logo from '../assets/BEHONEST02.png'; // Adjust the path as necessary
+
 import './Header.css';
+import { getAuth, signOut } from 'firebase/auth';
+import { doc, getDoc, updateDoc } from 'firebase/firestore';
+import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { useAuthState, useSignOut } from 'react-firebase-hooks/auth';
+import { useDocumentData } from 'react-firebase-hooks/firestore';
+
+import { db } from '../../firebase.config';
+import profileIcon from '../assets/defaultPhoto.png';
+
+const auth = getAuth();
 
 function Header() {
+  function handleClick() {
+    signOut(auth);
+  }
+
+  const [user, userLoading] = useAuthState(auth);
+
+  const currentUserRef = user && doc(db, `/users/${user.uid}`);
+
+  const [currentUser, currentUserLoading] = useDocumentData(currentUserRef);
+
   return (
     <header className="header">
-      <img src={logo} alt="Logo" className="logo" />
-      <button id="myButton" href="http://localhost:5174/profile" className='button'>
-        profile
-      </button>
-      {/* <img src={profileIcon} alt="Profile" className="profile-icon" /> */}
+      <a href="/main">
+        <img src={logo} alt="Logo" className="logo" />
+      </a>
+
+      {currentUser && (
+        <a href="/profile">
+          <img src={currentUser.profileImage || profileIcon} alt="Profile" className="image" />
+        </a>
+      )}
     </header>
   );
 }

diff --git a/src/components/ProfilePage.css b/src/components/ProfilePage.css
@@ -239,4 +239,8 @@ body, html, #root {
 .footer{
     margin-top: 50px;
     height: 80px;
-}
+}
+
+.button:hover {
+    background-color: hwb(45 50% 14% / 0.601);
+  }
diff --git a/src/components/Search.css b/src/components/Search.css
@@ -27,8 +27,10 @@ header {
   flex-direction: column;
   align-items: center; /* Center items horizontally */
   justify-content: center; /* Center items vertically */
-  height: 100vh; /* Full viewport height */
+  min-height: 500px;
+  height: 100%; /* Full viewport height */
   background-color: #2c2b4a;
+  padding: 20px;
 }
 
 /* Search input styling */
@@ -40,6 +42,7 @@ header {
   border-radius: 5px; /* Rounded corners */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
   background-color: #e7e3d4;
+  margin-top: 100px;
 }
 
 /* List item for each user */
@@ -82,3 +85,21 @@ header {
 .following:hover {
   background-color: #6c757d; /* Maintain gray color on hover */
 }
+
+
+.star {
+  height: 100px;
+  margin: 50px;
+  display: flex;
+  align-items: self-start;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.search {
+  height: 10px;
+}
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -1,11 +1,15 @@
 import './Search.css'; // Import and connect your CSS file for styling
 
-import React, { useState, useEffect } from 'react';
-import { useCollection } from 'react-firebase-hooks/firestore';
 import { collection, query, getDoc, doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+import React, { useState, useEffect } from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
+import { useCollection } from 'react-firebase-hooks/firestore';
+
 import { db, auth } from '../../firebase.config';
 import logo from '../assets/BEHONEST02.png'; // Ensure the correct path and file extension
+import search from '../assets/search.png';
+import star from '../assets/star.png';
+import Header from '../components/Header.tsx';
 
 const usersCollectionRef = collection(db, 'users');
 
@@ -30,6 +34,7 @@ function Search() {
           setCurrentUserData(userDocSnap.data());
         }
       };
+
       fetchCurrentUserData();
     }
   }, [user]);
@@ -42,11 +47,16 @@ function Search() {
   }, [currentUserData]);
 
   // Filter users based on search term, excluding current user
-  const filteredUsers = usersSnapshot && usersSnapshot.docs
-    .map(doc => ({ id: doc.id, ...doc.data() }))
-    .filter(u => 
-      u.username.toLowerCase().includes(searchTerm.toLowerCase()) && u.id !== user.uid && u.username !== (currentUserData && currentUserData.username)
-    );
+  const filteredUsers =
+    usersSnapshot &&
+    usersSnapshot.docs
+      .map((doc) => ({ id: doc.id, ...doc.data() }))
+      .filter(
+        (u) =>
+          u.username.toLowerCase().includes(searchTerm.toLowerCase()) &&
+          u.id !== user.uid &&
+          u.username !== (currentUserData && currentUserData.username),
+      );
 
   // Function to check if a user is followed
   const isUserFollowed = (userId) => {
@@ -57,12 +67,14 @@ function Search() {
   const handleButtonClick = async (targetUserId) => {
     if (!user) {
       console.error('User not logged in');
+
       return;
     }
 
     // Check if the target user is the current user
     if (targetUserId === user.uid) {
       console.error('Cannot follow yourself');
+
       return;
     }
 
@@ -73,21 +85,21 @@ function Search() {
       const currentUserDocRef = doc(db, 'users', userId);
       if (isUserFollowed(targetUserId)) {
         await updateDoc(userDocRef, {
-          followers: arrayRemove(userId)
+          followers: arrayRemove(userId),
         });
         await updateDoc(currentUserDocRef, {
-          following: arrayRemove(targetUserId)
+          following: arrayRemove(targetUserId),
         });
-        setFollowingUsers(prevState => prevState.filter(id => id !== targetUserId));
+        setFollowingUsers((prevState) => prevState.filter((id) => id !== targetUserId));
         console.log(`User ${userId} unfollowed user ${targetUserId}`);
       } else {
         await updateDoc(userDocRef, {
-          followers: arrayUnion(userId)
+          followers: arrayUnion(userId),
         });
         await updateDoc(currentUserDocRef, {
-          following: arrayUnion(targetUserId)
+          following: arrayUnion(targetUserId),
         });
-        setFollowingUsers(prevState => [...prevState, targetUserId]);
+        setFollowingUsers((prevState) => [...prevState, targetUserId]);
         console.log(`User ${userId} followed user ${targetUserId}`);
       }
     } catch (error) {
@@ -102,38 +114,48 @@ function Search() {
   };
 
   return (
-      <div className="search-container">
-        <input
-          type="text"
-          className="search-input"
-          placeholder="Search users..."
-          value={searchTerm}
-          onChange={handleInputChange}
-        />
-        {displayUsers && ( // Display users only if displayUsers is true
-          <ul>
-            {usersLoading && <li>Loading...</li>}
-            {usersError && <li>Error loading users: {usersError.message}</li>}
-            {filteredUsers && filteredUsers.length > 0 ? (
-              filteredUsers.map((u) => (
-                <li key={u.id} className="user-item">
-                  <span>{u.username}</span>
-                  <div
-                    className={`button-container ${isUserFollowed(u.id) ? 'following' : ''}`}
-                    onClick={() => handleButtonClick(u.id)}
-                  >
-                    {isUserFollowed(u.id) ? 'Following' : 'Follow'}
-                  </div>
-                </li>
-              ))
-            ) : (
-              !usersLoading && <li>No users found</li>
-            )}
-          </ul>
-        )}
+    <div>
+      <Header />
+      <div>
+        <div className="search-container">
+          <input
+            type="text"
+            className="search-input"
+            placeholder="Search users..."
+            value={searchTerm}
+            onChange={handleInputChange}
+            style={{ backgroundImage: `url(${search})`, backgroundSize: '30px 30px', backgroundPosition: '10px', backgroundRepeat: 'no-repeat', paddingLeft: '50px'}}
+          />
+
+
+          {displayUsers && ( // Display users only if displayUsers is true
+            <ul>
+              {usersLoading && <li>Loading...</li>}
+              {usersError && <li>Error loading users: {usersError.message}</li>}
+              {filteredUsers && filteredUsers.length > 0
+                ? filteredUsers.map((u) => (
+                    <li key={u.id} className="user-item">
+                      <span>{u.username}</span>
+                      <div
+                        className={`button-container ${isUserFollowed(u.id) ? 'following' : ''}`}
+                        onClick={() => handleButtonClick(u.id)}
+                      >
+                        {isUserFollowed(u.id) ? 'Following' : 'Follow'}
+                      </div>
+                    </li>
+                  ))
+                : !usersLoading && <li>No users found</li>}
+            </ul>
+          )}
+          <div className="row">
+            <img src={star} alt="Star" className="star" />
+            <img src={star} alt="Star" className="star" />
+            <img src={star} alt="Star" className="star" />
+          </div>
+        </div>
       </div>
+    </div>
   );
 }
 
 export default Search;
-