Convertir to typescript

2024-02-20 16:52:51 +00:00
parent 3b726d6892
commit 2af0b6e6b7
22 changed files with 483 additions and 395 deletions
@@ -0,0 +1,65 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useParams } from 'react-router-dom';
+
+import Store from '../../store';
+import * as actions from '../../store/actions';
+import * as selectors from '../../store/selectors';
+import { ListItem, TodoListItem } from '../../mock';
+
+type ListDetailParams = {
+  listId: string;
+};
+
+const ListItems = ({ list }: {list: TodoListItem}) => {
+  return (
+    <IonList>
+      {(list?.items || []).map((item, key) => (
+        <ListItemEntry list={list} item={item} key={key} />
+      ))}
+    </IonList>
+  );
+};
+
+const ListItemEntry = ({ list, item }: {list: TodoListItem, item: ListItem}) => (
+  <IonItem onClick={() => actions.setDone(list, item, !item.done)}>
+    <IonLabel>{item.name}</IonLabel>
+    <IonCheckbox checked={item.done || false} slot="end" />
+  </IonItem>
+);
+
+const ListDetail = () => {
+  const lists = Store.useState(selectors.selectLists);
+  const params = useParams<ListDetailParams>();
+  const { listId } = params;
+  const loadedList = lists.find(l => l.id === listId);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/tabs/lists" />
+          </IonButtons>
+          <IonTitle>{loadedList?.name}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        {loadedList && <ListItems list={loadedList} />}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default ListDetail;