traxxx/assets/components/networks/networks.vue

<template>
	<div class="networks">
		<div class="content-inner">
			<SearchBar
				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
				:eager="true"
			/>

			<span
				v-if="done && entities.length === 0"
				class="empty"
			>No results for "{{ $route.query.query }}"</span>

			<template v-else>
				<h2 class="heading">Popular</h2>

				<div
					class="entity-tiles"
				>
					<Entity
						v-for="entity in popularEntities"
						:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
						:entity="entity"
					/>
				</div>

				<h2 class="heading">All networks</h2>

				<div
					class="entity-tiles"
				>
					<Entity
						v-for="entity in entities"
						:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
						:entity="entity"
					/>
				</div>
			</template>
		</div>

		<Footer />
	</div>
</template>

<script>
import Entity from '../entities/tile.vue';
import SearchBar from '../search/bar.vue';

async function fetchEntities() {
	if (this.$route.query.query) {
		await this.searchEntities();
		return;
	}

	this.done = false;

	this.entities = await this.$store.dispatch('fetchEntities', {
		type: 'network',
		entitySlugs: [],
	});

	this.done = true;
}

async function searchEntities() {
	this.done = false;

	this.entities = await this.$store.dispatch('searchEntities', {
		query: this.$route.query.query,
		limit: 20,
	});

	this.done = true;
}

function popularEntities() {
	const entitiesBySlug = Object.fromEntries(this.entities.map((entity) => [entity.slug, entity]));

	return [
		'21sextury',
		'adulttime',
		'amateurallure',
		'analvids',
		'bamvisions',
		'bang',
		'bangbros',
		'blowpass',
		'brazzers',
		'burningangel',
		'digitalplayground',
		'dogfartnetwork',
		'dorcel',
		'elegantangel',
		'evilangel',
		'fakehub',
		'girlsway',
		'hookuphotshot',
		'hussiepass',
		'insex',
		'julesjordan',
		'kellymadison',
		'kink',
		'mofos',
		'naughtyamerica',
		'newsensations',
		'pervcity',
		'pornpros',
		'private',
		'realitykings',
		'teamskeet',
		'twistys',
		'vixen',
		'xempire',
	].map((slug) => entitiesBySlug[slug]).filter(Boolean);
}

async function mounted() {
	this.pageTitle = 'Channels';

	await this.fetchEntities();
}

function channelCount() {
	return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}

export default {
	components: {
		Entity,
		SearchBar,
	},
	data() {
		return {
			done: false,
			pageTitle: null,
			entities: [],
		};
	},
	computed: {
		channelCount,
		popularEntities,
	},
	watch: {
		$route: fetchEntities,
	},
	mounted,
	methods: {
		fetchEntities,
		searchEntities,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.networks {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.content-inner {
	padding: 0 1rem;
}

.search {
	margin: 1rem 0 0 0;
}

.entity-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: .5rem;
    padding: 1rem 0;

	.tile {
		height: 6rem;
	}
}

.empty {
	display: block;
	margin: 1rem 0;
	color: var(--shadow);
	font-size: 1.25rem;
	font-weight: bold;
}

.heading {
	margin: 1rem 0 0 0;
}

@media(max-width: $breakpoint2) {
    .entity-tiles {
        grid-gap: .5rem;
    }
}

@media(max-width: $breakpoint0) {
    .entity-tiles {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}
</style>