[feat] Add routing for Notion articles

capacitor.config.ts

@@ -1,10 +1,10 @@
-import { CapacitorConfig } from '@capacitor/cli';
+import { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: 'io.ionic.starter',
-  appName: 'renacer',
-  webDir: 'build',
-  bundledWebRuntime: false
+  appId: "io.renacer.social",
+  appName: "renacer",
+  webDir: "build",
+  bundledWebRuntime: false,
 };
 
 export default config;

ios/App/App.xcodeproj/project.pbxproj

@@ -347,12 +347,14 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N9M43N6FY5;
 				INFOPLIST_FILE = App/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = "Renacer Social";
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = io.renacer.social;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -367,11 +369,13 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = N9M43N6FY5;
 				INFOPLIST_FILE = App/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = "Renacer Social";
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.starter;
+				PRODUCT_BUNDLE_IDENTIFIER = io.renacer.social;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

ios/App/App/Info.plist

@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>renacer</string>
+	<string>renacer</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

package.json

@@ -23,8 +23,11 @@
     "@types/react-router-dom": "^5.1.7",
     "history": "^4.9.0",
     "ionicons": "^6.0.3",
+    "lodash": "^4.17.21",
+    "notion-utils": "^6.15.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-notion-x": "^6.15.7",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
@@ -72,6 +75,7 @@
   "devDependencies": {
     "@capacitor/cli": "4.4.0",
     "@ionic/lab": "3.2.15",
+    "@types/lodash": "^4.14.191",
     "husky": "^8.0.0",
     "pretty-quick": "^3.1.3"
   },

src/App.tsx

@@ -34,6 +34,8 @@ import "./theme/variables.css";
 import AdviceListPage from "./pages/AdviceListPage";
 import LawListPage from "./pages/LawListPage";
 import ArticlePage from "./pages/ArticlePage";
+import "./theme/global.css";
+import "react-notion-x/src/styles.css";
 
 setupIonicReact();
 
