Merge branch 'main' of https://git.ccom.uprrp.edu/sergio.mattei/RenacerSocial into eliam-sprint-1

# Conflicts:
#	src/components/DropdownComponent.tsx
#	src/components/ListComponent.tsx
#	src/pages/AdviceListPage.tsx

.expo/README.md

+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

capacitor.config.ts

-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;

cypress.config.ts

+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3001",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/eduardo.cy.ts

+// I will E2E test the article page.
+// User visits home -> User clicks on "laws or advice" -> List renders with 200

cypress/e2e/eliam.cy.ts

+// I will E2E test the article page.
+// User visits home -> User clicks on "laws or advice" -> Article page contains the title
+
+
+describe("Our app", () => {
+    beforeEach(() => {
+      cy.intercept(
+        { pathname: "/api/getTopicList" },
+        {
+          fixture: "topics",
+        }
+      ).as("getTopicList");
+  
+      cy.intercept(
+        { pathname: "/api/getTopic" },
+        {
+          fixture: "article",
+        }
+      ).as("getTopic");
+  
+      cy.viewport("iphone-x");
+      cy.visit("/");
+    });
+
+    it("shows the home page", () => {
+        cy.visit("/");
+        cy.contains("Bienvenidos");
+    });
+
+    it("clicks and loads the advice tab", () => {
+        cy.get("#tab-button-advice").first().click();
+        cy.wait("@getTopicList");
+    })
+    it("clicks and loads advice info", () => {
+        cy.get("#tab-button-advice").first().click();
+        cy.wait("@getTopicList");
+        cy.get(".item").first().click();
+        cy.wait("@getTopic");
+        cy.contains("Adopción");
+        cy.contains("Enmendado en el 1939");
+    })
+    it("clicks and loads law info", () => {
+        cy.get("#tab-button-laws").first().click();
+        cy.wait("@getTopicList");
+        cy.get(".item").first().click();
+        cy.wait("@getTopic");
+        cy.contains("Adopción");
+        cy.contains("Enmendado en el 1939");
+    })
+})

cypress/e2e/sergio.cy.ts

+describe("Our app", () => {
+  beforeEach(() => {
+    cy.intercept(
+      { pathname: "/api/getTopicList" },
+      {
+        fixture: "topics",
+      }
+    ).as("getTopicList");
+
+    cy.intercept(
+      { pathname: "/api/getTopic" },
+      {
+        fixture: "article",
+      }
+    ).as("getTopic");
+
+    cy.viewport("iphone-x");
+    cy.visit("/");
+  });
+
+  it("shows the home page", () => {
+    cy.visit("/");
+    cy.contains("Bienvenidos");
+  });
+
+  it("shows a video in the home page", () => {
+    cy.visit("/");
+    cy.get("iframe").should("be.visible");
+  });
+
+  it("shows the about page", () => {
+    cy.visit("/about");
+    cy.contains("Renacer Social");
+  });
+
+  it("shows the individual service pages", () => {
+    cy.visit("/about");
+    cy.get(".item").first().click();
+    cy.contains("Casita de Paz");
+  });
+
+  it("shows the advice pages", () => {
+    cy.visit("/advice");
+    // Wait until the request to the intercept is completed.
+    cy.wait("@getTopicList");
+    cy.get(".item").first().click();
+    cy.wait("@getTopic");
+  });
+
+  it("allows exiting the individual service pages", () => {
+    cy.visit("/about");
+    cy.get(".item").first().click();
+    cy.get(".back-button-has-icon-only").first().click();
+    cy.contains("Servicios");
+  });
+});

cypress/fixtures/topics.json

+[
+  {
+    "blockId": "07ffbf26-babe-4c6a-b046-c7eb6d5c1a7f",
+    "name": "Pasa tiempo con tus hijos"
+  },
+  {
+    "blockId": "754d8ef3-14ae-4af6-a8c3-4ac4ede4d49d",
+    "name": "10 consejos para un matrimonio feliz"
+  },
+  {
+    "blockId": "d9fbaf7c-8f89-43b3-945c-927ed90e098b",
+    "name": "Busca ayuda si eres abusado/abusada"
+  }
+]

cypress/support/commands.ts

+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

ios/App/App.xcodeproj/project.pbxproj

 				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;
 				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

 	<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

     "@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",
