Commit 3a1fcb2c authored by Neosoulink's avatar Neosoulink
Browse files

refactor: modal to handle host GraphQL requests

parent 46e5dadf

packages/shop-mobile-expo/src/components/Providers/Apollo.tsx

+94 −72
Original line number Diff line number Diff line
@@ -11,10 +11,11 @@ import { 
	View,

	Modal,

	ActivityIndicator,

	TouchableWithoutFeedback,

} from 'react-native';



// HELPERS

import { isEmpty } from '../../helpers/utils';

import { checkServer, isEmpty } from '../../helpers/utils';



// ENVIRONMENT

import ENV from '../../environments/environment';
@@ -39,7 +40,11 @@ const ApolloProvider: React.FC<Props> = (props) => { 
		ENV.PRODUCTION || __DEV__,

	);

	const [serverHostInpMsg, setServerHostInpMsg] = React.useState<string>('');

	const [serverHostLoading] = React.useState<boolean>(false);

	const [serverHostLoading, setServerHostLoading] =

		React.useState<boolean>(false);



	// REFS

	const serverHostInpRef = React.useRef<TextInput>(null);



	// FUNCTIONS

	const onConfirmHost = async () => {
@@ -48,15 +53,24 @@ const ApolloProvider: React.FC<Props> = (props) => { 
			return setServerHostInpMsg("Can't be empty");

		}



		const FORMATTED_URI = `http://${serverHostInp}/graphql`;

		// setServerHostLoading(true);

		const FORMATTED_HOST = `https://${serverHostInp}`;

		const FORMATTED_URI = FORMATTED_HOST + '/graphql';



		// if (!(await serverReachable(serverHostInp))) {

		// 	return setServerHostInpMsg("Can't connect on this host");

		// }

		setServerHostLoading(true);



		await checkServer(

			FORMATTED_URI,

			5000,

			() => {

				setServerHost(FORMATTED_URI);

				setShowDialogUriConf(false);

			},

			(errMsg) => {

				setServerHostInpMsg("Can't connect on this host: " + errMsg);

			},

		).finally(() => {

			setServerHostLoading(false);

		});

	};



	const onCancelHost = () => {
@@ -66,7 +80,7 @@ const ApolloProvider: React.FC<Props> = (props) => { 


	// CONFIG

	const APOLLO_CLIENT = new ApolloClient({

		uri: ENV.ENDPOINT.GQL,

		uri: serverHost || ENV.ENDPOINT.GQL,

		cache: new InMemoryCache(),

		defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } },

	});
@@ -78,6 +92,10 @@ const ApolloProvider: React.FC<Props> = (props) => { 
				onDismiss={function (): void {}}

				style={{ ...GS.bgTransparent }}

				transparent>

				<TouchableWithoutFeedback

					onPress={() => {

						serverHostInpRef.current?.blur();

					}}>

					<View

						style={{

							...GS.flex1,
@@ -102,6 +120,7 @@ const ApolloProvider: React.FC<Props> = (props) => { 


							<View style={{ ...GS.w100, ...GS.my4 }}>

								<TextInput

									ref={serverHostInpRef}

									value={serverHostInp}

									placeholder='Ex: 10.0.2.2:8443'

									onChangeText={(text) => {
@@ -127,7 +146,9 @@ const ApolloProvider: React.FC<Props> = (props) => { 
									style={{

										...GS.mr2,

										...GS.flex1,

									...(serverHostLoading ? GS.centered : {}),

										...(serverHostLoading

											? GS.centered

											: {}),

									}}>

									{serverHostLoading ? (

										<ActivityIndicator
@@ -152,6 +173,7 @@ const ApolloProvider: React.FC<Props> = (props) => { 
							</View>

						</View>

					</View>

				</TouchableWithoutFeedback>

			</Modal>

			{props.children}

		</Provider>