Merge branch 'matteing-sprint-1' of sergio.mattei/RenacerSocial into main

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,11 +23,15 @@
     "@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",
@@ -71,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/ListComponent.css

@@ -1,10 +1,13 @@
-
 .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

@@ -1,27 +0,0 @@
-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

@@ -0,0 +1,12 @@
+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

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

@@ -0,0 +1,53 @@
+import { IonContent, IonItem, IonLabel, 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 }) => {
+  return (
+    <IonContent>
+      {title ? (
+        <IonListHeader>
+          <IonLabel>{title}</IonLabel>
+        </IonListHeader>
+      ) : null}
+
+      {loading && <ListSkeleton />}
+
+      {!loading &&
+        topics.map((topic: Topic) => {
+          return (
+            <IonItem
+              key={topic.blockId}
+              routerLink={`/article/${topic.blockId}`}
+            >
+              <p className="ListItemText">{topic.name}</p>
+            </IonItem>
+          );
+        })}
+    </IonContent>
+  );
+};
+export default TopicList;

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/AdviceListPage.tsx

@@ -3,38 +3,43 @@ import {
   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, 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>
-
-        <DropdownComponent category={categories} />
+        {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
-          items={["Articulo 1", "Articulo 2"]}
-          title="Articulos Recientes"
-        />
       </IonContent>
     </IonPage>
   );

src/pages/LawListPage.tsx

@@ -1,13 +1,25 @@
 import {
   IonContent,
   IonHeader,
+  IonLoading,
   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>
@@ -21,7 +33,14 @@ const LawListPage: React.FC = () => {
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ListComponent items={["Law 1", "Law 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/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;
   }
 }
+*/

src/types.ts

@@ -1,4 +1,8 @@
-export interface Category {
-    name: string;
-    listItems: string[];
-}
+export interface Topic {
+  blockId: string;
+  name: string;
+}
+
+export interface Error {
+  status: string;
+}