Merge pull request #192 from 1Hive/handle-formik-errors

done
1Hive · Mar 31, 2022 · 8f5cc4a · 8f5cc4a · vercel · Mar 31, 2022
2 parents b7b1746 + fc0d8c5
commit 8f5cc4a
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 115 deletions.
diff --git a/packages/react-app/src/components/field-input/address-field-input.tsx b/packages/react-app/src/components/field-input/address-field-input.tsx
@@ -42,6 +42,8 @@ type Props = {
   tooltip?: string;
   tooltipDetail?: React.ReactNode;
   wide?: boolean;
+  onBlur?: Function;
+  error?: string | false;
 };
 export function AddressFieldInput({
   id,
@@ -54,12 +56,14 @@ export function AddressFieldInput({
   tooltipDetail,
   tooltip,
   wide = false,
+  onBlur = noop,
+  error,
 }: Props) {
   const loadableContent = (
     <WrapperStyled wide={wide}>
       {isEdit ? (
         <>
-          <TextInputStyled id={id} value={value} onChange={onChange} />
+          <TextInputStyled id={id} value={value} onChange={onChange} onBlur={onBlur} />
           <EthIdenticonStyled address={value} scale={1.6} />
         </>
       ) : (
@@ -74,6 +78,7 @@ export function AddressFieldInput({
       tooltip={tooltip}
       tooltipDetail={tooltipDetail}
       compact={compact}
+      error={error}
       isLoading={isLoading}
     >
       {loadableContent}

diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx
@@ -7,7 +7,7 @@ import {
   Button,
 } from '@1hive/1hive-ui';
 import { parseUnits } from 'ethers/lib/utils';
-import { connect } from 'formik';
+import { connect, FormikContextType } from 'formik';
 import { noop } from 'lodash-es';
 import React, { ReactNode, useEffect, useState, useRef, Fragment } from 'react';
 import { NETWORK_TOKENS } from 'src/constants';
@@ -86,7 +86,7 @@ type Props = {
   placeHolder?: string;
   value?: TokenAmountModel;
   onChange?: Function;
-  formik?: any;
+  formik?: FormikContextType<any>;
   compact?: boolean;
   tooltip?: string;
   tooltipDetail?: ReactNode;
@@ -95,6 +95,7 @@ type Props = {
   wide?: boolean;
   tokenEditable?: boolean;
   reversed?: boolean;
+  error?: string | false;
 };
 
 function AmountFieldInput({
@@ -116,6 +117,7 @@ function AmountFieldInput({
   wide = false,
   tokenEditable = false,
   reversed = false,
+  error,
 }: Props) {
   const { type } = getNetwork();
   const [decimalsCount, setDecimalsCount] = useState(maxDecimals);
@@ -124,27 +126,37 @@ function AmountFieldInput({
   const [amount, setAmount] = useState<number | undefined>(value?.parsedAmount);
   const [token, setToken] = useState<TokenModel | undefined>(value?.token);
   const [availableTokens, setAvailableTokens] = useState<TokenModel[]>([]);
+  const [_hasFocused, _setHasFocused] = useState<boolean>();
   const { walletAddress } = useWallet();
   const tokenInputId = `token-${id}`;
   const amountInputId = `amount-${id}`;
 
-  const autoCompleteRef: React.Ref<any> = useRef(null);
+  // Needed since the access of state in event handlers is not working
+  const hasFocusedRef = React.useRef(_hasFocused);
+  const setHasFocused = (data: boolean) => {
+    hasFocusedRef.current = data;
+    _setHasFocused(data);
+  };
 
+  const autoCompleteRef: React.Ref<any> = useRef(null);
+  const handleFocusIn = (e: FocusEvent) => {
+    if (
+      document.activeElement === autoCompleteRef.current &&
+      walletAddress &&
+      isEdit &&
+      tokenEditable
+    ) {
+      setHasFocused(true);
+      fetchAvailableTokens();
+    } else if (document.activeElement !== autoCompleteRef.current && hasFocusedRef.current) {
+      formik?.setFieldTouched(id, true);
+      formik?.handleBlur(e);
+      setHasFocused(false);
+    }
+  };
   useEffect(() => {
-    if (!token)
-      document.addEventListener(
-        'focusin',
-        () => {
-          if (
-            document.activeElement === autoCompleteRef.current &&
-            walletAddress &&
-            isEdit &&
-            tokenEditable
-          )
-            fetchAvailableTokens();
-        },
-        true,
-      );
+    if (!token) document.addEventListener('focusin', handleFocusIn);
+    return () => document.removeEventListener('focusin', handleFocusIn);
   }, [walletAddress, isEdit, tokenEditable, token]);
 
   useEffect(() => {
@@ -230,6 +242,10 @@ function AmountFieldInput({
               title={!token ? 'Set token first' : undefined}
               onChange={onAmountChange}
               placeHolder={placeHolder}
+              onBlur={(e: React.FocusEvent) => {
+                formik?.setFieldTouched(id, true);
+                formik?.handleBlur(e);
+              }}
               type="number"
               value={amount}
               wide={wide}
@@ -259,6 +275,7 @@ function AmountFieldInput({
             onChange={setSearchTerm}
             onSelect={onTokenChange}
             ref={autoCompleteRef}
+            onBlur={(e: FocusEvent) => formik?.handleBlur(e)}
             placeholder="Search name or paste address"
             wide={wide}
             renderSelected={(i: number) => (
@@ -294,6 +311,7 @@ function AmountFieldInput({
       wide={wide}
       compact
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
+      error={error}
     >
       {reversed ? [tokenField, amountField] : [amountField, tokenField]}
     </FieldInput>

diff --git a/packages/react-app/src/components/field-input/date-field-input.tsx b/packages/react-app/src/components/field-input/date-field-input.tsx
@@ -41,6 +41,8 @@ type Props = {
   compact?: boolean;
   wide?: boolean;
   formik?: any;
+  onBlur?: Function;
+  error?: string | false;
 };
 
 function DateFieldInput({
@@ -56,6 +58,8 @@ function DateFieldInput({
   compact = false,
   wide = false,
   formik,
+  onBlur = noop,
+  error,
 }: Props) {
   const theme = useTheme();
 
@@ -77,6 +81,7 @@ function DateFieldInput({
       type="date"
       value={value ? dateFormat(value, 'ISO') : ''}
       onChange={handleChange}
+      onBlur={onBlur}
       style={css}
       background={theme.surface}
       wide={wide}
@@ -97,6 +102,7 @@ function DateFieldInput({
       tooltipDetail={tooltipDetail}
       compact={compact}
       isLoading={isLoading}
+      error={error}
     >
       {loadableContent}
     </FieldInput>

diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx
@@ -9,7 +9,12 @@ const FieldStyled = styled.div`
   ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(1)}` : '')};
   ${({ isLoading, wide }: any) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')};
 `;
-
+const ErrorStyled = styled.span`
+  color: ${(props: any) => props.theme.negative};
+  font-size: small;
+  margin-left: ${GUpx(2)};
+  font-style: italic;
+`;
 const LabelStyled = styled.label`
   color: ${(props: any) => props.color};
   font-size: 12px;
@@ -54,6 +59,7 @@ type Props = {
   children: React.ReactNode;
   id?: string;
   isLoading?: boolean;
+  error?: string | false;
   wide?: boolean;
   direction?: 'row' | 'column';
   align?: 'center' | 'baseline' | 'flex-start' | 'flex-end' | 'unset';
@@ -70,6 +76,7 @@ export function FieldInput({
   wide = false,
   direction = 'row',
   align = 'center',
+  error,
 }: Props) {
   const theme = useTheme();
   const labelComponent = label && (
@@ -89,9 +96,12 @@ export function FieldInput({
             <Skeleton />
           </SkeletonWrapperStyled>
         ) : (
-          <ContentWrapperStyled compact={compact} wide={wide} direction={direction} align={align}>
-            {children}
-          </ContentWrapperStyled>
+          <>
+            <ContentWrapperStyled compact={compact} wide={wide} direction={direction} align={align}>
+              {children}
+            </ContentWrapperStyled>
+            {error && <ErrorStyled theme={theme}>{error}</ErrorStyled>}
+          </>
         )}
       </>
     </FieldStyled>

diff --git a/packages/react-app/src/components/field-input/number-field-input.tsx b/packages/react-app/src/components/field-input/number-field-input.tsx
@@ -19,6 +19,8 @@ type Props = {
   tooltipDetail?: ReactNode;
   suffix?: string;
   compact?: boolean;
+  onBlur?: Function;
+  error?: string | false;
 };
 
 export default function NumberFieldInput({
@@ -37,6 +39,8 @@ export default function NumberFieldInput({
   tooltipDetail,
   suffix = '',
   compact = false,
+  onBlur = noop,
+  error,
 }: Props) {
   return (
     <FieldInput
@@ -46,6 +50,7 @@ export default function NumberFieldInput({
       tooltipDetail={tooltipDetail}
       compact={compact}
       isLoading={isLoading}
+      error={error}
     >
       {isEdit ? (
         <TextInput
@@ -54,6 +59,7 @@ export default function NumberFieldInput({
           wide={wide}
           onChange={onChange}
           placeHolder={placeHolder}
+          onBlur={onBlur}
           max={max}
           min={min}
           isRequired={isRequired}

diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -46,6 +46,9 @@ type Props = {
   ellipsis?: ReactNode;
   tooltip?: string;
   tooltipDetail?: React.ReactNode;
+
+  onBlur?: Function;
+  error?: string | false;
 };
 export default function TextFieldInput({
   id,
@@ -66,6 +69,9 @@ export default function TextFieldInput({
   ellipsis,
   tooltipDetail,
   tooltip,
+
+  onBlur = noop,
+  error,
 }: Props) {
   const [isEditState, setIsEdit] = useState(isEdit);
 
@@ -135,6 +141,7 @@ export default function TextFieldInput({
         value={value ?? ''}
         wide={wide}
         onChange={onChange}
+        onBlur={onBlur}
         placeHolder={placeHolder}
         multiline={multiline}
         style={css}
@@ -158,15 +165,18 @@ export default function TextFieldInput({
     </BlockStyled>
   );
   return (
-    <FieldInput
-      label={label}
-      tooltip={tooltip}
-      tooltipDetail={tooltipDetail}
-      id={id}
-      compact={compact}
-      isLoading={isLoading}
-    >
-      {loadableContent}
-    </FieldInput>
+    <>
+      <FieldInput
+        label={label}
+        tooltip={tooltip}
+        tooltipDetail={tooltipDetail}
+        id={id}
+        error={error}
+        compact={compact}
+        isLoading={isLoading}
+      >
+        {loadableContent}
+      </FieldInput>
+    </>
   );
 }