armadiazrino

App.js

Nov 29th, 2020
637
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState } from "react"
  2. import { ScrollView, StatusBar, StyleSheet, View } from "react-native"
  3. import Header from "./component/Header"
  4. import PrayerScheduleCard from "./component/PrayerScheduleCard"
  5.  
  6. const App = () => {
  7.   const [shalatSchedule, setShalatSchedule] = useState(undefined)
  8.  
  9.   useEffect(() => {
  10.     fetchJadwalSholat()
  11.   }, [])
  12.  
  13.   const fetchJadwalSholat = async () => {
  14.     try {
  15.       const apiName =
  16.         "http://api.aladhan.com/v1/hijriCalendarByCity?city=Jakarta&country=Indonesia"
  17.       let response = await fetch(apiName)
  18.       let responseJson = await response.json()
  19.       if (responseJson) {
  20.         var timings = []
  21.         Object.entries(responseJson.data[0].timings).forEach(([key, value]) => {
  22.           timings.push({
  23.             title: key,
  24.             time: value,
  25.           })
  26.         })
  27.         setShalatSchedule(timings)
  28.         console.log("sholat timings ->", timings)
  29.       }
  30.     } catch (error) {
  31.       console.log("error ->", error)
  32.     }
  33.   }
  34.   return (
  35.     <ScrollView style={styles.mainContainer}>
  36.       <StatusBar backgroundColor={"rgb(239,81,83)"} />
  37.       <Header title={"Hello Rino!"} time={"15:31"} />
  38.       <View style={styles.prayerCardContainer}>
  39.         <PrayerScheduleCard location={"Bandung"} prayers={shalatSchedule} />
  40.       </View>
  41.     </ScrollView>
  42.   )
  43. }
  44.  
  45. const styles = StyleSheet.create({
  46.   mainContainer: {
  47.     backgroundColor: "rgb(255,248,222)",
  48.     flexGrow: 1,
  49.   },
  50.   prayerCardContainer: {
  51.     top: -48,
  52.   },
  53. })
  54. export default App
  55.  
RAW Paste Data