Convertir to typescript

components/pages/Feed.tsx

@@ -15,10 +15,19 @@ import {
 import Notifications from './Notifications';
 import { useState } from 'react';
 import { notificationsOutline } from 'ionicons/icons';
-import { getHomeItems } from '../../store/selectors';
+import { selectHomeItems } from '../../store/selectors';
 import Store from '../../store';
 
-const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
+type FeedCardProps = {
+  title: string;
+  type: string;
+  text: string;
+  author: string;
+  authorAvatar: string;
+  image: string;
+}
+
+const FeedCard = ({ title, type, text, author, authorAvatar, image }: FeedCardProps) => (
   <Card className="my-4 mx-auto">
     <div className="h-32 w-full relative">
       <img className="rounded-t-xl object-cover min-w-full min-h-full max-w-full max-h-full" src={image} alt="" />
@@ -38,7 +47,7 @@ const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
 );
 
 const Feed = () => {
-  const homeItems = Store.useState(getHomeItems);
+  const homeItems = Store.useState(selectHomeItems);
   const [showNotifications, setShowNotifications] = useState(false);
 
   return (

components/pages/ListDetail.tsx

@@ -16,8 +16,13 @@ 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';
 
-const ListItems = ({ list }) => {
+type ListDetailParams = {
+  listId: string;
+};
+
+const ListItems = ({ list }: {list: TodoListItem}) => {
   return (
     <IonList>
       {(list?.items || []).map((item, key) => (
@@ -27,16 +32,16 @@ const ListItems = ({ list }) => {
   );
 };
 
-const ListItemEntry = ({ list, item }) => (
+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 = ({ match }) => {
-  const lists = Store.useState(selectors.getLists);
-  const params = useParams();
+const ListDetail = () => {
+  const lists = Store.useState(selectors.selectLists);
+  const params = useParams<ListDetailParams>();
   const { listId } = params;
   const loadedList = lists.find(l => l.id === listId);
 
@@ -47,11 +52,11 @@ const ListDetail = ({ match }) => {
           <IonButtons slot="start">
             <IonBackButton defaultHref="/tabs/lists" />
           </IonButtons>
-          <IonTitle>{loadedList.name}</IonTitle>
+          <IonTitle>{loadedList?.name}</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <ListItems list={loadedList} />
+        {loadedList && <ListItems list={loadedList} />}
       </IonContent>
     </IonPage>
   );

components/pages/Lists.tsx

@@ -1,3 +1,4 @@
+import { TodoListItem } from '../../mock';
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
@@ -12,14 +13,14 @@ import {
   IonList,
 } from '@ionic/react';
 
-const ListEntry = ({ list, ...props }) => (
+const ListEntry = ({ list }: {list: TodoListItem}) => (
   <IonItem routerLink={`/tabs/lists/${list.id}`} className="list-entry">
     <IonLabel>{list.name}</IonLabel>
   </IonItem>
 );
 
-const AllLists = ({ onSelect }) => {
-  const lists = Store.useState(selectors.getLists);
+const AllLists = () => {
+  const lists = Store.useState(selectors.selectLists);
 
   return (
     <>

components/pages/Notifications.tsx

@@ -12,11 +12,12 @@ import {
   IonLabel,
 } from '@ionic/react';
 import Store from '../../store';
-import { getNotifications } from '../../store/selectors';
+import { selectNotifications } from '../../store/selectors';
 
 import { close } from 'ionicons/icons';
+import { NotificationItem } from '../../mock';
 
-const NotificationItem = ({ notification }) => (
+const NotificationItem = ({ notification }: {notification: NotificationItem}) => (
   <IonItem>
     <IonLabel>{notification.title}</IonLabel>
     <IonNote slot="end">{notification.when}</IonNote>
@@ -26,8 +27,8 @@ const NotificationItem = ({ notification }) => (
   </IonItem>
 );
 
-const Notifications = ({ open, onDidDismiss }) => {
-  const notifications = Store.useState(getNotifications);
+const Notifications = ({ open, onDidDismiss }: {open: boolean, onDidDismiss: () => void}) => {
+  const notifications = Store.useState(selectNotifications);
 
   return (
     <IonModal isOpen={open} onDidDismiss={onDidDismiss}>

components/pages/Settings.tsx

@@ -15,7 +15,7 @@ import * as selectors from '../../store/selectors';
 import { setSettings } from '../../store/actions';
 
 const Settings = () => {
-  const settings = Store.useState(selectors.getSettings);
+  const settings = Store.useState(selectors.selectSettings);
 
   return (
     <IonPage>

components/ui/Card.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
-const Card = ({ children, className, ...props }) => (
-  <div {...props} className={classNames('max-w-xl', className)}>
+const Card = ({ children, className }: {children: React.ReactElement[], className: string}) => (
+  <div className={classNames('max-w-xl', className)}>
     <div className="bg-white shadow-md rounded-b-xl dark:bg-black">{children}</div>
   </div>
 );