gib/fuse_expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slowly making it look not completely bad, but still need to do a lot of work.

Browse Source
This commit is contained in:
Gabriel Brown 2024-09-10 15:33:34 -05:00
parent 1e6b2f8df7
commit f001a0f82d
5 changed files with 112 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/(tabs)/countdown.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native'; import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import axios from 'axios'; import axios from 'axios';
import ChangeDateDrawer from '@/components/ChangeDateDrawer'; import ChangeDateDrawer from '@/components/ChangeDateDrawer';
@ -15,9 +16,8 @@ const fetchCountdownDate = async () => {
const response = await axios.get(`${BASE_URL}/getCountdown`, { const response = await axios.get(`${BASE_URL}/getCountdown`, {
params: { apiKey: API_KEY } params: { apiKey: API_KEY }
}); });
console.log('API response:', response.data);
if (response.data && response.data[0] && response.data[0].countdown) { if (response.data && response.data[0] && response.data[0].countdown) {
console.log('Countdown date:', response.data[0].countdown); //console.log('Countdown date:', response.data[0].countdown);
return new Date(response.data[0].countdown); return new Date(response.data[0].countdown);
} else { } else {
console.error('Unexpected API response format:', response.data); console.error('Unexpected API response format:', response.data);
@ -87,31 +87,42 @@ export default function TabTwoScreen() {
</ThemedView> </ThemedView>
); );
} }
let days = countdown.days <= 1 ? 'Day' : 'Days';
let hours = countdown.hours <= 1 ? 'Hour' : 'Hours';
let minutes = countdown.minutes <= 1 ? 'Minute' : 'Minutes';
let seconds = countdown.seconds <= 1 ? 'Second' : 'Seconds';
return ( return (
<ThemedView style={styles.container}> <LinearGradient
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText> colors={['#F67C0A', '#F60AD3']}
<ThemedView style={styles.countdownContainer}> style={styles.container}
<CountdownItem value={countdown.days} label="Days" /> start={{ x: 0, y: 0 }}
<CountdownItem value={countdown.hours} label="Hours" /> end={{ x: 1, y: 1 }}
<CountdownItem value={countdown.minutes} label="Minutes" /> >
<CountdownItem value={countdown.seconds} label="Seconds" /> <ThemedView style={styles.container}>
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
<ThemedView style={styles.countdownContainer}>
<CountdownItem value={countdown.days} label={days} />
<CountdownItem value={countdown.hours} label={hours} />
<CountdownItem value={countdown.minutes} label={minutes} />
<CountdownItem value={countdown.seconds} label={seconds} />
</ThemedView>
<TouchableOpacity
style={styles.changeButton}
onPress={() => setIsDateDrawerVisible(true)}
>
<ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
</TouchableOpacity>
{targetDate && (
<ChangeDateDrawer
isVisible={isDateDrawerVisible}
onClose={() => setIsDateDrawerVisible(false)}
onDateChange={handleDateChange}
currentDate={targetDate}
/>
)}
</ThemedView> </ThemedView>
<TouchableOpacity </LinearGradient>
style={styles.changeButton}
onPress={() => setIsDateDrawerVisible(true)}
>
<ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
</TouchableOpacity>
{targetDate && (
<ChangeDateDrawer
isVisible={isDateDrawerVisible}
onClose={() => setIsDateDrawerVisible(false)}
onDateChange={handleDateChange}
currentDate={targetDate}
/>
)}
</ThemedView>
); );
} }
@ -128,13 +139,14 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', backgroundColor: 'transparent',
}, },
title: { title: {
fontSize: 56, fontSize: 56,
lineHeight: 64, lineHeight: 64,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 20, marginTop: 100,
marginBottom: 60,
textAlign: 'center', textAlign: 'center',
paddingHorizontal: 20, paddingHorizontal: 20,
}, },
@ -142,29 +154,33 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'transparent',
marginBottom: 180,
}, },
countdownItem: { countdownItem: {
margin: 10, margin: 10,
lineHeight: 32, lineHeight: 42,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'transparent',
}, },
countdownValue: { countdownValue: {
fontSize: 32, fontSize: 36,
lineHeight: 32, lineHeight: 42,
fontWeight: 'bold', fontWeight: 'bold',
}, },
countdownLabel: { countdownLabel: {
fontSize: 24, fontSize: 32,
lineHeight: 42,
}, },
changeButton: { changeButton: {
backgroundColor: '#007AFF', backgroundColor: '#730FF8',
padding: 10, padding: 15,
borderRadius: 5, borderRadius: 10,
marginTop: 20, marginTop: 40,
}, },
changeButtonText: { changeButtonText: {
color: 'white', color: 'white',
fontSize: 16, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });

