From 33339ef8906f80361f75af8b34372d4be1304874 Mon Sep 17 00:00:00 2001
From: belmirofss <belmirofss@gmail.com>
Date: Wed, 15 Nov 2023 11:31:56 -0300
Subject: [PATCH] layout adjustments

---
 app.json                                      |  4 +-
 src/Routes.tsx                                |  2 +
 src/components/ListItemQualifying.tsx         |  2 +-
 src/components/ListItemRace.tsx               | 61 ++++++++++-------
 src/components/SectionContainer.tsx           | 50 ++++++++------
 src/constants.ts                              |  1 +
 src/hooks/useRaceSchedule.ts                  | 27 ++++++++
 src/index.d.ts                                |  1 +
 src/screens/Home/HomeNextRace.tsx             | 26 ++++---
 src/screens/RaceResult/RaceQualifying.tsx     | 18 +++--
 src/screens/RaceResult/RaceResult.tsx         | 15 +++-
 src/screens/RaceResult/RaceResultSprint.tsx   | 18 +++--
 src/screens/RaceSchedule/RaceSchedule.tsx     | 41 +++++++++++
 src/screens/RaceSchedule/RaceScheduleInfo.tsx | 68 +++++++++++++++++++
 src/types.ts                                  | 21 ++++--
 15 files changed, 279 insertions(+), 76 deletions(-)
 create mode 100644 src/hooks/useRaceSchedule.ts
 create mode 100644 src/screens/RaceSchedule/RaceSchedule.tsx
 create mode 100644 src/screens/RaceSchedule/RaceScheduleInfo.tsx

diff --git a/app.json b/app.json
index a38a55b..dd6b247 100644
--- a/app.json
+++ b/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"
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 5dad17a..9950f23 100644
--- a/src/Routes.tsx
+++ b/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>
   );
 };
diff --git a/src/components/ListItemQualifying.tsx b/src/components/ListItemQualifying.tsx
index f2c4ec2..7b0b8a1 100644
--- a/src/components/ListItemQualifying.tsx
+++ b/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>
   );
diff --git a/src/components/ListItemRace.tsx b/src/components/ListItemRace.tsx
index 6fc7cab..bdacf7d 100644
--- a/src/components/ListItemRace.tsx
+++ b/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,15 +63,37 @@ 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}
@@ -82,11 +101,7 @@ export const ListItemRace = ({ race }: Props) => {
           </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>
   );
diff --git a/src/components/SectionContainer.tsx b/src/components/SectionContainer.tsx
index 8bc1629..c27f645 100644
--- a/src/components/SectionContainer.tsx
+++ b/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}</>}
     </>
   );
 };
diff --git a/src/constants.ts b/src/constants.ts
index aef21af..51ad38f 100644
--- a/src/constants.ts
+++ b/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";
diff --git a/src/hooks/useRaceSchedule.ts b/src/hooks/useRaceSchedule.ts
new file mode 100644
index 0000000..951af81
--- /dev/null
+++ b/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,
+    }
+  );
+};
diff --git a/src/index.d.ts b/src/index.d.ts
index 6fa043f..8e62a17 100644
--- a/src/index.d.ts
+++ b/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 };
     }
   }
 
diff --git a/src/screens/Home/HomeNextRace.tsx b/src/screens/Home/HomeNextRace.tsx
index d34abbc..739c5cf 100644
--- a/src/screens/Home/HomeNextRace.tsx
+++ b/src/screens/Home/HomeNextRace.tsx
@@ -42,13 +42,15 @@ 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}
@@ -56,11 +58,13 @@ export const HomeNextRace = () => {
             />
           )}
 
-          <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>
diff --git a/src/screens/RaceResult/RaceQualifying.tsx b/src/screens/RaceResult/RaceQualifying.tsx
index 1b2d5bf..ad11def 100644
--- a/src/screens/RaceResult/RaceQualifying.tsx
+++ b/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>
   );
 };
diff --git a/src/screens/RaceResult/RaceResult.tsx b/src/screens/RaceResult/RaceResult.tsx
index 940f1d3..1de79df 100644
--- a/src/screens/RaceResult/RaceResult.tsx
+++ b/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>
diff --git a/src/screens/RaceResult/RaceResultSprint.tsx b/src/screens/RaceResult/RaceResultSprint.tsx
index eab1068..df2cfdf 100644
--- a/src/screens/RaceResult/RaceResultSprint.tsx
+++ b/src/screens/RaceResult/RaceResultSprint.tsx
@@ -1,6 +1,8 @@
+import { Text } from "react-native-paper";
 import { ListItemResult } from "../../components/ListItemResult";
 import { SectionContainer } from "../../components/SectionContainer";
 import { useSprintResults } from "../../hooks/useSprintResults";