+    "swr": "^1.3.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
     "workbox-streams": "^5.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "cypress": "cypress open"
   },
   "eslintConfig": {
     "extends": [
   "devDependencies": {
     "@capacitor/cli": "4.4.0",
     "@ionic/lab": "3.2.15",
+    "@types/lodash": "^4.14.191",
+    "cypress": "^12.1.0",
     "husky": "^8.0.0",
     "pretty-quick": "^3.1.3"
   },

src/App.tsx

   setupIonicReact,
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import { ellipse, home } from "ionicons/icons";
+import {
+  ellipse,
+  informationCircleSharp,
+  bookSharp,
+  appsSharp,
+  home,
+  peopleCircleSharp,
+} from "ionicons/icons";
 import Home from "./pages/Home";
 
 /* Core CSS required for Ionic components to work properly */
 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";
+import AboutListPage from "./pages/AboutListPage";
+import CasitaPage from "./pages/services/CasitaPage";
+import CrecemosPage from "./pages/services/CrecemosPage";
+import LazosPage from "./pages/services/LazosPage";
+import SupervisadasPage from "./pages/services/SupervisadasPage";
 
 setupIonicReact();
 
           <Route exact path="/home">
             <Home />
           </Route>
+
           <Route path="/advice">
             <AdviceListPage />
           </Route>
+
           <Route path="/laws">
             <LawListPage />
           </Route>
-          <Route path="/article/:slug" component={ArticlePage} />
+
+          <Route path="/article/:articleId" component={ArticlePage} />
+
+          <Route path="/services/lazos">
+            <LazosPage />
+          </Route>
+
+          <Route path="/services/crecemos">
+            <CrecemosPage />
+          </Route>
+
+          <Route path="/services/supervisadas">
+            <SupervisadasPage />
+          </Route>
+
+          <Route path="/about">
+            <AboutListPage />
+          </Route>
+
+          <Route path="/services/casita">
+            <CasitaPage />
+          </Route>
+
           <Route exact path="/">
             <Redirect to="/home" />
           </Route>
         </IonRouterOutlet>
+
         <IonTabBar slot="bottom">
           <IonTabButton tab="home" href="/home">
             <IonIcon icon={home} />
             <IonLabel>Home</IonLabel>
           </IonTabButton>
+
           <IonTabButton tab="advice" href="/advice">
-            <IonIcon icon={ellipse} />
+            <IonIcon icon={peopleCircleSharp} />
             <IonLabel>Advice</IonLabel>
           </IonTabButton>
+
           <IonTabButton tab="laws" href="/laws">
-            <IonIcon icon={ellipse} />
+            <IonIcon icon={bookSharp} />
             <IonLabel>Laws</IonLabel>
           </IonTabButton>
+          <IonTabButton tab="about" href="/about">
+            <IonIcon icon={informationCircleSharp} />
+            <IonLabel>About</IonLabel>
+          </IonTabButton>
         </IonTabBar>
       </IonTabs>
     </IonReactRouter>

src/components/DropdownComponent.css

-.accordion-list-container {
-    width: 100%;
-}

src/components/DropdownComponent.tsx

-import {
-  IonAccordion,
-  IonAccordionGroup,
-  IonItem,
-  IonLabel,
-} from "@ionic/react";
-import ListComponent from "../components/ListComponent";
-import { Category } from "../types";
-import "./DropdownComponent.css";
-
-const DropdownComponent: React.FC<{
-  category: Category[];
-}> = (props) => {
-  const category = props.category;
-  return (
-    <IonAccordionGroup>
-      {category.map((catItem: Category, index) => {
-        return (
-          <IonAccordion value={`${index}`}>
-            <IonItem slot="header" color="light">
-              <IonLabel>{catItem.name}</IonLabel>
-            </IonItem>
-            <IonItem slot="content">
-              <div className="accordion-list-container">
-                <ListComponent items={catItem.listItems} />
-              </div>
-            </IonItem>
-          </IonAccordion>
-        );
-      })}
-    </IonAccordionGroup>
-  );
-};
-export default DropdownComponent;

src/components/ListComponent.css

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

src/components/ListComponent.tsx

-import { IonItem, IonLabel, IonList, IonListHeader } from "@ionic/react";
-import "../components/ListComponent.css";
-
-const ListComponent: React.FC<{ title?: string; items: string[] }> = (
-  props
-) => {
-  const title = props.title;
-  const items = props.items;
-  return (
-    <IonList>
-      {title ? (
-        <IonListHeader>
-          <IonLabel>{title}</IonLabel>
-        </IonListHeader>
-      ) : null}
-
-      {items.map((itemName: string) => {
-        return (
-          <IonItem routerLink={`/article/${encodeURIComponent(itemName)}`}>
-            <p className="ListItemText">{itemName}</p>
-          </IonItem>
-        );
-      })}
-    </IonList>
-  );
-};
-export default ListComponent;

src/components/SkeletonText.tsx

+import { IonSkeletonText } from "@ionic/react";
+import React from "react";
+
+function skeletonRange() {
+  return Math.floor(Math.random() * (75 - 25 + 1)) + 25;
+}
+
+export default function SkeletonText() {
+  return (
+    <IonSkeletonText animated={true} style={{ width: `${skeletonRange()}%` }} />
+  );
+}

src/components/TopicList.css

+.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/TopicList.tsx

+import {
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+} from "@ionic/react";
+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 ListSkeleton({ items = 5 }: { items?: number }) {
+  return (
+    <>
+      {Array(items)
+        .fill(0)
+        .map((_, i) => (
+          <IonItem key={i}>
+            <SkeletonText />
+          </IonItem>
+        ))}
+    </>
+  );
+}
+
+const TopicList: React.FC<{
+  title?: string;
+  topics: Topic[];
+  loading?: boolean;
+}> = ({ title, topics, loading }) => {
+  console.log(topics);
+  return (
+    <IonList>
+      {title ? (
+        <IonListHeader>
+          <IonLabel>{title}</IonLabel>
+        </IonListHeader>
+      ) : null}
+
+      {loading && <ListSkeleton />}
+
+      {!loading &&
+        topics &&
+        topics.map((topic: Topic) => {
+          return (
+            <IonItem
+              key={topic.blockId}
+              routerLink={`/article/${topic.blockId}`}
+            >
+              <p className="ListItemText">{topic.name}</p>
+            </IonItem>
+          );
+        })}
+    </IonList>
+  );
+};
+export default TopicList;

src/config.ts

+export const API_URL = process.env.API_URL ?? "http://localhost:3000";

src/lib/api.ts

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

src/pages/AboutListPage.tsx

+import {
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+
+const AboutListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>About</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">About</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <div className="video">
+            <iframe
+              src="https://www.youtube.com/embed/MRo8FR2l6VM"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            ></iframe>
+          </div>
+          <h5>Bienvenidos</h5>
+          <p>
+            Renacer Social ha iniciado una campaña de orientación a la comunidad
+            para que los niños y niñas puedan denunciar su situación de
+            maltrato. Con una seña discreta que consta de una “X” formada frente
+            al torso con los dedos índice, el menor puede dar alerta de su
+            situación de maltrato. Es responsabilidad de todos denunciar la
+            posible situación de maltrato si vemos a un menor realizar dicha
+            seña.
+          </p>
+          <IonList>
+            <IonListHeader>
+              <IonLabel>Servicios</IonLabel>
+            </IonListHeader>
+            <IonItem routerLink={`/services/casita`}>
+              <p className="ListItemText">Casita de Paz</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Crecemos`}>
+              <p className="ListItemText">Crecemos</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Lazos`}>
+              <p className="ListItemText">Proyecto Lazos</p>
+            </IonItem>
+            <IonItem routerLink={`/services/Supervisadas`}>
+              <p className="ListItemText">Visitas Supervisadas</p>
+            </IonItem>
+          </IonList>
+        </IonContent>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AboutListPage;

src/pages/AdviceListPage.tsx

   IonHeader,
   IonPage,
   IonTitle,
+  IonToast,
   IonToolbar,
 } from "@ionic/react";
-import DropdownComponent from "../components/DropdownComponent";
-import "../types";
-
-const categories = [
-  {
-    name: "Paternidad",
-    listItems: ["Consejo de Paternidad 1", "Consejo de Paternidad 2"],
-  },
-  {
-    name: "Abuso Sexual",
-    listItems: ["Consejo de Abuso Sexual 1", "Consejo de Abuso Sexual 2"],
-  },
-];
+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: paternidad, error: paternidadError } = useSWR<Topic[]>(
+    "/api/getTopicList?type=advice&category=Paternidad",
+    fetcher
+  );
+  const { data: matrimonio, error: matrimonioError } = useSWR<Topic[]>(
+    "/api/getTopicList?type=advice&category=Matrimonio",
+    fetcher
+  );
+  const { data: abuso, error: abusoError } = useSWR<Topic[]>(
+    "/api/getTopicList?type=advice&category=Abuso%20Sexual",
+    fetcher
+  );
+  const error = paternidadError || matrimonioError || abusoError;
+
   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>
