layout adjustments

app.json

@@ -3,7 +3,7 @@
     "name": "F1HUB",
     "slug": "f1hub",
     "scheme": "com.yabcompany.f1hub",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -20,7 +20,7 @@
     },
     "android": {
       "package": "com.yabcompany.f1hub",
-      "versionCode": 7,
+      "versionCode": 8,
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#121212"

src/Routes.tsx

@@ -11,6 +11,7 @@ import { Home } from "./screens/Home/Home";
 import { Archive } from "./screens/Archive/Archive";
 import { About } from "./screens/About/About";
 import { RaceResult } from "./screens/RaceResult/RaceResult";
+import { RaceSchedule } from "./screens/RaceSchedule/RaceSchedule";
 
 type BottomNavigatorProps = {
   initialRouteName: string;
@@ -216,6 +217,7 @@ export const Routes = () => {
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="DrawerNavigator" component={DrawerNavigator} />
       <Stack.Screen name="RaceResult" component={RaceResult} />
+      <Stack.Screen name="RaceSchedule" component={RaceSchedule} />
     </Stack.Navigator>
   );
 };

src/components/ListItemQualifying.tsx

@@ -38,7 +38,7 @@ export const ListItemQualifying = ({ result }: Props) => {
           </View>
         </View>
 
-        <ListItemTime time={result.Q3 ?? result.Q2 ?? result.Q1 ?? "-"} />
+        <ListItemTime time={result.Q3 || result.Q2 || result.Q1 || "NO TIME"} />
       </View>
     </ListItem>
   );

src/components/ListItemRace.tsx

@@ -33,15 +33,12 @@ export const ListItemRace = ({ race }: Props) => {
 
   return (
     <ListItem
-      onClick={
-        existResults
-          ? () =>
-              navigation.navigate("RaceResult", {
-                season: race.season,
-                round: race.round,
-                raceName: race.raceName,
-              })
-          : undefined
+      onClick={() =>
+        navigation.navigate(existResults ? "RaceResult" : "RaceSchedule", {
+          season: race.season,
+          round: race.round,
+          raceName: race.raceName,
+        })
       }
     >
       <View
@@ -66,27 +63,45 @@ export const ListItemRace = ({ race }: Props) => {
           </View>
 
           <View>
-            <Text
-              variant="labelSmall"
-              style={{
-                color: Theme.colors.secondary,
-                fontFamily: Theme.fonts.special,
-              }}
-            >
-              {formatDate(race.date, race.time)}
-            </Text>
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <Text
+                variant="labelSmall"
+                style={{
+                  color: Theme.colors.secondary,
+                  fontFamily: Theme.fonts.special,
+                }}
+              >
+                {formatDate(race.date, race.time)}{" "}
+              </Text>
+              {!existResults && (
+                <View
+                  style={{
+                    paddingVertical: 1,
+                    paddingHorizontal: 4,
+                    borderRadius: Theme.roundness,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontFamily: Theme.fonts.special,
+                      color: Theme.colors.primary,
+                      fontSize: 8,
+                    }}
+                  >
+                    | SOON
+                  </Text>
+                </View>
+              )}
+            </View>
+
             <ListItemTitle>{race.raceName}</ListItemTitle>
             <ListItemDescription>
               {race.Circuit.circuitName}
             </ListItemDescription>
           </View>
         </View>
 
-        <Ionicons
-          name={existResults ? "chevron-forward" : "hourglass-outline"}
-          size={18}
-          color={Theme.colors.light}
-        />
+        <Ionicons name="chevron-forward" size={18} color={Theme.colors.light} />
       </View>
     </ListItem>
   );

src/components/SectionContainer.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useState } from "react";
 import { View } from "react-native";
-import { Text, IconButton } from "react-native-paper";
+import { Text, IconButton, ActivityIndicator } from "react-native-paper";
 import { Theme } from "../theme";
 import { SectionTitle } from "./SectionTitle";
 import { Loading } from "./Loading";
@@ -37,13 +37,15 @@ export const SectionContainer = ({
       <TouchableRipple
         onPress={() => setContentVisible((isVisible) => !isVisible)}
         rippleColor={Theme.colors.darken}
-        disabled={!expansable}
+        disabled={!expansable || isLoading}
       >
         <View
           style={{
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
+            minHeight: 56,
+            marginTop: Theme.space.xs,
           }}
         >
           <SectionTitle>{name}</SectionTitle>
@@ -54,25 +56,28 @@ export const SectionContainer = ({
               iconColor={Theme.colors.primary}
             />
           )}
+          {isLoading && (
+            <ActivityIndicator
+              size="small"
+              color={Theme.colors.secondary}
+              style={{ marginRight: Theme.space.xs }}
+            />
+          )}
         </View>
       </TouchableRipple>
 
-      {isLoading ? (
-        <Loading />
-      ) : isError ? (
-        <Error />
-      ) : (
-        <>
-          <View
-            style={{
-              borderBottomColor: Theme.colors.primary,
-              borderBottomWidth: 1,
-              paddingBottom: 6,
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
+      <View
+        style={{
+          borderBottomColor: Theme.colors.primary,
+          borderBottomWidth: 1,
+          paddingBottom: 6,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        {contentVisible && (
+          <>
             <View>
               {title && (
                 <Text
@@ -98,10 +103,11 @@ export const SectionContainer = ({
               )}
             </View>
             {right}
-          </View>
-          {contentVisible && children}
-        </>
-      )}
+          </>
+        )}
+      </View>
+
+      {contentVisible && <>{isError ? <Error /> : children}</>}
     </>
   );
 };

src/constants.ts

@@ -1,3 +1,4 @@
+export const YEAR_SPRINT_RACES_STARTED = 2021;
 export const F1_API = "https://ergast.com/api/f1/";
 export const COUNTRY_FLAGS_URL = "https://flagsapi.com/";
 export const BUY_ME_A_COFFEE_URL = "https://www.buymeacoffee.com/belmirofss";

src/hooks/useRaceSchedule.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "react-query";
+import { Api } from "../api";
+import { Race } from "../types";
+
+type Response = {
+  MRData: {
+    RaceTable: {
+      season: "string";
+      Races: Race[];
+    };
+  };
+};
+
+type Props = {
+  season: string;
+  round: string;
+};
+
+export const useRaceSchedule = ({ season, round }: Props) => {
+  return useQuery(
+    ["RACE_SCHEDULE", season, round],
+    () => Api.get<Response>(`${season}/${round}.json`),
+    {
+      select: (response) => response.data,
+    }
+  );
+};

src/index.d.ts

@@ -2,6 +2,7 @@ export declare global {
   namespace ReactNavigation {
     interface RootParamList {
       RaceResult: { season: string; round: string; raceName: string };
+      RaceSchedule: { season: string; round: string; raceName: string };
     }
   }
 

src/screens/Home/HomeNextRace.tsx

@@ -42,25 +42,29 @@ export const HomeNextRace = () => {
             />
           )}
 
-          <HomeNextRaceTime
-            title="Qualifying"
-            date={nextRace.Qualifying.date}
-            time={nextRace.Qualifying.time}
-          />
+          {nextRace.Qualifying && (
+            <HomeNextRaceTime
+              title="Qualifying"
+              date={nextRace.Qualifying.date}
+              time={nextRace.Qualifying.time}
+            />
+          )}
 
-          {!nextRace.Sprint && (
+          {!nextRace.Sprint && nextRace.SecondPractice && (
             <HomeNextRaceTime
               title="Practice 2"
               date={nextRace.SecondPractice.date}
               time={nextRace.SecondPractice.time}
             />
           )}
 
-          <HomeNextRaceTime
-            title="Practice 1"
-            date={nextRace.FirstPractice.date}
-            time={nextRace.FirstPractice.time}
-          />
+          {nextRace.FirstPractice && (
+            <HomeNextRaceTime
+              title="Practice 1"
+              date={nextRace.FirstPractice.date}
+              time={nextRace.FirstPractice.time}
+            />
+          )}
         </>
       )}
     </SectionContainer>

src/screens/RaceResult/RaceQualifying.tsx

@@ -1,6 +1,8 @@
+import { Text } from "react-native-paper";
 import { ListItemQualifying } from "../../components/ListItemQualifying";
 import { SectionContainer } from "../../components/SectionContainer";
 import { useQualifyingResults } from "../../hooks/useQualifyingResults";
+import { Theme } from "../../theme";
 
 type Props = {
   season: string;
@@ -13,10 +15,6 @@ export const RaceQualifyingResults = ({ season, round }: Props) => {
   const race = data?.MRData.RaceTable.Races[0];
   const results = race?.QualifyingResults;
 
-  if (!isLoading && !isError && !results?.length) {
-    return null;
-  }
-
   return (
     <SectionContainer
       name="Qualifying"
@@ -28,6 +26,18 @@ export const RaceQualifyingResults = ({ season, round }: Props) => {
       {results?.map((result) => (
         <ListItemQualifying key={result.position} result={result} />
       ))}
+
+      {!results?.length && (
+        <Text
+          style={{
+            fontFamily: Theme.fonts.special,
+            color: Theme.colors.primary,
+            marginVertical: Theme.space.xs,
+          }}
+        >
+          No qualifying results available
+        </Text>
+      )}
     </SectionContainer>
   );
 };

src/screens/RaceResult/RaceResult.tsx

@@ -7,6 +7,7 @@ import { Theme } from "../../theme";
 import { Text } from "react-native-paper";
 import { RaceResultSprint } from "./RaceResultSprint";
 import { RaceQualifyingResults } from "./RaceQualifying";
+import { useRaceSchedule } from "../../hooks/useRaceSchedule";
 
 type ParamList = {
   RaceResult: {
@@ -20,8 +21,18 @@ export const RaceResult = () => {
   const route = useRoute<RouteProp<ParamList, "RaceResult">>();
   const { season, round, raceName } = route.params;
 
+  const { data, isLoading, isError } = useRaceSchedule({ season, round });
+
+  const race = data?.MRData.RaceTable.Races[0];
+
   return (
-    <ScreenContainer title="RACE RESULT" showBack showMenu={false}>
+    <ScreenContainer
+      title="RACE RESULT"
+      showBack
+      showMenu={false}
+      isLoading={isLoading}
+      isError={isError}
+    >
       <Text
         variant="titleLarge"
         style={{
@@ -39,7 +50,7 @@ export const RaceResult = () => {
       >
         <RaceResultInfo season={season} round={round} />
         <RaceResultResults season={season} round={round} />
-        <RaceResultSprint season={season} round={round} />
+        {race?.Sprint && <RaceResultSprint season={season} round={round} />}
         <RaceQualifyingResults season={season} round={round} />
       </View>
     </ScreenContainer>