Update CVV and Expiry date

alifarooq96 · alifarooq96 · commit db5c4ea8d5f0 · 2023-02-16T01:18:39.000+05:00
diff --git a/src/components/Cvv.tsx b/src/components/Cvv.tsx
@@ -1,12 +1,18 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { StyleSheet, TextInput } from "react-native";
 
-import { FramesConsumer } from "../Frames";
+import { FramesConsumer, FramesContext } from "../Frames";
 import { DEFAULT_CVV_PLACEHOLDER } from "../utils/constants";
 import { CVV_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
 const Cvv: React.SFC<FramesFieldProps> = (props) => {
+  const { dispatch } = useContext(FramesContext);
+
+  useEffect(() => {
+    dispatch({ type: CVV_CHANGE, payload: props.value });
+  }, [props.value]);
+
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
diff --git a/src/components/ExpiryDate.tsx b/src/components/ExpiryDate.tsx
@@ -1,12 +1,18 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { StyleSheet, TextInput } from "react-native";
 
-import { FramesConsumer } from "../Frames";
+import { FramesConsumer, FramesContext } from "../Frames";
 import { DEFAULT_CARD_EXPIRY_DATE_PLACEHOLDER } from "../utils/constants";
 import { DATE_CHANGE } from "../utils/actions";
 import { FramesFieldProps } from "../types/types";
 
 const ExpiryDate: React.SFC<FramesFieldProps> = (props) => {
+  const { dispatch } = useContext(FramesContext);
+
+  useEffect(() => {
+    dispatch({ type: DATE_CHANGE, payload: props.value });
+  }, [props.value]);
+
   return (
     <FramesConsumer>
       {({ state, dispatch }) => {
