Show post collection on homepage.

src/App.tsx

@@ -4,7 +4,7 @@ import { IonReactHashRouter } from "@ionic/react-router"
 import { Route } from "react-router-dom"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Menu } from "@/components"
-import { Nothing, Overview, Post, PostCollection, SearchCollection, TaxCollection } from "@/pages"
+import { Home, Overview, Post, PostCollection, SearchCollection, TaxCollection } from "@/pages"
 import { EPostType, ETagType, WordPressApi } from "@/api"
 
 /* Core CSS required for Ionic components to work properly */
@@ -54,7 +54,7 @@ const App: React.FC = () => {
 						<Menu />
 						<IonRouterOutlet id="main">
 							<Route path="/" exact={true}>
-								<Nothing />
+								<Home />
 							</Route>
 							<Route path="/:inputURL" exact={true}>
 								<Overview />

src/components/Menu.tsx

@@ -26,7 +26,7 @@ import {
 	IonTitle,
 	IonToolbar,
 } from "@ionic/react"
-import { earthOutline, earthSharp } from "ionicons/icons"
+import { earthOutline, earthSharp, homeOutline, homeSharp } from "ionicons/icons"
 import { useLocation } from "react-router-dom"
 import { useSettings } from "@/hooks"
 import { ESelectorState } from "@/enum"
@@ -96,6 +96,22 @@ const Menu: React.FC = () => {
 						<IonButton onClick={() => setIsOpen(true)}>Add</IonButton>
 					</IonListHeader>
 					<IonNote>WordPress App Simulator</IonNote>
+					<IonItem
+						className={location.pathname === "/" ? "selected" : ""}
+						routerLink="/"
+						routerDirection="none"
+						lines="none"
+						detail={false}
+					>
+						<IonIcon
+							aria-hidden="true"
+							slot="start"
+							ios={homeOutline}
+							md={homeSharp}
+							style={{ minWidth: 36 }}
+						/>
+						<IonLabel>Home</IonLabel>
+					</IonItem>
 					{sites.map((site, index) => {
 						return (
 							<IonMenuToggle key={index} autoHide={false}>
@@ -117,6 +133,7 @@ const Menu: React.FC = () => {
 												slot="start"
 												ios={earthOutline}
 												md={earthSharp}
+												style={{ minWidth: 36 }}
 											/>
 										)}
 										<IonLabel>{site.name}</IonLabel>

src/interface.ts

@@ -1,6 +1,10 @@
+import { IPost } from "@/api"
+
 export interface ISite {
 	name: string
 	description?: string
 	url: string
 	image?: string
 }
+
+export type IPostExtended = IPost & ISite

src/pages/Home.tsx

@@ -0,0 +1,99 @@
+import { useEffect } from "react"
+import {
+	IonButton,
+	IonButtons,
+	IonContent,
+	IonHeader,
+	IonIcon,
+	IonMenuButton,
+	IonPage,
+	IonTitle,
+	IonToolbar,
+} from "@ionic/react"
+import { Placeholder, PostGrid, PostList } from "@/components"
+import { useSettings } from "@/hooks"
+import { ISite } from "@/interface"
+import { useQuery } from "@tanstack/react-query"
+import { EPostType, fetchPosts, fetchSiteInfo, IPost, WordPressApi } from "@/api"
+import { getLayoutIcon } from "@/utils"
+
+const Home: React.FC = () => {
+	const [sites, setSites] = useSettings<ISite[]>("SitesAvailable", [])
+	const [layout, setLayout] = useSettings<"grid" | "list">("displayLayout", "grid")
+
+	useEffect(() => {
+		document.title = "Pressify"
+	}, [])
+
+	const toggleLayout = () => {
+		if (layout === "grid") {
+			setLayout("list")
+		} else {
+			setLayout("grid")
+		}
+	}
+
+	if (sites.length < 1) {
+		return (
+			<IonPage>
+				<IonHeader>
+					<IonToolbar>
+						<IonButtons slot="start">
+							<IonMenuButton />
+						</IonButtons>
+						<IonTitle>Home</IonTitle>
+					</IonToolbar>
+				</IonHeader>
+
+				<IonContent fullscreen>
+					<Placeholder name="No site selected">
+						<p>Please select a site, or add a new one</p>
+					</Placeholder>
+				</IonContent>
+			</IonPage>
+		)
+	}
+
+	const postData = useQuery<IPost[]>({
+		queryKey: ["summary", sites.length],
+		queryFn: async () => {
+			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)
+				return posts
+			})
+
+			const postCollections = await Promise.all(postCollectionPromises)
+			return postCollections.flat()
+		},
+	})
+
+	return (
+		<IonPage>
+			<IonHeader>
+				<IonToolbar>
+					<IonButtons slot="start">
+						<IonMenuButton />
+					</IonButtons>
+					<IonTitle>Home</IonTitle>
+					<IonButtons slot="primary" collapse={true}>
+						<IonButton onClick={toggleLayout}>
+							<IonIcon slot="icon-only" md={getLayoutIcon(layout)}></IonIcon>
+						</IonButton>
+					</IonButtons>
+				</IonToolbar>
+			</IonHeader>
+
+			<IonContent fullscreen>
+				{layout === "grid" ? (
+					<PostGrid posts={postData.data} siteURL={""} mockCount={10} />
+				) : (
+					<PostList posts={postData.data} siteURL={""} mockCount={10} />
+				)}
+			</IonContent>
+		</IonPage>
+	)
+}
+
+export default Home

src/pages/index.ts

@@ -1,6 +1,6 @@
+export { default as Home } from "./Home"
 export { default as Post } from "./Post"
 export { default as PostCollection } from "./PostCollection"
-export { default as Nothing } from "./Nothing"
 export { default as Overview } from "./Overview"
 export { default as SearchCollection } from "./SearchCollection"
 export { default as TaxCollection } from "./TaxCollection"