Merge pull request #152 from 1Hive/keep-changes-on-close

Keep changes on close

Author: Corantin

packages/react-app/src/components/field-input/address-field-input.tsx

@@ -9,7 +9,7 @@ import { FieldInput } from './field-input';
 
 const TextInputStyled = styled(TextInput)`
   height: 40px;
-  width: 380px;
+  width: 370px;
   border-radius: 3px 0 0 3px;
 `;
 

packages/react-app/src/components/field-input/amount-field-input.tsx

@@ -1,4 +1,10 @@
-import { TextInput, TokenBadge, _AutoComplete as AutoComplete, Tag } from '@1hive/1hive-ui';
+import {
+  TextInput,
+  TokenBadge,
+  _AutoComplete as AutoComplete,
+  Tag,
+  IconEdit,
+} from '@1hive/1hive-ui';
 import { parseUnits } from 'ethers/lib/utils';
 import { connect } from 'formik';
 import { noop } from 'lodash-es';
@@ -53,6 +59,11 @@ const AmountTokenWrapperStyled = styled.div`
   ${(props: any) => (props.wide ? 'width:100%;' : '')}
 `;
 
+const IconEditStyled = styled(IconEdit)`
+  cursor: pointer;
+  padding-left: ${GUpx()};
+`;
+
 // #endregion
 
 type Props = {
@@ -70,6 +81,7 @@ type Props = {
   maxDecimals?: number;
   disabled?: boolean;
   wide?: boolean;
+  tokenEditable?: boolean;
 };
 
 function AmountFieldInput({
@@ -87,35 +99,29 @@ function AmountFieldInput({
   maxDecimals,
   disabled = false,
   wide = false,
+  tokenEditable = false,
 }: Props) {
-  const { defaultToken, type } = getNetwork();
+  const { type } = getNetwork();
   const [decimalsCount, setDecimalsCount] = useState(maxDecimals);
   const [tokens, setTokens] = useState<TokenModel[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>();
   const [amount, setAmount] = useState<number | undefined>(value?.parsedAmount ?? 0);
-  const [token, setToken] = useState<TokenModel>(value?.token ?? defaultToken);
+  const [token, setToken] = useState<TokenModel | undefined>(value?.token);
   const [availableTokens, setAvailableTokens] = useState<TokenModel[]>([]);
   const { walletAddress } = useWallet();
 
   const autoCompleteRef: React.Ref<any> = useRef(null);
 
   useEffect(() => {
-    const fetchAvailableTokens = async () => {
-      const networkDefaultTokens = (NETWORK_TOKENS[type] as TokenModel[]) ?? [];
-      const questsUsedTokens = await fetchRewardTokens();
-      setAvailableTokens(
-        arrayDistinctBy([...networkDefaultTokens, ...questsUsedTokens], (x) => x.token),
+    if (!token)
+      document.addEventListener(
+        'focusin',
+        () => {
+          if (walletAddress && isEdit && tokenEditable) fetchAvailableTokens();
+        },
+        true,
       );
-    };
-
-    document.addEventListener(
-      'focusin',
-      () => {
-        if (walletAddress && isEdit && !value?.token) fetchAvailableTokens();
-      },
-      true,
-    );
-  }, [walletAddress, document.activeElement]);
+  }, [walletAddress, isEdit, tokenEditable, token]);
 
   useEffect(() => {
     if (availableTokens.length) {
@@ -146,31 +152,46 @@ function AmountFieldInput({
 
   useEffect(() => {
     setAmount(value?.parsedAmount ?? 0);
-    setToken(value?.token ?? defaultToken);
+    setToken(value?.token);
   }, [value]);
 
+  const fetchAvailableTokens = async () => {
+    const networkDefaultTokens = (NETWORK_TOKENS[type] as TokenModel[]) ?? [];
+    const questsUsedTokens = await fetchRewardTokens();
+    setAvailableTokens(
+      arrayDistinctBy([...networkDefaultTokens, ...questsUsedTokens], (x) => x.token),
+    );
+  };
+
   const onAmountChange = (e: any) => {
     const newAmount = e.target.value;
     setAmount(newAmount);
     if (token && e.target.value !== '') {
-      const nextValue = {
+      applyChanges({
         token: {
           ...token,
           amount: parseUnits(newAmount.toString(), token.decimals).toString(),
         },
         parsedAmount: +newAmount,
-      };
-      if (formik) formik.setFieldValue(id, nextValue);
-      else onChange(nextValue);
+      });
     }
   };
 
   const onTokenChange = (i: number) => {
     const newToken = tokens[i];
     autoCompleteRef.current.value = newToken.symbol;
     setSearchTerm(undefined);
-    setToken(newToken);
-    const nextValue = { token: newToken, parsedAmount: amount };
+    applyChanges({ token: newToken, parsedAmount: amount });
+  };
+
+  const onTokenEditClick = () => {
+    fetchAvailableTokens();
+    applyChanges({ token: undefined, parsedAmount: amount });
+  };
+
+  const applyChanges = (nextValue: Partial<TokenAmountModel>) => {
+    setToken(nextValue.token);
+    setAmount(nextValue.parsedAmount);
     if (formik) formik.setFieldValue(id, nextValue);
     else onChange(nextValue);
   };
@@ -205,12 +226,8 @@ function AmountFieldInput({
               )}
             </Outset>
           )}
-          {value?.token.token ? (
-            <TokenBadgeStyled
-              symbol={value.token.symbol}
-              address={value.token.token}
-              networkType="private"
-            />
+          {token?.token ? (
+            <TokenBadgeStyled symbol={token?.symbol} address={token?.token} networkType="private" />
           ) : (
             <AutoCompleteWrapperStyled>
               <AutoComplete
@@ -232,6 +249,9 @@ function AmountFieldInput({
               />
             </AutoCompleteWrapperStyled>
           )}
+          {tokenEditable && isEdit && token && (
+            <IconEditStyled onClick={onTokenEditClick} size="medium" />
+          )}
         </AmountTokenWrapperStyled>
       )}
     </FieldInput>

packages/react-app/src/components/field-input/date-field-input.tsx

@@ -15,6 +15,7 @@ const InputStyled = styled.input`
   background-color: ${({ background }: any) => background};
   height: 40px;
   padding: ${GUpx()};
+  font-size: 14px;
   &:focus-visible {
     border: 1px solid ${(props: any) => props.focusBorderColor};
     outline: none;

packages/react-app/src/components/modals/quest-modal.tsx

@@ -1,11 +1,12 @@
 import { Button, IconPlus } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
 import { useEffect, useState } from 'react';
-import { ENUM_QUEST_VIEW_MODE } from 'src/constants';
+import { ENUM_QUEST_STATE, ENUM_QUEST_VIEW_MODE } from 'src/constants';
 import { QuestModel } from 'src/models/quest.model';
 import { GUpx } from 'src/utils/css.util';
 import styled from 'styled-components';
 import * as QuestService from 'src/services/quest.service';
+import { IN_A_WEEK_IN_MS } from 'src/utils/date.utils';
 import Quest from '../quest';
 import ModalBase, { ModalCallback } from './modal-base';
 import { useQuestsContext } from '../../contexts/quests.context';
@@ -32,7 +33,12 @@ export default function QuestModal({
   const [opened, setOpened] = useState(false);
   const [buttonLabel, setButtonLabel] = useState('');
   const { setNewQuest } = useQuestsContext();
-
+  const [questData, setQuestData] = useState(
+    data ?? {
+      expireTimeMs: IN_A_WEEK_IN_MS + 24 * 36000,
+      state: ENUM_QUEST_STATE.Draft,
+    },
+  );
   const onOpenButtonClick = () => {
     setOpened(true);
   };
@@ -99,7 +105,11 @@ export default function QuestModal({
       isOpen={opened}
       onClose={() => closeModal(false)}
     >
-      <Quest questMode={questMode} data={data} onSave={(x) => fetchNewQuest(x)} />
+      <Quest
+        questMode={questMode}
+        dataState={{ questData, setQuestData }}
+        onSave={(x) => fetchNewQuest(x)}
+      />
     </ModalBase>
   );
 }