refactory and results page

belmirofss · Nov 8, 2023 · aff20cf · aff20cf
1 parent b25fb8a
commit aff20cf
Show file tree

Hide file tree

Showing 27 changed files with 236 additions and 166 deletions.
diff --git a/App.tsx b/App.tsx
@@ -72,10 +72,10 @@ export default function App() {
       <QueryClientProvider client={queryClient}>
         <PaperProvider theme={theme}>
           <AppProvider>
+            <Ad />
             <NavigationContainer>
               <Routes />
             </NavigationContainer>
-            <Ad />
           </AppProvider>
           <StatusBar hidden />
         </PaperProvider>

diff --git a/app.json b/app.json
@@ -3,7 +3,7 @@
     "name": "F1HUB",
     "slug": "f1hub",
     "scheme": "com.yabcompany.f1hub",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -20,7 +20,7 @@
     },
     "android": {
       "package": "com.yabcompany.f1hub",
-      "versionCode": 5,
+      "versionCode": 6,
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#121212"

diff --git a/src/components/FlagIcon.tsx b/src/components/FlagIcon.tsx
@@ -1,20 +1,28 @@
 import { Image } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { Theme } from "../theme";
+import {
+  buildCountryFlagUrlByName,
+  buildCountryFlagUrlByNationality,
+} from "../helpers/countries";
 
 type Props = {
-  url: string | undefined;
+  nationality?: string | undefined;
+  country?: string | undefined;
 };
 
-export const FlagIcon = ({ url }: Props) => {
-  if (!url) {
+export const FlagIcon = ({ nationality, country }: Props) => {
+  const urlByNationality = buildCountryFlagUrlByNationality(nationality ?? "");
+  const urlByCountry = buildCountryFlagUrlByName(country ?? "");
+
+  if (!urlByNationality && !urlByCountry) {
     return <Entypo name="block" size={24} color={Theme.colors.light} />;
   }
 
   return (
     <Image
       source={{
-        uri: url,
+        uri: urlByNationality ?? urlByCountry,
       }}
       style={{
         width: 24,

diff --git a/src/components/ListItemConstructor.tsx b/src/components/ListItemConstructor.tsx
@@ -3,22 +3,20 @@ import { ListItemCounter } from "./ListItemCounter";
 import { ListItemPts } from "./ListItemPts";
 import { ListItemTitle } from "./ListItemTitle";
 import { FlagIcon } from "./FlagIcon";
-import { buildCountryFlagUrlByNationality } from "../helpers/countries";
 import { ListItem } from "./ListItem";
 import { Theme } from "../theme";
+import { Constructor } from "../types";
 
 export type Props = {
   position: string;
   points: string;
-  constructorName: string;
-  nationality: string;
+  konstructor: Constructor;
 };
 
 export const ListItemConstructor = ({
   position,
   points,
-  constructorName,
-  nationality,
+  konstructor,
 }: Props) => {
   return (
     <ListItem>
@@ -34,10 +32,10 @@ export const ListItemConstructor = ({
         <View style={{ flexDirection: "row", gap: Theme.space.xs }}>
           <View style={{ flexDirection: "row", alignItems: "center" }}>
             <ListItemCounter value={position} />
-            <FlagIcon url={buildCountryFlagUrlByNationality(nationality)} />
+            <FlagIcon nationality={konstructor.nationality} />
           </View>
 
-          <ListItemTitle>{constructorName}</ListItemTitle>
+          <ListItemTitle>{konstructor.name}</ListItemTitle>
         </View>
 
         <ListItemPts points={points} />

diff --git a/src/components/ListItemCounter.tsx b/src/components/ListItemCounter.tsx
@@ -10,11 +10,11 @@ export const ListItemCounter = ({ value }: Props) => {
   return (
     <View
       style={{
-        width: 42,
+        width: 36,
       }}
     >
       <Text
-        variant="bodyLarge"
+        variant="bodyMedium"
         style={{
           color: Theme.colors.light,
           fontFamily: Theme.fonts.special,

diff --git a/src/components/ListItemDriver.tsx b/src/components/ListItemDriver.tsx
@@ -3,27 +3,23 @@ import { ListItemPts } from "./ListItemPts";
 import { ListItemTitle } from "./ListItemTitle";
 import { ListItemDescription } from "./ListItemDescription";
 import { FlagIcon } from "./FlagIcon";
-import { buildCountryFlagUrlByNationality } from "../helpers/countries";
 import { View } from "react-native";
 import { ListItem } from "./ListItem";
 import { Theme } from "../theme";
+import { Driver } from "../types";
 
 export type Props = {
   position: string;
   points: string;
-  givenName: string;
-  familyName: string;
+  driver: Driver;
   constructorName: string;
-  nationality: string;
 };
 
 export const ListItemDriver = ({
   position,
   points,
-  givenName,
-  familyName,
+  driver,
   constructorName,
-  nationality,
 }: Props) => {
   return (
     <ListItem>
@@ -39,12 +35,12 @@ export const ListItemDriver = ({
         <View style={{ flexDirection: "row", gap: Theme.space.xs }}>
           <View style={{ flexDirection: "row", alignItems: "center" }}>
             <ListItemCounter value={position} />
-            <FlagIcon url={buildCountryFlagUrlByNationality(nationality)} />
+            <FlagIcon nationality={driver.nationality} />
           </View>
 
           <View>
             <ListItemTitle>
-              {givenName} {familyName}
+              {driver.givenName} {driver.familyName}
             </ListItemTitle>
             <ListItemDescription>{constructorName}</ListItemDescription>
           </View>

diff --git a/src/components/ListItemRace.tsx b/src/components/ListItemRace.tsx
@@ -1,42 +1,47 @@
 import { View } from "react-native";
-import { Text, TouchableRipple } from "react-native-paper";
-import { useTimezone } from "../hooks/useTimezone";
+import { Text } from "react-native-paper";
 import { ListItemCounter } from "./ListItemCounter";
 import { FlagIcon } from "./FlagIcon";
-import { buildCountryFlagUrlByName } from "../helpers/countries";
 import { Theme } from "../theme";
-import moment from "moment";
 import { ListItemTitle } from "./ListItemTitle";
 import { ListItemDescription } from "./ListItemDescription";
 import { Ionicons } from "@expo/vector-icons";
 import { ListItem } from "./ListItem";
 import { useNavigation } from "@react-navigation/native";
+import { useLastRaceResults } from "../hooks/useLastRaceResults";
+import { Race } from "../types";
+import { formatDate } from "../helpers/formatDate";
 
 export type Props = {
-  season: string;
-  round: string;
-  country: string;
-  date: string;
-  time: string;
-  raceName: string;
-  circuitName: string;
+  race: Race;
 };
 
-export const ListItemRace = ({
-  season,
-  round,
-  country,
-  date,
-  time,
-  raceName,
-  circuitName,
-}: Props) => {
-  const timezone = useTimezone();
+export const ListItemRace = ({ race }: Props) => {
   const navigation = useNavigation();
 
+  const { data, isLoading, isError } = useLastRaceResults();
+
+  if (isLoading || isError || !data) {
+    return null;
+  }
+
+  const lastRace = data.MRData.RaceTable.Races[0];
+  const existResults =
+    Number(race.season) < Number(lastRace.season) ||
+    (Number(race.season) === Number(lastRace.season) &&
+      Number(race.round) <= Number(lastRace.round));
+
   return (
     <ListItem
-      onClick={() => navigation.navigate("RaceResult", { season, round })}
+      onClick={
+        existResults
+          ? () =>
+              navigation.navigate("RaceResult", {
+                season: race.season,
+                round: race.round,
+              })
+          : undefined
+      }
     >
       <View
         style={{
@@ -55,8 +60,8 @@ export const ListItemRace = ({
               justifyContent: "center",
             }}
           >
-            <ListItemCounter value={round} />
-            <FlagIcon url={buildCountryFlagUrlByName(country)} />
+            <ListItemCounter value={race.round} />
+            <FlagIcon country={race.Circuit.Location.country} />
           </View>
 
           <View>
@@ -67,14 +72,20 @@ export const ListItemRace = ({
                 fontFamily: Theme.fonts.special,
               }}
             >
-              {moment(`${date} ${time}`).tz(timezone).format("MMM DD[,] HH:mm")}
+              {formatDate(race.date, race.time)}
             </Text>
-            <ListItemTitle>{raceName}</ListItemTitle>
-            <ListItemDescription>{circuitName}</ListItemDescription>
+            <ListItemTitle>{race.raceName}</ListItemTitle>
+            <ListItemDescription>
+              {race.Circuit.circuitName}
+            </ListItemDescription>
           </View>
         </View>
 
-        <Ionicons name="chevron-forward" size={18} color={Theme.colors.light} />
+        <Ionicons
+          name={existResults ? "chevron-forward" : "hourglass-outline"}
+          size={18}
+          color={Theme.colors.light}
+        />
       </View>
     </ListItem>
   );

diff --git a/src/components/ListItemResult.tsx b/src/components/ListItemResult.tsx
@@ -0,0 +1,45 @@
+import { ListItemCounter } from "./ListItemCounter";
+import { ListItemTitle } from "./ListItemTitle";
+import { ListItemDescription } from "./ListItemDescription";
+import { FlagIcon } from "./FlagIcon";
+import { View } from "react-native";
+import { ListItem } from "./ListItem";
+import { Theme } from "../theme";
+import { ListItemTime } from "./ListItemTime";
+import { Result } from "../types";
+
+export type Props = {
+  result: Result;
+};
+
+export const ListItemResult = ({ result }: Props) => {
+  return (
+    <ListItem>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: Theme.space.xs,
+        }}
+      >
+        <View style={{ flexDirection: "row", gap: Theme.space.xs }}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <ListItemCounter value={result.position} />
+            <FlagIcon nationality={result.Driver.nationality} />
+          </View>
+
+          <View>
+            <ListItemTitle>
+              {result.Driver.givenName} {result.Driver.familyName}
+            </ListItemTitle>
+            <ListItemDescription>{result.Constructor.name}</ListItemDescription>
+          </View>
+        </View>
+
+        <ListItemTime time={result.Time?.time} status={result.status} />
+      </View>
+    </ListItem>
+  );
+};
diff --git a/src/components/ListItemTime.tsx b/src/components/ListItemTime.tsx
@@ -0,0 +1,30 @@
+import { View } from "react-native";
+import { Text } from "react-native-paper";
+import { Theme } from "../theme";
+
+type Props = {
+  time?: string;
+  status?: string;
+};
+
+export const ListItemTime = ({ time, status }: Props) => {
+  const timeAlternative = status?.includes("Lap") ? status : "DNF";
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+      }}
+    >
+      <Text
+        variant="bodySmall"
+        style={{
+          color: Theme.colors.secondary,
+          fontFamily: Theme.fonts.special,
+        }}
+      >
+        {time ?? timeAlternative}
+      </Text>
+    </View>
+  );
+};
diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
@@ -4,13 +4,15 @@ import { Button, Menu, Text } from "react-native-paper";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Theme } from "../theme";
 
+type Item = {
+  value: string;
+  text: string;
+};
+
 type Props = {
   label: string;
   selected: string;
-  items: {
-    value: string;
-    text: string;
-  }[];
+  items: Item[];
   onSelection: (value: string) => void;
 };
 

diff --git a/src/helpers/formatDate.ts b/src/helpers/formatDate.ts
@@ -0,0 +1,14 @@
+import moment from "moment-timezone";
+
+export const getTimezone = () => moment.tz.guess()
+
+export const convertToMoment = (date: string, time?: string) => {
+ return date && time ? moment(`${date} ${time}`) : moment(date);
+}
+
+export const formatDate = (date: string, time?: string) => {
+  const format = date && time ? "MMM DD[,] HH:mm" : "MMM DD"
+  const timezone = getTimezone();
+  const momentValue = convertToMoment(date, time)
+  return momentValue.tz(timezone).format(format);
+};
diff --git a/src/hooks/useTimezone.ts b/src/hooks/useTimezone.ts