WIP

Author: wwahammy

app/javascript/components/common/LocationSelector/LocationSelector.tsx

@@ -1,29 +1,50 @@
-
-
-import { Field, Formik } from "formik";
 // License: LGPL-3.0-or-later
-import * as React from "react";
+import React, {useCallback} from "react";
+import { Field, Formik } from "formik";
+
 import { Location } from "./types";
+import { LocalizedCountry, Subregion } from "../../../countries";
+import type {Schema as YupSchema} from 'yup';
+import useYup from '../../../hooks/'
+import { noop } from "lodash";
 
+type OnUpdateArgs = {location:Location, isValid:boolean}
+type ValidationSchemaArgs = {validCountries?:LocalizedCountry[], validStates?:Subregion[]}
 
 interface LocationSelectorProps {
 	enableReinitialize:boolean;
 	initialLocation:Location;
-	onUpdate:(location:Location) => void;
+	onUpdate:(args:OnUpdateArgs) => void;
+	validationSchema:(args:ValidationSchemaArgs) => YupSchema<{city:any, country:any, stateCode:any}, unknown>;
 }
 
 
-function LocationSelector(props:LocationSelectorProps) : JSX.Element {
 
+function LocationSelector(props:LocationSelectorProps) : JSX.Element {
+	const inputValidationSchema = props.validationSchema;
+	const yup = useYup();
+
+	const setLatest
+
+	const validationSchema = useCallback(() => {
+		if (inputValidationSchema === noop) {
+			return () => yup.
+		}
+		else {
+			return inputValidationSchema;
+		}
+	}, [inputValidationSchema])
 
 
-	return <Formik onSubmit()>
+	return <Formik validationSchema>
+		
 		</Formik>;
 }
 
 LocationSelector.defaultProps = {
 	enableReinitalize: false,
-	initialLocation: {country: "US", stateCode: "", city: ""}
+	initialLocation: {country: "US", stateCode: "", city: ""},
+	validationSchema: noop,
 }
 
 export default LocationSelector;

app/javascript/components/common/LocationSelector/StateCode.tsx

@@ -1,17 +1,18 @@
 
 // License: LGPL-3.0-or-later
-import * as React from "react"
+import * as React, {Suspense} from "react";
 
 
-interface IStateCodeProps {
+interface StateCodeProps {
 }
 
 
-function StateCode(props:IStateCodeProps) : JSX.Element {
-    return (
-      <React.Fragment>
-      </React.Fragment>
-    );
+function StateCode(props:StateCodeProps) : JSX.Element {
+
+  return <Suspense fallback={/* you  */}>
+    
+  </Suspense>;
+  
 }
 
 export default StateCode

app/javascript/countries.ts

@@ -1,4 +1,3 @@
-
 // License: LGPL-3.0-or-later
 import flatten from 'lodash/flatten';