From 4b1fbafead6e5331104153e9c88e55bfc7ecc04d Mon Sep 17 00:00:00 2001 From: MConcoba Date: Tue, 6 Oct 2020 17:44:16 -0600 Subject: [PATCH 01/17] Anonymous function to useState --- .../feature/onboarding/screen/VerifyPhoneNumberCode.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx index 02fced0..7d99610 100644 --- a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx +++ b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx @@ -39,11 +39,8 @@ export const VerifyPhoneNumberCode: React.FC = ({ const dependencies = React.useContext(DependencyContext); const onboarding = dependencies.provide(OnboardingInjectionKey); - const [args, setInput] = React.useState({ - input: { - phoneNumber: route.params.phoneNumber, - code: "", - }, + const [args, setInput] = React.useState(() => { + return { input: { phoneNumber: route.params.phoneNumber, code: '' } }; }); const { From bd12fa9fed456b3129c4d68a1d022672c2dde54e Mon Sep 17 00:00:00 2001 From: Gus Date: Wed, 7 Oct 2020 16:51:14 -0600 Subject: [PATCH 02/17] Removes intl input Fixes typo --- .../onboarding/component/CodeInput.tsx | 6 ++--- .../onboarding/component/IntlTelInput.tsx | 27 ------------------- 2 files changed, 3 insertions(+), 30 deletions(-) delete mode 100644 native/src/feature/onboarding/component/IntlTelInput.tsx diff --git a/native/src/feature/onboarding/component/CodeInput.tsx b/native/src/feature/onboarding/component/CodeInput.tsx index 23568d7..2dcd6f0 100644 --- a/native/src/feature/onboarding/component/CodeInput.tsx +++ b/native/src/feature/onboarding/component/CodeInput.tsx @@ -8,7 +8,7 @@ import { } from "react-native-confirmation-code-field"; import styles from "./styles"; -const CELL_COUNT = 6; +export const CELL_COUNT = 6; type Props = { onChangeText: (text: string) => void | undefined; @@ -22,7 +22,7 @@ const CodeInput: React.FC = ({ onChangeText }) => { setValue, }); - const onSetVerifcationCode = (code: string) => { + const onSetVerificationCode = (code: string) => { onChangeText(code); setValue(code); }; @@ -32,7 +32,7 @@ const CodeInput: React.FC = ({ onChangeText }) => { {...props} ref={ref} value={value} - onChangeText={onSetVerifcationCode} + onChangeText={onSetVerificationCode} cellCount={CELL_COUNT} rootStyle={styles.codeFiledRoot} keyboardType="number-pad" diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx deleted file mode 100644 index dd89153..0000000 --- a/native/src/feature/onboarding/component/IntlTelInput.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState } from "react"; -import PhoneInput, { isValidPhoneNumber } from "react-phone-number-input"; -import "react-phone-number-input/style.css"; - -type Props = { onSetPhoneNumber: (text: string) => void }; - -const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { - const [phoneNumber, setPhoneNumber] = useState(""); - const onChangePhoneNumber = (number: string) => { - setPhoneNumber(number); - { - isValidPhoneNumber(number) - ? onSetPhoneNumber(number) - : onSetPhoneNumber(""); - } - }; - return ( - - ); -}; - -export default IntlTelInput; From 474d4e339ca9b698ae7dedb32345e35695d2d471 Mon Sep 17 00:00:00 2001 From: Gus Date: Wed, 7 Oct 2020 16:51:23 -0600 Subject: [PATCH 03/17] Updates to useMutation --- native/App.tsx | 2 +- native/package.json | 2 +- .../feature/onboarding/model/Onboarding.ts | 21 +++++++++------- .../SendPhoneNumberVerificationCode.tsx | 7 +++--- .../screen/VerifyPhoneNumberCode.tsx | 25 ++++++++++++++----- native/yarn.lock | 12 ++++++--- 6 files changed, 44 insertions(+), 25 deletions(-) diff --git a/native/App.tsx b/native/App.tsx index d3f44ef..5e90bde 100644 --- a/native/App.tsx +++ b/native/App.tsx @@ -12,7 +12,7 @@ const client = new ApolloClient({ cache: new InMemoryCache(), }); -export const App: React.FC<{}> = () => { +export const App: React.FC = () => { return ( diff --git a/native/package.json b/native/package.json index 6d5c1e3..f427c4f 100644 --- a/native/package.json +++ b/native/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@apollo/client": "^3.1.3", - "@corecodeio/libraries": "1.0.5", + "@corecodeio/libraries": "file:../../libraries/lib", "@react-native-community/masked-view": "0.1.10", "@react-navigation/native": "^5.7.1", "@react-navigation/stack": "^5.7.1", diff --git a/native/src/feature/onboarding/model/Onboarding.ts b/native/src/feature/onboarding/model/Onboarding.ts index 0006d1b..e746bef 100644 --- a/native/src/feature/onboarding/model/Onboarding.ts +++ b/native/src/feature/onboarding/model/Onboarding.ts @@ -1,4 +1,9 @@ -import { LazyQueryResult, useLazyQuery } from "@apollo/client"; +import { + LazyQueryResult, + MutationResult, + useLazyQuery, + useMutation, +} from "@apollo/client"; import { Mutation, MutationVerifyPhoneNumberCodeArgs, @@ -7,8 +12,8 @@ import { QuerySendPhoneNumberVerificationCodeArgs, } from "@corecodeio/libraries/api"; import { + MutationVerifyPhoneNumberCode, QuerySendPhoneNumberVerificationCode, - QueryVerifyPhoneNumberCode, } from "@corecodeio/libraries/api/onboarding"; import React from "react"; import { AuthToken } from "../../../util/auth/model/AuthToken"; @@ -52,19 +57,16 @@ export class Onboarding { executeVerifyPhoneNumberCode: ( input: MutationVerifyPhoneNumberCodeArgs ) => void; - result: Mutation["verifyPhoneNumberCode"] | undefined; + result: Mutation["verifyPhoneNumberCode"] | null | undefined; error: Error | null; - queryResult: LazyQueryResult< - Mutation["verifyPhoneNumberCode"], - MutationVerifyPhoneNumberCodeArgs - >; + queryResult: MutationResult; } { const [error, setError] = React.useState(null); - const [execute, queryResult] = useLazyQuery< + const [execute, queryResult] = useMutation< Mutation["verifyPhoneNumberCode"], MutationVerifyPhoneNumberCodeArgs - >(QueryVerifyPhoneNumberCode); + >(MutationVerifyPhoneNumberCode); if (Boolean(queryResult?.data?.token)) { this.authToken.set((queryResult.data as OnboardingSession).token); @@ -73,6 +75,7 @@ export class Onboarding { return { executeVerifyPhoneNumberCode: async ({ input }) => { try { + console.log(input); await execute({ variables: { input, diff --git a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx index 0f3c1a3..06142a2 100644 --- a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx +++ b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx @@ -14,7 +14,6 @@ import { PrimaryButton } from "../../../common/component/Button"; import { DependencyContext } from "../../../common/context/DependencyContext"; import { OnboardingStackScreenName } from "../../../navigation/model/OnboardingStackScreenName"; import { OnboardingStackParamList } from "../../../navigation/types/OnboardingStackParamList"; -import IntlTelInput from "../component/IntlTelInput"; import { OnboardingInjectionKey } from "../InjectionKey"; type Props = { @@ -34,7 +33,7 @@ export const SendPhoneNumberVerificationCode: React.FC = ({ QuerySendPhoneNumberVerificationCodeArgs >({ input: { - phoneNumber: "", + phoneNumber: "+50231234567", }, }); @@ -55,7 +54,7 @@ export const SendPhoneNumberVerificationCode: React.FC = ({ }, [result]); const onSetPhoneNumber = (phoneNumber: string) => { - setInput({ input: { phoneNumber } }); + setInput({ input: { phoneNumber: args.input.phoneNumber } }); }; const onSendPhoneNumberVerificationCode = async () => { @@ -72,7 +71,7 @@ export const SendPhoneNumberVerificationCode: React.FC = ({ Selecciona tu código de país e ingresa tu numero de teléfono - + {/* onSetPhoneNumber(e.target.valueOf())} /> */} {sendPhoneNumberVerificationCodeError && ( Error al enviar el SMS. Intenta de nuevo. )} diff --git a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx index 7d99610..8739116 100644 --- a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx +++ b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx @@ -18,7 +18,7 @@ import { import { DependencyContext } from "../../../common/context/DependencyContext"; import { OnboardingStackScreenName } from "../../../navigation/model/OnboardingStackScreenName"; import { OnboardingStackParamList } from "../../../navigation/types/OnboardingStackParamList"; -import CodeInput from "../component/CodeInput"; +import CodeInput, { CELL_COUNT } from "../component/CodeInput"; import { OnboardingInjectionKey } from "../InjectionKey"; type Props = { @@ -39,9 +39,11 @@ export const VerifyPhoneNumberCode: React.FC = ({ const dependencies = React.useContext(DependencyContext); const onboarding = dependencies.provide(OnboardingInjectionKey); - const [args, setInput] = React.useState(() => { - return { input: { phoneNumber: route.params.phoneNumber, code: '' } }; - }); + const [args, setInput] = React.useState( + () => ({ + input: { phoneNumber: route.params.phoneNumber, code: "" }, + }) + ); const { executeVerifyPhoneNumberCode, @@ -71,10 +73,20 @@ export const VerifyPhoneNumberCode: React.FC = ({ const onSetVerificationCode = (code: string) => { setInput({ input: { phoneNumber: args.input.phoneNumber, code } }); + console.log(args); + + if (code.length === CELL_COUNT) { + onSendPhoneNumberVerificationCode(); + } }; const onSendPhoneNumberVerificationCode = async () => { - await executeVerifyPhoneNumberCode(args); + try { + console.log(args); + await executeVerifyPhoneNumberCode(args); + } catch (error) { + console.log(error); // TODO handle error + } }; return ( @@ -92,9 +104,10 @@ export const VerifyPhoneNumberCode: React.FC = ({ MariaApp Introduce el código que hemos enviado a tu{"\n"} - número +502 01020304 + número {args.input.phoneNumber} + ¿Ya tienes cuenta? diff --git a/native/yarn.lock b/native/yarn.lock index 18589e1..5b28114 100644 --- a/native/yarn.lock +++ b/native/yarn.lock @@ -1028,11 +1028,10 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@corecodeio/libraries@1.0.5": - version "1.0.5" - resolved "https://npm.pkg.github.com/download/@corecodeio/libraries/1.0.5/29b2a406b765654e6029f384e9a9065c0d60f76e68962a2cd3074964ff96ca48#f363ca8dda179ad983db92a3f446fddebf2944ef" - integrity sha512-MbfVN7gIC1ePCODG4Wi8d052/oQkU7kJDfMlK1aH3W1JlXnoJDE6DhtlB811rB1xAWkQ8PKdvBDcnFcNlkcDwQ== +"@corecodeio/libraries@file:../../libraries/lib": + version "1.0.7" dependencies: + awesome-phonenumber "^2.39.0" graphql-tag "^2.11.0" "@egjs/hammerjs@^2.0.17": @@ -2517,6 +2516,11 @@ available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2: dependencies: array-filter "^1.0.0" +awesome-phonenumber@^2.39.0: + version "2.39.0" + resolved "https://registry.yarnpkg.com/awesome-phonenumber/-/awesome-phonenumber-2.39.0.tgz#7a6f3ef04df7e6168407ab73ac68a882e04ef5e7" + integrity sha512-GV1GZ/AZfsBU6EIYF4TlFhOuZus9IOT6wyVmFmFZvpUFCwsx8TRsyhEOhPxSUSdPgd/h4RehQmwgrWI/S26WKw== + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" From 7ee3c2b888cc0701bb0766b9774643053a78ec83 Mon Sep 17 00:00:00 2001 From: MConcoba Date: Thu, 8 Oct 2020 19:21:18 -0600 Subject: [PATCH 04/17] Implementation react-native-phone-number-input --- .../onboarding/component/IntlTelInput.tsx | 60 ++++++++ .../SendPhoneNumberVerificationCode.tsx | 141 ++++++++---------- 2 files changed, 120 insertions(+), 81 deletions(-) create mode 100644 native/src/feature/onboarding/component/IntlTelInput.tsx diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx new file mode 100644 index 0000000..72d8777 --- /dev/null +++ b/native/src/feature/onboarding/component/IntlTelInput.tsx @@ -0,0 +1,60 @@ +import React, { useRef, useState } from 'react'; +import { StyleSheet } from 'react-native'; +import PhoneInput from 'react-native-phone-number-input'; + +type Props = { onSetPhoneNumber: (text: string) => void }; + +const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { + const [value, setValue] = useState(''); + const [formattedValue, setFormattedValue] = useState(''); + const [valid, setValid] = useState(false); + const phoneInput = useRef(null); + + const onChangePhoneNumber = (number: string) => { + setValue('+502' + number); + { + const checkValid = phoneInput.current?.isValidNumber(number); + setValid(checkValid ? checkValid : false); + + phoneInput.current?.isValidNumber(number) ? onSetPhoneNumber('+502' + number) : onSetPhoneNumber(''); + } + }; + + return ( + { + setFormattedValue(text); + }} + withDarkTheme + autoFocus + /> + ); +}; + +const styles = StyleSheet.create({ + textInput: { + fontSize: 12, + }, + container: { + marginLeft: 19, + justifyContent: 'center', + alignItems: 'center', + }, + textContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#fff', + }, +}); + +export default IntlTelInput; diff --git a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx index 06142a2..b2484e8 100644 --- a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx +++ b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx @@ -1,95 +1,74 @@ -import { QuerySendPhoneNumberVerificationCodeArgs } from "@corecodeio/libraries/api"; -import { StackNavigationProp } from "@react-navigation/stack"; -import React from "react"; -import { Text } from "react-native"; -import { - FooterText, - FooterView, - PrimaryText, - SecondaryText, - TertiaryText, - View, -} from "../../../common/component"; -import { PrimaryButton } from "../../../common/component/Button"; -import { DependencyContext } from "../../../common/context/DependencyContext"; -import { OnboardingStackScreenName } from "../../../navigation/model/OnboardingStackScreenName"; -import { OnboardingStackParamList } from "../../../navigation/types/OnboardingStackParamList"; -import { OnboardingInjectionKey } from "../InjectionKey"; +import { QuerySendPhoneNumberVerificationCodeArgs } from '@corecodeio/libraries/api'; +import { StackNavigationProp } from '@react-navigation/stack'; +import React from 'react'; +import { Text } from 'react-native'; +import { FooterText, FooterView, PrimaryText, SecondaryText, TertiaryText, View } from '../../../common/component'; +import { PrimaryButton } from '../../../common/component/Button'; +import { DependencyContext } from '../../../common/context/DependencyContext'; +import { OnboardingStackScreenName } from '../../../navigation/model/OnboardingStackScreenName'; +import { OnboardingStackParamList } from '../../../navigation/types/OnboardingStackParamList'; +import IntlTelInput from '../component/IntlTelInput'; +import { OnboardingInjectionKey } from '../InjectionKey'; type Props = { - navigation: StackNavigationProp< - OnboardingStackParamList, - OnboardingStackScreenName.SendPhoneNumberVerificationCode - >; + navigation: StackNavigationProp< + OnboardingStackParamList, + OnboardingStackScreenName.SendPhoneNumberVerificationCode + >; }; -export const SendPhoneNumberVerificationCode: React.FC = ({ - navigation, -}) => { - const dependencies = React.useContext(DependencyContext); - const onboarding = dependencies.provide(OnboardingInjectionKey); +export const SendPhoneNumberVerificationCode: React.FC = ({ navigation }) => { + const dependencies = React.useContext(DependencyContext); + const onboarding = dependencies.provide(OnboardingInjectionKey); - const [args, setInput] = React.useState< - QuerySendPhoneNumberVerificationCodeArgs - >({ - input: { - phoneNumber: "+50231234567", - }, - }); + const [args, setInput] = React.useState({ + input: { + phoneNumber: '', + }, + }); - const { - executeSendPhoneNumberVerificationCode, - result, - queryResult: { error: sendPhoneNumberVerificationCodeError }, - } = onboarding.useSendPhoneNumberVerificationCode(); + const { + executeSendPhoneNumberVerificationCode, + result, + queryResult: { error: sendPhoneNumberVerificationCodeError }, + } = onboarding.useSendPhoneNumberVerificationCode(); - React.useEffect(() => { - if (!Boolean(result)) { - return; - } + React.useEffect(() => { + if (!Boolean(result)) { + return; + } - navigation.navigate(OnboardingStackScreenName.VerifyPhoneNumberCode, { - phoneNumber: args.input.phoneNumber, - }); - }, [result]); + navigation.navigate(OnboardingStackScreenName.VerifyPhoneNumberCode, { + phoneNumber: args.input.phoneNumber, + }); + }, [result]); - const onSetPhoneNumber = (phoneNumber: string) => { - setInput({ input: { phoneNumber: args.input.phoneNumber } }); - }; + const onSetPhoneNumber = (phoneNumber: string) => { + setInput({ input: { phoneNumber } }); + }; - const onSendPhoneNumberVerificationCode = async () => { - try { - await executeSendPhoneNumberVerificationCode(args); - } catch (error) { - // TODO handle error - } - }; + const onSendPhoneNumberVerificationCode = async () => { + try { + await executeSendPhoneNumberVerificationCode(args); + } catch (error) {} + }; - return ( - - MariaApp - - Selecciona tu código de país e ingresa tu numero de teléfono - - {/* onSetPhoneNumber(e.target.valueOf())} /> */} - {sendPhoneNumberVerificationCodeError && ( - Error al enviar el SMS. Intenta de nuevo. - )} - - Continuar - - - Al crear tu cuenta aceptas los Términos y Condiciones - - - ¿Ya tienes cuenta? - - - ); + return ( + + MariaApp + Selecciona tu código de país e ingresa tu numero de teléfono + {/* onSetPhoneNumber(e.target.valueOf())} /> */} + + {sendPhoneNumberVerificationCodeError && Error al enviar el SMS. Intenta de nuevo.} + + Continuar + + Al crear tu cuenta aceptas los Términos y Condiciones + + ¿Ya tienes cuenta? + + + ); }; export default SendPhoneNumberVerificationCode; From c99244bc9fc245b55a69c5c196e00417f7140250 Mon Sep 17 00:00:00 2001 From: MConcoba Date: Mon, 12 Oct 2020 16:25:24 -0600 Subject: [PATCH 05/17] Current dependencies in native --- native/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/native/package.json b/native/package.json index f427c4f..7a0eeca 100644 --- a/native/package.json +++ b/native/package.json @@ -3,6 +3,7 @@ "name": "@corecodeio/native", "version": "1.0.0", "scripts": { + "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", From 7cad2782e2ac3ba9c2613b968c4367437922351e Mon Sep 17 00:00:00 2001 From: Gus Date: Mon, 12 Oct 2020 16:25:25 -0600 Subject: [PATCH 06/17] Applies prettier --- .../onboarding/component/IntlTelInput.tsx | 96 ++++++------ .../SendPhoneNumberVerificationCode.tsx | 141 ++++++++++-------- 2 files changed, 130 insertions(+), 107 deletions(-) diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx index 72d8777..d4fe671 100644 --- a/native/src/feature/onboarding/component/IntlTelInput.tsx +++ b/native/src/feature/onboarding/component/IntlTelInput.tsx @@ -1,60 +1,62 @@ -import React, { useRef, useState } from 'react'; -import { StyleSheet } from 'react-native'; -import PhoneInput from 'react-native-phone-number-input'; +import React, { useRef, useState } from "react"; +import { StyleSheet } from "react-native"; +import PhoneInput from "react-native-phone-number-input"; type Props = { onSetPhoneNumber: (text: string) => void }; const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { - const [value, setValue] = useState(''); - const [formattedValue, setFormattedValue] = useState(''); - const [valid, setValid] = useState(false); - const phoneInput = useRef(null); + const [value, setValue] = useState(""); + const [formattedValue, setFormattedValue] = useState(""); + const [valid, setValid] = useState(false); + const phoneInput = useRef(null); - const onChangePhoneNumber = (number: string) => { - setValue('+502' + number); - { - const checkValid = phoneInput.current?.isValidNumber(number); - setValid(checkValid ? checkValid : false); + const onChangePhoneNumber = (number: string) => { + setValue("+502" + number); + { + const checkValid = phoneInput.current?.isValidNumber(number); + setValid(checkValid ? checkValid : false); - phoneInput.current?.isValidNumber(number) ? onSetPhoneNumber('+502' + number) : onSetPhoneNumber(''); - } - }; + phoneInput.current?.isValidNumber(number) + ? onSetPhoneNumber("+502" + number) + : onSetPhoneNumber(""); + } + }; - return ( - { - setFormattedValue(text); - }} - withDarkTheme - autoFocus - /> - ); + return ( + { + setFormattedValue(text); + }} + withDarkTheme + autoFocus + /> + ); }; const styles = StyleSheet.create({ - textInput: { - fontSize: 12, - }, - container: { - marginLeft: 19, - justifyContent: 'center', - alignItems: 'center', - }, - textContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#fff', - }, + textInput: { + fontSize: 12, + }, + container: { + marginLeft: 19, + justifyContent: "center", + alignItems: "center", + }, + textContainer: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#fff", + }, }); export default IntlTelInput; diff --git a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx index b2484e8..e6ea387 100644 --- a/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx +++ b/native/src/feature/onboarding/screen/SendPhoneNumberVerificationCode.tsx @@ -1,74 +1,95 @@ -import { QuerySendPhoneNumberVerificationCodeArgs } from '@corecodeio/libraries/api'; -import { StackNavigationProp } from '@react-navigation/stack'; -import React from 'react'; -import { Text } from 'react-native'; -import { FooterText, FooterView, PrimaryText, SecondaryText, TertiaryText, View } from '../../../common/component'; -import { PrimaryButton } from '../../../common/component/Button'; -import { DependencyContext } from '../../../common/context/DependencyContext'; -import { OnboardingStackScreenName } from '../../../navigation/model/OnboardingStackScreenName'; -import { OnboardingStackParamList } from '../../../navigation/types/OnboardingStackParamList'; -import IntlTelInput from '../component/IntlTelInput'; -import { OnboardingInjectionKey } from '../InjectionKey'; +import { QuerySendPhoneNumberVerificationCodeArgs } from "@corecodeio/libraries/api"; +import { StackNavigationProp } from "@react-navigation/stack"; +import React from "react"; +import { Text } from "react-native"; +import { + FooterText, + FooterView, + PrimaryText, + SecondaryText, + TertiaryText, + View, +} from "../../../common/component"; +import { PrimaryButton } from "../../../common/component/Button"; +import { DependencyContext } from "../../../common/context/DependencyContext"; +import { OnboardingStackScreenName } from "../../../navigation/model/OnboardingStackScreenName"; +import { OnboardingStackParamList } from "../../../navigation/types/OnboardingStackParamList"; +import IntlTelInput from "../component/IntlTelInput"; +import { OnboardingInjectionKey } from "../InjectionKey"; type Props = { - navigation: StackNavigationProp< - OnboardingStackParamList, - OnboardingStackScreenName.SendPhoneNumberVerificationCode - >; + navigation: StackNavigationProp< + OnboardingStackParamList, + OnboardingStackScreenName.SendPhoneNumberVerificationCode + >; }; -export const SendPhoneNumberVerificationCode: React.FC = ({ navigation }) => { - const dependencies = React.useContext(DependencyContext); - const onboarding = dependencies.provide(OnboardingInjectionKey); +export const SendPhoneNumberVerificationCode: React.FC = ({ + navigation, +}) => { + const dependencies = React.useContext(DependencyContext); + const onboarding = dependencies.provide(OnboardingInjectionKey); - const [args, setInput] = React.useState({ - input: { - phoneNumber: '', - }, - }); + const [args, setInput] = React.useState< + QuerySendPhoneNumberVerificationCodeArgs + >({ + input: { + phoneNumber: "", + }, + }); - const { - executeSendPhoneNumberVerificationCode, - result, - queryResult: { error: sendPhoneNumberVerificationCodeError }, - } = onboarding.useSendPhoneNumberVerificationCode(); + const { + executeSendPhoneNumberVerificationCode, + result, + queryResult: { error: sendPhoneNumberVerificationCodeError }, + } = onboarding.useSendPhoneNumberVerificationCode(); - React.useEffect(() => { - if (!Boolean(result)) { - return; - } + React.useEffect(() => { + if (!Boolean(result)) { + return; + } - navigation.navigate(OnboardingStackScreenName.VerifyPhoneNumberCode, { - phoneNumber: args.input.phoneNumber, - }); - }, [result]); + navigation.navigate(OnboardingStackScreenName.VerifyPhoneNumberCode, { + phoneNumber: args.input.phoneNumber, + }); + }, [result]); - const onSetPhoneNumber = (phoneNumber: string) => { - setInput({ input: { phoneNumber } }); - }; + const onSetPhoneNumber = (phoneNumber: string) => { + setInput({ input: { phoneNumber } }); + }; - const onSendPhoneNumberVerificationCode = async () => { - try { - await executeSendPhoneNumberVerificationCode(args); - } catch (error) {} - }; + const onSendPhoneNumberVerificationCode = async () => { + try { + await executeSendPhoneNumberVerificationCode(args); + } catch (error) {} + }; - return ( - - MariaApp - Selecciona tu código de país e ingresa tu numero de teléfono - {/* onSetPhoneNumber(e.target.valueOf())} /> */} - - {sendPhoneNumberVerificationCodeError && Error al enviar el SMS. Intenta de nuevo.} - - Continuar - - Al crear tu cuenta aceptas los Términos y Condiciones - - ¿Ya tienes cuenta? - - - ); + return ( + + MariaApp + + Selecciona tu código de país e ingresa tu numero de teléfono + + {/* onSetPhoneNumber(e.target.valueOf())} /> */} + + {sendPhoneNumberVerificationCodeError && ( + Error al enviar el SMS. Intenta de nuevo. + )} + + Continuar + + + Al crear tu cuenta aceptas los Términos y Condiciones + + + ¿Ya tienes cuenta? + + + ); }; export default SendPhoneNumberVerificationCode; From d5e32a51170f86ccfc7a38cd853c7c3709af08aa Mon Sep 17 00:00:00 2001 From: Gus Date: Mon, 12 Oct 2020 16:54:49 -0600 Subject: [PATCH 07/17] uses formatted text --- native/package.json | 4 +- .../onboarding/component/IntlTelInput.tsx | 29 +++----- native/yarn.lock | 72 ++++++++++++++++++- 3 files changed, 81 insertions(+), 24 deletions(-) diff --git a/native/package.json b/native/package.json index 7a0eeca..0855c32 100644 --- a/native/package.json +++ b/native/package.json @@ -3,7 +3,6 @@ "name": "@corecodeio/native", "version": "1.0.0", "scripts": { - "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", @@ -27,11 +26,11 @@ "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", "react-native-confirmation-code-field": "^6.5.0", "react-native-gesture-handler": "~1.6.0", + "react-native-phone-number-input": "^1.1.0", "react-native-reanimated": "~1.9.0", "react-native-safe-area-context": "~3.0.7", "react-native-screens": "~2.9.0", "react-native-web": "~0.11.7", - "react-phone-number-input": "^3.0.25", "rxjs": "^6.6.3", "styled-components": "^5.1.1", "styled-system": "^5.1.5" @@ -40,7 +39,6 @@ "@babel/core": "^7.8.6", "@types/react": "~16.9.41", "@types/react-native": "~0.62.13", - "@types/react-phone-number-input": "^3.0.5", "jest-expo": "^38.0.2", "typescript": "~3.9.5" }, diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx index d4fe671..5b87037 100644 --- a/native/src/feature/onboarding/component/IntlTelInput.tsx +++ b/native/src/feature/onboarding/component/IntlTelInput.tsx @@ -1,41 +1,30 @@ -import React, { useRef, useState } from "react"; +import React from "react"; import { StyleSheet } from "react-native"; import PhoneInput from "react-native-phone-number-input"; type Props = { onSetPhoneNumber: (text: string) => void }; const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { - const [value, setValue] = useState(""); - const [formattedValue, setFormattedValue] = useState(""); - const [valid, setValid] = useState(false); - const phoneInput = useRef(null); + const [value, setValue] = React.useState(""); + const [, setFormattedValue] = React.useState(""); + const phoneInput = React.useRef(null); - const onChangePhoneNumber = (number: string) => { - setValue("+502" + number); - { - const checkValid = phoneInput.current?.isValidNumber(number); - setValid(checkValid ? checkValid : false); - - phoneInput.current?.isValidNumber(number) - ? onSetPhoneNumber("+502" + number) - : onSetPhoneNumber(""); - } + const onChangeFormattedText = (text: string) => { + setFormattedValue(text); + onSetPhoneNumber(text); }; return ( { - setFormattedValue(text); - }} + onChangeFormattedText={onChangeFormattedText} withDarkTheme autoFocus /> diff --git a/native/yarn.lock b/native/yarn.lock index 5b28114..5c9a55f 100644 --- a/native/yarn.lock +++ b/native/yarn.lock @@ -1020,6 +1020,15 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@callstack/react-theme-provider@3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7" + integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA== + dependencies: + "@types/hoist-non-react-statics" "^3.3.1" + deepmerge "^3.2.0" + hoist-non-react-statics "^3.3.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -2059,7 +2068,7 @@ resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c" integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ== -"@types/hoist-non-react-statics@*": +"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -4220,6 +4229,11 @@ function-bind@^1.1.1: resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +fuse.js@3.4.5: + version "3.4.5" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.5.tgz#8954fb43f9729bd5dbcb8c08f251db552595a7a6" + integrity sha512-s9PGTaQIkT69HaeoTVjwGsLfb8V8ScJLx5XGFcKHg0MqLUH/UZ4EKOtqtXX9k7AFqCGxD1aJmYb8Q5VYDibVRQ== + gensync@^1.0.0-beta.1: version "1.0.0-beta.1" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269" @@ -4291,6 +4305,11 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== +google-libphonenumber@^3.2.10: + version "3.2.13" + resolved "https://registry.yarnpkg.com/google-libphonenumber/-/google-libphonenumber-3.2.13.tgz#8f41f2ce1739d40e2b9ebccc75dca95474cdf0b5" + integrity sha512-USnpjJkD8St+wyshy154lF74JeauNCd8vrcusSlWjSFWitXzl7ZSuCunA/XxeVLqBv6DShrSfFMYdwGZ7x4hOw== + graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4: version "4.2.4" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" @@ -5680,6 +5699,11 @@ lodash.throttle@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= +lodash.toarray@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" + integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE= + lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" @@ -6102,6 +6126,13 @@ mkdirp@^0.5.1: dependencies: minimist "^1.2.5" +modal-react-native-web@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/modal-react-native-web/-/modal-react-native-web-0.2.0.tgz#5daaa76213218fd25df739a267b11aed37e8c0c2" + integrity sha512-sC0/jL3ZL4bGtv1VS43TnrH7/FHUqgb7IU3VYWNDzuR223fYlpG5Gc974GsTP172Vi+lnnBL/G70xONmaggxeQ== + dependencies: + warning "^4.0.1" + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -6164,6 +6195,13 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== +node-emoji@1.10.0: + version "1.10.0" + resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da" + integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw== + dependencies: + lodash.toarray "^4.4.0" + node-fetch@^1.0.1: version "1.7.3" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" @@ -6808,6 +6846,11 @@ range-parser@~1.2.1: resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== +react-async-hook@3.6.1: + version "3.6.1" + resolved "https://registry.yarnpkg.com/react-async-hook/-/react-async-hook-3.6.1.tgz#aed3e492d87319392865c83ed7cef3609e2a7fef" + integrity sha512-YWBB2feVQF79t5u2raMPHlZ8975Jds+guCvkWVC4kRLDlSCouLsYpQm4DGSqPeHvoHYVVcDfqNayLZAXQmnxnw== + react-devtools-core@^4.0.6: version "4.8.2" resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.8.2.tgz#4465f2e8de7795564aa20f28b2f3a9737586db23" @@ -6845,6 +6888,18 @@ react-native-confirmation-code-field@^6.5.0: resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-6.5.0.tgz#f5579ee66b3f902724f5596a7ea3c87308c4d6d9" integrity sha512-thOctQtpkx5bcXIj6+S+gIKw7Z/jMBFf9FtqkiRQaZI1+IoMoA+n5CK4aYoosPQW4oAPTivL1mxOyA8T1kqmtA== +react-native-country-picker-modal@^1.11.0: + version "1.11.0" + resolved "https://registry.yarnpkg.com/react-native-country-picker-modal/-/react-native-country-picker-modal-1.11.0.tgz#14056cbbd83477549aa9b5449570fff4ef3c7d5d" + integrity sha512-4+WXRlCaDIWgN0m+zIEznliY+ZHlAnkBVd14WojOALE2DcXTCuWERbF0Z8ST+/6jwxkkYTNAkk3cbIP0V+7ZoQ== + dependencies: + "@callstack/react-theme-provider" "3.0.3" + fuse.js "3.4.5" + modal-react-native-web "0.2.0" + node-emoji "1.10.0" + prop-types "15.7.2" + react-async-hook "3.6.1" + react-native-gesture-handler@~1.6.0: version "1.6.1" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17" @@ -6860,6 +6915,14 @@ react-native-iphone-x-helper@^1.2.1: resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772" integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ== +react-native-phone-number-input@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-native-phone-number-input/-/react-native-phone-number-input-1.1.0.tgz#6b77b27a2342198f9d5bc62c01f8cfbc992457c7" + integrity sha512-PKbWN8LGj193xhsy0cq9n48r2TAunrqAnjoAQC2OLcJW/581S9auPh8IdsOi9xNXKiGFH64HoxUo/1n3sOqPfw== + dependencies: + google-libphonenumber "^3.2.10" + react-native-country-picker-modal "^1.11.0" + react-native-reanimated@~1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz#38676c99dd585504fdc7331efb45e5f48ec7339a" @@ -8346,6 +8409,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^4.0.1: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" From 93a50c5f6a6d6726c63c83f6ec428aa7ac55edc6 Mon Sep 17 00:00:00 2001 From: Gus Date: Mon, 12 Oct 2020 17:10:42 -0600 Subject: [PATCH 08/17] Puts code extraction logic into a useEffect hook. --- .../screen/VerifyPhoneNumberCode.tsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx index 8739116..d96fc2e 100644 --- a/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx +++ b/native/src/feature/onboarding/screen/VerifyPhoneNumberCode.tsx @@ -39,11 +39,9 @@ export const VerifyPhoneNumberCode: React.FC = ({ const dependencies = React.useContext(DependencyContext); const onboarding = dependencies.provide(OnboardingInjectionKey); - const [args, setInput] = React.useState( - () => ({ - input: { phoneNumber: route.params.phoneNumber, code: "" }, - }) - ); + const [args, setInput] = React.useState({ + input: { phoneNumber: route.params.phoneNumber, code: "" }, + }); const { executeVerifyPhoneNumberCode, @@ -65,6 +63,12 @@ export const VerifyPhoneNumberCode: React.FC = ({ handleError(); }, [error]); + React.useEffect(() => { + if (args.input.code.length === CELL_COUNT) { + onSendPhoneNumberVerificationCode(); + } + }, [args.input.code]); + const handleError = () => { Alert.alert("Oops!", error?.message, [ { text: "Entendido", onPress: () => null }, @@ -73,16 +77,10 @@ export const VerifyPhoneNumberCode: React.FC = ({ const onSetVerificationCode = (code: string) => { setInput({ input: { phoneNumber: args.input.phoneNumber, code } }); - console.log(args); - - if (code.length === CELL_COUNT) { - onSendPhoneNumberVerificationCode(); - } }; const onSendPhoneNumberVerificationCode = async () => { try { - console.log(args); await executeVerifyPhoneNumberCode(args); } catch (error) { console.log(error); // TODO handle error @@ -107,7 +105,6 @@ export const VerifyPhoneNumberCode: React.FC = ({ número {args.input.phoneNumber} - ¿Ya tienes cuenta? From ea85583dcc5d621d06f9a8cfe82b2b3f5c9bf9be Mon Sep 17 00:00:00 2001 From: danilo Date: Tue, 13 Oct 2020 16:50:05 -0600 Subject: [PATCH 09/17] change in onchangeText --- native/src/feature/onboarding/component/IntlTelInput.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx index 5b87037..7d39d87 100644 --- a/native/src/feature/onboarding/component/IntlTelInput.tsx +++ b/native/src/feature/onboarding/component/IntlTelInput.tsx @@ -9,6 +9,10 @@ const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { const [, setFormattedValue] = React.useState(""); const phoneInput = React.useRef(null); + const onChangePhoneNumber = (number: string) => { + setValue(number); + }; + const onChangeFormattedText = (text: string) => { setFormattedValue(text); onSetPhoneNumber(text); @@ -24,6 +28,7 @@ const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { placeholder="Número de Teléfono" defaultValue={value} defaultCode="GT" + onChangeText={ onChangePhoneNumber } onChangeFormattedText={onChangeFormattedText} withDarkTheme autoFocus From 1a38f7d69c180a41e7edc4930b8f0b19c84bb434 Mon Sep 17 00:00:00 2001 From: Gus Date: Tue, 13 Oct 2020 17:38:07 -0600 Subject: [PATCH 10/17] Stores OnboardingSession token in device SecureStore --- .../onboarding/controller/OnboardingController.ts | 9 ++++----- api/src/util/config.ts | 2 +- native/src/feature/onboarding/model/Onboarding.ts | 15 ++++++++------- native/src/util/auth/model/AuthToken.ts | 4 ++++ native/src/util/store/model/Store.ts | 4 ++++ 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/api/src/feature/onboarding/controller/OnboardingController.ts b/api/src/feature/onboarding/controller/OnboardingController.ts index 04599af..38af20c 100644 --- a/api/src/feature/onboarding/controller/OnboardingController.ts +++ b/api/src/feature/onboarding/controller/OnboardingController.ts @@ -20,10 +20,9 @@ export class OnboardingController implements IOnboardingController { } async verifyPhoneNumberCode({ phoneNumber, code }) { - const isTwilioVerified = await this.twilioSMSVerification.verify( - phoneNumber, - code - ); + const isTwilioVerified = this.verifiedPhoneNumbers.includes(phoneNumber) + ? true + : await this.twilioSMSVerification.verify(phoneNumber, code); if (!isTwilioVerified) { throw new Error("Error al verificar"); @@ -50,7 +49,7 @@ export class OnboardingController implements IOnboardingController { } async sendPhoneNumberVerificationCode({ phoneNumber }) { - if (await this.verifiedPhoneNumbers.includes(phoneNumber)) { + if (this.verifiedPhoneNumbers.includes(phoneNumber)) { return true; } diff --git a/api/src/util/config.ts b/api/src/util/config.ts index 60cbd57..c2efff1 100644 --- a/api/src/util/config.ts +++ b/api/src/util/config.ts @@ -14,7 +14,7 @@ const config = convict({ format: "*", default: Array(15) .fill(null) - .map((_, i) => `+5020000000${i}`), + .map((_, i) => `+5023000000${i}`), env: "VERIFIED_PHONE_NUMBERS", }, }, diff --git a/native/src/feature/onboarding/model/Onboarding.ts b/native/src/feature/onboarding/model/Onboarding.ts index e746bef..7cf8aba 100644 --- a/native/src/feature/onboarding/model/Onboarding.ts +++ b/native/src/feature/onboarding/model/Onboarding.ts @@ -7,7 +7,6 @@ import { import { Mutation, MutationVerifyPhoneNumberCodeArgs, - OnboardingSession, Query, QuerySendPhoneNumberVerificationCodeArgs, } from "@corecodeio/libraries/api"; @@ -59,23 +58,25 @@ export class Onboarding { ) => void; result: Mutation["verifyPhoneNumberCode"] | null | undefined; error: Error | null; - queryResult: MutationResult; + queryResult: MutationResult>; } { const [error, setError] = React.useState(null); const [execute, queryResult] = useMutation< - Mutation["verifyPhoneNumberCode"], + Pick, MutationVerifyPhoneNumberCodeArgs >(MutationVerifyPhoneNumberCode); - if (Boolean(queryResult?.data?.token)) { - this.authToken.set((queryResult.data as OnboardingSession).token); + if (Boolean(queryResult?.data?.verifyPhoneNumberCode?.token)) { + this.authToken.set( + (queryResult.data as Pick) + .verifyPhoneNumberCode.token + ); } return { executeVerifyPhoneNumberCode: async ({ input }) => { try { - console.log(input); await execute({ variables: { input, @@ -85,7 +86,7 @@ export class Onboarding { setError(new Error("Algo salió mal. Intenta de nuevo")); } }, - result: queryResult.data, + result: queryResult?.data?.verifyPhoneNumberCode, error: queryResult.error ?? error, queryResult, }; diff --git a/native/src/util/auth/model/AuthToken.ts b/native/src/util/auth/model/AuthToken.ts index 2ff2405..31072c4 100644 --- a/native/src/util/auth/model/AuthToken.ts +++ b/native/src/util/auth/model/AuthToken.ts @@ -14,4 +14,8 @@ export class AuthToken { async set(token: string) { await this.store.set(StoreKeyName.authToken, token); } + + async get() { + return await this.store.get(StoreKeyName.authToken); + } } diff --git a/native/src/util/store/model/Store.ts b/native/src/util/store/model/Store.ts index 81ea41c..2fe95a0 100644 --- a/native/src/util/store/model/Store.ts +++ b/native/src/util/store/model/Store.ts @@ -4,4 +4,8 @@ export class Store { async set(key: string, value: string) { await SecureStore.setItemAsync(key, value); } + + async get(key: string) { + return await SecureStore.getItemAsync(key); + } } From 4b359746b16c47be11a9fd4b7085f2007d4a5f4e Mon Sep 17 00:00:00 2001 From: danilo Date: Wed, 14 Oct 2020 17:16:04 -0600 Subject: [PATCH 11/17] adds comments about headers --- native/App.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/native/App.tsx b/native/App.tsx index 5e90bde..ec1369c 100644 --- a/native/App.tsx +++ b/native/App.tsx @@ -3,15 +3,25 @@ import { NavigationContainer } from "@react-navigation/native"; import React from "react"; import { dependencies, - DependencyContext, + DependencyContext } from "./src/common/context/DependencyContext"; import OnboardingNavigator from "./src/navigation/navigator/OnboardingNavigator"; const client = new ApolloClient({ - uri: `http://localhost:8001/graphql`, + uri: `https://1e3026c46da0.ngrok.io/graphql`, cache: new InMemoryCache(), + headers: { + authorization: `Bearer` + } }); +/** + * rxjs observer https://rxjs-dev.firebaseapp.com/guide/overview + * behavior subject + * useState + * useEffect + */ + export const App: React.FC = () => { return ( From c2fb9137fcaa64159d59688766ff986a827a415b Mon Sep 17 00:00:00 2001 From: MConcoba Date: Tue, 20 Oct 2020 17:58:39 -0600 Subject: [PATCH 12/17] Creates useAuthToken hook --- native/App.tsx | 57 ++++--- .../feature/onboarding/model/Onboarding.ts | 155 ++++++++---------- native/src/util/auth/model/AuthToken.ts | 36 ++-- 3 files changed, 128 insertions(+), 120 deletions(-) diff --git a/native/App.tsx b/native/App.tsx index ec1369c..40afe4c 100644 --- a/native/App.tsx +++ b/native/App.tsx @@ -1,19 +1,9 @@ -import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"; -import { NavigationContainer } from "@react-navigation/native"; -import React from "react"; -import { - dependencies, - DependencyContext -} from "./src/common/context/DependencyContext"; -import OnboardingNavigator from "./src/navigation/navigator/OnboardingNavigator"; - -const client = new ApolloClient({ - uri: `https://1e3026c46da0.ngrok.io/graphql`, - cache: new InMemoryCache(), - headers: { - authorization: `Bearer` - } -}); +import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; +import { NavigationContainer } from '@react-navigation/native'; +import React from 'react'; +import { dependencies, DependencyContext } from './src/common/context/DependencyContext'; +import OnboardingNavigator from './src/navigation/navigator/OnboardingNavigator'; +import { AuthTokenInjectionKey } from './src/util/auth/InjectionKey'; /** * rxjs observer https://rxjs-dev.firebaseapp.com/guide/overview @@ -23,15 +13,32 @@ const client = new ApolloClient({ */ export const App: React.FC = () => { - return ( - - - - - - - - ); + const authToken = dependencies.provide(AuthTokenInjectionKey); + + const token = authToken.useAuthToken(); + + const getApolloClient = () => { + const options = { + uri: `http://49f093574f64.ngrok.io/graphql`, + cache: new InMemoryCache(), + }; + + if (Boolean(token)) { + options['headers'] = { authorization: `Bearer ${token}` }; + } + + return new ApolloClient(options); + }; + + return ( + + + + + + + + ); }; export default App; diff --git a/native/src/feature/onboarding/model/Onboarding.ts b/native/src/feature/onboarding/model/Onboarding.ts index 7cf8aba..804538e 100644 --- a/native/src/feature/onboarding/model/Onboarding.ts +++ b/native/src/feature/onboarding/model/Onboarding.ts @@ -1,94 +1,83 @@ +import { LazyQueryResult, MutationResult, useLazyQuery, useMutation } from '@apollo/client'; import { - LazyQueryResult, - MutationResult, - useLazyQuery, - useMutation, -} from "@apollo/client"; + Mutation, + MutationVerifyPhoneNumberCodeArgs, + Query, + QuerySendPhoneNumberVerificationCodeArgs, +} from '@corecodeio/libraries/api'; import { - Mutation, - MutationVerifyPhoneNumberCodeArgs, - Query, - QuerySendPhoneNumberVerificationCodeArgs, -} from "@corecodeio/libraries/api"; -import { - MutationVerifyPhoneNumberCode, - QuerySendPhoneNumberVerificationCode, -} from "@corecodeio/libraries/api/onboarding"; -import React from "react"; -import { AuthToken } from "../../../util/auth/model/AuthToken"; + MutationVerifyPhoneNumberCode, + QuerySendPhoneNumberVerificationCode, +} from '@corecodeio/libraries/api/onboarding'; +import React from 'react'; +import { AuthToken } from '../../../util/auth/model/AuthToken'; export class Onboarding { - private authToken: AuthToken; - - constructor(authToken: AuthToken) { - this.authToken = authToken; - } + private authToken: AuthToken; - useSendPhoneNumberVerificationCode(): { - executeSendPhoneNumberVerificationCode: ( - input: QuerySendPhoneNumberVerificationCodeArgs - ) => void; - result: Query["sendPhoneNumberVerificationCode"] | undefined; - queryResult: LazyQueryResult< - Query["sendPhoneNumberVerificationCode"], - QuerySendPhoneNumberVerificationCodeArgs - >; - } { - const [execute, queryResult] = useLazyQuery< - Query["sendPhoneNumberVerificationCode"], - QuerySendPhoneNumberVerificationCodeArgs - >(QuerySendPhoneNumberVerificationCode); + constructor(authToken: AuthToken) { + this.authToken = authToken; + } - return { - executeSendPhoneNumberVerificationCode: async ({ input }) => { - await execute({ - variables: { - input, - }, - }); - }, - result: queryResult.data, - queryResult, - }; - } + useSendPhoneNumberVerificationCode(): { + executeSendPhoneNumberVerificationCode: (input: QuerySendPhoneNumberVerificationCodeArgs) => void; + result: Query['sendPhoneNumberVerificationCode'] | undefined; + queryResult: LazyQueryResult< + Query['sendPhoneNumberVerificationCode'], + QuerySendPhoneNumberVerificationCodeArgs + >; + } { + const [execute, queryResult] = useLazyQuery< + Query['sendPhoneNumberVerificationCode'], + QuerySendPhoneNumberVerificationCodeArgs + >(QuerySendPhoneNumberVerificationCode); - useVerifyPhoneNumberCode(): { - executeVerifyPhoneNumberCode: ( - input: MutationVerifyPhoneNumberCodeArgs - ) => void; - result: Mutation["verifyPhoneNumberCode"] | null | undefined; - error: Error | null; - queryResult: MutationResult>; - } { - const [error, setError] = React.useState(null); + return { + executeSendPhoneNumberVerificationCode: async ({ input }) => { + await execute({ + variables: { + input, + }, + }); + }, + result: queryResult.data, + queryResult, + }; + } - const [execute, queryResult] = useMutation< - Pick, - MutationVerifyPhoneNumberCodeArgs - >(MutationVerifyPhoneNumberCode); + useVerifyPhoneNumberCode(): { + executeVerifyPhoneNumberCode: (input: MutationVerifyPhoneNumberCodeArgs) => void; + result: Mutation['verifyPhoneNumberCode'] | null | undefined; + error: Error | null; + queryResult: MutationResult>; + } { + const [error, setError] = React.useState(null); + const [execute, queryResult] = useMutation< + Pick, + MutationVerifyPhoneNumberCodeArgs + >(MutationVerifyPhoneNumberCode); - if (Boolean(queryResult?.data?.verifyPhoneNumberCode?.token)) { - this.authToken.set( - (queryResult.data as Pick) - .verifyPhoneNumberCode.token - ); - } + if (Boolean(queryResult?.data?.verifyPhoneNumberCode?.token)) { + this.authToken.set( + (queryResult.data as Pick).verifyPhoneNumberCode.token + ); + } - return { - executeVerifyPhoneNumberCode: async ({ input }) => { - try { - await execute({ - variables: { - input, - }, - }); - } catch (error) { - setError(new Error("Algo salió mal. Intenta de nuevo")); - } - }, - result: queryResult?.data?.verifyPhoneNumberCode, - error: queryResult.error ?? error, - queryResult, - }; - } + return { + executeVerifyPhoneNumberCode: async ({ input }) => { + try { + await execute({ + variables: { + input, + }, + }); + } catch (error) { + setError(new Error('Algo salió mal. Intenta de nuevo')); + } + }, + result: queryResult?.data?.verifyPhoneNumberCode, + error: queryResult.error ?? error, + queryResult, + }; + } } diff --git a/native/src/util/auth/model/AuthToken.ts b/native/src/util/auth/model/AuthToken.ts index 31072c4..763a7bc 100644 --- a/native/src/util/auth/model/AuthToken.ts +++ b/native/src/util/auth/model/AuthToken.ts @@ -1,21 +1,33 @@ -import { Store } from "../../store/model/Store"; +import React from 'react'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { Store } from '../../store/model/Store'; enum StoreKeyName { - authToken = "authToken", + authToken = 'authToken', } export class AuthToken { - private store: Store; + private store: Store; + private observable: Observable = new Observable(); - constructor(store: Store) { - this.store = store; - } + constructor(store: Store) { + this.store = store; + } - async set(token: string) { - await this.store.set(StoreKeyName.authToken, token); - } + async set(token: string) { + const behavior = new BehaviorSubject(token); + this.observable = behavior.asObservable(); + await this.store.set(StoreKeyName.authToken, token); + behavior.next(token); + } - async get() { - return await this.store.get(StoreKeyName.authToken); - } + async get() { + return await this.store.get(StoreKeyName.authToken); + } + + useAuthToken() { + const [token, setToken] = React.useState(''); + this.observable.subscribe(setToken); + return token; + } } From 689b5b3800640d2c11909b67b6e5e2989a648050 Mon Sep 17 00:00:00 2001 From: Gus Date: Tue, 20 Oct 2020 22:47:51 -0600 Subject: [PATCH 13/17] Applies prettier --- native/App.tsx | 67 ++++---- .../onboarding/component/IntlTelInput.tsx | 2 +- .../feature/onboarding/model/Onboarding.ts | 154 ++++++++++-------- native/src/util/auth/model/AuthToken.ts | 46 +++--- 4 files changed, 141 insertions(+), 128 deletions(-) diff --git a/native/App.tsx b/native/App.tsx index 40afe4c..cebb00d 100644 --- a/native/App.tsx +++ b/native/App.tsx @@ -1,9 +1,12 @@ -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; -import { NavigationContainer } from '@react-navigation/native'; -import React from 'react'; -import { dependencies, DependencyContext } from './src/common/context/DependencyContext'; -import OnboardingNavigator from './src/navigation/navigator/OnboardingNavigator'; -import { AuthTokenInjectionKey } from './src/util/auth/InjectionKey'; +import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"; +import { NavigationContainer } from "@react-navigation/native"; +import React from "react"; +import { + dependencies, + DependencyContext, +} from "./src/common/context/DependencyContext"; +import OnboardingNavigator from "./src/navigation/navigator/OnboardingNavigator"; +import { AuthTokenInjectionKey } from "./src/util/auth/InjectionKey"; /** * rxjs observer https://rxjs-dev.firebaseapp.com/guide/overview @@ -13,32 +16,32 @@ import { AuthTokenInjectionKey } from './src/util/auth/InjectionKey'; */ export const App: React.FC = () => { - const authToken = dependencies.provide(AuthTokenInjectionKey); - - const token = authToken.useAuthToken(); - - const getApolloClient = () => { - const options = { - uri: `http://49f093574f64.ngrok.io/graphql`, - cache: new InMemoryCache(), - }; - - if (Boolean(token)) { - options['headers'] = { authorization: `Bearer ${token}` }; - } - - return new ApolloClient(options); - }; - - return ( - - - - - - - - ); + const authToken = dependencies.provide(AuthTokenInjectionKey); + + const token = authToken.useAuthToken(); + + const getApolloClient = () => { + const options = { + uri: `http://49f093574f64.ngrok.io/graphql`, + cache: new InMemoryCache(), + }; + + if (Boolean(token)) { + options["headers"] = { authorization: `Bearer ${token}` }; + } + + return new ApolloClient(options); + }; + + return ( + + + + + + + + ); }; export default App; diff --git a/native/src/feature/onboarding/component/IntlTelInput.tsx b/native/src/feature/onboarding/component/IntlTelInput.tsx index 7d39d87..a72830a 100644 --- a/native/src/feature/onboarding/component/IntlTelInput.tsx +++ b/native/src/feature/onboarding/component/IntlTelInput.tsx @@ -28,7 +28,7 @@ const IntlTelInput: React.FC = ({ onSetPhoneNumber }) => { placeholder="Número de Teléfono" defaultValue={value} defaultCode="GT" - onChangeText={ onChangePhoneNumber } + onChangeText={onChangePhoneNumber} onChangeFormattedText={onChangeFormattedText} withDarkTheme autoFocus diff --git a/native/src/feature/onboarding/model/Onboarding.ts b/native/src/feature/onboarding/model/Onboarding.ts index 804538e..fc224e4 100644 --- a/native/src/feature/onboarding/model/Onboarding.ts +++ b/native/src/feature/onboarding/model/Onboarding.ts @@ -1,83 +1,93 @@ -import { LazyQueryResult, MutationResult, useLazyQuery, useMutation } from '@apollo/client'; import { - Mutation, - MutationVerifyPhoneNumberCodeArgs, - Query, - QuerySendPhoneNumberVerificationCodeArgs, -} from '@corecodeio/libraries/api'; + LazyQueryResult, + MutationResult, + useLazyQuery, + useMutation, +} from "@apollo/client"; import { - MutationVerifyPhoneNumberCode, - QuerySendPhoneNumberVerificationCode, -} from '@corecodeio/libraries/api/onboarding'; -import React from 'react'; -import { AuthToken } from '../../../util/auth/model/AuthToken'; + Mutation, + MutationVerifyPhoneNumberCodeArgs, + Query, + QuerySendPhoneNumberVerificationCodeArgs, +} from "@corecodeio/libraries/api"; +import { + MutationVerifyPhoneNumberCode, + QuerySendPhoneNumberVerificationCode, +} from "@corecodeio/libraries/api/onboarding"; +import React from "react"; +import { AuthToken } from "../../../util/auth/model/AuthToken"; export class Onboarding { - private authToken: AuthToken; + private authToken: AuthToken; - constructor(authToken: AuthToken) { - this.authToken = authToken; - } + constructor(authToken: AuthToken) { + this.authToken = authToken; + } - useSendPhoneNumberVerificationCode(): { - executeSendPhoneNumberVerificationCode: (input: QuerySendPhoneNumberVerificationCodeArgs) => void; - result: Query['sendPhoneNumberVerificationCode'] | undefined; - queryResult: LazyQueryResult< - Query['sendPhoneNumberVerificationCode'], - QuerySendPhoneNumberVerificationCodeArgs - >; - } { - const [execute, queryResult] = useLazyQuery< - Query['sendPhoneNumberVerificationCode'], - QuerySendPhoneNumberVerificationCodeArgs - >(QuerySendPhoneNumberVerificationCode); + useSendPhoneNumberVerificationCode(): { + executeSendPhoneNumberVerificationCode: ( + input: QuerySendPhoneNumberVerificationCodeArgs + ) => void; + result: Query["sendPhoneNumberVerificationCode"] | undefined; + queryResult: LazyQueryResult< + Query["sendPhoneNumberVerificationCode"], + QuerySendPhoneNumberVerificationCodeArgs + >; + } { + const [execute, queryResult] = useLazyQuery< + Query["sendPhoneNumberVerificationCode"], + QuerySendPhoneNumberVerificationCodeArgs + >(QuerySendPhoneNumberVerificationCode); - return { - executeSendPhoneNumberVerificationCode: async ({ input }) => { - await execute({ - variables: { - input, - }, - }); - }, - result: queryResult.data, - queryResult, - }; - } + return { + executeSendPhoneNumberVerificationCode: async ({ input }) => { + await execute({ + variables: { + input, + }, + }); + }, + result: queryResult.data, + queryResult, + }; + } - useVerifyPhoneNumberCode(): { - executeVerifyPhoneNumberCode: (input: MutationVerifyPhoneNumberCodeArgs) => void; - result: Mutation['verifyPhoneNumberCode'] | null | undefined; - error: Error | null; - queryResult: MutationResult>; - } { - const [error, setError] = React.useState(null); - const [execute, queryResult] = useMutation< - Pick, - MutationVerifyPhoneNumberCodeArgs - >(MutationVerifyPhoneNumberCode); + useVerifyPhoneNumberCode(): { + executeVerifyPhoneNumberCode: ( + input: MutationVerifyPhoneNumberCodeArgs + ) => void; + result: Mutation["verifyPhoneNumberCode"] | null | undefined; + error: Error | null; + queryResult: MutationResult>; + } { + const [error, setError] = React.useState(null); + const [execute, queryResult] = useMutation< + Pick, + MutationVerifyPhoneNumberCodeArgs + >(MutationVerifyPhoneNumberCode); - if (Boolean(queryResult?.data?.verifyPhoneNumberCode?.token)) { - this.authToken.set( - (queryResult.data as Pick).verifyPhoneNumberCode.token - ); - } + if (Boolean(queryResult?.data?.verifyPhoneNumberCode?.token)) { + this.authToken.set( + (queryResult.data as Pick) + .verifyPhoneNumberCode.token + ); + } - return { - executeVerifyPhoneNumberCode: async ({ input }) => { - try { - await execute({ - variables: { - input, - }, - }); - } catch (error) { - setError(new Error('Algo salió mal. Intenta de nuevo')); - } - }, - result: queryResult?.data?.verifyPhoneNumberCode, - error: queryResult.error ?? error, - queryResult, - }; - } + return { + executeVerifyPhoneNumberCode: async ({ input }) => { + try { + await execute({ + variables: { + input, + }, + }); + } catch (error) { + setError(new Error("Algo salió mal. Intenta de nuevo")); + } + }, + result: queryResult?.data?.verifyPhoneNumberCode, + error: queryResult.error ?? error, + queryResult, + }; + } } diff --git a/native/src/util/auth/model/AuthToken.ts b/native/src/util/auth/model/AuthToken.ts index 763a7bc..1fd321c 100644 --- a/native/src/util/auth/model/AuthToken.ts +++ b/native/src/util/auth/model/AuthToken.ts @@ -1,33 +1,33 @@ -import React from 'react'; -import { BehaviorSubject, Observable } from 'rxjs'; -import { Store } from '../../store/model/Store'; +import React from "react"; +import { BehaviorSubject, Observable } from "rxjs"; +import { Store } from "../../store/model/Store"; enum StoreKeyName { - authToken = 'authToken', + authToken = "authToken", } export class AuthToken { - private store: Store; - private observable: Observable = new Observable(); + private store: Store; + private observable: Observable = new Observable(); - constructor(store: Store) { - this.store = store; - } + constructor(store: Store) { + this.store = store; + } - async set(token: string) { - const behavior = new BehaviorSubject(token); - this.observable = behavior.asObservable(); - await this.store.set(StoreKeyName.authToken, token); - behavior.next(token); - } + async set(token: string) { + const behavior = new BehaviorSubject(token); + this.observable = behavior.asObservable(); + await this.store.set(StoreKeyName.authToken, token); + behavior.next(token); + } - async get() { - return await this.store.get(StoreKeyName.authToken); - } + async get() { + return await this.store.get(StoreKeyName.authToken); + } - useAuthToken() { - const [token, setToken] = React.useState(''); - this.observable.subscribe(setToken); - return token; - } + useAuthToken() { + const [token, setToken] = React.useState(""); + this.observable.subscribe(setToken); + return token; + } } From cc57c738955016431525cdded92e3d26bfc49ea9 Mon Sep 17 00:00:00 2001 From: pugaIsaias <64232550+pugaIsaias@users.noreply.github.com> Date: Wed, 21 Oct 2020 16:56:49 -0600 Subject: [PATCH 14/17] Made Effect that returns unsubscribe function --- native/src/util/auth/model/AuthToken.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/native/src/util/auth/model/AuthToken.ts b/native/src/util/auth/model/AuthToken.ts index 1fd321c..9d1fde1 100644 --- a/native/src/util/auth/model/AuthToken.ts +++ b/native/src/util/auth/model/AuthToken.ts @@ -27,7 +27,10 @@ export class AuthToken { useAuthToken() { const [token, setToken] = React.useState(""); - this.observable.subscribe(setToken); + const subscription = this.observable.subscribe(setToken); + + React.useEffect(() => subscription.unsubscribe(), []); + return token; } } From ab15e3c0fbaeb4059ff1c41af44f2ff0de4c6275 Mon Sep 17 00:00:00 2001 From: MConcoba Date: Mon, 26 Oct 2020 17:05:30 -0600 Subject: [PATCH 15/17] Create registerStore resolver --- .../onboarding/resolver/registerStore.ts | 14 ++++++ api/src/server/createApolloServer.ts | 24 +++++----- api/src/server/interface/IContext.ts | 7 +-- api/src/server/schema.ts | 44 ++++++++++--------- 4 files changed, 53 insertions(+), 36 deletions(-) create mode 100644 api/src/feature/onboarding/resolver/registerStore.ts diff --git a/api/src/feature/onboarding/resolver/registerStore.ts b/api/src/feature/onboarding/resolver/registerStore.ts new file mode 100644 index 0000000..2f04312 --- /dev/null +++ b/api/src/feature/onboarding/resolver/registerStore.ts @@ -0,0 +1,14 @@ +import { MutationResolvers } from '@corecodeio/libraries/api'; +import { IContext } from '../../../server/interface/IContext'; + +export const registerStore: MutationResolvers['registerStore'] = async ( + parent, + { input }, + { dependencies, req } +) => { + try { + req.headers.authorization; + } catch (error) { + return error; + } +}; diff --git a/api/src/server/createApolloServer.ts b/api/src/server/createApolloServer.ts index b912caa..1516e87 100644 --- a/api/src/server/createApolloServer.ts +++ b/api/src/server/createApolloServer.ts @@ -1,14 +1,14 @@ -import { IDependencies } from "@corecodeio/libraries/di"; -import { ApolloServer } from "apollo-server-express"; -import { IContext } from "./interface/IContext"; -import { resolvers } from "./resolvers"; -import { schema as typeDefs } from "./schema"; +import { IDependencies } from '@corecodeio/libraries/di'; +import { ApolloServer } from 'apollo-server-express'; +import { IContext } from './interface/IContext'; +import { resolvers } from './resolvers'; +import { schema as typeDefs } from './schema'; export const createApolloServer = (dependencies: IDependencies) => - new ApolloServer({ - typeDefs, - resolvers, - context: { - dependencies, - } as IContext, - }); + new ApolloServer({ + typeDefs, + resolvers, + context: (expressContext) => { + return { ...expressContext, dependencies } as IContext; + }, + }); diff --git a/api/src/server/interface/IContext.ts b/api/src/server/interface/IContext.ts index 945160d..109acbe 100644 --- a/api/src/server/interface/IContext.ts +++ b/api/src/server/interface/IContext.ts @@ -1,5 +1,6 @@ -import { IDependencies } from "@corecodeio/libraries/di"; +import { IDependencies } from '@corecodeio/libraries/di'; +import { ExpressContext } from 'apollo-server-express/dist/ApolloServer'; -export interface IContext { - dependencies: IDependencies; +export interface IContext extends ExpressContext { + dependencies: IDependencies; } diff --git a/api/src/server/schema.ts b/api/src/server/schema.ts index 572068e..adfdba9 100644 --- a/api/src/server/schema.ts +++ b/api/src/server/schema.ts @@ -1,28 +1,30 @@ -import { gql } from "apollo-server-express"; +import { gql } from 'apollo-server-express'; export const schema = gql` - type Query { - sendPhoneNumberVerificationCode( - input: SendPhoneNumberVerificatioCodeInput! - ): Boolean! - } + type Query { + sendPhoneNumberVerificationCode(input: SendPhoneNumberVerificatioCodeInput!): Boolean! + } - type Mutation { - verifyPhoneNumberCode( - input: VerifyPhoneNumberCodeInput! - ): OnboardingSession! - } + type Mutation { + verifyPhoneNumberCode(input: VerifyPhoneNumberCodeInput!): OnboardingSession! - input SendPhoneNumberVerificatioCodeInput { - phoneNumber: String! - } + registerStore(input: RegisterStoreInput!): Boolean! + } - input VerifyPhoneNumberCodeInput { - phoneNumber: String! - code: String! - } + input SendPhoneNumberVerificatioCodeInput { + phoneNumber: String! + } - type OnboardingSession { - token: String! - } + input VerifyPhoneNumberCodeInput { + phoneNumber: String! + code: String! + } + + input RegisterStoreInput { + url: String! + } + + type OnboardingSession { + token: String! + } `; From ea7bf8102b805faca91e01a143f716709fb42813 Mon Sep 17 00:00:00 2001 From: danilo Date: Tue, 27 Oct 2020 16:35:03 -0600 Subject: [PATCH 16/17] Creates smsVerificationMock --- .../resolver/sendPhoneNumberVerificationCode.test.ts | 9 +++++---- .../onboarding/resolver/verifyPhoneNumberCode.test.ts | 9 +++++---- api/src/__test__/mock/smsVerificationMock.ts | 4 ++++ 3 files changed, 14 insertions(+), 8 deletions(-) create mode 100644 api/src/__test__/mock/smsVerificationMock.ts diff --git a/api/src/__test__/feature/onboarding/resolver/sendPhoneNumberVerificationCode.test.ts b/api/src/__test__/feature/onboarding/resolver/sendPhoneNumberVerificationCode.test.ts index cf289ed..76bb6ad 100644 --- a/api/src/__test__/feature/onboarding/resolver/sendPhoneNumberVerificationCode.test.ts +++ b/api/src/__test__/feature/onboarding/resolver/sendPhoneNumberVerificationCode.test.ts @@ -5,14 +5,15 @@ import * as faker from "faker"; import { createApolloServer } from "../../../../server"; import { TwilioSMSVerificationInjectionKey } from "../../../../util/twilio/InjectionKeys"; import { ISMSVerification } from "../../../../util/twilio/interface/ISMSVerification"; +import { smsVerificationMock } from "../../../mock/smsVerificationMock"; const dependencies = new Dependencies(); const apolloServer = createApolloServer(dependencies); -dependencies.override(TwilioSMSVerificationInjectionKey, { - send: jest.fn(() => Promise.resolve(true)), - verify: jest.fn(() => Promise.resolve(true)), -}); +dependencies.override( + TwilioSMSVerificationInjectionKey, + smsVerificationMock +); describe("sendPhoneNumberVerificationCode", () => { test("Should return a response with code 200", async () => { diff --git a/api/src/__test__/feature/onboarding/resolver/verifyPhoneNumberCode.test.ts b/api/src/__test__/feature/onboarding/resolver/verifyPhoneNumberCode.test.ts index 99a5596..e79466a 100644 --- a/api/src/__test__/feature/onboarding/resolver/verifyPhoneNumberCode.test.ts +++ b/api/src/__test__/feature/onboarding/resolver/verifyPhoneNumberCode.test.ts @@ -5,14 +5,15 @@ import * as faker from "faker"; import { createApolloServer } from "../../../../server"; import { TwilioSMSVerificationInjectionKey } from "../../../../util/twilio/InjectionKeys"; import { ISMSVerification } from "../../../../util/twilio/interface/ISMSVerification"; +import { smsVerificationMock } from "../../../mock/smsVerificationMock"; const dependencies = new Dependencies(); const apolloServer = createApolloServer(dependencies); -dependencies.override(TwilioSMSVerificationInjectionKey, { - send: jest.fn(() => Promise.resolve(true)), - verify: jest.fn(() => Promise.resolve(true)), -}); +dependencies.override( + TwilioSMSVerificationInjectionKey, + smsVerificationMock +); describe("verifyPhoneNumberCode", () => { test("Should return a response of type OnboardingSession", async () => { diff --git a/api/src/__test__/mock/smsVerificationMock.ts b/api/src/__test__/mock/smsVerificationMock.ts new file mode 100644 index 0000000..662cde7 --- /dev/null +++ b/api/src/__test__/mock/smsVerificationMock.ts @@ -0,0 +1,4 @@ +export const smsVerificationMock = { + send: jest.fn(() => Promise.resolve(true)), + verify: jest.fn(() => Promise.resolve(true)), +}; From ae42484a1cdfc2d5e10c33520c4125fd8a85d808 Mon Sep 17 00:00:00 2001 From: danilo Date: Tue, 27 Oct 2020 17:48:51 -0600 Subject: [PATCH 17/17] Create RegisterStoreTest and install axios --- api/package.json | 1 + .../onboarding/resolver/registerStore.test.ts | 55 +++++++++++++++++++ api/src/feature/onboarding/resolver/index.ts | 2 + .../onboarding/resolver/registerStore.ts | 23 ++++---- api/yarn.lock | 12 ++++ 5 files changed, 81 insertions(+), 12 deletions(-) create mode 100644 api/src/__test__/feature/onboarding/resolver/registerStore.test.ts diff --git a/api/package.json b/api/package.json index ed517bd..382b477 100644 --- a/api/package.json +++ b/api/package.json @@ -10,6 +10,7 @@ "@corecodeio/libraries": "^1.0.5", "apollo-server-express": "^2.16.1", "awesome-phonenumber": "^2.37.1", + "axios": "^0.21.0", "convict": "^6.0.0", "express": "^4.17.1", "express-jwt": "^6.0.0", diff --git a/api/src/__test__/feature/onboarding/resolver/registerStore.test.ts b/api/src/__test__/feature/onboarding/resolver/registerStore.test.ts new file mode 100644 index 0000000..ef5ea3a --- /dev/null +++ b/api/src/__test__/feature/onboarding/resolver/registerStore.test.ts @@ -0,0 +1,55 @@ +import { MutationVerifyPhoneNumberCode } from "@corecodeio/libraries/api/onboarding"; +import { Dependencies } from "@corecodeio/libraries/di"; +import { createTestClient } from "apollo-server-testing"; +import axios from "axios"; +import * as faker from "faker"; +import { createApolloServer } from "../../../../server"; +import { TwilioSMSVerificationInjectionKey } from "../../../../util/twilio/InjectionKeys"; +import { ISMSVerification } from "../../../../util/twilio/interface/ISMSVerification"; +import { smsVerificationMock } from "../../../mock/smsVerificationMock"; + +const dependencies = new Dependencies(); +const apolloServer = createApolloServer(dependencies); + +dependencies.override( + TwilioSMSVerificationInjectionKey, + smsVerificationMock +); + +describe("registerStore", () => { + test("success", async () => { + const { mutate } = createTestClient(apolloServer); + + const res = await mutate({ + mutation: MutationVerifyPhoneNumberCode, + variables: { + input: { + phoneNumber: faker.phone.phoneNumber("+5023#######"), + code: "123", + }, + }, + }); + + const token = res.data.verifyPhoneNumberCode.token; + + const result = await axios("http://localhost:8001/graphql", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + data: JSON.stringify({ + query: ` + mutation RegisterStore($input: RegisterStoreInput!) { + registerStore(input: $input) + } + `, + variables: { + input: { + url: "https://www.amazon.com", + }, + }, + }), + }); + }); +}); diff --git a/api/src/feature/onboarding/resolver/index.ts b/api/src/feature/onboarding/resolver/index.ts index 401c1dc..7f5f938 100644 --- a/api/src/feature/onboarding/resolver/index.ts +++ b/api/src/feature/onboarding/resolver/index.ts @@ -1,3 +1,4 @@ +import { registerStore } from "./registerStore"; import { sendPhoneNumberVerificationCode } from "./sendPhoneNumberVerificationCode"; import { verifyPhoneNumberCode } from "./verifyPhoneNumberCode"; @@ -7,4 +8,5 @@ export const queries = { export const mutations = { verifyPhoneNumberCode, + registerStore, }; diff --git a/api/src/feature/onboarding/resolver/registerStore.ts b/api/src/feature/onboarding/resolver/registerStore.ts index 2f04312..6a5b0f7 100644 --- a/api/src/feature/onboarding/resolver/registerStore.ts +++ b/api/src/feature/onboarding/resolver/registerStore.ts @@ -1,14 +1,13 @@ -import { MutationResolvers } from '@corecodeio/libraries/api'; -import { IContext } from '../../../server/interface/IContext'; +import { MutationResolvers } from "@corecodeio/libraries/api"; +import { IContext } from "../../../server/interface/IContext"; -export const registerStore: MutationResolvers['registerStore'] = async ( - parent, - { input }, - { dependencies, req } -) => { - try { - req.headers.authorization; - } catch (error) { - return error; - } +export const registerStore: MutationResolvers< + IContext +>["registerStore"] = async (parent, { input }, { dependencies, req }) => { + try { + // req.headers.authorization; + return true; + } catch (error) { + return error; + } }; diff --git a/api/yarn.lock b/api/yarn.lock index d936ef7..bdd412f 100644 --- a/api/yarn.lock +++ b/api/yarn.lock @@ -2029,6 +2029,13 @@ axios@^0.19.2: dependencies: follow-redirects "1.5.10" +axios@^0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca" + integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw== + dependencies: + follow-redirects "^1.10.0" + babel-jest@^26.1.0: version "26.1.0" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.1.0.tgz#b20751185fc7569a0f135730584044d1cb934328" @@ -3387,6 +3394,11 @@ follow-redirects@1.5.10: dependencies: debug "=3.1.0" +follow-redirects@^1.10.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db" + integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"