Summary adjustments.

soup-bowl · Oct 2, 2024 · 03c7b56 · 03c7b56
1 parent d031615
commit 03c7b56
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 16 deletions.
diff --git a/src/components/PostGrid.tsx b/src/components/PostGrid.tsx
@@ -1,18 +1,22 @@
 import {
+	IonAvatar,
 	IonCard,
 	IonCardContent,
 	IonCardHeader,
 	IonCardTitle,
+	IonChip,
 	IonCol,
 	IonGrid,
+	IonLabel,
 	IonRow,
 	IonSkeletonText,
 } from "@ionic/react"
 import { IPost } from "@/api"
-import { degubbins } from "@/utils"
+import { degubbins, isPostExtended } from "@/utils"
+import { IPostExtended } from "@/interface"
 
 const PostGrid: React.FC<{
-	posts?: IPost[]
+	posts?: IPost[] | IPostExtended[]
 	siteURL?: string
 	mockCount?: number
 }> = ({ posts, siteURL, mockCount = 0 }) => {
@@ -42,7 +46,7 @@ const PostGrid: React.FC<{
 			<IonRow>
 				{posts.map((post, index) => (
 					<IonCol key={index} size="12" sizeMd="4">
-						<IonCard routerLink={`/${siteURL}/${post.type}/${post.id}`}>
+						<IonCard routerLink={`/${isPostExtended(post) ? post.url : siteURL}/${post.type}/${post.id}`}>
 							{post._embedded?.["wp:featuredmedia"]?.[0].media_details?.sizes?.full?.source_url && (
 								<img
 									alt=""
@@ -52,7 +56,20 @@ const PostGrid: React.FC<{
 							<IonCardHeader>
 								<IonCardTitle>{degubbins(post.title.rendered)}</IonCardTitle>
 							</IonCardHeader>
-							<IonCardContent>{degubbins(post.excerpt.rendered)}</IonCardContent>
+							<IonCardContent>
+								{isPostExtended(post) && (
+									<>
+										<IonChip>
+											<IonAvatar>
+												<img alt="" src={post.image} />
+											</IonAvatar>
+											<IonLabel>{post.name}</IonLabel>
+										</IonChip>
+										<br />
+									</>
+								)}
+								{degubbins(post.excerpt.rendered)}
+							</IonCardContent>
 						</IonCard>
 					</IonCol>
 				))}

diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
@@ -1,9 +1,10 @@
-import { IonItem, IonLabel, IonList, IonSkeletonText, IonThumbnail } from "@ionic/react"
+import { IonAvatar, IonChip, IonItem, IonLabel, IonList, IonSkeletonText, IonThumbnail } from "@ionic/react"
 import { IPost } from "@/api"
-import { degubbins } from "@/utils"
+import { degubbins, isPostExtended } from "@/utils"
+import { IPostExtended } from "@/interface"
 
 const PostList: React.FC<{
-	posts?: IPost[]
+	posts?: IPost[] | IPostExtended[]
 	siteURL?: string
 	mockCount?: number
 }> = ({ posts, siteURL, mockCount = 0 }) => {
@@ -27,7 +28,11 @@ const PostList: React.FC<{
 	return (
 		<IonList>
 			{posts.map((post, index) => (
-				<IonItem key={index} button routerLink={`/${siteURL}/${post.type}/${post.id}`}>
+				<IonItem
+					key={index}
+					button
+					routerLink={`/${isPostExtended(post) ? post.url : siteURL}/${post.type}/${post.id}`}
+				>
 					{post._embedded?.["wp:featuredmedia"]?.[0].media_details?.sizes?.full?.source_url && (
 						<IonThumbnail slot="start">
 							<img
@@ -40,6 +45,14 @@ const PostList: React.FC<{
 						<h2>{degubbins(post.title.rendered)}</h2>
 						<p>{degubbins(post.excerpt.rendered)}</p>
 					</IonLabel>
+					{isPostExtended(post) && (
+						<IonChip slot="end">
+							<IonAvatar>
+								<img alt="" src={post.image} />
+							</IonAvatar>
+							<IonLabel>{post.name}</IonLabel>
+						</IonChip>
+					)}
 				</IonItem>
 			))}
 		</IonList>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -12,9 +12,9 @@ import {
 } from "@ionic/react"
 import { Placeholder, PostGrid, PostList } from "@/components"
 import { useSettings } from "@/hooks"
-import { ISite } from "@/interface"
+import { IPostExtended, ISite } from "@/interface"
 import { useQuery } from "@tanstack/react-query"
-import { EPostType, fetchPosts, fetchSiteInfo, IPost, WordPressApi } from "@/api"
+import { EPostType, fetchPosts, IPost, WordPressApi } from "@/api"
 import { getLayoutIcon } from "@/utils"
 
 const Home: React.FC = () => {
@@ -54,18 +54,30 @@ const Home: React.FC = () => {
 		)
 	}
 
-	const postData = useQuery<IPost[]>({
+	const postData = useQuery<IPostExtended[]>({
 		queryKey: ["summary", sites.length],
 		queryFn: async () => {
+			const extendPosts = (posts: IPost[], info: ISite): IPostExtended[] => {
+				return posts.map((post) => ({
+					...post,
+					name: info.name,
+					description: info.description,
+					url: info.url,
+					image: info.image,
+				}))
+			}
+
 			const postCollectionPromises = sites.map(async (site) => {
 				const wp = new WordPressApi({ endpoint: `https://${site.url}/wp-json` })
-				//const details = await fetchSiteInfo(wp)
-				const posts = await fetchPosts(wp, EPostType.Post, 1, 10)
+				const posts = extendPosts(await fetchPosts(wp, EPostType.Post, 1, 10), site)
 				return posts
 			})
 
 			const postCollections = await Promise.all(postCollectionPromises)
-			return postCollections.flat()
+			return postCollections
+				.flat()
+				.sort((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime())
+				.slice(0, 15)
 		},
 	})
 
@@ -87,9 +99,9 @@ const Home: React.FC = () => {
 
 			<IonContent fullscreen>
 				{layout === "grid" ? (
-					<PostGrid posts={postData.data} siteURL={""} mockCount={10} />
+					<PostGrid posts={postData.data} mockCount={10} />
 				) : (
-					<PostList posts={postData.data} siteURL={""} mockCount={10} />
+					<PostList posts={postData.data} mockCount={10} />
 				)}
 			</IonContent>
 		</IonPage>

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1 +1,8 @@
+import { IPost } from "@/api"
+import { IPostExtended } from "@/interface"
+
 export { degubbins, getLayoutIcon } from "./stringUtils"
+
+export const isPostExtended = (post: IPost | IPostExtended): post is IPostExtended => {
+	return (post as IPostExtended).image !== undefined
+}