19
app/(tabs)/index.tsx
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios'; import axios from 'axios';
@ -44,9 +45,16 @@ export default function HomeScreen() {
}; };
return ( return (
<ThemedView style={styles.container}> <LinearGradient
<ThemedText style={styles.title}>{message}</ThemedText> colors={['#F67C0A', '#F60AD3']}
</ThemedView> style={styles.container}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>{message}</ThemedText>
</ThemedView>
</LinearGradient>
); );
} }
@ -55,10 +63,11 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: 'transparent',
}, },
title: { title: {
fontSize: 32, fontSize: 56,
lineHeight: 40, lineHeight: 72,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 20, marginBottom: 20,
textAlign: 'center', textAlign: 'center',

59
app/(tabs)/sendmessage.tsx
View File

@ -11,6 +11,7 @@ import {
} from 'react-native'; } from 'react-native';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios'; import axios from 'axios';
@ -62,25 +63,33 @@ export default function SendMessageScreen() {
}; };
return ( return (
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"} behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{flex: 1}} style={{flex: 1}}
> >
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<ThemedView style={styles.container}> <LinearGradient
<ThemedText style={styles.title}>Send a Message</ThemedText> colors={['#F67C0A', '#F60AD3']}
<TextInput style={styles.container}
style={styles.input} start={{ x: 0, y: 0 }}
value={message} end={{ x: 1, y: 1 }}
onChangeText={setMessage} >
placeholder="Enter your message" <ThemedView style={styles.container}>
placeholderTextColor="#999" <ThemedText style={styles.title}>Send a Message</ThemedText>
multiline <TextInput
/> style={styles.input}
<TouchableOpacity style={styles.button} onPress={sendMessage}> value={message}
<ThemedText style={styles.buttonText}>Send Message</ThemedText> onChangeText={setMessage}
</TouchableOpacity> placeholder="Enter your message"
</ThemedView> placeholderTextColor="#BBB"
multiline
/>
<TouchableOpacity style={styles.button} onPress={sendMessage}>
<ThemedText style={styles.buttonText}>Send Message</ThemedText>
</TouchableOpacity>
</ThemedView>
</LinearGradient>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</KeyboardAvoidingView> </KeyboardAvoidingView>
); );
@ -90,36 +99,38 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
padding: 20, padding: 20,
backgroundColor: 'transparent',
}, },
title: { title: {
fontSize: 36, fontSize: 48,
lineHeight: 40, lineHeight: 60,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 20, marginTop: 80,
marginBottom: 40,
textAlign: 'center', textAlign: 'center',
}, },
input: { input: {
width: '100%', width: '100%',
height: 80, height: 80,
borderColor: '#ccc',
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 10,
padding: 10, padding: 10,
marginBottom: 20, marginBottom: 20,
textAlignVertical: 'top', textAlignVertical: 'top',
color: '#FFF', color: '#FFF',
fontSize: 18, fontSize: 32,
backgroundColor: 'black',
}, },
button: { button: {
backgroundColor: '#007AFF', backgroundColor: '#730FF8',
padding: 15, padding: 15,
borderRadius: 5, borderColor: '#730FF8',
borderRadius: 10,
}, },
buttonText: { buttonText: {
color: 'white', color: 'white',
fontSize: 16, fontSize: 22,
fontWeight: 'bold', fontWeight: 'bold',
}, },
}); });

10
package-lock.json generated
View File

@ -16,6 +16,7 @@
"expo": "~51.0.28", "expo": "~51.0.28",
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1", "expo-linking": "~6.3.1",
"expo-router": "~3.5.23", "expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5", "expo-splash-screen": "~0.27.5",
@ -10011,6 +10012,15 @@
"expo": "*" "expo": "*"
} }
}, },
"node_modules/expo-linear-gradient": {
"version": "13.0.2",
"resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz",
"integrity": "sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==",
"license": "MIT",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-linking": { "node_modules/expo-linking": {
"version": "6.3.1", "version": "6.3.1",
"resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz", "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz",

3
package.json
View File

@ -37,7 +37,8 @@
"react-native-reanimated": "~3.10.1", "react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5", "react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1", "react-native-screens": "3.31.1",
"react-native-web": "~0.19.10" "react-native-web": "~0.19.10",
"expo-linear-gradient": "~13.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",