Renacer Social, the app

ArticlePage.tsx 2.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import {
  2. IonBackButton,
  3. IonButtons,
  4. IonCard,
  5. IonCardContent,
  6. IonCardHeader,
  7. IonCardSubtitle,
  8. IonCardTitle,
  9. IonContent,
  10. IonHeader,
  11. IonPage,
  12. IonTitle,
  13. IonToolbar,
  14. } from "@ionic/react";
  15. import { RouteComponentProps } from "react-router";
  16. import { NotionRenderer } from "react-notion-x";
  17. import { fetcher } from "../lib/api";
  18. import useSWR from "swr";
  19. import { formatDate, getBlockTitle, getPageProperty } from "notion-utils";
  20. import SkeletonText from "../components/SkeletonText";
  21. const ArticlePage: React.FC<RouteComponentProps<{ articleId: string }>> = ({
  22. match,
  23. }) => {
  24. const { data, error } = useSWR<any>(
  25. `/api/getTopic/?id=${match.params.articleId}`,
  26. fetcher
  27. );
  28. const isLoading = !data && !error;
  29. const keys = Object.keys(data?.block || {});
  30. const block = data?.block?.[keys[0]]?.value;
  31. const title = data && getBlockTitle(block, data);
  32. const date =
  33. data &&
  34. formatDate(block?.last_edited_time, {
  35. month: "long",
  36. });
  37. const recordMap = data;
  38. console.log(recordMap);
  39. return (
  40. <IonPage>
  41. <IonHeader>
  42. <IonToolbar>
  43. <IonButtons slot="start">
  44. <IonBackButton />
  45. </IonButtons>
  46. <IonTitle>
  47. {data ? getBlockTitle(block, data) : <SkeletonText />}
  48. </IonTitle>
  49. </IonToolbar>
  50. </IonHeader>
  51. <IonContent fullscreen>
  52. <IonCardHeader className="notion">
  53. <IonCardTitle>{title ?? <SkeletonText />}</IonCardTitle>
  54. <IonCardSubtitle>{date ?? <SkeletonText />}</IonCardSubtitle>
  55. </IonCardHeader>
  56. <IonCardContent>
  57. {!recordMap && (
  58. <div>
  59. <SkeletonText />
  60. <SkeletonText />
  61. <SkeletonText />
  62. <SkeletonText />
  63. <SkeletonText />
  64. <SkeletonText />
  65. </div>
  66. )}
  67. {recordMap && (
  68. <NotionRenderer
  69. recordMap={recordMap}
  70. fullPage={true}
  71. darkMode={false}
  72. />
  73. )}
  74. </IonCardContent>
  75. </IonContent>
  76. </IonPage>
  77. );
  78. };
  79. export default ArticlePage;