Merge pull request #217 from flexbox/feature/add-planets-screen

add plantet screen

Author: flexbox

hackathon/spacecraft/.vscode/settings.json

@@ -1,9 +1,7 @@
 {
-  "settings": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    }
-  }
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
 }

hackathon/spacecraft/src/hooks/useAppearanceTheme.tsx renamed to hackathon/spacecraft/src/hooks/useAppearanceTheme.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/hooks/useImage.tsx renamed to hackathon/spacecraft/src/hooks/useImage.ts

@@ -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/hooks/usePilot.tsx renamed to hackathon/spacecraft/src/hooks/usePilot.ts

@@ -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/hooks/usePlanets.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/hooks/useStarships.tsx renamed to hackathon/spacecraft/src/hooks/useStarships.ts

@@ -0,0 +1,72 @@
+import { FlatList, TouchableOpacity, View } from "react-native";
+import { Text } from "react-native-paper";
+
+import { ScreenContainer } from "~/components/ScreenContainer";
+import { usePlanets } from "~/hooks/usePlanets";
+import { Routes } from "~/navigation/Routes";
+import { getTerrainColor } from "~/utils/getTerrainColor";
+
+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>
+    );
+  }
+
+  const renderItem = ({ item }) => {
+    if (!item || item.name === "Bespin") {
+      return null;
+    }
+
+    const backgroundColor = getTerrainColor(item.terrain);
+    const size = item.diameter / 100;
+
+    return (
+      <View style={{ padding: 64 }}>
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate(Routes.PLANET_DETAILS_SCREEN, { planet: item })
+          }
+        >
+          <Text variant="headlineMedium" style={{ textAlign: "center" }}>
+            {item.name}
+          </Text>
+        </TouchableOpacity>
+        <View
+          style={{
+            width: size,
+            height: size,
+            backgroundColor: backgroundColor,
+            borderRadius: "100%",
+            margin: 8,
+          }}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <ScreenContainer title={"Explore"}>
+      <FlatList
+        data={data.results}
+        renderItem={renderItem}
+        keyExtractor={(ship) => ship.model}
+        horizontal={true}
+      />
+    </ScreenContainer>
+  );
+}