Files
kashilo/js/components/app-shell.js

57 lines
1.5 KiB
JavaScript

import { router } from '../router.js';
import { i18n } from '../i18n.js';
import { auth } from '../services/auth.js';
import './app-header.js';
import './app-footer.js';
import './auth-modal.js';
import './pages/page-home.js';
import './pages/page-search.js';
import './pages/page-listing.js';
import './pages/page-create.js';
import './pages/page-not-found.js';
class AppShell extends HTMLElement {
constructor() {
super();
this.main = null;
}
connectedCallback() {
this.render();
this.setupRouter();
i18n.subscribe(() => {
this.querySelector('app-header').updateTranslations();
this.querySelector('app-footer').updateTranslations();
});
}
render() {
this.innerHTML = /* html */`
<app-header></app-header>
<main class="container" id="router-outlet"></main>
<app-footer></app-footer>
<auth-modal hidden></auth-modal>
`;
this.main = this.querySelector('#router-outlet');
// Try to restore session
auth.tryRestoreSession();
}
setupRouter() {
router.setOutlet(this.main);
router
.register('/', 'page-home')
.register('/search', 'page-search')
.register('/listing/:id', 'page-listing')
.register('/create', 'page-create');
router.handleRouteChange();
}
}
customElements.define('app-shell', AppShell);