116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
import React, { HTMLProps, useEffect } from 'react';
|
|
import { Link, Route, Switch } from "react-router-dom"
|
|
import { processMiddlewares, route, routes } from "@/routing";
|
|
import { useSelector } from "react-redux";
|
|
import { AppState } from "@/state/reducer";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import { Student } from "@/data";
|
|
import '@/styles/overrides.scss'
|
|
import '@/styles/header.scss'
|
|
import '@/styles/footer.scss'
|
|
import classNames from "classnames";
|
|
import { SettingActions } from "@/state/actions/settings";
|
|
import { useDispatch, UserActions } from "@/state/actions";
|
|
import { getLocale, Locale } from "@/state/reducer/settings";
|
|
import i18n from "@/i18n";
|
|
import moment from "moment-timezone";
|
|
import { Container } from "@material-ui/core";
|
|
|
|
const UserMenu = (props: HTMLProps<HTMLUListElement>) => {
|
|
const student = useSelector<AppState, Student>(state => state.student as Student);
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
|
|
const handleUserLogout = () => {
|
|
dispatch({ type: UserActions.Logout })
|
|
}
|
|
|
|
return <ul { ...props }>
|
|
{
|
|
student ? <>
|
|
<Trans t={ t } i18nKey="logged-in-as">logged in as <strong>{ { name: `${ student.name } ${ student.surname }` } }</strong></Trans>
|
|
{ ' ' }
|
|
(<Link to={ '#' } onClick={ handleUserLogout }>{ t('logout') }</Link>)
|
|
</> : <>
|
|
<Link to={ route('user_login') }>{ t('login') }</Link>
|
|
</>
|
|
}
|
|
</ul>;
|
|
}
|
|
|
|
const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>) => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const handleLanguageChange = (language: Locale) => () => {
|
|
dispatch({ type: SettingActions.SetLocale, locale: language })
|
|
}
|
|
|
|
const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase();
|
|
|
|
return <ul className={ classNames(className, "language-switcher") } { ...props }>
|
|
{ ['pl', 'en'].map(language => <li key={ language }>
|
|
<Link to="#" onClick={ handleLanguageChange(language as Locale) }
|
|
className={ classNames("language-switcher__language", isActive(language) && "language-switcher__language--active") }>
|
|
{ language }
|
|
</Link>
|
|
</li>) }
|
|
</ul>
|
|
}
|
|
|
|
function App() {
|
|
const { t } = useTranslation();
|
|
const locale = useSelector<AppState, Locale>(state => getLocale(state.settings));
|
|
|
|
useEffect(() => {
|
|
i18n.changeLanguage(locale);
|
|
document.documentElement.lang = locale;
|
|
moment.locale(locale)
|
|
}, [ locale ])
|
|
|
|
return <>
|
|
<header>
|
|
<Container className="header">
|
|
<div id="logo" className="header__logo">
|
|
<Link to={ route('home') }>
|
|
<img src="img/pg-logotyp.svg"/>
|
|
</Link>
|
|
</div>
|
|
<div className="header__nav">
|
|
<nav className="header__top">
|
|
<ul className="header__menu">
|
|
</ul>
|
|
<UserMenu className="header__user"/>
|
|
<div className="header__divider"/>
|
|
<LanguageSwitcher className="header__language-switcher"/>
|
|
</nav>
|
|
<nav className="header__bottom">
|
|
<ul className="header__menu header__menu--main">
|
|
<li><Link to={ route("home") }>{ t("pages.my-internship.header") }</Link></li>
|
|
<li><Link to="/regulations">Regulamin</Link></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
<main id="content">
|
|
{ <Switch>
|
|
{ routes.map(({ name, content, middlewares = [], ...route }) => <Route { ...route } key={ name }>
|
|
{ processMiddlewares([ ...middlewares, content ]) }
|
|
</Route>) }
|
|
</Switch> }
|
|
</main>
|
|
<footer className="footer">
|
|
<Container style={{ display: 'flex', alignItems: "center" }}>
|
|
<ul className="footer__menu">
|
|
<li><Link to="/management">zarządzanie</Link></li>
|
|
</ul>
|
|
<div className="footer__copyright">{ t('copyright', { date: moment() }) }</div>
|
|
</Container>
|
|
</footer>
|
|
</>;
|
|
}
|
|
|
|
export default App;
|