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

src/App.tsx

@@ -10,10 +10,8 @@ import {
   setupIonicReact,
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import { ellipse, square, triangle } from "ionicons/icons";
-import Tab1 from "./pages/Tab1";
-import Tab2 from "./pages/home";
-import Tab3 from "./pages/Tab3";
+import { ellipse, home } from "ionicons/icons";
+import Home from "./pages/Home";
 
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css";
@@ -33,6 +31,9 @@ import "@ionic/react/css/display.css";
 
 /* Theme variables */
 import "./theme/variables.css";
+import AdviceListPage from "./pages/AdviceListPage";
+import LawListPage from "./pages/LawListPage";
+import ArticlePage from "./pages/ArticlePage";
 
 setupIonicReact();
 
@@ -41,31 +42,32 @@ const App: React.FC = () => (
     <IonReactRouter>
       <IonTabs>
         <IonRouterOutlet>
-          <Route exact path="/tab1">
-            <Tab1 />
+          <Route exact path="/home">
+            <Home />
           </Route>
-          <Route exact path="/tab2">
-            <Tab2 />
+          <Route path="/advice">
+            <AdviceListPage />
           </Route>
-          <Route path="/tab3">
-            <Tab3 />
+          <Route path="/laws">
+            <LawListPage />
           </Route>
+          <Route path="/article/:slug" component={ArticlePage} />
           <Route exact path="/">
-            <Redirect to="/tab1" />
+            <Redirect to="/home" />
           </Route>
         </IonRouterOutlet>
         <IonTabBar slot="bottom">
-          <IonTabButton tab="tab1" href="/tab1">
-            <IonIcon icon={triangle} />
-            <IonLabel>Tab 1</IonLabel>
+          <IonTabButton tab="home" href="/home">
+            <IonIcon icon={home} />
+            <IonLabel>Home</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="tab2" href="/tab2">
+          <IonTabButton tab="advice" href="/advice">
             <IonIcon icon={ellipse} />
-            <IonLabel>Tab 2</IonLabel>
+            <IonLabel>Advice</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="tab3" href="/tab3">
-            <IonIcon icon={square} />
-            <IonLabel>Tab 3</IonLabel>
+          <IonTabButton tab="laws" href="/laws">
+            <IonIcon icon={ellipse} />
+            <IonLabel>Laws</IonLabel>
           </IonTabButton>
         </IonTabBar>
       </IonTabs>

src/components/ListComponent.tsx

@@ -1,10 +1,4 @@
-import {
-  IonContent,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-} from "@ionic/react";
+import { IonContent, IonItem, IonLabel, IonListHeader } from "@ionic/react";
 import "../components/ListComponent.css";
 
 const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
@@ -18,30 +12,13 @@ const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
         </IonListHeader>
       ) : null}
 
-      {laws.map((LawName: string) => {
+      {laws.map((lawName: string) => {
         return (
-          <IonItem href="#">
-            <p className="ListItemText">{LawName}</p>
+          <IonItem routerLink={`/article/${encodeURIComponent(lawName)}`}>
+            <p className="ListItemText">{lawName}</p>
           </IonItem>
         );
       })}
-
-      {/*
-      <IonList className="list" lines="full">
-        <IonItem href="#">
-          <p className="ListItemText">Ley #1</p>
-        </IonItem>
-        <IonItem href="#">
-          <p className="ListItemText">Ley #1</p>
-        </IonItem>
-        <IonItem href="#">
-          <p className="ListItemText">Ley #1</p>
-        </IonItem>
-        <IonItem href="#">
-          <p className="ListItemText">Ley #1</p>
-        </IonItem>
-      </IonList>
-      */}
     </IonContent>
   );
 };

src/pages/AdviceListPage.tsx

@@ -0,0 +1,30 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+
+const AdviceListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Consejos</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Consejos</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AdviceListPage;

src/pages/ArticlePage.tsx

@@ -0,0 +1,51 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const ArticlePage: React.FC<RouteComponentProps<{ slug: string }>> = ({
+  match,
+}) => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>{match.params.slug}</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>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default ArticlePage;

src/pages/home.tsx → src/pages/Home.tsx

@@ -5,12 +5,10 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import ExploreContainer from "../components/ExploreContainer";
-import "./home.css";
 import "../components/ListComponent";
 import ListComponent from "../components/ListComponent";
 
-const Tab2: React.FC = () => {
+const Home: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
@@ -32,10 +30,13 @@ const Tab2: React.FC = () => {
           </p>
         </div>
 
-        <ListComponent laws={["eliam", "Sergio"]} title="Articulos Recientes" />
+        <ListComponent
+          laws={["Articulo 1", "Articulo 2"]}
+          title="Articulos Recientes"
+        />
       </IonContent>
     </IonPage>
   );
 };
 
-export default Tab2;
+export default Home;

src/pages/LawListPage.tsx

@@ -0,0 +1,30 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+
+const LawListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Leyes</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Leyes</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ListComponent laws={["Law 1", "Law 2"]} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default LawListPage;

src/pages/Tab1.tsx

@@ -1,26 +0,0 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import './Tab1.css';
-import '../components/ListComponent'
-import ListComponent from '../components/ListComponent';
-
-const Tab1: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>List component test!</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">This is a list</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-       <ListComponent laws={[]}/>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab1;

src/pages/Tab3.tsx

@@ -1,25 +0,0 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
-import './Tab3.css';
-
-const Tab3: React.FC = () => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Tab 3</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Tab 3</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <ExploreContainer name="Tab 3 page" />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab3;