diff --git a/client/public/about/index.html b/client/public/about/index.html new file mode 100644 index 0000000..0ec73a7 --- /dev/null +++ b/client/public/about/index.html @@ -0,0 +1,42 @@ + + + LegoLog: About + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index f98319d..b2d717c 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -7,21 +7,31 @@ class ProductList extends Component { super(ProductList); } - async OnMount() { - const route = this.state.getroute; - const products = await fetch(route).then(response => response.json()); + async FetchListings(from) { + const products = await fetch(from).then(response => response.json()); + const productsList = this.state.products || []; + // concat the new products to the existing products + const newProducts = productsList.concat(products.data); this.setState({ ...this.getState, - products, - current_page: products.page.current_page, - last_page: products.page.last_page, + products: newProducts, + page: products.page.page, + per_page: products.page.per_page, total: products.page.total, }); } - Render() { + OnMount() { + this.loading = false; this.keepLoading = false; - if (this.state.current_page >= this.state.last_page) { + + const route = this.state.getroute; + this.FetchListings(route); + this.state.products = []; + } + + Render() { + if (this.state.page * this.state.per_page >= this.state.total) { this.keepLoading = false; this.loadingBar = ''; } else { @@ -39,7 +49,7 @@ class ProductList extends Component { template: /* html */`

{this.state.title}

- ${this.state.products.data.map(product => { + ${this.state.products.map(product => { return ` { - if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { - console.log('scrolled to bottom'); + window.addEventListener('scroll', async () => { + // start loading 200px before the bottom of the page + if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 300) { + if (this.loading) return; + if (this.state.page * this.state.per_page >= this.state.total) { + this.keepLoading = false; + this.loadingBar = ''; + return; + } + + this.loading = true; + + // parse the getRoute as a query string + const getRoute = this.state.getroute; + // split into query and location + const [locationStr, queryStr] = getRoute.split('?'); + + const query = new URLSearchParams(queryStr); + query.append('page', parseInt(this.state.page) + 1); + + await this.FetchListings(`${locationStr}?${query.toString()}`); } }); } diff --git a/client/public/components/search.mjs b/client/public/components/search.mjs index 54880b1..7ea3839 100644 --- a/client/public/components/search.mjs +++ b/client/public/components/search.mjs @@ -63,8 +63,16 @@ class Search extends Component { background-color: #AB8FFF; flex-wrap: wrap; font-size: 0.6em; - position: fixed; - width: 65%; + position: absolute; + width: 100%; + } + + @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { + .search-results { + position: fixed; + left: 0; + width: 100%; + } } #search-bar:focus + .search-results { @@ -104,15 +112,28 @@ class Search extends Component { } } - OnRender() { - const searchBar = this.root.querySelector('#search-bar'); - searchBar.value = localStorage.getItem('search-bar'); - const route = `/api/search?q=${searchBar.value}&per_page=10`; + GetSearch(value) { + if (value === '') { + this.AppendSearchResults([], true); + return; + } + + const route = `/api/search?q=${value}&per_page=10`; fetch(route).then((response) => { return response.json(); }).then((data) => { + if (data.error) { + this.AppendSearchResults([], true); + return; + } this.AppendSearchResults(data.data); }); + } + + OnRender() { + const searchBar = this.root.querySelector('#search-bar'); + searchBar.value = localStorage.getItem('search-bar'); + this.GetSearch(searchBar.value); searchBar.addEventListener('keyup', (e) => { localStorage.setItem('search-bar', e.target.value); @@ -123,15 +144,10 @@ class Search extends Component { } // we want this to happen async - const route = `/api/search?q=${e.target.value}&per_page=10`; - fetch(route).then((response) => { - return response.json(); - }).then((data) => { - this.AppendSearchResults(data.data); - }); + this.GetSearch(e.target.value); if (e.keyCode === 13) { - const searchTerm = searchBar.value; + const searchTerm = e.target.value; if (searchTerm.length > 0) { window.location.href = `/search?q=${searchTerm}`; } diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs index e009ed9..0f16b2f 100644 --- a/client/public/components/storefront.mjs +++ b/client/public/components/storefront.mjs @@ -15,21 +15,21 @@ class StoreFront extends Component {