diff --git a/pages/index.tsx b/pages/index.tsx index f62b1522..69e7568c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,12 +6,12 @@ import { HudozkaTitle } from 'src/components/HudozkaTitle' import { MetaBuilder } from 'src/lib/meta' import { getPagesCardsByTags } from 'src/rest' import { NextPage } from 'next' -import { IPage, IMeta } from 'src/types' +import { IMeta, PageCardData } from 'src/types' interface IProps { title: string meta: IMeta - items: IPage[] + items: PageCardData[] } const Index: NextPage = props => ( @@ -32,8 +32,6 @@ const Index: NextPage = props => ( ) diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx index 54a82b09..3cd73edc 100644 --- a/src/components/PageGrid/index.tsx +++ b/src/components/PageGrid/index.tsx @@ -1,5 +1,4 @@ -import { ImageDefinition, IPage, ImageSize } from 'src/types' -import { Pager } from '../Pager' +import { ImageSize, PageCardData } from 'src/types' import { CardGrid } from '../CardGrid' import { Card, CardLayout } from '../Card' import { Date } from './Date' @@ -7,87 +6,56 @@ import { Block } from '../Block' import { Spacer } from '../Spacer' import { imageSrcSet } from 'src/lib/image' -function getImage(image?: ImageDefinition) { - const sizes = [ImageSize.large, ImageSize.medium, ImageSize.small] - if (!image) { - const defaultSrc = process.env.APP_CARD_DEFAULT_IMAGE - return { - src: defaultSrc, - srcSet: imageSrcSet(defaultSrc, sizes) - } - } - - const src = image.artifacts.large.src - return { - src, - srcSet: imageSrcSet(src, sizes) - } -} - export type PageGridProps = { - items: IPage[] - nextPage: number | null - prevPage: number | null + items: PageCardData[] } -export const PageGrid: React.FC = ({ items, nextPage, prevPage, ...props }) => { - const nextHref = nextPage ? `/articles/${nextPage}` : null - let prevHref = prevPage ? `/articles/${prevPage}` : null - if (prevPage === 1) { - prevHref = '/' - } - +export const PageGrid: React.FC = props => { return ( - <> - - {items.map((item, i) => { - const gridColumn = item.featured ? 'span 2' : 'auto' - const layout: CardLayout = item.featured ? 'featured' : 'simple' - const { src, srcSet } = getImage(item.preview) + + {props.items.map((item, i) => { + const gridColumn = item.featured ? 'span 2' : 'auto' + const layout: CardLayout = item.featured ? 'featured' : 'simple' + const src = item.coverSrc + const srcSet = imageSrcSet(item.coverSrc, [ImageSize.large, ImageSize.medium, ImageSize.small]) - const content = !item.featured - ? ( - - {item.title} - - {item.date} - - ) : ( - item.title - ) - - return ( - - {content} - + {item.title} + + {item.date} + + ) : ( + item.title ) - })} - - - + return ( + + {content} + + ) + })} + ) } diff --git a/src/lib/url.ts b/src/lib/url.ts index e769c3b9..229492b4 100644 --- a/src/lib/url.ts +++ b/src/lib/url.ts @@ -1,3 +1,13 @@ export function isPartOfPath(part: string, path: string): boolean { return path.startsWith(part) } + +export function queryList(key: string, values: string[]): string { + if (values.length === 0) { + return '' + } + + return values + .map(value => `${key}=${value}`) + .join('&') +} diff --git a/src/rest.ts b/src/rest.ts index 8ac761f8..5d7f9e8d 100644 --- a/src/rest.ts +++ b/src/rest.ts @@ -1,26 +1,53 @@ import { createApiUrl, requestGet, IResponseItems } from './next-lib' -import { IPage } from './types' +import { IPage, PageCardData } from './types' +import { queryList } from './lib/url' export type QuerySlice = { skip: number limit: number sortBy: string + fields?: string[] } -export async function getPagesByTags(tags: string[], { skip, limit, sortBy }: QuerySlice) { - const tagQuery = tags - .map(x => `tag=${x}`) - .join('&') +export async function getPagesByTags(tags: string[], { skip, limit, sortBy, fields }: QuerySlice) { + const tag = queryList('tag', tags) + const field = queryList('field', fields ?? []) - const url = `/api/pages/tags?${tagQuery}&skip=${skip}&limit=${limit}&sortBy=${sortBy}` - const res = await requestGet>(createApiUrl(url), null) + const url = `/api/pages/tags?${tag}&${field}&skip=${skip}&limit=${limit}&sortBy=${sortBy}` + const res = await requestGet>(createApiUrl(url), null) return res?.items } -export async function getPagesCardsByTags(tags: string[]) { +export async function getPagesCardsByTags(tags: string[]): Promise { + type ResponseItem = { + url: string + title: string + featured: boolean + date: string + coverSrc: string + } + const skip = 0 const limit = 1000 + const fields = [ + 'url', + 'title', + 'featured', + 'date', + 'coverSrc' + ] - return getPagesByTags(tags, { skip, limit, sortBy: '-date' }) + const items = await getPagesByTags(tags, { fields, skip, limit, sortBy: '-date' }) + if (!Array.isArray(items)) { + return [] + } + + return items.map(item => ({ + url: item.url, + title: item.title, + featured: item.featured, + date: new Date(item.date), + coverSrc: item.coverSrc, + })) } diff --git a/src/types.ts b/src/types.ts index cebc8677..b3657913 100644 --- a/src/types.ts +++ b/src/types.ts @@ -8,6 +8,14 @@ export interface IBreadcumbsPart { href: string } +export type PageCardData = { + url: string + title: string + featured: boolean + date: Date + coverSrc: string +} + export interface IPage { id: string title: string