Skip to content

Commit a991d3f

Browse files
DanielBGCDanielBGC
committed
style: Estilizando a tela Astronomy Picture Of The Day
1 parent 144c8bf commit a991d3f

File tree

3 files changed

+97
-49
lines changed

3 files changed

+97
-49
lines changed

‎App.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import * as Sentry from '@sentry/react-native';
1313
import { ApodScreen } from '@screens/Apod/Apod';
1414
import { HomeScreen } from '@screens/Home/Home';
1515
import { RoversScreen } from '@screens/Rovers/Rovers';
16-
import { GalaxiesScreen } from '@screens/Galaxies/Galaxies';
1716

1817
import { Colors } from '@consts/consts';
1918
import { useGlobalStore } from '@store/store';
@@ -32,15 +31,15 @@ const CustomDrawerContent = ({ navigation }: any) => {
3231
return (
3332
<View style={styles.drawerContainer}>
3433
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Home')}>
34+
<MaterialIcons name="home" size={24} color={Colors.white} />
3535
<Text style={styles.drawerText}>Home</Text>
3636
</TouchableOpacity>
3737
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Apod')}>
38+
<MaterialIcons name="photo-camera" size={24} color={Colors.white} />
3839
<Text style={styles.drawerText}>Astronomy Picture Of the Day</Text>
3940
</TouchableOpacity>
40-
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Galaxies')}>
41-
<Text style={styles.drawerText}>Galaxies</Text>
42-
</TouchableOpacity>
4341
<TouchableOpacity style={styles.drawerButton} onPress={() => navigation.navigate('Rovers')}>
42+
<MaterialIcons name="precision-manufacturing" size={24} color={Colors.white} />
4443
<Text style={styles.drawerText}>Rovers</Text>
4544
</TouchableOpacity>
4645
</View>
@@ -73,7 +72,6 @@ const AppNavigator = () => {
7372
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
7473
<Drawer.Screen name="Home" component={HomeScreen} options={screenOptions} />
7574
<Drawer.Screen name="Apod" component={ApodScreen} options={screenOptions} />
76-
<Drawer.Screen name="Galaxies" component={GalaxiesScreen} options={screenOptions} />
7775
<Drawer.Screen name="Rovers" component={RoversScreen} options={screenOptions} />
7876
</Drawer.Navigator>
7977
);
@@ -102,6 +100,9 @@ const styles = StyleSheet.create({
102100
backgroundColor: Colors.darkGray,
103101
},
104102
drawerButton: {
103+
flexDirection: 'row',
104+
gap: 8,
105+
alignItems: 'center',
105106
marginVertical: 15,
106107
padding: 15,
107108
backgroundColor: Colors.purple,
@@ -110,5 +111,8 @@ const styles = StyleSheet.create({
110111
drawerText: {
111112
fontSize: 18,
112113
color: '#fff',
114+
flexWrap: 'wrap',
115+
width: '100%',
116+
flex: 1,
113117
},
114118
});

‎src/screens/Apod/Apod.tsx

+88-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { View, Text, StyleSheet, Image, ScrollView, Button } from 'react-native';
2+
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Alert } from 'react-native';
33
import { useQuery } from 'react-query';
44
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
55
import { format } from 'date-fns';
@@ -19,6 +19,13 @@ const fetchAPOD = async (date: string): Promise<ApodDataInterface> => {
1919
if (!response.ok) {
2020
throw new Error('Network response was not ok');
2121
}
22+
23+
const rateLimitLimit = response.headers.get('x-ratelimit-limit');
24+
const rateLimitRemaining = response.headers.get('x-ratelimit-remaining');
25+
26+
console.log(`x-ratelimit-limit: ${rateLimitLimit}`);
27+
console.log(`x-ratelimit-remaining: ${rateLimitRemaining}`);
28+
2229
return response.json();
2330
};
2431

@@ -28,7 +35,6 @@ export const ApodScreen = () => {
2835
const [selectedDate, setSelectedDate] = useState(new Date());
2936
const [dateString, setDateString] = useState(format(new Date(), 'yyyy-MM-dd'));
3037
const [showDatePicker, setShowDatePicker] = useState(false);
31-
const [isVideo, setIsVideo] = useState(false);
3238

3339
const { data, error, isLoading } = useQuery<ApodDataInterface, Error>(['apod', dateString], () =>
3440
fetchAPOD(dateString),
@@ -37,8 +43,6 @@ export const ApodScreen = () => {
3743
React.useEffect(() => {
3844
if (data) {
3945
console.log({ data });
40-
const verifyVideo = data.url.includes('youtube');
41-
setIsVideo(verifyVideo);
4246
}
4347
}, [data]);
4448

@@ -48,9 +52,21 @@ export const ApodScreen = () => {
4852
setGlobalLoading(isLoading);
4953
}, [isLoading]);
5054

55+
React.useEffect(() => {
56+
if (error) {
57+
Alert.alert(error.toString());
58+
}
59+
}, [error]);
60+
5161
const handleDateChange = (event: DateTimePickerEvent, date: Date | undefined) => {
5262
setShowDatePicker(false);
63+
5364
if (date) {
65+
if (date > new Date()) {
66+
Alert.alert('Cannot select a date greater than the current date');
67+
return false;
68+
}
69+
5470
setSelectedDate(date);
5571
setDateString(format(date, 'yyyy-MM-dd'));
5672
}
@@ -62,10 +78,24 @@ export const ApodScreen = () => {
6278

6379
return (
6480
<CustomSafeAreaView style={styles.screenContainer}>
65-
<ScrollView style={{ padding: 10 }}>
81+
<ScrollView style={{ paddingHorizontal: 10, marginBottom: 10 }}>
6682
<View>
67-
<View style={{ justifyContent: 'center', alignItems: 'center', marginBottom: 20 }}>
68-
<Button title="Select Date" onPress={openDatePicker} />
83+
<View
84+
style={{
85+
flexDirection: 'row',
86+
alignItems: 'center',
87+
marginBottom: 10,
88+
gap: 10,
89+
}}
90+
>
91+
<Text style={{ marginBottom: 10, color: Colors.white, fontSize: 16, flex: 2 }}>
92+
Change the date to fetch images from other days.
93+
</Text>
94+
<TouchableOpacity style={styles.dateButton} onPress={openDatePicker}>
95+
<Text style={{ color: Colors.white, fontSize: 16, fontWeight: 700 }}>
96+
Select Date
97+
</Text>
98+
</TouchableOpacity>
6999
{showDatePicker && (
70100
<DateTimePicker
71101
value={selectedDate}
@@ -76,31 +106,41 @@ export const ApodScreen = () => {
76106
)}
77107
</View>
78108

79-
<View style={{ gap: 10 }}>
109+
<View
110+
style={{
111+
flexDirection: 'row',
112+
alignItems: 'center',
113+
paddingBottom: 10,
114+
marginBottom: 20,
115+
borderBottomWidth: 1,
116+
borderColor: Colors.white,
117+
}}
118+
>
119+
<Text style={styles.labelValue}>Selected Date: </Text>
120+
<Text style={styles.textValue}>{format(selectedDate, 'dd/MM/yyyy')}</Text>
121+
</View>
122+
123+
<View style={{ gap: 4 }}>
80124
<Text style={styles.title}>{data?.title}</Text>
81125
<View>
82-
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>Explanation: </Text>
83-
<Text style={{ fontSize: 16 }}>{data?.explanation}</Text>
126+
<Text style={styles.labelValue}>Explanation: </Text>
127+
<Text style={styles.textValue}>{data?.explanation}</Text>
84128
</View>
85129
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
86-
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>Date: </Text>
87-
<Text style={{ fontSize: 16 }}>{data?.date}</Text>
88-
</View>
89-
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
90-
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>Copyright: </Text>
91-
<Text style={{ fontSize: 16 }}>
130+
<Text style={styles.labelValue}>Copyright: </Text>
131+
<Text style={styles.textValue}>
92132
{data?.copyright ? data.copyright?.trim() : 'No Copyrights'}
93133
</Text>
94134
</View>
95135
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
96-
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>Media Type: </Text>
97-
<Text style={{ fontSize: 16 }}>{data?.media_type}</Text>
136+
<Text style={styles.labelValue}>Media Type: </Text>
137+
<Text style={styles.textValue}>{data?.media_type}</Text>
98138
</View>
99139
</View>
100140

101141
{data?.media_type === 'video' ? (
102-
<Text style={{ fontSize: 16, marginTop: 10 }}>
103-
Video format not yet supported. Please wait for new updates.{' '}
142+
<Text style={{ fontSize: 16, marginTop: 10, color: Colors.white }}>
143+
Video format not yet supported. Please wait for new updates.
104144
</Text>
105145
) : (
106146
<View
@@ -124,16 +164,42 @@ const styles = StyleSheet.create({
124164
screenContainer: {
125165
flex: 1,
126166
padding: 8,
127-
backgroundColor: Colors.lightGray,
167+
backgroundColor: Colors.darkGray,
168+
},
169+
dateButton: {
170+
backgroundColor: Colors.purple,
171+
flex: 1,
172+
paddingHorizontal: 4,
173+
paddingVertical: 6,
174+
borderRadius: 4,
175+
justifyContent: 'center',
176+
alignItems: 'center',
128177
},
129178
title: {
130179
fontSize: 24,
131180
fontWeight: 'bold',
181+
color: Colors.white,
182+
textShadowColor: Colors.purple,
183+
textShadowOffset: { width: 3, height: 3 },
184+
textShadowRadius: 5,
185+
textAlign: 'center',
186+
},
187+
labelValue: {
188+
fontWeight: 'bold',
189+
fontSize: 18,
190+
color: Colors.white,
191+
textShadowColor: Colors.purple,
192+
textShadowOffset: { width: 1, height: 1 },
193+
textShadowRadius: 5,
194+
},
195+
textValue: {
196+
fontSize: 16,
197+
color: Colors.white,
198+
textAlign: 'justify',
132199
},
133200
image: {
134201
width: '100%',
135202
height: 300,
136-
// marginVertical: 10,
137203
},
138204
video: {
139205
alignSelf: 'center',

‎src/screens/Galaxies/Galaxies.tsx

-22
This file was deleted.

0 commit comments

Comments
 (0)