Fix query page header names

This commit is contained in:
Aurora Lahtela 2022-11-22 10:27:42 +02:00
parent 8a0285ad86
commit 19ef3b56e0
4 changed files with 16 additions and 23 deletions

View File

@ -40,11 +40,7 @@ const Header = ({page, tab, hideUpdater}) => {
const {getPlayerHeadImageUrl} = useMetadata();
const headImageUrl = user ? getPlayerHeadImageUrl(user.playerName, user.linkedToUuid) : undefined
// <!-- <li><a className="dropdown-item" href="#"><i className="fas fa-users-cog"></i> Web users</a></li>-->
// <!-- <li><a className="dropdown-item" href="#"><i className="fas fa-code"></i> API access</a></li>-->
// <!-- <li>-->
// <!-- <hr className="dropdown-divider">-->
// <!-- </li>-->
// TODO Remove .replace('<', '') after locale replacement
return (
<nav className="nav mt-3 align-items-center justify-content-between container-fluid">
<div className="d-sm-flex">
@ -53,7 +49,7 @@ const Header = ({page, tab, hideUpdater}) => {
<Fa icon={faBars} className={"sidebar-toggler"}/>
</button>
{page}
{tab ? <>{' '}&middot; {t(tab)}</> : ''}</h1>
{tab ? <>{' '}&middot; {t(tab).replace('<', '')}</> : ''}</h1>
</div>
{!hideUpdater && <>

View File

@ -44,14 +44,16 @@ const InnerItem = ({href, icon, name, nameShort, color}) => {
</NavLink>
}
const Item = ({href, icon, name, nameShort, color, inner}) => {
const Item = ({item, inner}) => {
const {setCurrentTab} = useNavigation();
const {pathname} = useLocation();
const {t} = useTranslation();
const {href, name, nameShort, color, icon, external} = item;
useEffect(() => {
if ('/' !== href && pathname.includes(href)) setCurrentTab(name);
}, [pathname, href, setCurrentTab, name])
if (!external && '/' !== href && pathname.includes(href)) setCurrentTab(name);
}, [pathname, href, setCurrentTab, name, external])
if (inner) {
return (<InnerItem href={href} icon={icon} name={t(name)} nameShort={t(nameShort)} color={color}/>)
@ -167,11 +169,7 @@ const SidebarCollapse = ({item, open, setOpen}) => {
<Item key={i}
inner
active={false}
href={content.href}
icon={content.icon}
name={content.name}
nameShort={content.nameShort}
color={content.color}
item={content}
/>)}
</div>
</div>
@ -191,11 +189,7 @@ const renderItem = (item, i, openCollapse, setOpenCollapse, t) => {
if (item.href !== undefined) {
return <Item key={i}
active={false}
href={item.href}
icon={item.icon}
name={item.name}
color={item.color}
nameShort={item.nameShort}
item={item}
/>
}
@ -233,7 +227,7 @@ const Sidebar = ({items, showBackButton}) => {
<Logo/>
<Divider/>
{showBackButton && <>
<Item active={false} href="/" icon={faArrowLeft} name={t('html.label.toMainPage')}/>
<Item active={false} item={{href: "/", icon: faArrowLeft, name: t('html.label.toMainPage')}}/>
<Divider showMargin={items.length && !items[0].contents && items[0].href === undefined}/>
</>}
{items.length ? items.map((item, i) => renderItem(item, i, openCollapse, toggleCollapse, t)) : ''}

View File

@ -23,12 +23,12 @@ const QueryPage = () => {
useEffect(() => {
const items = [
{name: 'html.label.links'},
{name: 'html.query.label.makeAnother', icon: faUndo, href: "/query"},
{name: 'html.query.label.makeAnother', icon: faUndo, href: "/query", external: true},
]
setSidebarItems(items);
window.document.title = `Plan | Query`;
setCurrentTab('html.label.query')
setCurrentTab('html.query.title.text');
}, [t, i18n, setCurrentTab, setSidebarItems])
const showBackButton = true;

View File

@ -11,11 +11,13 @@ import {CurrentPlayerbaseCardWithData} from "../../components/cards/server/graph
import {useTranslation} from "react-i18next";
import GeolocationsCard from "../../components/cards/common/GeolocationsCard";
import SessionsWithinViewCard from "../../components/cards/query/SessionsWithinViewCard";
import {useNavigation} from "../../hooks/navigationHook";
const QueryResultView = () => {
const {t} = useTranslation();
const navigate = useNavigate();
const {result, setResult} = useQueryResultContext();
const {setCurrentTab} = useNavigation()
const getResult = useCallback(async () => {
const urlParams = new URLSearchParams(window.location.search);
@ -31,6 +33,7 @@ const QueryResultView = () => {
}, [])
useEffect(() => {
setCurrentTab('html.query.results.title')
if (!result.data) {
getResult().then(data => {
if (data.data) {
@ -40,7 +43,7 @@ const QueryResultView = () => {
}
});
}
}, [result, navigate, getResult, setResult])
}, [result, navigate, getResult, setResult, setCurrentTab])
if (!result.data) {
return <></>