From 932579ead3c15272cf5c9059332d31b2f01c74e7 Mon Sep 17 00:00:00 2001 From: Daoud Clarke Date: Sun, 5 Nov 2023 18:51:55 +0000 Subject: [PATCH] Remove more unused code --- .gitignore | 1 + front-end/src/components/login.js | 69 ------- .../src/components/organisms/search-bar.js | 184 ------------------ front-end/src/components/register.js | 84 -------- front-end/src/index.html | 6 +- front-end/src/index.js | 3 - front-end/vite.config.js | 3 +- 7 files changed, 6 insertions(+), 344 deletions(-) delete mode 100644 front-end/src/components/login.js delete mode 100644 front-end/src/components/organisms/search-bar.js delete mode 100644 front-end/src/components/register.js diff --git a/.gitignore b/.gitignore index 451cbea..ead122e 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ __pycache__/ build/ develop-eggs/ dist/ +front-end/dist/ downloads/ eggs/ .eggs/ diff --git a/front-end/src/components/login.js b/front-end/src/components/login.js deleted file mode 100644 index 9546695..0000000 --- a/front-end/src/components/login.js +++ /dev/null @@ -1,69 +0,0 @@ -import define from '../utils/define.js'; -import config from "../../config.js"; - -const template = () => /*html*/` -
-
Login
-
- -
- -
-
-
- -
- - -
-
-
- -
-
-`; - -export default define('login', class extends HTMLElement { - constructor() { - super(); - this.loginForm = null; - this.emailOrUsernameInput = null; - this.passwordInput = null; - this.__setup(); - this.__events(); - } - - __setup() { - this.innerHTML = template(); - this.loginForm = this.querySelector('form'); - this.emailOrUsernameInput = this.querySelector('#login-email-or-username'); - this.passwordInput = this.querySelector('#login-password'); - } - - __events() { - this.loginForm.addEventListener('submit', (e) => { - e.preventDefault(); - this.__handleLogin(e); - }); - } - - __handleLogin = async () => { - const response = await fetch(`${config.publicApiURL}user/login`, { - method: 'POST', - cache: 'no-cache', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - "username_or_email": this.emailOrUsernameInput.value, - "password": this.passwordInput.value, - }) - }); - if (response.status === 200) { - const loginData = await response.json(); - console.log("Login data", loginData); - document.cookie = `jwt=${loginData["jwt"]}; SameSite=Strict`; - console.log("Login success"); - } else { - console.log("Login error", response); - } - } -}); \ No newline at end of file diff --git a/front-end/src/components/organisms/search-bar.js b/front-end/src/components/organisms/search-bar.js deleted file mode 100644 index 5adf52b..0000000 --- a/front-end/src/components/organisms/search-bar.js +++ /dev/null @@ -1,184 +0,0 @@ -import define from '../../utils/define.js'; -import config from '../../../config.js'; -import { globalBus } from '../../utils/events.js'; -import debounce from '../../utils/debounce.js' - -const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches; - -const template = () => /*html*/` -
- - -
-`; - -export default define('search-bar', class extends HTMLElement { - constructor() { - super(); - this.searchInput = null; - this.searchForm = null; - this.abortController = new AbortController(); - this.__setup(); - } - - __setup() { - this.innerHTML = template(); - this.searchInput = this.querySelector('input'); - this.searchForm = this.querySelector('form'); - this.__events(); - } - - __dispatchSearch({ results = null, error = null }) { - const searchEvent = new CustomEvent('search', { - detail: { - results, - error, - }, - }); - globalBus.dispatch(searchEvent) - } - - /** - * Updates the overall layout of the page. - * - * `home` centers the search bar on the page. - * `compact` raises it to the top and makes room for displaying results. - * - * @param {'compact' | 'home'} mode - * @return {void} - */ - __setDisplayMode(mode) { - switch (mode) { - case 'compact': { - document.body.style.paddingTop = '25px'; - document.querySelector('.search-menu').classList.add('compact'); - break; - } - case 'home': { - document.body.style.paddingTop = '30vh'; - document.querySelector('.search-menu').classList.remove('compact'); - break; - } - } - } - - async __executeSearch() { - this.abortController.abort(); - this.abortController = new AbortController(); - // Get response from API - const response = await fetch(`${config.publicApiURL}search?s=${encodeURIComponent(this.searchInput.value)}`, { - signal: this.abortController.signal - }); - // Getting results from API - const search = await (response).json(); - return search; - } - - __handleSearch = async () => { - // Update page title - document.title = `MWMBL - ${this.searchInput.value || "Search"}`; - - // Update query params - const queryParams = new URLSearchParams(document.location.search); - // Sets query param if search value is not empty - if (this.searchInput.value) queryParams.set(config.searchQueryParam, this.searchInput.value); - else queryParams.delete(config.searchQueryParam); - // New URL with query params - const newURL = - document.location.protocol - + "//" - + document.location.host - + document.location.pathname - + (this.searchInput.value ? '?' : '') - + queryParams.toString(); - // Replace history state - window.history.replaceState({ path: newURL }, '', newURL); - - if (this.searchInput.value) { - this.__setDisplayMode('compact') - - try { - const search = await this.__executeSearch() - // This is a guess at an explanation - // Check the searcInput.value before setting the results to prevent - // race condition where the user has cleared the search input after - // submitting an original search but before the search results have - // come back from the API - this.__dispatchSearch({ results: this.searchInput.value ? search : null }); - } - catch(error) { - this.__dispatchSearch({ error }) - } - } - else { - this.__setDisplayMode('home') - this.__dispatchSearch({ results: null }); - } - } - - __events() { - /** - * Always add the submit event, it makes things feel faster if - * someone does not prefer reduced motion and reflexively hits - * return once they've finished typing. - */ - this.searchForm.addEventListener('submit', (e) => { - e.preventDefault(); - this.__handleSearch(e); - }); - - /** - * Only add the "real time" search behavior when the client does - * not prefer reduced motion; this prevents the page from changing - * while the user is still typing their query. - */ - if (!prefersReducedMotion) { - this.searchInput.addEventListener('input', debounce(this.__handleSearch, 500)) - } - - // Focus search bar when pressing `ctrl + k` or `/` - document.addEventListener('keydown', (e) => { - if ((e.key === 'k' && e.ctrlKey) || e.key === 'Escape') { - e.preventDefault(); - - // Remove the modal if it's visible - document.querySelector('.modal').style.display = 'none'; - - this.searchInput.focus(); - } - }); - - // Focus first result when pressing down arrow - this.addEventListener('keydown', (e) => { - if (e.key === 'ArrowDown' && this.searchInput.value) { - e.preventDefault(); - const focusResultEvent = new CustomEvent('focus-result'); - globalBus.dispatch(focusResultEvent); - } - }); - - globalBus.on('focus-search', (e) => { - this.searchInput.focus(); - }); - } - - connectedCallback() { - // Focus search input when component is connected - this.searchInput.focus(); - - const searchQuery = new URLSearchParams(document.location.search).get(config.searchQueryParam); - this.searchInput.value = searchQuery; - /** - * Trigger search handling to coordinate the value pulled from the query string - * across the rest of the UI and to actually retrieve the results if the search - * value is now non-empty. - */ - this.__handleSearch(); - } -}); diff --git a/front-end/src/components/register.js b/front-end/src/components/register.js deleted file mode 100644 index ff5bfc0..0000000 --- a/front-end/src/components/register.js +++ /dev/null @@ -1,84 +0,0 @@ -import define from '../utils/define.js'; -import config from "../../config.js"; - -const template = () => /*html*/` -
-
Register
-
- -
- -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
-
-`; - -export default define('register', class extends HTMLElement { - constructor() { - super(); - this.registerForm = null; - this.emailInput = null; - this.usernameInput = null; - this.passwordInput = null; - this.passwordVerifyInput = null; - this.__setup(); - this.__events(); - } - - __setup() { - this.innerHTML = template(); - this.registerForm = this.querySelector('form'); - this.emailInput = this.querySelector('#register-email'); - this.usernameInput = this.querySelector('#register-username'); - this.passwordInput = this.querySelector('#register-password'); - this.passwordVerifyInput = this.querySelector('#register-password-verify'); - } - - __events() { - this.registerForm.addEventListener('submit', (e) => { - e.preventDefault(); - this.__handleRegister(e); - }); - } - - __handleRegister = async () => { - const response = await fetch(`${config.publicApiURL}user/register`, { - method: 'POST', - cache: 'no-cache', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({ - "username": this.usernameInput.value, - "email": this.emailInput.value, - "password": this.passwordInput.value, - "password_verify": this.passwordVerifyInput.value, - }) - }); - if (response.status === 200) { - const registerData = await response.json(); - console.log("Register data", registerData); - document.cookie = `jwt=${registerData["jwt"]}; SameSite=Strict`; - console.log("Register success"); - } else { - console.log("Register error", response); - } - } -}); \ No newline at end of file diff --git a/front-end/src/index.html b/front-end/src/index.html index a08e557..f0ae9a4 100644 --- a/front-end/src/index.html +++ b/front-end/src/index.html @@ -53,7 +53,7 @@
mwmbl logo

- Welcome to mwmbl, the free, open-source and non-profit search engine. + Welcome to Mwmbl, the free, open-source and non-profit search engine.

This website requires you to support/enable scripts.

@@ -72,10 +72,10 @@

-
    +
    mwmbl logo MWMBL diff --git a/front-end/src/index.js b/front-end/src/index.js index 34cd8cb..04c3087 100644 --- a/front-end/src/index.js +++ b/front-end/src/index.js @@ -14,9 +14,6 @@ if (!redirected) { // Load components only after redirects are checked. - import('./components/login.js'); - import('./components/register.js'); - import("./components/organisms/search-bar.js"); import("./components/organisms/results.js"); import("./components/organisms/footer.js"); import("./components/organisms/save.js"); diff --git a/front-end/vite.config.js b/front-end/vite.config.js index 6855f71..e50fc19 100644 --- a/front-end/vite.config.js +++ b/front-end/vite.config.js @@ -5,7 +5,8 @@ export default { base: '/static', publicDir: '../assets', build: { - outDir: '../dist' + outDir: '../dist', + minify: false }, plugins: [ legacy({