lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React, {useEffect, useState} from 'react'
2import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native'
3import NetInfo from '@react-native-community/netinfo'
4import {
5 FontAwesomeIcon,
6 FontAwesomeIconStyle,
7} from '@fortawesome/react-native-fontawesome'
8
9import {usePalette} from 'lib/hooks/usePalette'
10import {Text} from 'view/com/util/text/Text'
11import {s} from 'lib/styles'
12import {isDesktopWeb, isNative} from 'platform/detection'
13import {useStores} from 'state/index'
14
15const Indicator = () => {
16 const store = useStores()
17 const pal = usePalette('error')
18 const showOfflineDetails = () => {
19 store.shell.openModal({
20 name: 'offline-details',
21 })
22 }
23
24 const containerStyles: ViewStyle[] = [
25 styles.container,
26 s.flexRow,
27 s.alignCenter,
28 pal.view,
29 ]
30
31 return (
32 <TouchableOpacity
33 style={containerStyles}
34 onPress={showOfflineDetails}
35 accessibilityRole="button"
36 accessibilityLabel="Show offline details"
37 accessibilityHint="Opens modal content describing offline behavior of the app">
38 <FontAwesomeIcon icon="wifi" style={s.white as FontAwesomeIconStyle} />
39 <Text style={[pal.text, s.f13, s.ml5]}>You're offline</Text>
40 </TouchableOpacity>
41 )
42}
43
44export const OfflineIndicator = () => {
45 const [isConnected, setIsConnected] = useState(true)
46 useEffect(() => {
47 const unsubscribe = NetInfo.addEventListener(state => {
48 setIsConnected(!!state.isConnected)
49 })
50
51 return () => unsubscribe()
52 }, [])
53
54 if (isConnected) return null
55
56 if (isNative) {
57 return <Indicator />
58 }
59
60 return (
61 <View style={isDesktopWeb ? styles.desktopWrapper : styles.mobileWrapper}>
62 <Indicator />
63 </View>
64 )
65}
66
67const styles = StyleSheet.create({
68 container: {
69 width: isNative ? s.window.width : undefined,
70 justifyContent: 'center',
71 height: 18,
72 },
73 // This follows the positioning of the left nav bar on desktop
74 desktopWrapper: {
75 position: 'absolute',
76 top: 0,
77 zIndex: 1,
78 right: 'calc(50vw + 312px)',
79 width: 220,
80 },
81 mobileWrapper: {
82 position: 'absolute',
83 left: 0,
84 bottom: 0,
85 width: '100%',
86 },
87})