1+ /**
2+ * Sample React Native App
3+ * https://github.com/facebook/react-native
4+ *
5+ * @format
6+ * @flow strict-local
7+ */
8+ import { LogBox , StyleSheet , Text , View } from 'react-native' ;
9+ import React , { useEffect , useState } from 'react' ;
10+ import {
11+ NativeBaseProvider ,
12+ } from 'native-base' ;
13+ import { SafeAreaProvider } from 'react-native-safe-area-context' ;
14+ import {
15+ colorModeManager ,
16+ NativeBaseTheme ,
17+ PreferencesContext ,
18+ } from './theme' ;
19+ import useColorScheme from './theme/hooks/useColorScheme' ;
20+ import { useNavigation } from '@react-navigation/native' ;
21+ import AuthStackNavigator from './src/navigation/auth-navigator' ;
22+ import { getToken } from './utils/storage-helpers' ;
23+ import Toast , { BaseToast , ErrorToast } from 'react-native-toast-message' ;
24+ import './src/language/DCSLocalize' ;
25+ import { useNetInfo } from '@react-native-community/netinfo' ;
26+ import {
27+ ApolloClient ,
28+ InMemoryCache ,
29+ ApolloProvider ,
30+ ApolloLink ,
31+ from ,
32+ HttpLink
33+ } from '@apollo/client' ;
34+ import { onError } from '@apollo/client/link/error' ;
35+ import OfflineNotice from './src/components/OfflineNotice' ;
36+ import { removeToken } from './utils/storage-helpers' ;
37+ import { getValue } from './utils/lodash' ;
38+ export default function App ( ) {
39+ const netInfo = useNetInfo ( ) ;
40+ const navigation = useNavigation ( ) ;
41+ /* -------------------------------------------------------------------------- */
42+ /* Log Section */
43+ /* -------------------------------------------------------------------------- */
44+ LogBox . ignoreLogs ( [ 'Setting a timer for a long period of time' ] ) ;
45+ LogBox . ignoreLogs ( [ 'NativeBase: The contrast ratio of' ] ) ;
46+ LogBox . ignoreAllLogs ( true ) ;
47+ LogBox . ignoreLogs ( [
48+ "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!" ,
49+ ] ) ;
50+
51+ const AuthContext = React . createContext ( ) ;
52+ /* -------------------------------------------------------------------------- */
53+ /* UseEffect Section */
54+ /* -------------------------------------------------------------------------- */
55+
56+ useEffect ( ( ) => {
57+ getData ( ) ;
58+ } , [ ] ) ;
59+
60+ const getData = async ( ) => {
61+ const theme = await colorModeManager . get ( ) ;
62+ setIsThemeDark ( theme === 'dark' ? true : false ) ;
63+ async function prepare ( ) {
64+ try {
65+ // Pre-load fonts, make any API calls you need to do here
66+ await initialiseData ( ) ;
67+ } catch ( e ) {
68+ // console.warn(e);
69+ } finally {
70+ // Tell the application to render
71+ setAppIsReady ( true ) ;
72+ }
73+ }
74+ prepare ( ) ;
75+ } ;
76+
77+ /* -------------------------------------------------------------------------- */
78+ /* Usestate Section */
79+ /* -------------------------------------------------------------------------- */
80+ const [ user , setUser ] = useState ( false ) ;
81+ const [ appIsReady , setAppIsReady ] = useState ( false ) ;
82+
83+ const colorScheme = true ? useColorScheme ( ) : 'light' ;
84+ const [ isThemeDark , setIsThemeDark ] = React . useState ( ) ;
85+ /* -------------------------------------------------------------------------- */
86+ /* On change Section */
87+ /* -------------------------------------------------------------------------- */
88+ const toggleTheme = React . useCallback ( async ( ) => {
89+ return setIsThemeDark ( ! isThemeDark ) ;
90+ } , [ isThemeDark ] ) ;
91+
92+ const preferences = React . useMemo (
93+ ( ) => ( {
94+ toggleTheme,
95+ isThemeDark,
96+ } ) ,
97+ [ toggleTheme , isThemeDark ] ,
98+ ) ;
99+
100+ const initialiseData = async ( ) => {
101+ const user = await getToken ( 'access_token' ) ;
102+ if ( user ) setUser ( user ) ;
103+ } ;
104+
105+ if ( ! appIsReady ) {
106+ return null ;
107+ }
108+ /* -------------------------------------------------------------------------- */
109+ /* Toast Section */
110+ /* -------------------------------------------------------------------------- */
111+
112+ /*
113+ 1. Create the config
114+ */
115+ const toastConfig = {
116+ /*
117+ Overwrite 'success' type,
118+ by modifying the existing `BaseToast` component
119+ */
120+ success : props => (
121+ < BaseToast
122+ { ...props }
123+ style = { { borderLeftColor : '#22c55e' } }
124+ contentContainerStyle = { { paddingHorizontal : 15 } }
125+ text1Style = { {
126+ fontSize : 15 ,
127+ fontWeight : '400' ,
128+ } }
129+ />
130+ ) ,
131+ /*
132+ Overwrite 'error' type,
133+ by modifying the existing `ErrorToast` component
134+ */
135+ error : props => (
136+ < ErrorToast
137+ { ...props }
138+ style = { { borderLeftColor : '#ef4444' } }
139+ text1Style = { {
140+ fontSize : 17 ,
141+ } }
142+ text2Style = { {
143+ fontSize : 15 ,
144+ } }
145+ />
146+ ) ,
147+ /*
148+ Or create a completely new type - `tomatoToast`,
149+ building the layout from scratch.
150+
151+ I can consume any custom `props` I want.
152+ They will be passed when calling the `show` method (see below)
153+ */
154+ tomatoToast : ( { text1, props} ) => (
155+ < View style = { { height : 60 , width : '100%' , backgroundColor : 'tomato' } } >
156+ < Text > { text1 } </ Text >
157+ < Text > { props . uuid } </ Text >
158+ </ View >
159+ ) ,
160+ } ;
161+
162+ /* -------------------------------------------------------------------------- */
163+ /* Graphql Section */
164+ /* -------------------------------------------------------------------------- */
165+ const API = new HttpLink ( {
166+ uri : '' ,
167+ } ) ;
168+ const middleWareLink = new ApolloLink ( async ( operation , forward ) => {
169+ const authToken = await getToken ( 'accessToken' ) ;
170+ operation . setContext ( context => ( {
171+ ...context ,
172+ headers : authToken
173+ ? {
174+ 'Content-Type' : 'application/json' ,
175+ Authorization : 'Bearer ' + authToken ,
176+ }
177+ : {
178+ 'Content-Type' : 'application/json' ,
179+ } ,
180+ } ) ) ;
181+
182+ return forward ( operation ) ;
183+ } ) ;
184+ const afterWareLink = onError (
185+ ( { operation, response, graphQLErrors = [ ] , networkError = { } } ) => {
186+ const status =
187+ networkError && networkError . statusCode
188+ ? networkError . statusCode
189+ : null ;
190+ if ( status === 401 ) {
191+ removeToken ( 'user' ) ;
192+ removeToken ( 'accessToken' ) ;
193+
194+ Toast . show ( {
195+ type : 'error' ,
196+ text1 : 'error' ,
197+ text2 : 'Session Expired' ,
198+ } ) ;
199+ setTimeout ( ( ) => {
200+ navigation . navigate ( 'Login' ) ;
201+ } , 500 ) ;
202+ } else {
203+ if ( getValue ( graphQLErrors , `length` , 0 ) > 0 ) {
204+ graphQLErrors . forEach ( item => {
205+ Toast . show ( {
206+ type : 'error' ,
207+ text1 : 'error' ,
208+ text2 : getValue ( item , `message` , '' ) ,
209+ } ) ;
210+ } ) ;
211+ }
212+ }
213+ } ,
214+ ) ;
215+ const client = new ApolloClient ( {
216+ // uri: "https://flyby-gateway.herokuapp.com/",
217+ link : from ( [ middleWareLink , afterWareLink , API ] ) ,
218+ cache : new InMemoryCache ( ) ,
219+ } ) ;
220+
221+ return (
222+ < SafeAreaProvider >
223+ < NativeBaseProvider
224+ theme = { NativeBaseTheme }
225+ colorModeManager = { colorModeManager } >
226+ < PreferencesContext . Provider value = { preferences } >
227+ < ApolloProvider client = { client } >
228+ { netInfo . type !== 'unknown' &&
229+ netInfo . isInternetReachable === false ? (
230+ < OfflineNotice />
231+ ) : (
232+ < AuthStackNavigator />
233+ ) }
234+ < Toast config = { toastConfig } position = "bottom" bottomOffset = { 20 } />
235+ </ ApolloProvider >
236+ </ PreferencesContext . Provider >
237+ </ NativeBaseProvider >
238+ </ SafeAreaProvider >
239+ ) ;
240+ }
241+
242+ const styles = StyleSheet . create ( { } ) ;
243+
0 commit comments