diff --git a/README.md b/README.md index 9948ab3..fd7a05a 100644 --- a/README.md +++ b/README.md @@ -273,30 +273,6 @@ Then let's define and style our guest item component. In `./components/GuestItem import { Text, StyleSheet, View } from "react-native"; import { colors } from "../styles/constants"; -type Guest = { - id: string; - firstName: string; - lastName: string; - deadline?: string; - attending: boolean; -}; - -type Props = { - guest: Guest; -}; - -export default function GuestItem({ guest }: Props) { - const { firstName, lastName, attending } = guest; - return ( - - - {firstName} {lastName} - - {attending ? "Coming!" : "Not coming."} - - ); -} - const styles = StyleSheet.create({ right: { textAlign: "right", @@ -326,6 +302,30 @@ const styles = StyleSheet.create({ textAlign: "left", }, }); + +type Guest = { + id: string; + firstName: string; + lastName: string; + deadline?: string; + attending: boolean; +}; + +type Props = { + guest: Guest; +}; + +export default function GuestItem({ guest }: Props) { + const { firstName, lastName, attending } = guest; + return ( + + + {firstName} {lastName} + + {attending ? "Coming!" : "Not coming."} + + ); +} ``` Still got one more undefined variable issue. Let's get right on it! @@ -431,6 +431,31 @@ import GuestItem from '../components/GuestItem'; import { Link, useLocalSearchParams } from 'expo-router'; import { useEffect, useState } from 'react'; +const styles = StyleSheet.create({ + button: { + marginTop: 30, + paddingTop: 10, + paddingBottom: 10, + width: '100%', + textAlign: 'center', + backgroundColor: colors.cardBackground, + fontSize: 24, + }, + list: { + marginTop: 30, + paddingLeft: 30, + paddingRight: 30, + width: '100%', + }, + container: { + flex: 1, + backgroundColor: colors.background, + }, + text: { + color: colors.text, + }, +}); + type Guest = { id: string; firstName: string; @@ -486,8 +511,11 @@ export default function Index() { ); } +``` -const styles = StyleSheet.create({ +Add the following button styles: + +```typescript button: { marginTop: 30, paddingTop: 10, @@ -497,25 +525,29 @@ const styles = StyleSheet.create({ backgroundColor: colors.cardBackground, fontSize: 24, }, - list: { - marginTop: 30, - paddingLeft: 30, - paddingRight: 30, - width: '100%', - }, +``` + +Next, we'll add `app/new-guest.tsx`: + +```typescript +import { useState } from 'react'; +import { StyleSheet, TextInput } from 'react-native'; +import { colors } from '../styles/constants'; +import { Link } from 'expo-router'; + +const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.background, + alignItems: 'center', + justifyContent: 'center', }, - text: { - color: colors.text, + input: { + marginTop: 30, + paddingLeft: 30, + paddingRight: 30, + width: '100%', }, -}); -``` - -Add the following button styles: - -```typescript button: { marginTop: 30, paddingTop: 10, @@ -525,15 +557,7 @@ Add the following button styles: backgroundColor: colors.cardBackground, fontSize: 24, }, -``` - -Next, we'll add `app/new-guest.tsx`: - -```typescript -import { useState } from 'react'; -import { StyleSheet, TextInput } from 'react-native'; -import { colors } from '../styles/constants'; -import { Link } from 'expo-router'; +}); export default function NewGuest() { const [firstName, onFirstName] = useState(''); @@ -562,29 +586,6 @@ export default function NewGuest() { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.background, - alignItems: 'center', - justifyContent: 'center', - }, - input: { - marginTop: 30, - paddingLeft: 30, - paddingRight: 30, - width: '100%', - }, - button: { - marginTop: 30, - paddingTop: 10, - paddingBottom: 10, - width: '100%', - textAlign: 'center', - backgroundColor: colors.cardBackground, - fontSize: 24, - }, -}); ``` Hold on, where'd our font and header go? Let's create `app/_layout.tsx`: @@ -597,6 +598,19 @@ import { useFonts, Pacifico_400Regular } from '@expo-google-fonts/pacifico'; import { View, StyleSheet } from 'react-native'; import { colors } from '../styles/constants'; +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.background, + paddingBottom: 40, + }, + slot: { + flex: 1, + paddingLeft: 30, + paddingRight: 30, + }, +}); + function routeMapping(pathname: string) { switch (pathname) { case '/': @@ -628,19 +642,6 @@ export default function HomeLayout() { ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: colors.background, - paddingBottom: 40, - }, - slot: { - flex: 1, - paddingLeft: 30, - paddingRight: 30, - }, -}); ``` ## 💾 Saving to the API diff --git a/guest-list-mobile/app/index.tsx b/guest-list-mobile/app/index.tsx index f4c5939..7cb5cd0 100644 --- a/guest-list-mobile/app/index.tsx +++ b/guest-list-mobile/app/index.tsx @@ -60,16 +60,16 @@ export default function Index() { }, body: JSON.stringify({ firstName, lastName }), }); - try { - const newGuest: Guest = await response.json(); - setGuests([...guests, newGuest]); - } catch {} + const newGuest: Guest = await response.json(); + setGuests([...guests, newGuest]); } if (typeof firstName === 'string' && typeof lastName === 'string') { - postGuest({ id: '0', attending: false, firstName, lastName }); + postGuest({ id: '0', attending: false, firstName, lastName }).catch( + () => {}, + ); } loadGuests(); - }, [firstName, lastName]); + }, [firstName, lastName]); /* eslint-disable-line*/ return ( <>