House Hunter

/**
 * House hunter - a search form that is really a query, and a card that is
 * really a component.
 *
 * The listings live in the `properties` collection in Domma CMS. Nothing about
 * them is hard-coded here: add a house in the admin and it appears in this
 * search. The filters are not applied in the browser either - they are turned
 * into the CMS filter DSL (`filter[price_lte]`, `filter[bedrooms_gte]`,
 * `filter[summary_contains]`, …) and answered by the server, so the page asks
 * for what it is about to show and nothing more.
 *
 * What reactivity buys here: the query is a `computed` over the form's
 * observables, and one `effect` watches that computed. There is no "on change"
 * handler on any input, no debounce timer wired by hand (the search box has
 * `.extend({rateLimit: 300})` instead), and no way for the visible results to
 * belong to a query that is no longer on screen.
 */

import {
    observable, observableArray, computed, effect,
    applyBindings, registerComponent, registerBinding
} from '../domma-reactive.esm.js';

import {collection, money, buildQuery} from '../cms.js';

const properties = collection('properties');
const viewings = collection('viewings');

/**
 * A custom binding. `data-currency="price"` formats a number as sterling.
 *
 * There is nothing privileged about the built-in bindings: all twelve are
 * registered through this same function, with this same handler shape.
 */
registerBinding('currency', {
    attribute: 'data-currency',
    expression: true,     // parse the attribute value; binding.evaluate is set
    tracks: true,         // this binding's dependencies are the expression's
    primes: true,         // run once after the first paint

    update({binding, nodes, context}) {
        const text = money(binding.evaluate(context));
        for (const element of nodes) element.textContent = text;
        return true;
    }
});

/**
 * One listing. The card owns whether it is expanded - ten cards on a page have
 * ten of those, and none can see the others, which is the whole reason to reach
 * for a component rather than an `expandedId` held on the list.
 *
 * `shortlist` arrives as the observable array itself, so the card writes to the
 * page's shortlist directly; `property` arrives as a plain object, because the
 * expression that passed it (`$data`) evaluated to one. The markup says which
 * of those two things happened, which is the point.
 */
registerComponent('property-card', {
    template: `
        <article class="card property">
            <figure class="property-photo">
                <img data-bind-src="property.image" data-bind-alt="property.title"
                     width="1200" height="750" loading="lazy">
                <figcaption>{{property.imageCredit}}</figcaption>
            </figure>

            <header class="property-head">
                <h4>{{property.title}}</h4>
                <p class="property-price" data-currency="property.price"></p>
            </header>

            <p class="property-where">{{property.street}}, {{property.town}}</p>

            <ul class="property-facts">
                <li>{{property.bedrooms}} bed</li>
                <li>{{property.bathrooms}} bath</li>
                <li>{{property.propertyType}}</li>
                <li>{{property.tenure}}</li>
            </ul>

            <p class="property-summary" data-if="expanded.value">{{property.summary}}</p>

            <div class="property-actions">
                <button class="btn btn-sm btn-ghost" data-on-click="toggle" data-bind-text="more.value"></button>
                <button class="btn btn-sm" data-on-click="shortlistIt" data-bind-text="saveLabel.value"
                        data-bind-class="saved.value && 'btn-success'"></button>
                <button class="btn btn-sm btn-primary" data-on-click="view">Book a viewing</button>
            </div>

            {{#slot footnote}}{{/slot}}
        </article>`,

    create(params) {
        const expanded = observable(false);
        const saved = computed(() => params.shortlist.value.some(p => p.id === params.property.id));

        return {
            property: params.property,
            expanded,
            saved,
            more: computed(() => (expanded.value ? 'Less' : 'More')),
            saveLabel: computed(() => (saved.value ? 'Shortlisted' : 'Shortlist')),

            toggle() { expanded.value = !expanded.value; },
            view() { params.onView(params.property); },

            shortlistIt() {
                if (saved.value) params.shortlist.remove(p => p.id === params.property.id);
                else params.shortlist.push(params.property);
            }
        };
    }
});

