Specification for Peer-to-Peer Creation Page

app/javascript/common/intl-polyfills/custom/displayNames.ts

@@ -0,0 +1,23 @@
+// License: LGPL-3.0-or-later
+import {shouldPolyfill} from '@formatjs/intl-displaynames/should-polyfill';
+
+import getCanonicalLocales from './getCanonicalLocales';
+import locale from './locale';
+import type {Polyfilled} from './types';
+
+type PolyfilledDisplayNames = Polyfilled<typeof Intl.DisplayNames>
+
+export default async function displaynames(locales:string[]) :Promise<void> {
+	await locale();
+	await getCanonicalLocales();
+	if (shouldPolyfill()) {
+		// Load the polyfill 1st BEFORE loading data
+		await import('@formatjs/intl-displaynames/polyfill');
+	}
+
+	if ((Intl.DisplayNames as PolyfilledDisplayNames).polyfilled) {
+		await Promise.all(
+			locales.map(l => import("@formatjs/intl-displaynames/locale-data/"+ l))
+		);
+	}
+}

app/javascript/common/intl-polyfills/custom/locale.ts

@@ -0,0 +1,8 @@
+import {shouldPolyfill} from '@formatjs/intl-locale/should-polyfill';
+
+export default async function locale(): Promise<void> {
+	// This platform already supports Intl.Locale
+	if (shouldPolyfill()) {
+		await import('@formatjs/intl-locale/polyfill');
+	}
+}

app/javascript/common/intl-polyfills/displayNames.ts

@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+import displayNames from './custom/displayNames';
+import allLocales from './allLocales';
+const promise = displayNames(allLocales);
+export default promise;

app/javascript/common/intl-polyfills/index.ts

@@ -3,6 +3,8 @@ const promises = Promise.all([
 	import('./getCanonicalLocales'),
 	import('./pluralRules'),
 	import('./numberFormat'),
+	import('./locale'),
+	import('./displayNames'),
 ]) as unknown as Promise<void>;
 
 export default promises;

app/javascript/common/intl-polyfills/locale.ts

@@ -0,0 +1,5 @@
+// License: LGPL-3.0-or-later
+import locale from './custom/locale';
+
+const promise = locale;
+export default promise;

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

@@ -0,0 +1,19 @@
+// License: LGPL-3.0-or-later
+import * as React from "react";
+import { useIntl } from "../../intl";
+import { getLocalizedCountries } from "../../../countries";
+
+interface CountryCodeProps {
+}
+
+
+function CountryCode(props:CountryCodeProps) : JSX.Element {
+  const intl = useIntl();
+  const countries = getLocalizedCountries(intl.locale);
+
+    return (
+
+    );
+}
+
+export default CountryCode;

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

@@ -0,0 +1,50 @@
+// License: LGPL-3.0-or-later
+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:(args:OnUpdateArgs) => void;
+	validationSchema:(args:ValidationSchemaArgs) => YupSchema<{city:any, country:any, stateCode:any}, unknown>;
+}
+
+
+
+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 validationSchema>
+
+		</Formik>;
+}
+
+LocationSelector.defaultProps = {
+	enableReinitalize: false,
+	initialLocation: {country: "US", stateCode: "", city: ""},
+	validationSchema: noop,
+}
+
+export default LocationSelector;

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

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

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

@@ -0,0 +1,17 @@
+
+// License: LGPL-3.0-or-later
+import * as React from "react";
+
+
+interface ILocationSelectorProps {
+}
+
+
+function LocationSelector(props:ILocationSelectorProps) : JSX.Element {
+	return (
+		<React.Fragment>
+		</React.Fragment>
+	);
+}
+
+export default LocationSelector;

app/javascript/components/common/LocationSelector/types.ts

@@ -0,0 +1,6 @@
+
+export interface Location {
+	country?:string;
+	stateCode?:string;
+	city?:string
+}