Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-28 17:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

useRouteActive dropped

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-18 16:59:24 +02:00
parent e1905f928d
commit 7dbfce62b6
9 changed files with 35 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/common/MainNavBar/MainNavBar.js
View file

@ -3,22 +3,18 @@ const PropTypes = require('prop-types');
const NavBar = require('stremio/common/NavBar');
const TABS = [
{ id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
{ route: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
];
const MainNavBar = React.memo(({ className, selected }) => {
const MainNavBar = React.memo(({ className, route }) => {
return (
<NavBar
className={className}
route={route}
backButton={false}
tabs={TABS.map(({ id, label, icon, href }) => ({
label,
icon,
href,
selected: id === selected
}))}
tabs={TABS}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
@ -32,7 +28,7 @@ MainNavBar.displayName = 'MainNavBar';
MainNavBar.propTypes = {
className: PropTypes.string,
selected: PropTypes.string
route: PropTypes.string
};
module.exports = MainNavBar;

21
src/common/NavBar/NavBar.js
View file

@ -9,7 +9,7 @@ const NotificationsMenu = require('./NotificationsMenu');
const NavMenu = require('./NavMenu');
const styles = require('./styles');
const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
const NavBar = React.memo(({ className, route, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@ -28,15 +28,15 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
}
{
Array.isArray(tabs) && tabs.length > 0 ?
tabs.slice(0, 4).map(({ href, icon, label, selected, onClick }, index) => (
tabs.slice(0, 4).map((tab, index) => (
<NavTabButton
key={index}
className={styles['nav-tab-button']}
href={href}
icon={icon}
label={label}
selected={selected}
onClick={onClick}
selected={tab.route === route}
href={tab.href}
icon={tab.icon}
label={tab.label}
onClick={tab.onClick}
/>
))
:
@ -46,7 +46,7 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo
searchBar ?
<React.Fragment>
<div className={styles['spacing']} />
<SearchBar className={styles['search-bar']} />
<SearchBar className={styles['search-bar']} active={route === 'search'} />
<div className={styles['spacing']} />
</React.Fragment>
:
@ -84,12 +84,13 @@ NavBar.displayName = 'NavBar';
NavBar.propTypes = {
className: PropTypes.string,
route: PropTypes.string,
backButton: PropTypes.bool,
tabs: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string,
route: PropTypes.string,
label: PropTypes.string,
icon: PropTypes.string,
href: PropTypes.string,
selected: PropTypes.bool,
onClick: PropTypes.func
})),
title: PropTypes.string,

28
src/common/NavBar/SearchBar/SearchBar.js
View file

@ -6,44 +6,41 @@ const Icon = require('stremio-icons/dom');
const { useRouteFocused } = require('stremio-router');
const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput');
const routesRegexp = require('stremio/common/routesRegexp');
const useLocationHash = require('stremio/common/useLocationHash');
const useRouteActive = require('stremio/common/useRouteActive');
const styles = require('./styles');
const SearchBar = ({ className }) => {
const SearchBar = ({ className, active }) => {
const locationHash = useLocationHash();
const routeFocused = useRouteFocused();
const routeActive = useRouteActive(routesRegexp.search.regexp);
const searchInputRef = React.useRef(null);
const query = React.useMemo(() => {
if (routeActive) {
if (active) {
const { search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
const queryParams = new URLSearchParams(locationSearch);
return queryParams.has('search') ? queryParams.get('search') : '';
}
return '';
}, [routeActive, locationHash]);
}, [active, locationHash]);
const searchBarOnClick = React.useCallback(() => {
if (!routeActive) {
if (!active) {
window.location = '#/search';
}
}, [routeActive]);
}, [active]);
const queryInputOnSubmit = React.useCallback(() => {
if (routeActive) {
if (active) {
window.location.replace(`#/search?search=${searchInputRef.current.value}`);
}
}, [routeActive]);
}, [active]);
React.useEffect(() => {
if (routeActive && routeFocused) {
if (active && routeFocused) {
searchInputRef.current.focus();
}
}, [routeActive, routeFocused, query]);
}, [active, routeFocused, query]);
return (
<label className={classnames(className, styles['search-bar-container'], { 'active': routeActive })} onClick={searchBarOnClick}>
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
{
routeActive ?
active ?
<TextInput
key={query}
ref={searchInputRef}
@ -67,7 +64,8 @@ const SearchBar = ({ className }) => {
};
SearchBar.propTypes = {
className: PropTypes.string
className: PropTypes.string,
active: PropTypes.bool
};
module.exports = SearchBar;

2
src/common/index.js
View file

@ -25,7 +25,6 @@ const useInLibrary = require('./useInLibrary');
const useLiveRef = require('./useLiveRef');
const useLocationHash = require('./useLocationHash');
const useModelState = require('./useModelState');
const useRouteActive = require('./useRouteActive');
const useSpreadState = require('./useSpreadState');
const useUser = require('./useUser');
@ -57,7 +56,6 @@ module.exports = {
useLiveRef,
useLocationHash,
useModelState,
useRouteActive,
useSpreadState,
useUser
};

14
src/common/useRouteActive.js
View file

@ -1,14 +0,0 @@
const React = require('react');
const UrlUtils = require('url');
const useLocationHash = require('stremio/common/useLocationHash');
const useRouteActive = (routeRegexp) => {
const locationHash = useLocationHash();
const active = React.useMemo(() => {
const { pathname } = UrlUtils.parse(locationHash.slice(1));
return typeof pathname === 'string' && routeRegexp instanceof RegExp && !!pathname.match(routeRegexp);
}, [locationHash, routeRegexp]);
return active;
};
module.exports = useRouteActive;

2
src/routes/Board/Board.js
View file

@ -11,7 +11,7 @@ const Board = () => {
const [options, optionOnSelect] = useItemOptions();
return (
<div className={styles['board-container']}>
<MainNavBar className={styles['nav-bar']} selected={'board'} />
<MainNavBar className={styles['nav-bar']} route={'board'} />
<div className={styles['board-content']}>
{
continueWatching.lib_items.length > 0 ?

2
src/routes/Discover/Discover.js
View file

@ -45,7 +45,7 @@ const Discover = ({ urlParams, queryParams }) => {
}, [urlParams, queryParams]);
return (
<div className={styles['discover-container']}>
<MainNavBar className={styles['nav-bar']} selected={'discover'} />
<MainNavBar className={styles['nav-bar']} route={'discover'} />
<div className={styles['discover-content']}>
<div className={styles['selectable-inputs-container']}>
{selectInputs.map((selectInput, index) => (

2
src/routes/Library/Library.js
View file

@ -13,7 +13,7 @@ const Library = ({ urlParams }) => {
const [options, optionOnSelect] = useItemOptions();
return (
<div className={styles['library-container']}>
<MainNavBar className={styles['nav-bar']} selected={'library'} />
<MainNavBar className={styles['nav-bar']} route={'library'} />
<div className={styles['library-content']}>
{
library.library_state.type === 'Ready' && library.library_state.content.uid !== null && library.type_names.length > 0 ?

2
src/routes/Search/Search.js
View file

@ -9,7 +9,7 @@ const Search = ({ queryParams }) => {
const search = useSearch(queryParams);
return (
<div className={styles['search-container']}>
<MainNavBar className={styles['nav-bar']} />
<MainNavBar className={styles['nav-bar']} route={'search'} />
<div className={styles['search-content']}>
{
search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?