aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Header.js
blob: db8959ea89b7cce5be7feeed05a8014f29d4d191 (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
82
83
import { memo, useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';

import Icon from './Icon';
import { UserLink } from './UserInfo';
import SearchBox from './SearchBox';
import { useVisitor } from './VisitorContext';

function Header() {
    const [visitor] = useVisitor();
    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">
            <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);