blob: 3162c9ea2df7a0fe2aaf12feed7ce51a37932fe4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
import { memo, useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import Icon from './Icon';
import { UserLink } from './UserInfo';
import SearchBox from './SearchBox';
function Header({ visitor, className }) {
const navigate = useNavigate();
/**
* @param {string} searchString
*/
let searchAll = useCallback((searchString) => {
let location = {};
location.pathname = '/discover';
location.search = `?search=${searchString}`;
navigate(location);
}, [navigate]);
return (
<div id="header" className={className}>
<div id="header_wrapper">
{
visitor.uid < 0 ?
<>
<div id="logo"><a href="/" /></div>
<nav id="global">
<a href="/">Loading...</a>
</nav>
</>
: visitor.uid > 0 ?
<UserLink user={visitor} />
: <div id="logo">
<Link to="/">Juick</Link>
</div>
}
{
visitor.uid >= 0 &&
<>
<div id="search" className="desktop">
<SearchBox onSearch={searchAll} />
</div>
<nav id="global">
{visitor.uid > 0 ?
<Link to={{ pathname: '/' }}>
<Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
{
visitor.unreadCount &&
<span className="badge">{visitor.unreadCount}</span>
}
</Link>
:
<Link to='/?media=1' rel="nofollow">
<Icon name="ei-camera" size="s" />
<span className="desktop">Photos</span>
</Link>
}
<Link to={{ pathname: '/discover' }} rel="nofollow">
<Icon name="ei-search" size="s" />
<span className="desktop">Discover</span>
</Link>
{visitor.uid > 0 ?
<Link to={{ pathname: '/post' }}>
<Icon name="ei-pencil" size="s" />
<span className="desktop">Post</span>
</Link>
:
<Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
<Icon name="ei-user" size="s" />
<span className="desktop">Login</span>
</Link>
}
</nav>
</>
}
</div>
</div>
);
}
export default memo(Header);
|
