Quotes-app/QuotesScreen.js at main · ns-develops/Quotes-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome5, FontAwesome } from '@expo/vector-icons';
import { StatusBar } from 'expo-status-bar';
import * as Clipboard from 'expo-clipboard';
import Toast from 'react-native-toast-message';

const QuotesScreen = ({ navigation }) => {
  const [quote, setQuote] = useState('Loading..');
  const [author, setAuthor] = useState('Loading..');
  const [isLoading, setIsLoading] = useState(false);

  const randomQuote = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('https://stoic-quotes.com/api/quotes?num=1');
      const result = await res.json();
      setQuote(result[0].text);
      setAuthor(result[0].author);
    } catch (error) {
      console.error('Error fetching quote:', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    randomQuote();
  }, []);

  const copyToClipboard = async () => {
    await Clipboard.setStringAsync(quote);
    Toast.show({
      type: 'success',
      text1: 'Quote copied!',
      position: 'bottom',
      visibilityTime: 1500,
    });
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#F0F0F0' }}>
      <StatusBar style="light" />

      <TouchableOpacity
        onPress={() => navigation.navigate('Settings')}
        style={{
          position: 'absolute',
          top: 40,
          right: 20,
          zIndex: 10,
          padding: 10,
        }}
      >
        <FontAwesome5 name="cog" size={24} color="#5B9BFF" />
      </TouchableOpacity>

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20 }}>
        <View style={{ width: '100%', backgroundColor: '#fff', borderRadius: 20, padding: 20 }}>
          <Text style={{ textAlign: 'center', fontSize: 26, fontWeight: '600', color: '#333', marginBottom: 20 }}>
            Quote of the Day
          </Text>

          <FontAwesome5 name="quote-left" size={20} color="#000" style={{ textAlign: 'left', marginBottom: -12 }} />

          <Text style={{ color: '#000', fontSize: 16, lineHeight: 26, letterSpacing: 1.1, fontWeight: '400', textAlign: 'center', marginBottom: 10, paddingHorizontal: 30 }}>
            {quote}
          </Text>

          <FontAwesome5 name="quote-right" size={20} color="#000" style={{ textAlign: 'right', marginTop: -20, marginBottom: 20 }} />

          <Text style={{ textAlign: 'right', fontWeight: '300', fontStyle: 'italic', fontSize: 16, color: '#000', marginBottom: 10 }}>
            - {author}
          </Text>

          <TouchableOpacity onPress={randomQuote} style={{ backgroundColor: '#5B9BFF', padding: 20, borderRadius: 30, marginVertical: 20 }}>
            <Text style={{ color: '#fff', fontSize: 18, textAlign: 'center' }}>
              {isLoading ? "Loading..." : "New Quote"}
            </Text>
          </TouchableOpacity>

          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            <TouchableOpacity
              onPress={() => navigation.navigate('Profile')}
              style={{ borderWidth: 2, borderColor: '#000', borderRadius: 50, padding: 15 }}
            >
              <FontAwesome5 name="user" size={22} color="#000" />
            </TouchableOpacity>

            <TouchableOpacity style={{ borderWidth: 2, borderColor: '#000', borderRadius: 50, padding: 15 }}>
              <FontAwesome5 name="comment-alt" size={22} color="#000" />
            </TouchableOpacity>

            <TouchableOpacity onPress={copyToClipboard} style={{ borderWidth: 2, borderColor: '#000', borderRadius: 50, padding: 15 }}>
              <FontAwesome name="copy" size={22} color="#000" />
            </TouchableOpacity>
          </View>
        </View>
      </View>

      <Toast />
    </View>
  );
};

export default QuotesScreen;