second commit

Nishchay1571999 · Jul 12, 2022 · fc10847 · fc10847
1 parent c2f490c
commit fc10847
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 42 deletions.
diff --git a/src/components/Weather.tsx b/src/components/Weather.tsx
@@ -1,4 +1,4 @@
-import { View, Text, Image } from "react-native";
+import { View, Text, Image,StyleSheet } from "react-native";
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { Weatherfor, apikey } from "../Utilities/utilities";
@@ -11,6 +11,7 @@ const Weather = (props: Weatherfor) => {
   const [windspeed, setWindSpeed] = useState<number>();
   const [percip,setPercip] = useState<number>()
   const [weathericon, setWeatherIcon] = useState<string>();
+  const [ loading,setLoading] = useState<boolean>(true)
   useEffect(() => {
     getdata();
   }, []);
@@ -24,9 +25,12 @@ const Weather = (props: Weatherfor) => {
         setWeatherIcon(res.data.current.weather_icons[0]);
         setWindSpeed(res.data.current.wind_speed);
         setPercip(res.data.current.precip);
+        setLoading(false);
       });
   };
-
+  if (loading) {
+    return <View style={styles.loading}><Text>Loading...</Text></View>;
+  }
   return (
     <View style={{
         flexDirection:"column",
@@ -72,3 +76,10 @@ const Weather = (props: Weatherfor) => {
 };
 
 export default Weather;
+const styles = StyleSheet.create({
+  loading:{
+    alignItems:'center',
+    justifyContent:'center',
+    marginTop:150,
+  }
+})
diff --git a/src/screens/Detail.tsx b/src/screens/Detail.tsx
@@ -1,18 +1,18 @@
-import { View, Text, Image, Button } from "react-native";
+import { View, Text, Image, Button, Alert, StyleSheet } from "react-native";
 import React, { useEffect, useState } from "react";
 import { Data, Details } from "../Utilities/utilities";
 import axios from "axios";
 import Weather from "../components/Weather";
 
-
 const Detail = ({ navigation, route }) => {
-
   const country: Data = route.params;
   const [capital, setCapital] = useState<string>();
   const [latitudecap, setLatitudeCap] = useState<number>();
   const [longitudecap, setLongitudeCap] = useState<number>();
   const [flagurl, setFlagUrl] = useState<string>();
-  const[showweather,setShowWeather ]=useState<boolean>(false)
+  const [showweather, setShowWeather] = useState<boolean>(false);
+  const [recived, setRecived] = useState<boolean>(false);
+  const [falsedata, setFalseData] = useState<boolean>(false);
 
   useEffect(() => {
     getdata();
@@ -26,10 +26,17 @@ const Detail = ({ navigation, route }) => {
         setLatitudeCap(res.data[0].capitalInfo.latlng[0]);
         setLongitudeCap(res.data[0].capitalInfo.latlng[1]);
         setFlagUrl(res.data[0].flags.png);
-        console.log(res.data[0].flags.png);
+        setRecived(true);
+      })
+      .catch((err) => {
+        setRecived(true);
+        setFalseData(true);
+        Alert.alert("Enter an appropriate country name");
       });
   };
-
+  if (!recived) {
+    return <View style={styles.loading}><Text>Loading...</Text></View>;
+  }
   return (
     <View
       style={{
@@ -38,46 +45,76 @@ const Detail = ({ navigation, route }) => {
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
-        padding:10,
+        padding: 10,
       }}
     >
-      <Text>Country:</Text>
-      <Text style={{
-        marginBottom:20,
-        fontSize:28,
-      }}>{country.text}</Text>
-      <Text>Capital:</Text>
-      <Text style={{
-        marginBottom:20,
-        fontSize:28,
-      }}>{capital}</Text>
-      <Text>Long:</Text>
-      <Text style={{
-        marginBottom:20,
-        fontSize:28,
-      }}>{longitudecap}</Text>
+      {!falsedata ? (
+        <View>
+          <Text>Country:</Text>
+          <Text
+            style={{
+              marginBottom: 20,
+              fontSize: 28,
+            }}
+          >
+            {country.text}
+          </Text>
+          <Text>Capital:</Text>
+          <Text
+            style={{
+              marginBottom: 20,
+              fontSize: 28,
+            }}
+          >
+            {capital}
+          </Text>
+          <Text>Long:</Text>
+          <Text
+            style={{
+              marginBottom: 20,
+              fontSize: 28,
+            }}
+          >
+            {longitudecap}
+          </Text>
 
-      <Text>Lat:</Text>
-      <Text style={{
-        marginBottom:20,
-        fontSize:28,
-      }}>{latitudecap}</Text>
-      <Text>Flag:</Text>
-      <Image
-        source={{ uri: flagurl }}
-        resizeMode="contain"
-        style={{
-          width: 100,
-          height: 100,
-        }}
-      />
+          <Text>Lat:</Text>
+          <Text
+            style={{
+              marginBottom: 20,
+              fontSize: 28,
+            }}
+          >
+            {latitudecap}
+          </Text>
+          <Text>Flag:</Text>
+          <Image
+            source={{ uri: flagurl }}
+            resizeMode="contain"
+            style={{
+              width: 100,
+              height: 100,
+            }}
+          />
+          <Button
+            title="Weather"
+            onPress={() => setShowWeather(!showweather)}
+          />
+          {showweather ? <Weather city={capital} /> : null}
+        </View>
+      ) : null}
 
-      <Button title="Weather" onPress={()=>setShowWeather(!showweather)}/>
-      {
-        showweather?<Weather city={capital}/>:null
-      }
+      <Button title="go back"  onPress={() => navigation.goBack()} />
     </View>
   );
 };
 
 export default Detail;
+
+const styles = StyleSheet.create({
+  loading:{
+    alignItems:'center',
+    justifyContent:'center',
+    marginTop:150,
+  },
+})