Display Mission List

src/components/mission.tsx

@@ -0,0 +1,52 @@
+import { Text, View, StyleSheet} from "react-native";
+import { typography } from "../../styles";
+import { StatusText } from "./status";
+
+type MissionCardProps = {
+  name: string;
+  description: string;
+  status: string;
+  isTopSecret: boolean;
+}
+
+export function MissionCard({name, description, status} : MissionCardProps) {
+  return (
+    <View style={styles.card}>
+      <View style={styles.content}>
+        <Text style={styles.title}>{name}</Text>
+        <Text style={styles.description}>{description}</Text>
+        <StatusText status={status}/>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 0.3,
+    backgroundColor: 'beige',
+    borderWidth: 2,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 10
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 30,
+    lineHeight: 40,
+    fontWeight: 500 as unknown as '500',
+  },
+  description: {
+    ...typography.paragraph,
+    paddingTop: 10
+  },
+  status: {
+    ...typography.paragraph,
+    paddingTop: 5,
+    color: '#5A5A5A'
+  },
+});

src/components/status.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text } from "react-native";
+import { typography } from "../../styles";
+
+type StatusTextProps = {
+  status: string;
+}
+
+export function StatusText({status}: StatusTextProps) {
+  const additionalStyles = (status === 'assigned' ? styles.red : styles.green);
+  return (
+    <Text style={[styles.status, additionalStyles]}>{status}</Text>
+  )
+}
+
+const styles = StyleSheet.create({
+  status: {
+    ...typography.paragraph,
+    paddingTop: 5,
+    color: '#5A5A5A'
+  },
+  red: {
+    color: 'red'
+  },
+  green: {
+    color: 'green'
+  },
+});

src/screens/home.tsx

@@ -1,26 +1,67 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, ActivityIndicator, FlatList } from 'react-native';
 import { Button } from '@react-navigation/elements';
+import { typography } from '../../styles';
+import { useEffect, useState } from 'react';
+import { MissionCard } from '../components/mission';
 
 export type HomeScreenProps = {
-  message?: string;
+};
+
+export type Mission = {
+  id: string;
+  name: string;
+  description: string;
+  isTopSecret: boolean;
+  status: string
 };
 
 export function HomeScreen() {
   const navigation = useNavigation();
-  const route = useRoute();
-
-  const { message } = route.params as HomeScreenProps;
 
   const handleGoToAbout = () => {
     navigation.navigate('About');
   };
 
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Mission[]>([]);
+
+  const getMissions = async () => {
+    try {
+      const response = await fetch('https://dummyjson.com/c/7d66-5cf8-41e6-b225');
+      const json = await response.json();
+      setData(json.missions);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getMissions();
+  }, []);
+
   return (
     <>
       <View style={styles.container}>
-        <Text>{message}</Text>
+        <Text style={styles.title}>ACME Mission Manager</Text>
       </View>
+      <ScrollView style={styles.content}>
+        {isLoading ?
+          (<View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color='#1C70ED' />
+          </View>) : 
+          <FlatList
+            style={styles.list}
+            data={data}
+            keyExtractor={({id}) => id}
+            renderItem={({item}) => (
+              <MissionCard {...item} />
+            )}
+          />
+        }
+      </ScrollView>
       <View style={styles.footer}>
           <Button onPress={handleGoToAbout}>About</Button>
       </View>
@@ -30,14 +71,33 @@ export function HomeScreen() {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 0.1,
     flexDirection: 'column',
     alignItems: 'center',
     gap: '2',
     justifyContent: 'center',
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  list: {
+    flex: 1,
+    padding: 20
+  },
+  content: {
+    flex: 1,
+  },
   footer: {
     alignItems: 'center',
     paddingBottom: 10,
-  }
+  },
+  title: {
+    ...typography.title,
+  },
+  description: {
+    ...typography.paragraph,
+    paddingTop: 20
+  },
 });

styles.ts

@@ -0,0 +1,17 @@
+export const typography = {
+  title: {
+    fontSize: 36,
+    lineHeight: 46,
+    fontWeight: 500 as unknown as '500',
+  },
+  secondaryTitle: {
+    fontSize: 30,
+    lineHeight: 40,
+    fontWeight: 500 as unknown as '500',
+  },
+  paragraph: {
+    fontSize: 18,
+    lineHeight: 28,
+    fontWeight: 400 as unknown as '400',
+  }
+}