I added the functionality to save data from the lists of cities with …

…async storage and changed the appearance of the image in the Location component, to make the statusbar transparent.
aline-borges · Nov 4, 2020 · f6bc975 · f6bc975
1 parent 074d7d7
commit f6bc975
Show file tree

Hide file tree

Showing 4 changed files with 6,061 additions and 28 deletions.
diff --git a/src/screens/Location/index.js b/src/screens/Location/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   StyleSheet,
   Text,
@@ -11,7 +11,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 const Location = ({ route }) => {
   const { cityData } = route.params;
-
+  
   const timezone = cityData.data2.timezone;
   const time = parseInt(new Date().toLocaleTimeString("pt-BR", {timeZone: timezone}).split(':')[0]);
   const timestampHourNow = new Date(cityData.data2.hourly[0].dt * 1000);
@@ -436,6 +436,11 @@ const styles = StyleSheet.create({
   image: {
     flex: 1,
     justifyContent: 'center',
+    position: 'absolute',
+    top: -70,
+    bottom: 0,
+    left: 0,
+    right: 0
   },
 });
 

diff --git a/src/screens/Locations/index.js b/src/screens/Locations/index.js
@@ -1,42 +1,84 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   ScrollView,
+  Alert,
+  Animated
 } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Feather } from '@expo/vector-icons';
-//import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import OpenWeather, { getOneCall } from '../../services/apis/openWeather';
 
 const Locations = ({ navigation }) => {
-  return (
-    <LinearGradient colors={['#2EA6CD', '#285292']} style={styles.container}>
-      <ScrollView style={styles.containerGeneral}>
-        <SafeAreaView>
-          <View style={styles.containerRow}>
-            <View style={styles.container}>
-              <Text style={styles.city}>Rio de Janeiro</Text>
-              <Text style={styles.time}>04:42</Text>
-            </View>
-            <Text style={styles.temperature}>19°</Text>
-          </View>
-          <View style={styles.containerRow}>
-            <View style={styles.container}>
-              <Text style={styles.city}>Tóquio</Text>
-              <Text style={styles.time}>16:42</Text>
-            </View>
-            <Text style={styles.temperature}>22°</Text>
-          </View>
+  const [locations, setLocations] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    getCities();
+  }, []);
+
+  const getCities = async () => {
+    setLoading(true);
+    const cities = JSON.parse(await AsyncStorage.getItem("locationData")) || [];
+    const locations = [];
+    for (let city of cities) {
+      const response = await OpenWeather(city)
+      const response2 = await getOneCall(response.coord.lat, response.coord.lon);
+      const timezone = response2.timezone;
+      const time = new Date().toLocaleTimeString("pt-BR", {timeZone: timezone}).split(':');
+      const hour = `${time[0]}:${time[1]}`;
+      const datas = {data: response, data2: response2}
+      const location = {
+        data: response,
+        data2: response2,
+        hour: hour
+      }
+      locations.push(location);
+    }
+
+    setLocations(locations);
+    setLoading(false)
+  };
+
+  const renderLocation = location => {
+    return (
+      <Swipeable
+      key={location.data.id}
+      >
+        <TouchableOpacity  onPress={() => goToLocation(location)}>
           <View style={styles.containerRow}>
             <View style={styles.container}>
-              <Text style={styles.city}>Vancouver</Text>
-              <Text style={styles.time}>00:42</Text>
+              <Text style={styles.city}>{location.data.name}</Text>
+              <Text style={styles.time}>{location.hour}</Text>
             </View>
-            <Text style={styles.temperature}>16°</Text>
+            <Text style={styles.temperature}>{parseInt(location.data.main.temp)}°</Text>
           </View>
+        </TouchableOpacity>
+      </Swipeable>
+    );
+  };
+
+  const goToLocation = (data) => {
+    navigation.navigate('Location', { cityData: data })
+  };
+
+  return (
+    <LinearGradient colors={['#2EA6CD', '#285292']} style={styles.container}>
+      <ScrollView style={styles.containerGeneral}>
+        <SafeAreaView>
+          {locations.map(location => renderLocation(location))}
+          {loading && (
+            <Text>Carregando cidades</Text>
+          )}
           <TouchableOpacity onPress={() => navigation.navigate('Search')}>
             <Feather name="plus-circle" style={styles.icon} />
           </TouchableOpacity>
@@ -54,6 +96,15 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 25,
   },
+  rightActions: {
+    backgroundColor: '#FF3B30',
+    justifyContent: 'center',
+  },
+  actionText: {
+    fontSize: 16,
+    color: '#FEFEFE',
+    padding: 20
+  },
   containerRow: {
     flexDirection: 'row',
     paddingTop: 25,

diff --git a/src/screens/Search/index.js b/src/screens/Search/index.js
@@ -6,21 +6,34 @@ import {
   View,
   Image,
   TouchableOpacity,
+  Alert
 } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Feather } from '@expo/vector-icons';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import AsyncStorage from '@react-native-community/async-storage';
 
 import OpenWeather, { getOneCall } from '../../services/apis/openWeather';
 
 const Search = ({ navigation }) => {
   const [query, setQuery] = useState('');
 
+  const saveData = async (name) => {
+    const cities = JSON.parse(await AsyncStorage.getItem("locationData")) || [];
+    const cityName = name.toLowerCase()
+    if (cities.includes(cityName)) return;
+    const locations = [...cities, cityName];
+    AsyncStorage.setItem("locationData", JSON.stringify(locations));
+  }
+
   const handleSubmit = async () => {
     const data = await OpenWeather(query);
-    const data2 = await getOneCall(data.coord.lat, data.coord.lon);
-    const datas = {data: data, data2: data2}
-    navigation.navigate('Location', { cityData: datas });
+    if (data.cod === 200) {
+      const data2 = await getOneCall(data.coord.lat, data.coord.lon);
+      const datas = {data: data, data2: data2}
+      saveData(data.name);
+      navigation.navigate('Location', { cityData: datas });
+    }
   };
 
   return (