add plantet screen

Author: flexbox

hackathon/spacecraft/src/hooks/usePlanets.ts

@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const fetchPlanets = async () => {
+  const response = await fetch("https://swapi.py4e.com/api/planets/");
+  const data = await response.json();
+  return data;
+};
+
+export const usePlanets = () => {
+  return useQuery({
+    queryKey: ["planets"],
+    queryFn: fetchPlanets,
+  });
+};

hackathon/spacecraft/src/navigation/BottomTabNavigator.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { FontAwesome5 } from "@expo/vector-icons";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { useTheme } from "react-native-paper";
 import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
 
+import { ExploreNavigator } from "~/navigation/ExploreNavigator";
 import { Routes } from "~/navigation/Routes";
 import { PilotNavigator } from "~/navigation/PilotNavigator";
 import { StarshipNavigator } from "~/navigation/StarshipNavigator";
@@ -44,6 +45,16 @@ export const BottomTabNavigator = () => {
           ),
         }}
       />
+      <Tab.Screen
+        name={Routes.EXPLORE_SCREEN}
+        component={ExploreNavigator}
+        options={{
+          tabBarLabel: "Explore",
+          tabBarIcon: ({ color }) => (
+            <Ionicons name="planet" size={22} color={color} />
+          ),
+        }}
+      />
       <Tab.Screen
         name={Routes.PLUS_STACK}
         component={PlusNavigator}

hackathon/spacecraft/src/navigation/ExploreNavigator.tsx

@@ -0,0 +1,24 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+import { Routes } from "./Routes";
+
+import { ExploreScreen } from "~/screens/ExploreScreen";
+import { PlanetDetailsScreen } from "~/screens/PlanetDetailsScreen";
+
+const Stack = createNativeStackNavigator();
+
+export const ExploreNavigator = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name={Routes.EXPLORE_SCREEN} component={ExploreScreen} />
+      <Stack.Screen
+        name={Routes.PLANET_DETAILS_SCREEN}
+        component={PlanetDetailsScreen}
+      />
+    </Stack.Navigator>
+  );
+};

hackathon/spacecraft/src/navigation/Routes.ts

@@ -7,6 +7,8 @@ export const Routes = {
   PILOT_SCREEN: "Pilots",
   PILOT_STACK: "Pilots Stack",
   PILOT_DETAILS_SCREEN: "Pilot",
+  EXPLORE_SCREEN: "Explore",
+  PLANET_DETAILS_SCREEN: "Planet",
   PLUS_STACK: "Plus Stack",
   PLUS_SCREEN: "Plus",
   DO_YOU_LIKE_SCREEN: "Do You Like",

hackathon/spacecraft/src/screens/ExploreScreen.tsx

@@ -0,0 +1,44 @@
+import { Text, TouchableOpacity, View } from "react-native";
+
+import { ScreenContainer } from "~/components/ScreenContainer";
+import { usePlanets } from "~/hooks/usePlanets";
+import { Routes } from "~/navigation/Routes";
+
+interface ExploreScreenProps {}
+
+export function ExploreScreen({ navigation }: ExploreScreenProps) {
+  const { data, isLoading, isError, error } = usePlanets();
+
+  if (isLoading) {
+    return (
+      <ScreenContainer title={"Explore"}>
+        <Text>Loading...</Text>
+      </ScreenContainer>
+    );
+  }
+
+  if (isError) {
+    return (
+      <ScreenContainer title={"Explore"}>
+        <Text>{error?.message}</Text>
+      </ScreenContainer>
+    );
+  }
+
+  return (
+    <ScreenContainer title={"Explore"}>
+      <View>
+        {data?.results.map((planet) => (
+          <TouchableOpacity
+            key={planet.name}
+            onPress={() =>
+              navigation.navigate(Routes.PLANET_DETAILS_SCREEN, { planet })
+            }
+          >
+            <Text>{planet.name}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </ScreenContainer>
+  );
+}

hackathon/spacecraft/src/screens/PlanetDetailsScreen.tsx

@@ -0,0 +1,53 @@
+import { Text, View } from "react-native";
+
+import { ScreenContainer } from "~/components/ScreenContainer";
+
+/**
+ * @deprecated move this to typ please
+ */
+interface Planet {
+  name: string;
+  rotation_period: string;
+  orbital_period: string;
+  diameter: string;
+  climate: string;
+  gravity: string;
+  terrain: string;
+  surface_water: string;
+  population: string;
+  residents: string[];
+  films: string[];
+  created: string;
+  edited: string;
+  url: string;
+}
+
+interface Params {
+  planet: Planet;
+}
+
+interface Route {
+  key: string;
+  name: string;
+  params: Params;
+}
+
+export interface PlanetDetailsScreenProps {
+  route: Route;
+}
+
+export function PlanetDetailsScreen(props: PlanetDetailsScreenProps) {
+  console.log(
+    "🚀 ~ file: PlanetDetailsScreen.tsx:6 ~ PlanetDetailsScreen ~ props:",
+    props.route
+  );
+
+
+  return (
+    <ScreenContainer title={props.route.params.planet.name} withGoBack>
+      <Text>PlanetDetailsScreen</Text>
+
+      <Text>{JSON.stringify(props.route.params.planet.name)}</Text>
+    </ScreenContainer>
+  );
+}