receptor/src/ui/navigation.js

63 lines
2.0 KiB
JavaScript
Raw Normal View History

2017-08-22 21:49:48 +02:00
import React from 'react';
2017-12-30 18:23:50 +01:00
import { connect } from 'react-redux';
2017-08-25 02:01:15 +02:00
import { Link, NavLink } from 'react-router-dom';
2018-02-11 03:18:29 +01:00
import FontAwesome from 'react-fontawesome';
2017-12-30 18:23:50 +01:00
import query from 'query-string';
2018-02-11 03:18:29 +01:00
import { search_criteria, search_qs, update_filter } from '../search';
2017-12-30 18:23:50 +01:00
function render(props) {
const { dispatch, router } = props;
const qs = query.parse(router.location.search);
2017-12-30 18:41:44 +01:00
const update = text => update_filter(
text || "", props.filter_subscribe, router.location, dispatch);
2017-12-30 18:23:50 +01:00
const navto = where => e => {
e.preventDefault();
2017-12-30 18:41:44 +01:00
update(where);
2017-12-30 18:23:50 +01:00
};
2017-12-30 18:41:44 +01:00
const searchLink = (target, text) => <li className="nav-item">
<a
className={`nav-link ${qs.s === target && "active"}`}
href={search_qs(target)}
onClick={navto(target)}
>{text}</a>
</li>;
2017-08-22 21:49:48 +02:00
return <nav className="navbar navbar-light navbar-toggleable-xl">
2017-08-25 02:01:15 +02:00
<Link to="/" className="navbar-brand">receptor</Link>
2017-08-22 21:49:48 +02:00
<div className="navbar-collapse collapse">
<ul className="navbar-nav mr-auto">
2017-08-23 14:42:00 +02:00
<li className="nav-item">
2017-08-24 14:30:22 +02:00
<NavLink
to="/add-torrent"
2017-08-24 15:50:14 +02:00
className="nav-link btn-primary"
2017-08-24 14:30:22 +02:00
activeClassName="nav-link active"
>add torrent</NavLink>
2017-08-23 14:42:00 +02:00
</li>
<li className="nav-item" style={{minWidth: "1rem"}}>
</li>
2017-12-30 18:41:44 +01:00
{searchLink(undefined, "all")}
{searchLink("status:leeching", "leeching")}
{searchLink("status:seeding", "seeding")}
2017-08-23 14:42:00 +02:00
<form className="form-inline">
<input
className="form-control mr-sm-2"
type="text"
placeholder="Search"
2017-12-30 18:23:50 +01:00
aria-label="Search"
value={qs.s}
2017-12-30 18:41:44 +01:00
onChange={e => update(e.target.value)} />
2017-08-23 14:42:00 +02:00
</form>
2018-02-26 19:51:02 +01:00
<span className="navbar-text">
2018-02-11 03:18:29 +01:00
<Link to="/search-help">
<FontAwesome name="question-circle" />
</Link>
</span>
2017-08-22 21:49:48 +02:00
</ul>
</div>
</nav>;
}
2017-12-30 18:23:50 +01:00
export default connect(state => ({
filter_subscribe: state.filter_subscribe,
router: state.router,
}))(render);