391 lines
14 KiB
JavaScript
391 lines
14 KiB
JavaScript
import { h, Component } from 'preact';
|
||
import { SingleListing } from './singleListing';
|
||
|
||
export class Listings extends Component {
|
||
state = {
|
||
listings: [],
|
||
query: '',
|
||
tags: [],
|
||
index: null,
|
||
category: '',
|
||
allCategories: [],
|
||
initialFetch: true,
|
||
currentUserId: null,
|
||
openedListing: null,
|
||
message: '',
|
||
slug: null,
|
||
page: 0,
|
||
showNextPageButt: false,
|
||
};
|
||
|
||
componentWillMount() {
|
||
const params = this.getQueryParams();
|
||
const t = this;
|
||
const algoliaId = document.querySelector("meta[name='algolia-public-id']")
|
||
.content;
|
||
const algoliaKey = document.querySelector("meta[name='algolia-public-key']")
|
||
.content;
|
||
const env = document.querySelector("meta[name='environment']").content;
|
||
const client = algoliasearch(algoliaId, algoliaKey);
|
||
const index = client.initIndex(`ClassifiedListing_${env}`);
|
||
const container = document.getElementById('classifieds-index-container')
|
||
const category = container.dataset.category || ''
|
||
const allCategories = JSON.parse(container.dataset.allcategories || []);
|
||
let tags = [];
|
||
if (params.t) {
|
||
tags = params.t.split(',')
|
||
}
|
||
const query = params.q || ''
|
||
let listings = [];
|
||
if (tags.length === 0 && query === '') {
|
||
listings = JSON.parse(container.dataset.listings)
|
||
}
|
||
let openedListing = null;
|
||
let slug = null;
|
||
if (container.dataset.displayedlisting) {
|
||
openedListing = JSON.parse(container.dataset.displayedlisting);
|
||
slug = openedListing.slug;
|
||
document.body.classList.add('modal-open');
|
||
}
|
||
t.setState({query, tags, index, category, allCategories, listings, openedListing, slug });
|
||
t.listingSearch(query, tags, category, slug);
|
||
t.setUser()
|
||
|
||
document.body.addEventListener('keydown', t.handleKeyDown)
|
||
|
||
/*
|
||
The width of the columns also changes when the browser is resized
|
||
so we will also call this function on window resize to recalculate
|
||
each grid item's height to avoid content overflow
|
||
*/
|
||
window.addEventListener("resize", resizeAllMasonryItems);
|
||
|
||
}
|
||
|
||
componentDidUpdate() {
|
||
this.triggerMasonry()
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
document.body.removeEventListener('keydown', this.handleKeyDown)
|
||
}
|
||
|
||
addTag = (e, tag) => {
|
||
e.preventDefault();
|
||
const { query, tags, category } = this.state;
|
||
const newTags = tags;
|
||
if (newTags.indexOf(tag) === -1) {
|
||
newTags.push(tag)
|
||
}
|
||
this.setState({tags: newTags, page: 0, listings: []})
|
||
this.listingSearch(query, newTags, category, null)
|
||
window.scroll(0,0)
|
||
}
|
||
|
||
removeTag = (e, tag) => {
|
||
e.preventDefault();
|
||
const { query, tags, category } = this.state;
|
||
const newTags = tags;
|
||
const index = newTags.indexOf(tag);
|
||
if (newTags.indexOf(tag) > -1) {
|
||
newTags.splice(index, 1);
|
||
}
|
||
this.setState({tags: newTags, page: 0, listings: []})
|
||
this.listingSearch(query, newTags, category, null)
|
||
}
|
||
|
||
selectCategory = (e, cat) => {
|
||
e.preventDefault();
|
||
const { query, tags } = this.state;
|
||
this.setState({category: cat, page: 0, listings: []})
|
||
this.listingSearch(query, tags, cat, null)
|
||
}
|
||
|
||
handleKeyDown = (e) => {
|
||
// Enable Escape key to close an open listing.
|
||
if (this.openedListing !== null && e.key === 'Escape') {
|
||
this.handleCloseModal()
|
||
}
|
||
}
|
||
|
||
handleCloseModal = (e) => {
|
||
if (e.target.id === 'single-classified-listing-container__inner' ||
|
||
e.target.id === 'classified-filters' ||
|
||
e.target.id === 'classified-listings-modal-background' ) {
|
||
const { query, tags, category } = this.state;
|
||
this.setState({openedListing: null, page: 0})
|
||
this.setLocation(query, tags, category, null);
|
||
document.body.classList.remove('modal-open');
|
||
}
|
||
}
|
||
|
||
handleOpenModal = (e, listing) => {
|
||
e.preventDefault();
|
||
this.setState({openedListing: listing});
|
||
window.history.replaceState(null, null, `/listings/${listing.category}/${listing.slug}`);
|
||
this.setLocation(null, null, listing.category, listing.slug);
|
||
document.body.classList.add('modal-open');
|
||
}
|
||
|
||
handleDraftingMessage = (e) => {
|
||
e.preventDefault();
|
||
this.setState({ message: e.target.value })
|
||
}
|
||
|
||
handleSubmitMessage = (e) => {
|
||
e.preventDefault();
|
||
const { message, openedListing} = this.state
|
||
if (this.state.message.replace(/\s/g, '').length === 0) {
|
||
return;
|
||
}
|
||
const formData = new FormData();
|
||
formData.append('user_id', openedListing.user_id);
|
||
formData.append('message', `**re: ${openedListing.title}** ${message}`)
|
||
formData.append('controller', 'chat_channels');
|
||
|
||
const destination = `/connect/@${openedListing.author.username}`;
|
||
const metaTag = document.querySelector("meta[name='csrf-token']");
|
||
window.fetch('/chat_channels/create_chat', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': metaTag.getAttribute("content"),
|
||
},
|
||
body: formData,
|
||
credentials: 'same-origin',
|
||
}).then(() => {
|
||
window.location.href = destination;
|
||
});
|
||
}
|
||
|
||
handleQuery = e => {
|
||
const { tags, category } = this.state;
|
||
this.setState({query: e.target.value, page: 0, listings: []})
|
||
this.listingSearch(e.target.value, tags, category, null)
|
||
}
|
||
|
||
clearQuery = () => {
|
||
const { tags, category } = this.state;
|
||
document.getElementById('listings-search').value = '';
|
||
this.setState({query: '', page: 0, listings: []});
|
||
this.listingSearch('', tags, category, null);
|
||
}
|
||
|
||
getQueryParams = () => {
|
||
let qs = document.location.search;
|
||
qs = qs.split('+').join(' ');
|
||
|
||
const params = {};
|
||
let tokens;
|
||
const re = /[?&]?([^=]+)=([^&]*)/g;
|
||
|
||
// eslint-disable-next-line no-cond-assign
|
||
while (tokens = re.exec(qs)) {
|
||
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
|
||
}
|
||
|
||
return params;
|
||
}
|
||
|
||
loadNextPage = () => {
|
||
const { query, tags, category, slug, page } = this.state;
|
||
this.setState({page: page + 1});
|
||
this.listingSearch(query, tags, category, slug);
|
||
}
|
||
|
||
setUser = () => {
|
||
const t = this;
|
||
setTimeout(function() {
|
||
if (window.currentUser && t.state.currentUserId === null) {
|
||
t.setState({currentUserId: window.currentUser.id });
|
||
}
|
||
}, 300)
|
||
setTimeout(function() {
|
||
if (window.currentUser && t.state.currentUserId === null) {
|
||
t.setState({currentUserId: window.currentUser.id });
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
triggerMasonry = () => {
|
||
resizeAllMasonryItems();
|
||
setTimeout(function() {
|
||
resizeAllMasonryItems();
|
||
}, 1)
|
||
setTimeout(function() {
|
||
resizeAllMasonryItems();
|
||
}, 3)
|
||
}
|
||
|
||
setLocation = (query, tags, category, slug) => {
|
||
let newLocation = ''
|
||
if (slug) {
|
||
newLocation = `/listings/${category}/${slug}`;
|
||
} else if (query.length > 0 && tags.length > 0) {
|
||
newLocation = `/listings/${category}?q=${query}&t=${tags}`;
|
||
} else if (query.length > 0){
|
||
newLocation = `/listings/${category}?q=${query}`;
|
||
} else if (tags.length > 0) {
|
||
newLocation = `/listings/${category}?t=${tags}`;
|
||
} else if (category.length > 0) {
|
||
newLocation = `/listings/${category}`;
|
||
} else {
|
||
newLocation = '/listings'
|
||
}
|
||
window.history.replaceState(null, null, newLocation);
|
||
}
|
||
|
||
listingSearch(query, tags, category, slug) {
|
||
const t = this;
|
||
const { index, page, listings } = t.state;
|
||
const filterObject = {tagFilters: tags, hitsPerPage: 75, page}
|
||
if (category.length > 0) {
|
||
filterObject.filters = `category:${category}`
|
||
}
|
||
index.search(query, filterObject)
|
||
.then(function searchDone(content) {
|
||
const fullListings = listings;
|
||
content.hits.forEach(listing => {
|
||
if (!listings.map(l => (l.id)).includes(listing.id)) {
|
||
fullListings.push(listing)
|
||
}
|
||
});
|
||
t.setState({listings: fullListings, initialFetch: false, showNextPageButt: content.hits.length === 75});
|
||
});
|
||
this.setLocation(query, tags, category, slug);
|
||
}
|
||
|
||
render() {
|
||
const { listings, query, tags, category, allCategories, currentUserId, openedListing, showNextPageButt, initialFetch } = this.state;
|
||
const allListings = listings.map(listing => (
|
||
<SingleListing
|
||
onAddTag={this.addTag}
|
||
onChangeCategory={this.selectCategory}
|
||
listing={listing}
|
||
currentUserId={currentUserId}
|
||
onOpenModal={this.handleOpenModal}
|
||
isOpen={false}
|
||
/>
|
||
));
|
||
const selectedTags = tags.map(tag => (
|
||
<span className="classified-tag">
|
||
<a href='/listings?tags=' className='tag-name' onClick={e => this.removeTag(e, tag)} data-no-instant>
|
||
<span>{tag}</span>
|
||
<span className='tag-close' onClick={e => this.removeTag(e, tag)} data-no-instant>×</span>
|
||
</a>
|
||
</span>
|
||
))
|
||
const categoryLinks = allCategories.map(cat => (
|
||
<a href={`/listings/${cat.slug}`} className={cat.slug === category ? 'selected' : ''} onClick={e => this.selectCategory(e, cat.slug)} data-no-instant>{cat.name}</a>
|
||
))
|
||
let nextPageButt = '';
|
||
if (showNextPageButt) {
|
||
nextPageButt = (
|
||
<div className='classifieds-load-more-button'>
|
||
<button onClick={e => this.loadNextPage(e)} type='button'>Load More Listings</button>
|
||
</div>
|
||
)
|
||
}
|
||
const clearQueryButton = query.length > 0 ? <button type="button" className='classified-search-clear' onClick={this.clearQuery}>×</button> : '';
|
||
let modal = '';
|
||
let modalBg = '';
|
||
let messageModal = '';
|
||
if (openedListing) {
|
||
modalBg = <div className='classified-listings-modal-background' onClick={this.handleCloseModal} role='presentation' id='classified-listings-modal-background' />
|
||
if (openedListing.contact_via_connect && openedListing.user_id !== currentUserId) {
|
||
messageModal = (
|
||
<form id="listings-message-form" className="listings-contact-via-connect" onSubmit={this.handleSubmitMessage}>
|
||
<p><b>Contact {openedListing.author.name} via DEV Connect</b></p>
|
||
<textarea value={this.state.message} onChange={this.handleDraftingMessage} id="new-message" rows="4" cols="70" placeholder="Enter your message here..." />
|
||
<button type="submit" value="Submit" className="submit-button cta">SEND</button>
|
||
<p>
|
||
<em>Message must be relevant and on-topic with the listing. All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a></em>
|
||
</p>
|
||
</form>
|
||
);
|
||
} else if (openedListing.contact_via_connect) {
|
||
messageModal = (
|
||
<form id="listings-message-form" className="listings-contact-via-connect">
|
||
<p>This is your active listing. Any member can contact you via this form.</p>
|
||
<textarea value={this.state.message} onChange={this.handleDraftingMessage} id="new-message" rows="4" cols="70" placeholder="Enter your message here..." />
|
||
<button type="submit" value="Submit" className="submit-button cta">SEND</button>
|
||
<p>
|
||
<em>All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a></em>
|
||
</p>
|
||
</form>
|
||
);
|
||
}
|
||
modal = (
|
||
<div className="single-classified-listing-container">
|
||
<div id="single-classified-listing-container__inner" className="single-classified-listing-container__inner" onClick={this.handleCloseModal}>
|
||
<SingleListing
|
||
onAddTag={this.addTag}
|
||
onChangeCategory={this.selectCategory}
|
||
listing={openedListing}
|
||
currentUserId={currentUserId}
|
||
onOpenModal={this.handleOpenModal}
|
||
isOpen
|
||
/>
|
||
{messageModal}
|
||
<div className="single-classified-listing-container__spacer"></div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
if (initialFetch) {
|
||
this.triggerMasonry();
|
||
}
|
||
return (
|
||
<div className="listings__container">
|
||
{modalBg}
|
||
<div className="classified-filters" id="classified-filters">
|
||
<div className="classified-filters-categories">
|
||
<a href="/listings" className={category === '' ? 'selected' : ''} onClick={e => this.selectCategory(e, '')} data-no-instant>all</a>
|
||
{categoryLinks}
|
||
<a href='/listings/new' className='classified-create-link'>Create a Listing</a>
|
||
</div>
|
||
<div className="classified-filters-tags" id="classified-filters-tags">
|
||
<input type="text" placeholder="search" id="listings-search" autoComplete="off" defaultValue={query} onKeyUp={e => this.handleQuery(e)} />
|
||
{clearQueryButton}
|
||
{selectedTags}
|
||
</div>
|
||
</div>
|
||
<div className="classifieds-columns" id="classified-listings-results">
|
||
{allListings}
|
||
</div>
|
||
{nextPageButt}
|
||
{modal}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
function resizeMasonryItem(item){
|
||
/* Get the grid object, its row-gap, and the size of its implicit rows */
|
||
const grid = document.getElementsByClassName('classifieds-columns')[0];
|
||
const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
|
||
const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
|
||
|
||
const rowSpan = Math.ceil((item.querySelector('.listing-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
|
||
|
||
/* Set the spanning as calculated above (S) */
|
||
// eslint-disable-next-line no-param-reassign
|
||
item.style.gridRowEnd = `span ${ rowSpan}`;
|
||
}
|
||
function resizeAllMasonryItems(){
|
||
// Get all item class objects in one list
|
||
const allItems = document.getElementsByClassName('single-classified-listing');
|
||
|
||
/*
|
||
* Loop through the above list and execute the spanning function to
|
||
* each list-item (i.e. each masonry item)
|
||
*/
|
||
// eslint-disable-next-line vars-on-top
|
||
for(let i=0;i<allItems.length;i++){
|
||
resizeMasonryItem(allItems[i]);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
Listings.displayName = 'Classified Listings';
|