const SHORTLIST_KEY = 'reactive:shortlist';

export async function mount(element) {
    // ---------------------------------------------------------------- state
    // The search box announces 300ms after typing stops. The write itself is
    // never delayed - only the notification - so the input never lags.
    const search = observable('').extend({rateLimit: 300});
    const town = observable('');
    const propertyType = observable('');
    const maxPrice = observable(800000);
    const minBeds = observable(0);
    const garden = observable(false);
    const parking = observable(false);
    const chainFree = observable(false);
    const sort = observable('price:asc');

    const results = observableArray([]);
    const towns = observableArray([]);
    const total = observable(0);
    const loading = observable(true);
    const error = observable('');
    const lastQuery = observable('');
    const searching = observable(false);

    // Restored from this browser, through Domma's storage wrapper.
    const shortlist = observableArray(window.S.get(SHORTLIST_KEY, []));

    const viewing = observable(null);
    const viewingDone = observable('');
    const viewingSaving = observable(false);
    const viewerNaming = observable(false);
    const viewer = {
        name: observable(''),
        email: observable(''),
        phone: observable(''),
        date: observable(''),
        slot: observable('Morning'),
        message: observable('')
    };

    /**
     * The whole form as one server query.
     *
     * Every filter the visitor has touched contributes a clause; the ones they
     * have not are absent rather than empty, because "no minimum" is not the
     * same request as "minimum zero". This is a `computed`, so it recomputes
     * when any one of eight observables changes and is otherwise never rebuilt.
     */
    const query = computed(() => {
        const [field, direction] = sort.value.split(':');
        const filter = {};

        if (town.value) filter.town = town.value;
        if (propertyType.value) filter.propertyType = propertyType.value;
        if (maxPrice.value) filter.price_lte = maxPrice.value;
        if (Number(minBeds.value) > 0) filter.bedrooms_gte = minBeds.value;
        if (garden.value) filter.garden = true;
        if (parking.value) filter.parking = true;
        if (chainFree.value) filter.chainFree = true;

        return {
            filter,
            search: search.value.trim() || undefined,
            sort: field,
            order: direction,
            limit: 50
        };
    });

    /**
     * One effect, one dependency: the query. Every input on the form reaches
     * the server through it, and a request that has been superseded can never
     * land on the page - the token check drops it.
     */
    let token = 0;

    effect(() => {
        const current = query.value;
        const mine = ++token;

        lastQuery.value = `GET /api/v1/properties${buildQuery(current)}`;
        loading.value = true;
        error.value = '';

        properties.list(current)
            .then(({items, total: count}) => {
                if (mine !== token) return;
                results.set(items);
                total.value = count;
            })
            .catch(err => {
                if (mine !== token) return;
                error.value = `The search failed: ${err.message}`;
                results.removeAll();
            })
            .finally(() => {
                if (mine === token) loading.value = false;
            });
    });

    // The shortlist follows itself into storage. An effect is the whole
    // subscription: it reads the array, so it re-runs whenever the array changes.
    effect(() => {
        window.S.set(SHORTLIST_KEY, shortlist.value.map(p => ({
            id: p.id, title: p.title, town: p.town, price: p.price, image: p.image
        })));
    });

    // ------------------------------------------------------------- derived
    const filtered = computed(() =>
        Boolean(search.value || town.value || propertyType.value || garden.value || parking.value ||
            chainFree.value || Number(minBeds.value) > 0 || Number(maxPrice.value) < 800000));

    const empty = computed(() => !loading.value && results.length === 0 && !error.value);

    const headline = computed(() => {
        if (loading.value) return 'Searching';
        const n = results.length;
        return `${n} ${n === 1 ? 'property' : 'properties'}${town.value ? ` in ${town.value}` : ''}`;
    });

    const shortlistSummary = computed(() => {
        const list = shortlist.value;
        if (!list.length) return '';
        const sum = list.reduce((acc, p) => acc + Number(p.price || 0), 0);
        return `Average ${money(sum / list.length)} · saved in this browser, not on the server.`;
    });

    const viewingProblems = computed(() => {
        const out = [];
        if (viewer.name.value.trim().length < 2) out.push('Your name, so the agent knows who is coming.');
        if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(viewer.email.value)) out.push('An email address we can reply to.');
        if (!viewer.date.value) out.push('Pick a date that suits you.');
        return out.map((text, id) => ({id, text}));
    });

    // ------------------------------------------------------------ view model
    const app = {
        search, town, propertyType, maxPrice, minBeds, garden, parking, chainFree, sort,
        results, towns, loading, error, lastQuery, searching, shortlist,
        viewing, viewingDone, viewer, viewerNaming, viewingProblems,
        filtered, empty, headline, shortlistSummary,

        types: ['House', 'Flat', 'Bungalow', 'Cottage', 'Barn conversion'],
        viewingSlots: ['Morning', 'Afternoon', 'Evening'],
        bedOptions: [
            {beds: 0, label: 'Any'}, {beds: 1, label: '1+'}, {beds: 2, label: '2+'},
            {beds: 3, label: '3+'}, {beds: 4, label: '4+'}, {beds: 5, label: '5+'}
        ],
        sorts: [
            {key: 'price:asc', label: 'Price, low to high'},
            {key: 'price:desc', label: 'Price, high to low'},
            {key: 'bedrooms:desc', label: 'Most bedrooms'},
            {key: 'listedOn:desc', label: 'Newest first'}
        ],

        maxPriceLabel: computed(() => `Up to ${money(maxPrice.value)}`),
        shortlistLabel: computed(() => `Shortlist (${shortlist.length})`),
        viewingTitle: computed(() => (viewing.value ? `${viewing.value.title}, ${viewing.value.town}` : '')),
        viewingReady: computed(() => viewingProblems.value.length === 0 && !viewingSaving.value),
        viewingButton: computed(() => (viewingSaving.value ? 'Sending…' : 'Request it')),

        clear() {
            search.value = '';
            town.value = '';
            propertyType.value = '';
            maxPrice.value = 800000;
            minBeds.value = 0;
            garden.value = false;
            parking.value = false;
            chainFree.value = false;
        },

        drop(item) { shortlist.remove(p => p.id === item.id); },

        startViewing(property) {
            viewing.value = property;
            viewingDone.value = '';
            viewerNaming.value = true;
        },

        cancelViewing() { viewing.value = null; },

        submitViewing() {
            saveViewing();
            return false;
        },

        stopSubmit() { return false; }
    };

    /**
     * `POST /api/v1/viewings`. That collection publishes create and nothing
     * else - `api.read.enabled` is false - so the browser can leave a viewing
     * request and cannot read anybody else's back out.
     */
    async function saveViewing() {
        if (!app.viewingReady.value) return;
        viewingSaving.value = true;

        try {
            await viewings.create({
                propertyId: viewing.value.id,
                name: viewer.name.value.trim(),
                email: viewer.email.value.trim(),
                phone: viewer.phone.value.trim(),
                preferredDate: viewer.date.value,
                slot: viewer.slot.value,
                message: viewer.message.value.trim()
            });

            viewingDone.value = `Thank you - the agent has your request for ${viewing.value.title}.`;
            viewing.value = null;
            viewer.message.value = '';
            window.E.toast('Viewing request saved to the CMS.', {type: 'success'});
        } catch (err) {
            error.value = err.message || 'The request was refused.';
            window.E.toast(error.value, {type: 'error'});
        } finally {
            viewingSaving.value = false;
        }
    }

    applyBindings(app, element);

    // The town list is a facet: one call at startup, so the select offers the
    // towns that actually have listings rather than a hard-coded list.
    try {
        const {items} = await properties.list({limit: 200, sort: 'town', order: 'asc'});
        towns.set([...new Set(items.map(p => p.town))].sort());
    } catch {
        towns.set([]);
    }
}