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

[chore] Switch Homepage and Photos to page endpoints

Browse Source
This commit is contained in:
Félix Péault
2022-05-30 20:47:31 +02:00
parent 9792165272
commit c406278baf
4 changed files with 124 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/index.svelte
View File

@@ -145,39 +145,3 @@
</div>
</div>
</PageTransition>
<script context="module" lang="ts">
import { fetchAPI } from '$utils/api'
/** @type {import('@sveltejs/kit').Load} */
export async function load ({ url, params, fetch, session, stuff }) {
const res = await fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
slug
title
city
location {
name
slug
country {
slug
name
flag { id }
}
}
image { id }
}
}
`)
const { data } = res
return {
props: {
photos: data.photo,
}
}
}
</script>

39
src/routes/index.ts Normal file
View File

@@ -0,0 +1,39 @@
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
import { fetchAPI } from '$utils/api'
export async function get({}: RequestEvent): Promise<RequestHandlerOutput> {
try {
const res = await fetchAPI(`
query {
photo (limit: 11, sort: ["-date_created"]) {
slug
title
city
location {
name
slug
country {
slug
name
flag { id }
}
}
image { id }
}
}
`)
const { data } = res
return {
body: {
photos: data.photo
}
}
} catch (error) {
return {
status: 404,
}
}
}

88
src/routes/photos.svelte
View File

@@ -9,6 +9,7 @@
import relativeTime from 'dayjs/plugin/relativeTime.js'
import anime from 'animejs'
import type { AnimeTimelineInstance } from 'animejs'
import { fetchAPI } from '$utils/api'
import { map, lerp, throttle } from '$utils/functions'
// Components
import Metas from '$components/Metas.svelte'
@@ -50,20 +51,22 @@
/**
* Filters
*/
const defaultCountry: string = import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY
const defaultSort: string = import.meta.env.VITE_FILTERS_DEFAULT_SORT
const urlFiltersParams = new URLSearchParams()
let filtered: boolean
let filterCountry = $page.url.searchParams.get('country') || defaultCountry
let filterSort = $page.url.searchParams.get('sort') || defaultSort
let countryFlagId: string
$: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort
$: latestPhoto = photos[0]
$: latestPhoto = photos && photos[0]
$: currentCountry = countries.find((country: any) => country.slug === filterCountry)
// Pages related informations
let currentPage = 1
let ended: boolean
let currentPhotosAmount: number
$: currentPhotosAmount = photos.length
$: currentPhotosAmount = photos && photos.length
$: ended = currentPhotosAmount === totalPhotos
@@ -433,7 +436,7 @@
<section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
<div class="grid container">
{#if photos.length}
{#if photos}
<div class="photos__grid" bind:this={photosGridEl}>
{#each photos as { id, image, slug, location, title, city }, index (id)}
<figure class="photo shadow-photo">
@@ -500,82 +503,3 @@
</div>
</section>
</PageTransition>
<script context="module" lang="ts">
import { fetchAPI } from '$utils/api'
// Default filters values
const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
/** @type {import('@sveltejs/kit').Load} */
export async function load ({ url, params, fetch, session, stuff }) {
// Query parameters
const queryCountry = url.searchParams.get('country') || defaultCountry
const querySort = url.searchParams.get('sort') || defaultSort
const res = await fetchAPI(`
query {
photos: photo (
filter: {
${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''}
status: { _eq: "published" },
},
sort: "${querySort === 'latest' ? '-' : ''}date_created",
limit: ${import.meta.env.VITE_GRID_AMOUNT},
page: 1,
) {
id
title
slug
image {
id
title
}
location {
slug
name
region
country {
slug
name
flag { id }
}
}
city
date_created
}
country: country (
filter: {
slug: { _eq: "${queryCountry}" },
status: { _eq: "published" },
},
) {
slug
}
# Total
total_published: photo_aggregated {
count { id }
}
}
`)
const { data } = res
// Calculate total of photos (if default or specific)
const totalPhotos = queryCountry === 'all'
? data.total_published[0].count.id
: stuff.countries.find((country: any) => country.slug === queryCountry).count
return {
props: {
photos: data.photos,
filteredCountryExists: data.country.length > 0,
totalPhotos,
}
}
}
</script>

77
src/routes/photos.ts Normal file
View File

@@ -0,0 +1,77 @@
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
import { fetchAPI } from '$utils/api'
// Default filters values
const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
export async function get({ url }: RequestEvent): Promise<RequestHandlerOutput> {
try {
// Query parameters
const queryCountry = url.searchParams.get('country') || defaultCountry
const querySort = url.searchParams.get('sort') || defaultSort
// Query
const res = await fetchAPI(`
query {
photos: photo (
filter: {
${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''}
status: { _eq: "published" },
},
sort: "${querySort === 'latest' ? '-' : ''}date_created",
limit: ${import.meta.env.VITE_GRID_AMOUNT},
page: 1,
) {
id
title
slug
image {
id
title
}
location {
slug
name
region
country {
slug
name
flag { id }
}
}
city
date_created
}
country: country (
filter: {
slug: { _eq: "${queryCountry}" },
status: { _eq: "published" },
},
) {
slug
}
# Total
total_published: photo_aggregated ${queryCountry !== 'all' ? `(filter: { location: { country: { slug: { _eq: "${queryCountry}" }}}})` : ''} {
count { id }
}
}
`)
const { data } = res
return {
body: {
photos: data.photos,
filteredCountryExists: data.country.length > 0,
totalPhotos: data.total_published[0].count.id,
}
}
} catch (error) {
return {
status: 404,
}
}
}