From d031615ac46daabca7baf572729f34390f30caad Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 2 Oct 2024 20:13:53 +0100 Subject: [PATCH] Show post collection on homepage. --- src/App.tsx | 4 +- src/components/Menu.tsx | 19 +++++++- src/interface.ts | 4 ++ src/pages/Home.tsx | 99 +++++++++++++++++++++++++++++++++++++++++ src/pages/Nothing.tsx | 30 ------------- src/pages/index.ts | 2 +- 6 files changed, 124 insertions(+), 34 deletions(-) create mode 100644 src/pages/Home.tsx delete mode 100644 src/pages/Nothing.tsx diff --git a/src/App.tsx b/src/App.tsx index a203b5d..6c0866b 100644 --- a/src/App.tsx +++ b/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 = () => { - + diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index 2105e53..b602c39 100644 --- a/src/components/Menu.tsx +++ b/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 = () => { setIsOpen(true)}>Add WordPress App Simulator + + {sites.map((site, index) => { return ( @@ -117,6 +133,7 @@ const Menu: React.FC = () => { slot="start" ios={earthOutline} md={earthSharp} + style={{ minWidth: 36 }} /> )} {site.name} diff --git a/src/interface.ts b/src/interface.ts index 8b31be8..eacc738 100644 --- a/src/interface.ts +++ b/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 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..aba2b90 --- /dev/null +++ b/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("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 ( + + + + + + + Home + + + + + +

Please select a site, or add a new one

+ + + + ) + } + + const postData = useQuery({ + 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 ( + + + + + + + Home + + + + + + + + + + {layout === "grid" ? ( + + ) : ( + + )} + + + ) +} + +export default Home diff --git a/src/pages/Nothing.tsx b/src/pages/Nothing.tsx deleted file mode 100644 index 553f1a5..0000000 --- a/src/pages/Nothing.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useEffect } from "react" -import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from "@ionic/react" -import { Placeholder } from "@/components" - -const Nothing: React.FC = () => { - useEffect(() => { - document.title = "Pressify" - }, []) - - return ( - - - - - - - No site - - - - - -

Please select a site, or add a new one

- - - - ) -} - -export default Nothing diff --git a/src/pages/index.ts b/src/pages/index.ts index 274fa3b..eee9284 100644 --- a/src/pages/index.ts +++ b/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"