[feat] Add proof of concept Notion integration

package-lock.json

@@ -33,6 +33,7 @@
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "^5.0.0",
+        "swr": "^1.3.0",
         "typescript": "^4.1.3",
         "web-vitals": "^0.2.4",
         "workbox-background-sync": "^5.1.4",
@@ -14676,6 +14677,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -26863,6 +26872,12 @@
         }
       }
     },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "requires": {}
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
+    "swr": "^1.3.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",

src/components/ListComponent.tsx

@@ -14,7 +14,10 @@ const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
 
       {laws.map((lawName: string) => {
         return (
-          <IonItem routerLink={`/article/${encodeURIComponent(lawName)}`}>
+          <IonItem
+            key={lawName}
+            routerLink={`/article/${encodeURIComponent(lawName)}`}
+          >
             <p className="ListItemText">{lawName}</p>
           </IonItem>
         );

src/config.ts

@@ -0,0 +1 @@
+export const API_URL = process.env.API_URL ?? "http://localhost:3000";

src/lib/api.ts

@@ -0,0 +1,4 @@
+import { API_URL } from "../config";
+
+export const fetcher = (url: string) =>
+  fetch(`${API_URL}${url}`).then((r) => r.json());

src/pages/LawListPage.tsx

@@ -1,13 +1,30 @@
 import {
   IonContent,
   IonHeader,
+  IonLoading,
   IonPage,
   IonTitle,
+  IonToast,
   IonToolbar,
 } from "@ionic/react";
+import { alertCircleOutline } from "ionicons/icons";
+import { useEffect } from "react";
+import useSWR from "swr";
 import ListComponent from "../components/ListComponent";
+import { fetcher } from "../lib/api";
+
+interface Topic {
+  blockId: string;
+  name: string;
+}
 
 const LawListPage: React.FC = () => {
+  const { data, error } = useSWR<Topic[]>(
+    "/api/getTopicList?type=laws",
+    fetcher
+  );
+  const isLoading = !data && !error;
+
   return (
     <IonPage>
       <IonHeader>
@@ -21,7 +38,19 @@ const LawListPage: React.FC = () => {
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent laws={["Law 1", "Law 2"]} />
+        {data && <ListComponent laws={data.map((item) => item.name)} />}
+        <IonLoading
+          isOpen={isLoading}
+          duration={isLoading ? 50 : undefined}
+          message="Loading..."
+        />
+        <IonToast
+          icon={alertCircleOutline}
+          color="danger"
+          isOpen={error}
+          message="Failed to load items."
+          duration={1500}
+        />
       </IonContent>
     </IonPage>
   );