[feat] Add multiple categories

src/pages/AdviceListPage.tsx

@@ -8,17 +8,24 @@ import {
 } from "@ionic/react";
 import { alertCircleOutline } from "ionicons/icons";
 import useSWR from "swr";
-import DropdownComponent from "../components/DropdownComponent";
 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",
+  const { data: paternidad, error: paternidadError } = useSWR<Topic[]>(
+    "/api/getTopicList?type=advice&category=Paternidad",
     fetcher
   );
-  const isLoading = !data && !error;
+  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>
@@ -34,9 +41,19 @@ const AdviceListPage: React.FC = () => {
           </IonToolbar>
         </IonHeader>
         <TopicList
-          title="Parentesco"
-          loading={isLoading}
-          topics={data ? (data as Topic[]) : []}
+          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}