@@ -51,7 +53,7 @@ const App: React.FC = () => (
           <Route path="/laws">
             <LawListPage />
           </Route>
-          <Route path="/article/:slug" component={ArticlePage} />
+          <Route path="/article/:articleId" component={ArticlePage} />
           <Route exact path="/">
             <Redirect to="/home" />
           </Route>

src/components/TopicList.css

@@ -0,0 +1,13 @@
+.list {
+  border-radius: 20px;
+  padding: 0 0 0 0;
+}
+
+.ListItemText {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  width: 100%;
+}
+
+ion-list-header {
+  /* color: "primary"; */
+}

src/components/ListComponent.tsx → src/components/TopicList.tsx

@@ -1,12 +1,13 @@
 import { IonContent, IonItem, IonLabel, IonListHeader } from "@ionic/react";
-import "../components/ListComponent.css";
+import { Topic } from "../types";
 import SkeletonText from "./SkeletonText";
+import "../components/TopicList.css";
 
 /**
  * This component creates a shimmering "skeleton" version of the list component.
  * It shows only when content isn't available yet (loading).
  */
-function ListComponentSkeleton({ items = 5 }: { items?: number }) {
+function ListSkeleton({ items = 5 }: { items?: number }) {
   return (
     <>
       {Array(items)
@@ -20,15 +21,11 @@ function ListComponentSkeleton({ items = 5 }: { items?: number }) {
   );
 }
 
-const ListComponent: React.FC<{
+const TopicList: React.FC<{
   title?: string;
-  laws: string[];
+  topics: Topic[];
   loading?: boolean;
-}> = (props) => {
-  const title = props.title;
-  const laws = props.laws;
-  const loading = props.loading ?? false;
-
+}> = ({ title, topics, loading }) => {
   return (
     <IonContent>
       {title ? (
@@ -37,20 +34,20 @@ const ListComponent: React.FC<{
         </IonListHeader>
       ) : null}
 
-      {loading && <ListComponentSkeleton />}
+      {loading && <ListSkeleton />}
 
       {!loading &&
-        laws.map((lawName: string) => {
+        topics.map((topic: Topic) => {
           return (
             <IonItem
-              key={lawName}
-              routerLink={`/article/${encodeURIComponent(lawName)}`}
+              key={topic.blockId}
+              routerLink={`/article/${topic.blockId}`}
             >
-              <p className="ListItemText">{lawName}</p>
+              <p className="ListItemText">{topic.name}</p>
             </IonItem>
           );
         })}
     </IonContent>
   );
 };
-export default ListComponent;
+export default TopicList;

src/pages/AdviceListPage.tsx

@@ -3,25 +3,43 @@ import {
   IonHeader,
   IonPage,
   IonTitle,
+  IonToast,
   IonToolbar,
 } from "@ionic/react";
-import ListComponent from "../components/ListComponent";
+import { alertCircleOutline } from "ionicons/icons";
+import useSWR from "swr";
+import TopicList from "../components/TopicList";
+import { fetcher } from "../lib/api";
+import { Topic } from "../types";
 
 const AdviceListPage: React.FC = () => {
+  const { data, error } = useSWR<Topic[]>(
+    "/api/getTopicList?type=advice",
+    fetcher
+  );
+  const isLoading = !data && !error;
+
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Consejos</IonTitle>
+          <IonTitle>Advice</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar>
-            <IonTitle size="large">Consejos</IonTitle>
+            <IonTitle size="large">Advice</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
+        {data && <TopicList loading={isLoading} topics={data as Topic[]} />}
+        <IonToast
+          icon={alertCircleOutline}
+          color="danger"
+          isOpen={error !== undefined}
+          message="Failed to load items."
+          duration={1500}
+        />
       </IonContent>
     </IonPage>
   );

src/pages/ArticlePage.tsx

@@ -13,10 +13,32 @@ import {
   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 omit from "lodash/omit";
+import SkeletonText from "../components/SkeletonText";
 
-const ArticlePage: React.FC<RouteComponentProps<{ slug: string }>> = ({
+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>
@@ -24,25 +46,35 @@ const ArticlePage: React.FC<RouteComponentProps<{ slug: string }>> = ({
           <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
-          <IonTitle>{match.params.slug}</IonTitle>
+          <IonTitle>
+            {data ? getBlockTitle(block, data) : <SkeletonText />}
+          </IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonCard>
-          <img
-            alt="Silhouette of mountains"
-            src="https://ionicframework.com/docs/img/demos/card-media.png"
-          />
-          <IonCardHeader>
-            <IonCardTitle>{match.params.slug}</IonCardTitle>
-            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
-          </IonCardHeader>
-
-          <IonCardContent>
-            Here's a small text description for the card content. Nothing more,
-            nothing less.
-          </IonCardContent>
-        </IonCard>
+        <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>
   );

src/pages/Home.tsx

@@ -5,8 +5,6 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import "../components/ListComponent";
-import ListComponent from "../components/ListComponent";
 
 const Home: React.FC = () => {
   return (
@@ -29,11 +27,6 @@ const Home: React.FC = () => {
             printing and typesetting industry. Lorem Ipsum.
           </p>
         </div>
-
-        <ListComponent
-          laws={["Articulo 1", "Articulo 2"]}
-          title="Articulos Recientes"
-        />
       </IonContent>
     </IonPage>
   );

src/pages/LawListPage.tsx

@@ -9,7 +9,7 @@ import {
 } from "@ionic/react";
 import { alertCircleOutline } from "ionicons/icons";
 import useSWR from "swr";
-import ListComponent from "../components/ListComponent";
+import TopicList from "../components/TopicList";
 import { fetcher } from "../lib/api";
 import { Topic } from "../types";
 
@@ -33,15 +33,11 @@ const LawListPage: React.FC = () => {
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent
-          loading={isLoading}
-          laws={data ? data.map((item) => item.name) : []}
-        />
-
+        {data && <TopicList loading={isLoading} topics={data as Topic[]} />}
         <IonToast
           icon={alertCircleOutline}
           color="danger"
-          isOpen={error}
+          isOpen={error !== undefined}
           message="Failed to load items."
           duration={1500}
         />

src/theme/global.css

@@ -0,0 +1,19 @@
+.notion-nav-header,
+.notion-title,
+.notion-header {
+  display: none !important;
+}
+
+.notion-page {
+  width: 100% !important;
+  padding: 0px 0px 0px 0px !important;
+}
+
+main.notion-page-no-cover {
+  padding-top: 0px !important;
+  margin-top: 0px !important;
+}
+
+.notion-blank {
+  display: none !important;
+}

src/theme/variables.css

@@ -76,12 +76,8 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-tint: #f5f6f9;
 }
 
+/*
 @media (prefers-color-scheme: dark) {
-  /*
-   * Dark Colors
-   * -------------------------------------------
-   */
-
   body {
     --ion-color-primary: #428cff;
     --ion-color-primary-rgb: 66,140,255;
@@ -147,11 +143,6 @@ http://ionicframework.com/docs/theming/ */
     --ion-color-light-tint: #383a3e;
   }
 
-  /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
-
   .ios body {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0,0,0;
@@ -190,12 +181,6 @@ http://ionicframework.com/docs/theming/ */
     --ion-toolbar-border-color: var(--ion-color-step-250);
   }
 
-
-  /*
-   * Material Design Dark Theme
-   * -------------------------------------------
-   */
-
   .md body {
     --ion-background-color: #121212;
     --ion-background-color-rgb: 18,18,18;
@@ -234,3 +219,4 @@ http://ionicframework.com/docs/theming/ */
     --ion-card-background: #1e1e1e;
   }
 }
+*/