Convertir to typescript

Author: leog

components/AppShell.jsx renamed to components/AppShell.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/Feed.jsx renamed to components/pages/Feed.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/ListDetail.jsx renamed to components/pages/ListDetail.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/Lists.jsx renamed to components/pages/Lists.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/Notifications.jsx renamed to components/pages/Notifications.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/pages/Settings.jsx renamed to components/pages/Settings.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>
 );

components/pages/Tabs.jsx renamed to components/pages/Tabs.tsx

@@ -4,8 +4,19 @@ export const images = [
   '/img/c3.avif',
 ];
 
-export const homeItems = [
+export type HomeItem = {
+  id: number;
+  title: string;
+  type: string;
+  text: string;
+  author: string;
+  authorAvatar: string;
+  image: string;
+};
+
+export const homeItems: HomeItem[] = [
   {
+    id: 1,
     title: 'Exploring Maui',
     type: 'Blog',
     text: 'We just got back from a trip to Maui, and we had a great time...',
@@ -14,6 +25,7 @@ export const homeItems = [
     image: images[0],
   },
   {
+    id: 2,
     title: 'Arctic Adventures',
     type: 'Blog',
     text:
@@ -23,6 +35,7 @@ export const homeItems = [
     image: images[1],
   },
   {
+    id: 3,
     title: 'Frolicking in the Faroe Islands',
     type: 'Blog',
     text:
@@ -33,15 +46,32 @@ export const homeItems = [
   },
 ];
 
-export const notifications = [
-  { title: 'New friend request', when: '6 hr' },
-  { title: 'Please change your password', when: '1 day' },
-  { title: 'You have a new message', when: '2 weeks' },
-  { title: 'Welcome to the app!', when: '1 month' },
+export type NotificationItem = {
+  id: number;
+  title: string;
+  when: string;
+};
+
+export const notifications: NotificationItem[] = [
+  { id: 1, title: 'New friend request', when: '6 hr' },
+  { id: 2, title: 'Please change your password', when: '1 day' },
+  { id: 3, title: 'You have a new message', when: '2 weeks' },
+  { id: 4, title: 'Welcome to the app!', when: '1 month' },
 ];
 
+export type ListItem = {
+  name: string;
+  done?: boolean;
+}
+
+export type TodoListItem = {
+  name: string;
+  id: string;
+  items?: ListItem[];
+}
+
 // Some fake lists
-export const lists = [
+export const lists: TodoListItem[] = [
   {
     name: 'Groceries',
     id: 'groceries',
@@ -60,3 +90,11 @@ export const lists = [
   { name: 'Work', id: 'work', items: [{ name: 'TPS Report' }, { name: 'Set up email' }] },
   { name: 'Reminders', id: 'reminders' },
 ];
+
+export type Settings = {
+  enableNotifications: boolean;
+}
+
+export const settings: Settings = {
+  enableNotifications: true,
+}

components/ui/Card.jsx renamed to components/ui/Card.tsx

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.