Skip to content

Commit

Permalink
Fix overlap issue of search and logout #143
Browse files Browse the repository at this point in the history
  • Loading branch information
@oguzsenna
oguzsenna committed Dec 3, 2023
1 parent 3dcb877 commit 30119cc
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 76 deletions.
25 changes: 21 additions & 4 deletions backend/frontend/src/components/header/UserSearch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,30 @@ function UserSearch() {
autoComplete="true"
size="small"
variant="outlined"
style={{ backgroundColor: 'white', borderRadius: '4px', width: '15vw' }}
style={{ backgroundColor: 'white', borderRadius: '4px', width: '15vw',}}
/>
)}
/>
<IconButton onClick={handleSearch} size="small">
<SearchIcon style={{ color: 'white' }} />
</IconButton>
<div
onClick={handleSearch}
style={{
width: 70,
height: 40,
paddingLeft: 5,
paddingRight: 5,
background: '#7E49FF',
justifyContent: 'center',
alignItems: 'center',
gap: 6,
borderRadius : 5,
display: 'inline-flex',
cursor: 'pointer', // Add this to make it look clickable
}}
>
<div style={{ color: 'white', fontSize: 15, fontFamily: 'Inter', fontWeight: '400', lineHeight: 22, wordWrap: 'break-word' }}>
Search
</div>
</div>
</div>
);
}
Expand Down
17 changes: 17 additions & 0 deletions backend/frontend/src/components/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
}


Expand Down Expand Up @@ -112,3 +113,19 @@
background-position: center center;
background-attachment: fixed;
}

.nav-actions {
display: flex;
align-items: normal;
}



.user-search-container {
flex-grow: 1; /* Takes up available space on the left */
margin-left: auto
}

.logout-container {
margin-left: auto; /* Pushes LogoutButton to the right */
}
197 changes: 125 additions & 72 deletions backend/frontend/src/components/header/header.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,45 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
import './header.css';
import axios from 'axios';
import UserSearch from './UserSearch';
import Register from '../../pages/landing/Register';
import Login from '../../pages/landing/Login';
import CreateStory from '../../pages/story/CreateStory';
import StoryContainer from '../../pages/homepage/StoryContainer';
import StoryDetails from '../../pages/story/StoryDetails';
import LogoutButton from '../../pages/landing/Logout';
import UserProfile from '../../pages/profile/UserProfile';
import UserProfileOthers from '../../pages/profile/UserProfileOthers';
import React, { useState, useEffect } from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Navigate,
} from "react-router-dom";
import "./header.css";
import axios from "axios";
import UserSearch from "./UserSearch";
import Register from "../../pages/landing/Register";
import Login from "../../pages/landing/Login";
import CreateStory from "../../pages/story/CreateStory";
import StoryContainer from "../../pages/homepage/StoryContainer";
import StoryDetails from "../../pages/story/StoryDetails";
import LogoutButton from "../../pages/landing/Logout";
import UserProfile from "../../pages/profile/UserProfile";
import UserProfileOthers from "../../pages/profile/UserProfileOthers";
import { LoadScriptNext } from "@react-google-maps/api";
import SearchUserResults from '../../pages/search/SearchUserResults';
import StorySearch from '../../pages/search/StorySearch';
import mainPhoto from '../../assets/images/homePage4.png'
import ResetPasswordRequest from '../../pages/landing/ResetPasswordRequest';
import ResetPasswordMain from '../../pages/landing/ResetPasswordMain';
import LocationSearch from '../../pages/search/Timeline';
import ActivityStream from '../../pages/activity/ActivityStream';
import Recommendations from '../../pages/recom/Recommendations';

import SearchUserResults from "../../pages/search/SearchUserResults";
import StorySearch from "../../pages/search/StorySearch";
import mainPhoto from "../../assets/images/homePage4.png";
import ResetPasswordRequest from "../../pages/landing/ResetPasswordRequest";
import ResetPasswordMain from "../../pages/landing/ResetPasswordMain";
import LocationSearch from "../../pages/search/Timeline";
import ActivityStream from "../../pages/activity/ActivityStream";
import Recommendations from "../../pages/recom/Recommendations";

