12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- import {
- IonBackButton,
- IonButtons,
- IonCard,
- IonCardContent,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonContent,
- IonHeader,
- IonPage,
- IonTitle,
- IonToolbar,
- } from "@ionic/react";
- import { RouteComponentProps } from "react-router";
- import { NotionRenderer } from "react-notion-x";
- import { fetcher } from "../lib/api";
- import useSWR from "swr";
- import { formatDate, getBlockTitle, getPageProperty } from "notion-utils";
- import SkeletonText from "../components/SkeletonText";
-
- const ArticlePage: React.FC<RouteComponentProps<{ articleId: string }>> = ({
- match,
- }) => {
- const { data, error } = useSWR<any>(
- `/api/getTopic/?id=${match.params.articleId}`,
- fetcher
- );
- const isLoading = !data && !error;
- const keys = Object.keys(data?.block || {});
- const block = data?.block?.[keys[0]]?.value;
- const title = data && getBlockTitle(block, data);
- const date =
- data &&
- formatDate(block?.last_edited_time, {
- month: "long",
- });
- const recordMap = data;
- console.log(recordMap);
-
- return (
- <IonPage>
- <IonHeader>
- <IonToolbar>
- <IonButtons slot="start">
- <IonBackButton />
- </IonButtons>
- <IonTitle>
- {data ? getBlockTitle(block, data) : <SkeletonText />}
- </IonTitle>
- </IonToolbar>
- </IonHeader>
- <IonContent fullscreen>
- <IonCardHeader className="notion">
- <IonCardTitle>{title ?? <SkeletonText />}</IonCardTitle>
- <IonCardSubtitle>{date ?? <SkeletonText />}</IonCardSubtitle>
- </IonCardHeader>
- <IonCardContent>
- {!recordMap && (
- <div>
- <SkeletonText />
- <SkeletonText />
- <SkeletonText />
- <SkeletonText />
- <SkeletonText />
- <SkeletonText />
- </div>
- )}
- {recordMap && (
- <NotionRenderer
- recordMap={recordMap}
- fullPage={true}
- darkMode={false}
- />
- )}
- </IonCardContent>
- </IonContent>
- </IonPage>
- );
- };
-
- export default ArticlePage;
|