Update finished app

guest-list-mobile/app.json

@@ -1,7 +1,6 @@
 {
   "expo": {
-    "name": "Guest List",
-    "scheme": "guest-list-mobile",
+    "name": "guest-list-mobile",
     "slug": "guest-list-mobile",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -10,35 +9,32 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#f0e5cf"
+      "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#f0e5cf"
-      },
-      "package": "com.hola_soy_milk.guestlistmobile"
+        "backgroundColor": "#ffffff"
+      }
     },
+    "scheme": "guest-list-mobile",
     "web": {
+      "bundler": "metro",
       "favicon": "./assets/favicon.png",
-      "bundler": "metro"
+      "output": "server"
     },
     "plugins": [
-      "expo-router"
-    ],
-    "extra": {
-      "router": {
-        "origin": false
-      },
-      "eas": {
-        "projectId": "a1acaf69-939d-4848-a410-9826ebc944fb"
-      }
-    }
+      "expo-font",
+      [
+        "expo-router",
+        {
+          "origin": "https://evanbacon.dev/"
+        }
+      ]
+    ]
   }
 }

guest-list-mobile/app/_layout.tsx

@@ -33,7 +33,6 @@ function routeMapping(pathname: string) {
 
 export default function HomeLayout() {
   const pathname = usePathname();
-
   const label = routeMapping(pathname);
   const [fontsLoaded] = useFonts({
     Pacifico_400Regular,
@@ -42,7 +41,6 @@ export default function HomeLayout() {
   if (!fontsLoaded) {
     return null;
   }
-
   return (
     <View style={styles.container}>
       <Header label={label} />

guest-list-mobile/app/guests/[id].tsx

@@ -0,0 +1,59 @@
+// Expo router Page to display a single user
+
+import { useEffect, useState } from 'react';
+
+import { useLocalSearchParams } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '../../styles/constants';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  text: {
+    color: colors.text,
+  },
+});
+
+type Guest = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  deadline?: string;
+  attending: boolean;
+};
+
+const API_URL =
+  'https://37820499-b115-4574-94d1-64870873aef3-00-2o18dc9ex4s5s.spock.replit.dev';
+
+export default function Guests() {
+  const { id } = useLocalSearchParams();
+
+  const [guest, setGuest] = useState<Guest>();
+
+  useEffect(() => {
+    async function loadGuest() {
+      const response = await fetch(`${API_URL}/guests/${id}`);
+      const fetchedGuest = await response.json();
+      setGuest(fetchedGuest);
+    }
+    loadGuest();
+  }, [id]);
+
+  if (!guest) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        {guest.firstName} {guest.lastName}
+      </Text>
+      <Text style={styles.text}>
+        {guest.attending ? 'Attending' : 'Not attending'}
+      </Text>
+    </View>
+  );
+}

guest-list-mobile/app/hello+api.ts

@@ -0,0 +1,5 @@
+import { ExpoRequest, ExpoResponse } from 'expo-router/server';
+
+export function GET(request: ExpoRequest) {
+  return ExpoResponse.json({ hello: 'world' });
+}

guest-list-mobile/app/index.tsx

@@ -6,13 +6,10 @@ import { FlatList, StyleSheet } from 'react-native';
 import GuestItem from '../components/GuestItem';
 import { colors } from '../styles/constants';
 
+const API_URL =
+  'https://37820499-b115-4574-94d1-64870873aef3-00-2o18dc9ex4s5s.spock.replit.dev';
+
 const styles = StyleSheet.create({
-  list: {
-    marginTop: 30,
-    paddingLeft: 30,
-    paddingRight: 30,
-    width: '100%',
-  },
   button: {
     marginTop: 30,
     paddingTop: 10,
@@ -22,6 +19,19 @@ const styles = StyleSheet.create({
     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 = {
@@ -32,45 +42,43 @@ type Guest = {
   attending: boolean;
 };
 
-const API_URL = 'http://45063d72-10f4-4077-a954-686bc0c70988.id.repl.co';
-
 const renderItem = (item: { item: Guest }) => <GuestItem guest={item.item} />;
 
 export default function Index() {
   const { firstName, lastName } = useLocalSearchParams<{
     firstName?: Guest['firstName'];
     lastName?: Guest['lastName'];
   }>();
-
   const [guests, setGuests] = useState<Guest[]>([]);
 
   useEffect(() => {
+    async function callApi() {
+      const response = await fetch(`/hello`);
+      const data = await response.json();
+      console.log(data);
+    }
     async function loadGuests() {
-      // const response = await fetch(`${API_URL}/guests`);
-      // const fetchedGuests: Guest[] = await response.json();
-      // setGuests(fetchedGuests);
+      const response = await fetch(`${API_URL}/guests`);
+      const fetchedGuests: Guest[] = await response.json();
+      setGuests(fetchedGuests);
     }
-
-    async function postGuest(guest: Guest) {
+    async function postGuest(guest: { firstName: string; lastName: string }) {
       const response = await fetch(`${API_URL}/guests`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({
-          firstName: guest.firstName,
-          lastName: guest.lastName,
-        }),
+        body: JSON.stringify({ firstName, lastName }),
       });
       const newGuest: Guest = await response.json();
-      setGuests((g) => [...g, newGuest]);
+      setGuests([...guests, newGuest]);
     }
+    loadGuests();
+    callApi();
+
     if (typeof firstName === 'string' && typeof lastName === 'string') {
-      postGuest({ id: '0', attending: false, firstName, lastName }).catch(
-        () => {},
-      );
+      postGuest({ firstName, lastName });
     }
-    loadGuests().catch(() => {});
   }, [firstName, lastName]);
   return (
     <>

guest-list-mobile/app/new-guest.tsx

@@ -30,19 +30,19 @@ const styles = StyleSheet.create({
 });
 
 export default function NewGuest() {
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
+  const [firstName, onFirstName] = useState('');
+  const [lastName, onLastName] = useState('');
   return (
     <>
       <TextInput
         style={styles.input}
-        onChangeText={setFirstName}
+        onChangeText={onFirstName}
         placeholder="First Name"
         value={firstName}
       />
       <TextInput
         style={styles.input}
-        onChangeText={setLastName}
+        onChangeText={onLastName}
         placeholder="Last Name"
         value={lastName}
       />

guest-list-mobile/babel.config.cjs

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

guest-list-mobile/components/GuestItem.tsx

@@ -1,5 +1,5 @@
-import { Link } from 'expo-router';
-import { StyleSheet, Text, View } from 'react-native';
+import { router } from 'expo-router';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 
 import { colors } from '../styles/constants';
 
@@ -46,15 +46,19 @@ type Props = {
 };
 
 export default function GuestItem({ guest }: Props) {
-  const { firstName, lastName, attending } = guest;
-
+  const { id, firstName, lastName, attending } = guest;
+  const openGuest = () => {
+    router.push({
+      pathname: `/guests/[id]`,
+      params: { id },
+    });
+  };
   return (
-    <View style={styles.card}>
+    <TouchableOpacity style={styles.card} onPress={openGuest}>
       <Text style={styles.center}>
         {firstName} {lastName}
       </Text>
-      <Link href={`guests/${guest.id}`}>Check it out</Link>
-      <Text style={styles.right}>{attending ? 'Coming!' : 'Not Coming'}</Text>
-    </View>
+      <Text style={styles.right}>{attending ? 'Coming!' : 'Not coming.'}</Text>
+    </TouchableOpacity>
   );
 }

guest-list-mobile/components/Header.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Constants from 'expo-constants';
 import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
@@ -14,15 +16,15 @@ const styles = StyleSheet.create({
   },
   label: {
     color: colors.text,
+    fontFamily: 'Pacifico_400Regular',
     fontSize: 32,
     textAlign: 'center',
-    fontFamily: 'Pacifico_400Regular',
   },
 });
-
 type Props = {
   label: string;
 };
+
 export default function Header(props: Props) {
   return (
     <SafeAreaView style={styles.safeArea}>

guest-list-mobile/eslint.config.js

@@ -0,0 +1 @@
+export { default } from 'eslint-config-upleveled';