fix: fixed note being persistence and input box overlay issue (#504)

* fixed persistance cache issue

* fixed input box layover

* removed console statements

* resolved test

components/Memo/index.tsx

@@ -1,10 +1,15 @@
 import { useRouter } from "next/router"
 import React from "react"
 import { Modal } from "react-bootstrap"
-
+import { ACTIONS, ACTION_TYPE } from "../../pages/_reducer"
 import styles from "./memo.module.css"
 
-const Memo = ({ createdInvoice }: React.ComponentState) => {
+interface Props {
+  state: React.ComponentState
+  dispatch: React.Dispatch<ACTION_TYPE>
+}
+
+const Memo = ({ state, dispatch }: Props) => {
   const router = useRouter()
   const { username, amount, sats, unit, memo, display } = router.query
   const [openModal, setOpenModal] = React.useState<boolean>(false)
@@ -45,18 +50,18 @@ const Memo = ({ createdInvoice }: React.ComponentState) => {
   return (
     <div className={styles.container}>
       <div>
-        {memo ? (
+        {state.memo ? (
           <div className={styles.note_wrapper}>
             <p>Note:</p>
-            <input readOnly value={memo} />
+            <input readOnly value={state.memo} />
           </div>
         ) : null}
         <button
           onClick={handleShow}
-          className={`${createdInvoice ? styles.disable_btn : styles.add_btn}`}
-          disabled={createdInvoice}
+          className={`${state.createdInvoice ? styles.disable_btn : styles.add_btn}`}
+          disabled={state.createdInvoice}
         >
-          {!createdInvoice && !memo ? "Add note" : null}
+          {!state.createdInvoice && !state.memo ? "Add note" : null}
           <svg
             width="19"
             height="19"
@@ -109,11 +114,12 @@ const Memo = ({ createdInvoice }: React.ComponentState) => {
           <Modal.Body>
             <input
               className={styles.modal_input}
-              value={note}
+              value={memo ? state.memo : note}
               name="note"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setNote(e.target.value)
-              }
+                dispatch({ type: ACTIONS.ADD_MEMO, payload: e.target.value })
+              }}
               type="text"
             />
           </Modal.Body>

components/Memo/memo.module.css

@@ -22,6 +22,8 @@
 .note_wrapper > input {
   border: none;
   text-transform: capitalize;
+  position: relative;
+  z-index: -1;
 }
 
 .note_wrapper > p {

components/ParsePOSPayment/index.tsx

@@ -339,7 +339,7 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
         )}
       </div>
 
-      <Memo createdInvoice={state.createdInvoice} />
+      <Memo state={state} dispatch={dispatch} />
 
       {state.createdInvoice ? (
         <ReceiveInvoice

pages/_reducer.tsx

@@ -12,6 +12,7 @@ export const ACTIONS = {
   SET_AMOUNT_FROM_PARAMS: "set-amount-from-search",
   PINNED_TO_HOMESCREEN_MODAL_VISIBLE: "pin-to-home-screen-modal-visible",
   BACK: "back-by-one-history",
+  ADD_MEMO: "add-memo",
 }
 
 export type ACTION_TYPE = {
@@ -104,6 +105,7 @@ function reducer(state: React.ComponentState, { type, payload }: ACTION_TYPE) {
         ...state,
         createdInvoice: false,
         currentAmount: "0",
+        memo: "",
       }
 
     case ACTIONS.BACK:
@@ -118,6 +120,12 @@ function reducer(state: React.ComponentState, { type, payload }: ACTION_TYPE) {
         pinnedToHomeScreenModalVisible: payload,
       }
 
+    case ACTIONS.ADD_MEMO:
+      return {
+        ...state,
+        memo: payload,
+      }
+
     default:
       return state
   }