flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[wip] Implement photos loading and make everything dynamic

Browse Source 
- Handle what happens when we click on Load more photos (detect if can load next or if reached the end)
- Show the current and total amount of photos (WIP as it apparently can't be filtered for aggregated)
- See filtered photos from URL when coming directly
- Disable button when all photos has been seen
- Show message if location doesn't exist
This commit is contained in:
Félix Péault
2021-10-09 18:59:38 +02:00
parent 5e790ad68c
commit fd150e252c
4 changed files with 180 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.local
View File

@@ -1,8 +1,10 @@
# Options
VITE_LIMIT_TIME=2 * 7 * 24 * 60 * 60 * 1000
VITE_PREVIEW_COUNT=4
VITE_GRID_AMOUNT=21
VITE_GRID_INCREMENT=21
VITE_GRID_AMOUNT=22
VITE_GRID_INCREMENT=22
VITE_LIST_AMOUNT=10
VITE_LIST_INCREMENT=10
# API related
# VITE_API_URL_DEV="http://192.168.1.19:8055"

3
src/components/atoms/Button.svelte
View File

@@ -2,6 +2,7 @@
export let text: string
export let tag: string = 'a'
export let url: string = undefined
export let disabled: boolean = undefined
const classes = [
'button',
@@ -10,7 +11,7 @@
</script>
{#if tag === 'button'}
<button class={classes} on:click>
<button class={classes} on:click disabled={disabled}>
<slot />
{text}
</button>

173
src/routes/photos.svelte
View File

@@ -1,10 +1,11 @@
<script lang="ts">
import { browser } from '$app/env'
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { getContext } from 'svelte'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
// Components
import Metas from '$components/Metas.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -17,6 +18,11 @@
import Newsletter from '$components/organisms/Newsletter.svelte'
export let photos: any
export let lastUpdated: string
export let totalPhotos: number
export let filteredCountryExists: boolean
dayjs.extend(relativeTime)
const { country: countries }: any = getContext('global')
@@ -27,16 +33,20 @@
const defaultCountry = 'all'
const defaultSort = 'latest'
let filtered: boolean = false
let filterCountry: any = defaultCountry
let filterSort: string = defaultSort
let filterCountry: any = $page.query.get('country') || defaultCountry
let filterSort: string = $page.query.get('sort') || defaultSort
let countryFlagId: string
// Define URL params
let urlFiltersParams: URLSearchParams
if (browser) {
urlFiltersParams = new URLSearchParams(window.location.pathname)
}
// Pages related informations
let currentPage: number = 1
let currentPhotosAmount: number = photos.length
let ended: boolean
$: ended = currentPhotosAmount === totalPhotos
/**
* Define URL params
*/
$: {
// Define country flag from selection
if (filterCountry !== defaultCountry) {
@@ -46,17 +56,17 @@
}
// Update URL filtering params from filter values
// if (filtered && filterCountry && filterSort) {
if (filtered && filterCountry && filterSort) {
// urlFiltersParams.set('country', filterCountry)
// urlFiltersParams.set('sort', filterSort)
// goto(`${$page.path}?${urlFiltersParams.toString()}`, { noscroll: true })
// goto(`${$page.path}?${urlFiltersParams.toString()}`, { keepfocus:true, replaceState:true, noscroll:true })
// // TODO: Request photos from the country of choice
// // loadPhotos()
// console.log('load photos')
// }
// TODO: Request photos from the country of choice
// loadPhotos()
console.log('load photos')
}
console.log({ filtered, filterCountry, filterSort })
// console.log({ filtered, filterCountry, filterSort })
}
@@ -93,25 +103,59 @@
* Load photos
*/
// Load more photos from CTA
const loadMorePhotos = () => {
console.log('load more photos')
// TODO: Append more photos from API including options and page
const loadMorePhotos = async () => {
// Append more photos from API including options and page
const newPhotos: any = await loadPhotos(currentPage + 1)
console.log(newPhotos)
if (newPhotos) {
photos = [...photos, ...newPhotos]
// Define actions if the number of new photos is the expected ones
if (newPhotos.length === Number(import.meta.env.VITE_GRID_INCREMENT)) {
// Increment the current page
currentPage++
}
// Load photos
// Increment the currently visible amount of photos
currentPhotosAmount += newPhotos.length
}
}
// [function] Load photos helper
const loadPhotos = async (page?: number, params?: string) => {
const res = fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
photos: photo (
filter: {
${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''}
status: { _eq: "published" },
},
sort: "${filterSort === 'latest' ? '-' : ''}date_created",
limit: ${import.meta.env.VITE_GRID_INCREMENT},
page: ${page},
) {
title
slug
image {
id
title
}
location {
slug
country { slug }
}
}
}
`)
const { data } = await res
console.log(data)
const { data: { photos }} = await res
if (photos) {
// Return new photos
return photos
} else {
throw new Error('Error while loading new photos')
}
}
</script>
@@ -136,10 +180,15 @@
<Select
name="country" id="filter_country"
options={[
{ value: 'all', name: 'Worldwide', default: true },
{
value: 'all',
name: 'Worldwide',
default: filterCountry === defaultCountry
},
...countries.map(({ slug, name }) => ({
value: slug,
name,
default: filterCountry === slug,
}))
]}
on:change={handleCountryChange}
@@ -156,8 +205,8 @@
<Select
name="sort" id="filter_sort"
options={[
{ value: 'latest', name: 'Latest photos', default: true },
{ value: 'oldest', name: 'Oldest photos' },
{ value: 'latest', name: 'Latest photos', default: filterSort === defaultSort },
{ value: 'oldest', name: 'Oldest photos', default: filterSort === 'oldest' },
]}
on:change={handleSortChange}
value={filterSort}
@@ -190,11 +239,12 @@
<section class="photos__content">
<div class="grid container">
{#if photos}
<div class="photos__grid">
{#each Array(22 * 2) as _}
{#each photos as { image, slug, location }}
<div class="photo shadow-photo">
<a href="/country/location/photo-slug">
<Image id="5a45ba18-7b78-48e0-a299-302b1ea9b77b" width={1200} height={800} alt="image" />
<a href="/{location.country.slug}/{location.slug}/{slug}">
<Image id={image.id} width={1200} height={800} alt={image.title} />
<PostCard />
</a>
</div>
@@ -202,14 +252,30 @@
</div>
<div class="controls grid">
<p class="controls__date">Last updated: 4 days ago</p>
<Button text="See more photos" tag="button" on:click={loadMorePhotos} />
<p class="controls__date" title={dayjs(lastUpdated).format('DD/MM/YYYY, hh:mm')}>
Last updated: <time datetime={dayjs(lastUpdated).format('YYYY-MM-DD')}>{dayjs().to(dayjs(lastUpdated))}</time>
</p>
<Button
text={!ended ? 'See more photos' : "You've seen it all!"}
tag="button"
on:click={loadMorePhotos}
disabled={ended}
/>
<div class="controls__count">
<span class="current">21</span>
<span class="current">{currentPhotosAmount}</span>
<span>/</span>
<span class="total">129</span>
<span class="total">{totalPhotos}</span>
</div>
</div>
{:else if !filteredCountryExists}
<div class="photos__message">
<p>
<strong>{$page.query.get('country').replace(/(^|\s)\S/g, letter => letter.toUpperCase())}</strong> is not available… yet 👀
</p>
</div>
{/if}
<div class="grid-modules">
<div class="wrap">
@@ -226,14 +292,48 @@
import { fetchAPI } from '$utils/api'
export async function load ({ page, session, fetch, context }) {
// TODO: Implement query parameters from URL (country, sort)
// Query parameters
const queryCountry = page.query.get('country')
const querySort = page.query.get('sort')
const res = await fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
photos: photo (
filter: {
${queryCountry ? `location: { country: { slug: { _eq: "${queryCountry}" }} },` : ''}
status: { _eq: "published" },
},
sort: "${querySort === 'latest' ? '-' : ''}date_created",
limit: ${import.meta.env.VITE_GRID_AMOUNT},
page: 1,
) {
title
slug
image {
id
title
}
location {
slug
country { slug }
}
}
total_published: photo_aggregated {
count { id }
}
country: country (
filter: {
slug: { _eq: "${queryCountry}" },
status: { _eq: "published" },
},
) {
slug
}
lastUpdated: photo (limit: 1, sort: "-date_created", filter: { status: { _eq: "published" }}) {
date_created
}
}
`)
@@ -242,7 +342,10 @@
return {
props: {
photos: data.photo,
photos: data.photos,
filteredCountryExists: data.country.length > 0,
totalPhotos: data.total_published[0].count.id,
lastUpdated: data.lastUpdated[0].date_created,
}
}
}

23
src/style/pages/_photos.scss
View File

@@ -324,6 +324,20 @@
}
}
// Message
&__message {
// grid-column: ;
text-align: center;
padding: clamp(48px, 10vw, 160px) 0;
color: $color-text;
@include bp (sm) {
grid-column: 3 / span 20;
}
}
/**
* Controls
*/
@@ -361,12 +375,14 @@
// See More Photos
.button {
$color-button: #F2D3B8;
grid-column: span var(--columns);
grid-row: 1;
margin: 0 auto;
height: 56px;
background-color: #F2D3B8;
background-color: $color-button;
font-size: rem(16px);
border: none;
@include bp (sm) {
grid-column: 6 / span 12;
@@ -374,6 +390,11 @@
padding: 0 40px;
font-size: rem(18px);
}
&[disabled] {
background: none;
border: 2px solid darken($color-button, 2);
}
}
// Photo Count