Implementing current day weather forecast

src/app/api/weather_forecast.js

@@ -0,0 +1,58 @@
+/*
+ * Weather index mapping:
+ *  0: Sol
+ *  1: Sol entre nuvens
+ *  2: Chuva
+ *  3: Chuva forte
+ *  4: Nuvens
+ *  5: Céu limpo
+ *
+ */
+
+function getWeatherForecast() {
+  return {
+    city: "São Jose dos Campos",
+    state: "SP",
+    today_forecast: {
+      date: "18 de Março",
+      morning_weather_index: 1,
+      evening_weather_index: 1,
+      night_weather_index: 4,
+      rain_probability: 10,
+    },
+    next_forecast: [
+      {
+        week_day: "Segunda",
+        date: "19/03",
+        weather_index: 0,
+        rain_fall_mm: 0,
+      },
+      {
+        week_day: "Terça",
+        date: "20/03",
+        weather_index: 2,
+        rain_fall_mm: 5,
+      },
+      {
+        week_day: "Quarta",
+        date: "21/03",
+        weather_index: 2,
+        rain_fall_mm: 5,
+      },
+      {
+        week_day: "Quinta",
+        date: "22/03",
+        weather_index: 2,
+        rain_fall_mm: 5,
+      },
+      {
+        week_day: "Sexta",
+        date: "23/03",
+        weather_index: 1,
+        rain_fall_mm: 0,
+      },
+    ],
+  };
+}
+
+export default getWeatherForecast;

src/app/config/dimensions.js

@@ -8,7 +8,7 @@ const dimensions = {
     header: 26,
     secondary: 18,
     default: 16,
-    tertiary: 12,
+    tertiary: 14,
   },
 
   spacing: {

src/app/screens/ForecastScreen.js

@@ -1,8 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import Screen from "../components/Screen";
 import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
 import { dimensions } from "../config/dimensions";
 import colors from "../config/colors";
+import { EventLocationContext } from "../context/EventLocationContext";
+import getWeatherForecast from "../api/weather_forecast";
+import assets from "../config/assets";
 
 function forecastDay(day, setDay) {
   return (
@@ -36,21 +39,142 @@ function forecastDay(day, setDay) {
   );
 }
 
-function renderTodayForecast() {
-  return <Text>dia</Text>;
+function weatherIndexToString(weather_index) {
+  return [
+    "Sol",
+    "Sol entre nuvens",
+    "Chuva",
+    "Chuva forte",
+    "Nuvens",
+    "Céu limpo",
+  ][weather_index];
 }
 
-function renderWeekForecast() {
+function WeatherInput(weather_index, weather_title) {
+  const SvgImage = assets.weather_icons[weather_index];
+  return (
+    <View style={{ width: "50%", ...styles.centered }}>
+      <Text
+        style={{
+          fontSize: dimensions.text.default,
+          fontWeight: "bold",
+          paddingBottom: 8,
+        }}
+      >
+        {weather_title}
+      </Text>
+      <SvgImage />
+      <Text
+        style={{
+          fontSize: dimensions.text.tertiary,
+          fontWeight: "bold",
+          paddingVertical: 8,
+        }}
+      >
+        {weatherIndexToString(weather_index)}
+      </Text>
+    </View>
+  );
+}
+
+function renderTodayForecast(forecast) {
+  return (
+    <View style={styles.centered}>
+      {WeatherInput(forecast.today_forecast.morning_weather_index, "Manhã")}
+      <Text
+        style={{
+          paddingTop: 26,
+          fontWeight: "bold",
+          fontSize: dimensions.text.default,
+        }}
+      >
+        Probabilidade de chuva {forecast.today_forecast.rain_probability}%
+      </Text>
+      <View
+        style={{
+          paddingVertical: 44,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+        }}
+      >
+        {WeatherInput(forecast.today_forecast.evening_weather_index, "Tarde")}
+        {WeatherInput(forecast.today_forecast.night_weather_index, "Noite")}
+      </View>
+    </View>
+  );
+}
+
+function renderWeekForecast(forecast) {
   return <Text>semana</Text>;
 }
 
-function ForecastScreen(props) {
+function currentLocationAndDate(forecast, day) {
+  return (
+    <View
+      style={{
+        paddingTop: 25,
+        paddingBottom: 35,
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <Text
+        style={{
+          fontWeight: "500",
+          fontSize: dimensions.text.default,
+        }}
+      >
+        {forecast.city}, {forecast.state}
+      </Text>
+
+      <Text
+        style={{
+          fontWeight: "500",
+          fontSize: dimensions.text.tertiary,
+          color: colors.gray,
+        }}
+      >
+        {day == 0 ? forecast.today_forecast.date : "Próximos dias"}
+      </Text>
+    </View>
+  );
+}
+
+function renderScreen(forecast) {
   const [day, setDay] = useState(0);
 
   return (
-    <Screen style={styles.container}>
+    <View>
       {forecastDay(day, setDay)}
-      {day == 0 ? renderTodayForecast() : renderWeekForecast()}
+      {currentLocationAndDate(forecast, day)}
+
+      {day == 0 ? renderTodayForecast(forecast) : renderWeekForecast(forecast)}
+    </View>
+  );
+}
+
+function renderErrorScreen() {
+  return (
+    <Text
+      style={{
+        textAlign: "center",
+        paddingTop: 30,
+        fontSize: dimensions.text.secondary,
+        fontWeight: "bold",
+      }}
+    >
+      Previsão do tempo não disponível no momento
+    </Text>
+  );
+}
+
+function ForecastScreen(props) {
+  const forecast = getWeatherForecast();
+
+  return (
+    <Screen style={styles.container}>
+      {forecast ? renderScreen(forecast) : renderErrorScreen()}
     </Screen>
   );
 }
@@ -59,10 +183,14 @@ const styles = StyleSheet.create({
   container: {
     padding: dimensions.spacing.normal_padding,
   },
-
+  centered: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
   forecastDays: {
     flexDirection: "row",
     justifyContent: "space-between",
+    alignContent: "center",
   },
 
   forecastDayBtn: {