Get countries options from BE
@@ -4,6 +4,8 @@ import * as React from "react";
import { FormattedMessage } from "react-intl";
import { useFormState } from "react-use-form-state";
+import { useStaticQuery, graphql } from "gatsby";
+
import { MyProfileQuery, UpdateMutation, UpdateMutationVariables } from "../../generated/graphql-backend";
import MY_PROFILE_QUERY from "./profile-edit.graphql";
import UPDATE_MUTATION from "./update.graphql";
@@ -21,6 +23,7 @@ import { Column, Row } from "grigliata";
import { useEffect } from "react";
import { useCallback } from "react";
import { Form } from "../../components/form";
+import { CountriesQuery } from "../../generated/graphql";
const ROW_PADDING = {
mobile: 0.5,
@@ -36,6 +39,13 @@ const BUTTON_PADDING = {
desktop: 2,
};
+const COLUMN_WIDTH = {
+ mobile: 12,
+ tabletPortrait: 12,
+ tabletLandscape: 12,
+ desktop: 12,
+};
+
const InputWrapper: React.FC = props => (
<Row paddingBottom={ROW_PADDING}>
<Column
@@ -50,8 +60,19 @@ const InputWrapper: React.FC = props => (
</Column>
</Row>
);
+export const COUNTRIES_QUERY = graphql`
+ query countries {
+ backend{
+ countries {
+ code
+ name
+ }
+ }
+ }
+`;
export const EditProfileApp: React.SFC<RouteComponentProps> = () => {
+
// define form object
const [formState, { text, radio, select, checkbox, date }] = useFormState(
{},
@@ -59,6 +80,12 @@ export const EditProfileApp: React.SFC<RouteComponentProps> = () => {
withIds: true,
});
+ // region CONSTANTS
+ const { backend: { countries } } = useStaticQuery<CountriesQuery>(COUNTRIES_QUERY);
+ const COUNTRIES_OPTIONS = [{ "label": "", "value": "" },
+ ...countries.map(item => ({ "label": item.name, "value": item.id }))];
+ // endregion
+
// region GET_USER_DATA_FROM_BACKEND
const setProfile = (data: MyProfileQuery) => {
const { me } = data;
@@ -132,7 +159,11 @@ export const EditProfileApp: React.SFC<RouteComponentProps> = () => {
{loading && "Loading..."}
{!loading && (
+
<Form onSubmit={onFormSubmit} method="post">
+
+ <Row paddingBottom={ROW_PADDING} paddingTop={BUTTON_PADDING}>
+ <Column columnWidth={COLUMN_WIDTH}>
<LayoutSet>
<Card>
<h3>
@@ -220,16 +251,17 @@ export const EditProfileApp: React.SFC<RouteComponentProps> = () => {
</FormattedMessage>
)}
onChange={hangleUserChange}
- options={[
- { label: "Select", value: "" },
- { label: "Italy", value: "IT" },
- ]}
+ options={COUNTRIES_OPTIONS}
isRequired={true}
/>
+
</InputWrapper>
</Card>
</LayoutSet>
-
+ </Column>
+ </Row>
+ <Row paddingBottom={ROW_PADDING} paddingTop={BUTTON_PADDING}>
+ <Column columnWidth={COLUMN_WIDTH}>
<LayoutSet>
<Card>
<h3>
@@ -269,7 +301,8 @@ export const EditProfileApp: React.SFC<RouteComponentProps> = () => {
</Card>
</LayoutSet>
-
+ </Column>
+ </Row>
<Row paddingBottom={ROW_PADDING} paddingTop={BUTTON_PADDING}>
<Button
size="medium"