function Header() {
console.log('Rendering Header');
console.log("Rendering Header");

const [isLoggedIn, setIsLoggedIn] = useState(false);

//const isLoggedIn = withAuth();

const fetchUserDetails = async () => {
try {
const response = await axios.get(`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/user`, { withCredentials: true });
const response = await axios.get(
`http://${process.env.REACT_APP_BACKEND_HOST_NAME}:8000/user/user`,
{ withCredentials: true }
);
if (response && response.data) {
setIsLoggedIn(true);
} else {
Expand All @@ -53,70 +61,115 @@ function Header() {
<div className="navbar-nav">
{!isLoggedIn && (
<>
<Link to="/" className="nav-item nav-link">Home</Link>
<Link to="/register" className="nav-item nav-link">Register</Link>
<Link to="/login" className="nav-item nav-link">Login</Link>
<Link to="/" className="nav-item nav-link">
Home
</Link>
<Link to="/register" className="nav-item nav-link">
Register
</Link>
<Link to="/login" className="nav-item nav-link">
Login
</Link>
</>
)}
{isLoggedIn && (
<>
<Link to="/homepage" className="nav-item nav-link"><img
src={mainPhoto}
alt="Home Page"
style={{ width: '50px', height: '50px' }}
/></Link>
<Link to="/story_search" className="nav-item nav-link">Search Memories</Link>
<Link to="/create-story" className="nav-item nav-link">Create Memory</Link>
<Link to="/user-profile" className="nav-item nav-link">User Profile</Link>
<Link to="/activity-stream" className="nav-item nav-link">Activity Stream</Link>
<Link to="/recommendation" className="nav-item nav-link">Recommendations</Link>
<>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', marginLeft: '35vw', }}>

<UserSearch />
<LogoutButton />
</div>
<Link to="/homepage" className="nav-item nav-link">
<img
src={mainPhoto}
alt="Home Page"
style={{ width: "50px", height: "50px" }}
/>
</Link>
<Link to="/story_search" className="nav-item nav-link">
Search Memories
</Link>
<Link to="/create-story" className="nav-item nav-link">
Create Memory
</Link>
<Link to="/user-profile" className="nav-item nav-link">
User Profile
</Link>
<Link to="/activity-stream" className="nav-item nav-link">
Activity Stream
</Link>
<Link to="/recommendation" className="nav-item nav-link">
Recommendations
</Link>

<>
<div className="nav-actions">
<div className="user-search-container">
<UserSearch />
</div>
<div className="logout-container">
<LogoutButton />
</div>
</div>
</>
</>
)}
</div>
</nav>
<LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY} libraries={['places','drawing']}>
<LoadScriptNext
googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
libraries={["places", "drawing"]}
>
<Routes>
{!isLoggedIn && (
{!isLoggedIn && (
<>
<Route path="*" element={<Navigate to="/" />} />
<Route path="/" element={
<div className="home-container">
<img
src={mainPhoto}
alt="Memories"
style={{ width: '1000px', height: 'auto' }}
/>
</div>
} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login onLoginSuccess={() => setIsLoggedIn(true)} />} />
<Route path="/resetPassword" element={<ResetPasswordRequest />} />
<Route path="/resetPassword/:token/:uidb64" element={<ResetPasswordMain />} />
</>
<Route path="*" element={<Navigate to="/" />} />
<Route
path="/"
element={
<div className="home-container">
<img
src={mainPhoto}
alt="Memories"
style={{ width: "1000px", height: "auto" }}
/>
</div>
}
/>
<Route path="/register" element={<Register />} />
<Route
path="/login"
element={<Login onLoginSuccess={() => setIsLoggedIn(true)} />}
/>
<Route
path="/resetPassword"
element={<ResetPasswordRequest />}
/>
<Route
path="/resetPassword/:token/:uidb64"
element={<ResetPasswordMain />}
/>
</>
)}

{isLoggedIn && (
<>
<Route path="*" element={<Navigate to="/homepage" />} />
<Route path="/homepage" element={<StoryContainer />} />
<Route path="/create-story" element={<CreateStory />} />
<Route path="/story/:id" element={<StoryDetails />} />
<Route path="/user-profile" element={<UserProfile />} />
<Route path="/user-profile/:id" element={<UserProfileOthers />} />
<Route path="/SearchUserResults/:searchQuery" element={<SearchUserResults />} />
<Route path="/story_search" element={<StorySearch />} />
<Route path="/timeline/:locationJSON" element={<LocationSearch />} />
<Route path="/activity-stream" element={<ActivityStream />} />
<Route path="/recommendation" element={<Recommendations />} />
</>
<Route path="*" element={<Navigate to="/homepage" />} />
<Route path="/homepage" element={<StoryContainer />} />
<Route path="/create-story" element={<CreateStory />} />
<Route path="/story/:id" element={<StoryDetails />} />
<Route path="/user-profile" element={<UserProfile />} />
<Route
path="/user-profile/:id"
element={<UserProfileOthers />}
/>
<Route
path="/SearchUserResults/:searchQuery"
element={<SearchUserResults />}
/>
<Route path="/story_search" element={<StorySearch />} />
<Route
path="/timeline/:locationJSON"
element={<LocationSearch />}
/>
<Route path="/activity-stream" element={<ActivityStream />} />
<Route path="/recommendation" element={<Recommendations />} />
</>
)}
</Routes>
</LoadScriptNext>
Expand Down

0 comments on commit 30119cc

Please sign in to comment.