+import { Theme } from "../../theme";
 
 type Props = {
   season: string;
@@ -13,10 +15,6 @@ export const RaceResultSprint = ({ season, round }: Props) => {
   const race = data?.MRData.RaceTable.Races[0];
   const results = race?.SprintResults;
 
-  if (!isLoading && !isError && !results?.length) {
-    return null;
-  }
-
   return (
     <SectionContainer
       name="Sprint"
@@ -28,6 +26,18 @@ export const RaceResultSprint = ({ season, round }: Props) => {
       {results?.map((result) => (
         <ListItemResult key={result.position} result={result} />
       ))}
+
+      {!results?.length && (
+        <Text
+          style={{
+            fontFamily: Theme.fonts.special,
+            color: Theme.colors.primary,
+            marginTop: Theme.space.xs,
+          }}
+        >
+          No sprint race
+        </Text>
+      )}
     </SectionContainer>
   );
 };
diff --git a/src/screens/RaceSchedule/RaceSchedule.tsx b/src/screens/RaceSchedule/RaceSchedule.tsx
new file mode 100644
index 0000000..e9fbc60
--- /dev/null
+++ b/src/screens/RaceSchedule/RaceSchedule.tsx
@@ -0,0 +1,41 @@
+import { useRoute, RouteProp } from "@react-navigation/native";
+import { View } from "react-native";
+import { ScreenContainer } from "../../components/ScreenContainer";
+import { Theme } from "../../theme";
+import { Text } from "react-native-paper";
+import { RaceScheduleInfo } from "./RaceScheduleInfo";
+
+type ParamList = {
+  RaceSchedule: {
+    season: string;
+    round: string;
+    raceName: string;
+  };
+};
+
+export const RaceSchedule = () => {
+  const route = useRoute<RouteProp<ParamList, "RaceSchedule">>();
+  const { season, round, raceName } = route.params;
+
+  return (
+    <ScreenContainer title="RACE SCHEDULE" showBack showMenu={false}>
+      <Text
+        variant="titleLarge"
+        style={{
+          color: Theme.colors.secondary,
+          fontFamily: Theme.fonts.special,
+        }}
+      >
+        {raceName}
+      </Text>
+
+      <View
+        style={{
+          marginTop: Theme.space.xs,
+        }}
+      >
+        <RaceScheduleInfo season={season} round={round} />
+      </View>
+    </ScreenContainer>
+  );
+};
diff --git a/src/screens/RaceSchedule/RaceScheduleInfo.tsx b/src/screens/RaceSchedule/RaceScheduleInfo.tsx
new file mode 100644
index 0000000..8adb085
--- /dev/null
+++ b/src/screens/RaceSchedule/RaceScheduleInfo.tsx
@@ -0,0 +1,68 @@
+import { View } from "react-native";
+import { Theme } from "../../theme";
+import { InfoItem } from "../../components/InfoItem";
+import { formatDate } from "../../helpers/formatDate";
+import { SectionContainer } from "../../components/SectionContainer";
+import { useRaceSchedule } from "../../hooks/useRaceSchedule";
+
+type Props = {
+  season: string;
+  round: string;
+};
+
+export const RaceScheduleInfo = ({ season, round }: Props) => {
+  const { data, isLoading, isError } = useRaceSchedule({ season, round });
+
+  const race = data?.MRData.RaceTable.Races[0];
+
+  return (
+    <SectionContainer name="Info" isLoading={isLoading} isError={isError}>
+      {race && (
+        <View
+          style={{
+            marginTop: Theme.space.xs,
+          }}
+        >
+          <InfoItem
+            title="Season / Round"
+            value={`${race.season} / ${race.round}`}
+          />
+          <InfoItem title="Date" value={formatDate(race.date, race.time)} />
+          {race.Sprint && (
+            <InfoItem
+              title="Sprint"
+              value={formatDate(race.Sprint.date, race.Sprint.time)}
+            />
+          )}
+          {race.Qualifying && (
+            <InfoItem
+              title="Qualifying"
+              value={formatDate(race.Qualifying.date, race.Qualifying.time)}
+            />
+          )}
+          {!race.Sprint && race.SecondPractice && (
+            <InfoItem
+              title="Practice 2"
+              value={formatDate(
+                race.SecondPractice.date,
+                race.SecondPractice.time
+              )}
+            />
+          )}
+          {race.FirstPractice && (
+            <InfoItem
+              title="Practice 1"
+              value={formatDate(
+                race.FirstPractice.date,
+                race.FirstPractice.time
+              )}
+            />
+          )}
+          <InfoItem title="Country" value={race.Circuit.Location.country} />
+          <InfoItem title="Locality" value={race.Circuit.Location.locality} />
+          <InfoItem title="Circuit" value={race.Circuit.circuitName} />
+        </View>
+      )}
+    </SectionContainer>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
index 4acab1d..7484ce8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -53,7 +53,7 @@ export type QualifyingResult = {
   Q3: string
 };
 
-export type Race = {
+export type RaceBase = {
   season: string;
   round: string;
   url: string;
@@ -61,27 +61,34 @@ export type Race = {
   Circuit: Circuit;
   date: string;
   time?: string;
-  FirstPractice: {
+}
+
+export type Race = RaceBase & {
+  FirstPractice?: {
+    date: string;
+    time: string;
+  };
+  Qualifying?: {
     date: string;
     time: string;
   };
-  Qualifying: {
+  SecondPractice?: {
     date: string;
     time: string;
   };
-  SecondPractice: {
+  Sprint?: {
     date: string;
     time: string;
   };
 };
 
-export type RaceResults = Race & {
+export type RaceResults = RaceBase & {
   Results?: Result[];
 };
 
-export type RaceSprintResults = Race & { SprintResults?: Result[] };
+export type RaceSprintResults = RaceBase & { SprintResults?: Result[] };
 
-export type QualifyingResults = Race & { QualifyingResults?: QualifyingResult[] };
+export type QualifyingResults = RaceBase & { QualifyingResults?: QualifyingResult[] };
 
 export type Driver = {
   driverId: string;