-        <DropdownComponent category={categories} />
+        <TopicList
+          title="Paternidad"
+          loading={!paternidad && !paternidadError}
+          topics={paternidad ? (paternidad as Topic[]) : []}
+        />
+        <TopicList
+          title="Matrimonio"
+          loading={!matrimonio && !matrimonioError}
+          topics={matrimonio ? (matrimonio as Topic[]) : []}
+        />
+        <TopicList
+          title="Abuso Sexual"
+          loading={!abuso && !abusoError}
+          topics={abuso ? (abuso as Topic[]) : []}
+        />
+        <IonToast
+          icon={alertCircleOutline}
+          color="danger"
+          isOpen={error !== undefined}
+          message="Failed to load items."
+          duration={1500}
+        />
       </IonContent>
     </IonPage>
   );
 };
 
-export default AdviceListPage;
+export default AdviceListPage;

src/pages/ArticlePage.tsx

   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<{ 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>
           <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

   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import "../components/ListComponent";
-import ListComponent from "../components/ListComponent";
 
 const Home: React.FC = () => {
   return (
           </IonToolbar>
         </IonHeader>
         <div className="ion-padding">
-          <h5>Bienvenidos</h5>
+          <div className="video">
+            <iframe
+              src="https://www.youtube.com/embed/xCtgekNpxI4"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            ></iframe>
+          </div>
+          <h2>Bienvenidos</h2>
           <p>
             Somos una organización Lorem Ipsum is simply dummy text of the
             printing and typesetting industry. Lorem Ipsum.
           </p>
-        </div>
 
-        <ListComponent
-          items={["Articulo 1", "Articulo 2"]}
-          title="Articulos Recientes"
-        />
+          <h3>Si se encuentra en peligro llame al 9-1-1 o al 787-343-2020</h3>
+          <p>
+            Si usted se encuentra en peligro inminente, llame a la Policía de
+            Puerto Rico al 9-1-1 o al 787-343-2020. Debe buscar protección para
+            usted y los suyos de manera inmediata. NO ESPERE.
+          </p>
+        </div>
       </IonContent>
     </IonPage>
   );

src/pages/LawListPage.tsx

   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 LawListPage: React.FC = () => {
+  const { data, error } = useSWR<Topic[]>(
+    "/api/getTopicList?type=laws",
+    fetcher
+  );
+  const isLoading = !data && !error;
+
   return (
     <IonPage>
       <IonHeader>
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent items={["Law 1", "Law 2"]} />
+        <TopicList loading={isLoading} topics={data ? (data as Topic[]) : []} />
+        <IonToast
+          icon={alertCircleOutline}
+          color="danger"
+          isOpen={error !== undefined}
+          message="Failed to load items."
+          duration={1500}
+        />
       </IonContent>
     </IonPage>
   );

src/pages/services/CasitaPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const CasitaPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Casita de Paz</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Romper ciclos negativos</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CasitaPage;

src/pages/services/CrecemosPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const CrecemosPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Crecemos</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Educacion Co-parental</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default CrecemosPage;

src/pages/services/LazosPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const LazosPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Proyecto de Lazos</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>Maltrato de Parejas</IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default LazosPage;

src/pages/services/SupervisadasPage.tsx

+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const SupervisadasPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>Servicios</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>Visitas Supervisadas</IonCardTitle>
+            <IonCardSubtitle></IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Espacio tranquilo y seguro para visitas supervisadas
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default SupervisadasPage;

src/theme/global.css

+.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;
+}
+
+.video {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}

src/theme/variables.css

   --ion-color-light-tint: #f5f6f9;
 }
 
+/*
 @media (prefers-color-scheme: dark) {
-  /*
-   * Dark Colors
-   * -------------------------------------------
-   */
-
   body {
     --ion-color-primary: #428cff;
     --ion-color-primary-rgb: 66,140,255;
     --ion-color-light-tint: #383a3e;
   }
 
-  /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
-
   .ios body {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0,0,0;
     --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;
     --ion-card-background: #1e1e1e;
   }
 }
+*/

src/types.ts

-export interface Category {
-    name: string;
-    listItems: string[];
-}
+export interface Topic {
+  blockId: string;
+  name: string;
+}
+
+export interface Error {
+  status: string;
+}