Skip to content

Commit

Permalink
Refactor header to function-component
Browse files Browse the repository at this point in the history
  • Loading branch information
@eikhr
eikhr committed May 16, 2023
1 parent 226b1d9 commit 0398643
Showing 1 changed file with 136 additions and 164 deletions.
300 changes: 136 additions & 164 deletions app/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import cx from 'classnames';
import { Component } from 'react';
import { useEffect, useState } from 'react';
import { Modal } from 'react-overlays';
import { Link, NavLink, withRouter } from 'react-router-dom';
import { Link, NavLink, useHistory } from 'react-router-dom';
import logoLightMode from 'app/assets/logo-dark.png';
import logoDarkMode from 'app/assets/logo.png';
import AuthSection from 'app/components/AuthSection/AuthSection';
import { Flex } from 'app/components/Layout';
import LoadingIndicator from 'app/components/LoadingIndicator';
import {
LoginForm,
RegisterForm,
ForgotPasswordForm,
} from 'app/components/LoginForm';
import type { UserEntity } from 'app/reducers/users';
import type { ID } from 'app/store/models';
import utilStyles from 'app/styles/utilities.css';
import { applySelectedTheme, getOSTheme, getTheme } from 'app/utils/themeUtils';
import Button from '../Button';
Expand All @@ -24,7 +19,6 @@ import Search from '../Search';
import FancyNodesCanvas from './FancyNodesCanvas';
import styles from './Header.css';
import ToggleTheme from './ToggleTheme';
import type { MouseEventHandler } from 'react';

type Props = {
searchOpen: boolean;
Expand All @@ -43,11 +37,6 @@ type Props = {
updateUserTheme: (username: string, theme: string) => Promise<void>;
};

type State = {
accountOpen: boolean;
shake: boolean;
};

type AccountDropdownItemsProps = {
logout: () => void;
onClose: () => void;
Expand Down Expand Up @@ -118,180 +107,163 @@ function AccountDropdownItems({
);
}

class Header extends Component<Props, State> {
state = {
accountOpen: false,
shake: false,
};
const MeetingButton = ({ upcomingMeeting }: { upcomingMeeting: ID }) => {
const history = useHistory();
return (
<button
type="button"
onClick={() => {
history.push(`/meetings/${upcomingMeeting}`);
}}
>
<Icon name="people" />
</button>
);
};

render() {
const { loggedIn, currentUser, loading } = this.props;
const Header = ({ loggedIn, currentUser, loading, ...props }: Props) => {
const [accountOpen, setAccountOpen] = useState(false);

useEffect(() => {
if (
__CLIENT__ &&
loggedIn &&
currentUser &&
currentUser.selectedTheme &&
(currentUser.selectedTheme === 'auto'
(currentUser?.selectedTheme === 'auto'
? getTheme() !== getOSTheme()
: getTheme() !== currentUser.selectedTheme)
) {
applySelectedTheme(currentUser.selectedTheme || 'light');
}
}, [loggedIn, currentUser]);

const MeetingButton = withRouter(({ history }) => (
<button
type="button"
onClick={() => {
history.push(`/meetings/${this.props.upcomingMeeting}`);
}}
>
<Icon name="people" />
</button>
));
return (
<header>
<FancyNodesCanvas height={300} />
<div className={styles.content}>
<Link to="/">
<LoadingIndicator loading={loading}>
<div className={styles.logo}>
<Image
src={logoLightMode}
className={styles.logoLightMode}
alt=""
/>
<Image
src={logoDarkMode}
className={styles.logoDarkMode}
alt=""
/>
</div>
</LoadingIndicator>
</Link>
return (
<header>
<FancyNodesCanvas height={300} />
<div className={styles.content}>
<Link to="/">
<LoadingIndicator loading={loading}>
<div className={styles.logo}>
<Image
src={logoLightMode}
className={styles.logoLightMode}
alt=""
/>
<Image
src={logoDarkMode}
className={styles.logoDarkMode}
alt=""
/>
</div>
</LoadingIndicator>
</Link>

<div className={styles.menu}>
<div className={styles.navigation}>
<NavLink to="/events" activeClassName={styles.activeItem}>
Arrangementer
</NavLink>
{!loggedIn ? (
<NavLink
to="/pages/bedrifter/for-bedrifter"
activeClassName={styles.activeItem}
>
For bedrifter
</NavLink>
) : (
<NavLink to="/joblistings" activeClassName={styles.activeItem}>
Karriere
</NavLink>
)}
<div className={styles.menu}>
<div className={styles.navigation}>
<NavLink to="/events" activeClassName={styles.activeItem}>
Arrangementer
</NavLink>
{!loggedIn ? (
<NavLink
to="/pages/info-om-abakus"
to="/pages/bedrifter/for-bedrifter"
activeClassName={styles.activeItem}
>
Om Abakus
For bedrifter
</NavLink>
</div>
) : (
<NavLink to="/joblistings" activeClassName={styles.activeItem}>
Karriere
</NavLink>
)}
<NavLink
to="/pages/info-om-abakus"
activeClassName={styles.activeItem}
>
Om Abakus
</NavLink>
</div>

<div className={styles.buttonGroup}>
<ToggleTheme
loggedIn={loggedIn}
updateUserTheme={this.props.updateUserTheme}
username={currentUser?.username}
className={cx(loggedIn && utilStyles.hiddenOnMobile)}
/>
<div className={styles.buttonGroup}>
<ToggleTheme
loggedIn={loggedIn}
updateUserTheme={props.updateUserTheme}
username={currentUser?.username}
className={cx(loggedIn && utilStyles.hiddenOnMobile)}
/>

{loggedIn && (
<NotificationsDropdown
notificationsData={this.props.notificationsData}
fetchNotifications={this.props.fetchNotifications}
notifications={this.props.notifications}
markAllNotifications={this.props.markAllNotifications}
fetchNotificationData={this.props.fetchNotificationData}
/>
)}
{loggedIn && (
<NotificationsDropdown
notificationsData={props.notificationsData}
fetchNotifications={props.fetchNotifications}
notifications={props.notifications}
markAllNotifications={props.markAllNotifications}
fetchNotificationData={props.fetchNotificationData}
/>
)}

{loggedIn && this.props.upcomingMeeting && <MeetingButton />}
{loggedIn && props.upcomingMeeting && (
<MeetingButton upcomingMeeting={props.upcomingMeeting} />
)}

{loggedIn && (
<Dropdown
show={this.state.accountOpen}
toggle={() =>
this.setState((state) => ({
accountOpen: !state.accountOpen,
}))
}
triggerComponent={
<ProfilePicture
size={24}
alt="user"
user={currentUser}
style={{
verticalAlign: 'middle',
}}
/>
}
>
<AccountDropdownItems
onClose={() =>
this.setState({
accountOpen: false,
})
}
username={currentUser.username}
logout={this.props.logout}
updateUserTheme={this.props.updateUserTheme}
{loggedIn && (
<Dropdown
show={accountOpen}
toggle={() => setAccountOpen(!accountOpen)}
triggerComponent={
<ProfilePicture
size={24}
alt="user"
user={currentUser}
style={{
verticalAlign: 'middle',
}}
/>
</Dropdown>
)}
}
>
<AccountDropdownItems
onClose={() => setAccountOpen(false)}
username={currentUser.username}
logout={props.logout}
updateUserTheme={props.updateUserTheme}
/>
</Dropdown>
)}

{!loggedIn && (
<Dropdown
show={this.state.accountOpen}
toggle={() =>
this.setState((state) => ({
accountOpen: !state.accountOpen,
shake: false,
}))
}
closeOnContentClick
contentClassName={cx(
this.state.shake ? 'animated shake' : '',
styles.dropdown
)}
triggerComponent={<Icon name="person-circle-outline" />}
>
<AuthSection />
</Dropdown>
)}
{!loggedIn && (
<Dropdown
show={accountOpen}
toggle={() => setAccountOpen(!accountOpen)}
closeOnContentClick
contentClassName={styles.dropdown}
triggerComponent={<Icon name="person-circle-outline" />}
>
<AuthSection />
</Dropdown>
)}

<button onClick={this.props.toggleSearch}>
<Icon name="menu" className={styles.searchIcon} />
</button>
</div>
<button onClick={props.toggleSearch}>
<Icon name="menu" className={styles.searchIcon} />
</button>
</div>

<Modal
show={this.props.searchOpen}
onHide={this.props.toggleSearch}
renderBackdrop={(props) => (
<div {...props} className={styles.backdrop} />
)}
className={styles.modal}
>
<Search
loggedIn={loggedIn}
onCloseSearch={this.props.toggleSearch}
updateUserTheme={this.props.updateUserTheme}
username={this.props.currentUser?.username}
/>
</Modal>
</div>
</header>
);
}
}

<Modal
show={props.searchOpen}
onHide={props.toggleSearch}
renderBackdrop={(props) => (
<div {...props} className={styles.backdrop} />
)}
className={styles.modal}
>
<Search
loggedIn={loggedIn}
onCloseSearch={props.toggleSearch}
updateUserTheme={props.updateUserTheme}
username={currentUser?.username}
/>
</Modal>
</div>
</header>
);
};

export default Header;

0 comments on commit 0398643

Please sign in to comment.