set non expanded searc text into expanded

wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js

 /* eslint react/prop-types: 0 */
 
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import { grid, th } from '@pubsweet/ui-toolkit';
 import Icon from '../../helpers/Icon';
@@ -109,11 +109,17 @@ const PreviousNextContainer = styled.div`
   }
 `;
 
-const ExandedFindAndReplaceComponent = ({ close }) => {
+const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => {
+  const searchRef = useRef(null);
+  const replaceRef = useRef(null);
+  const [searchValue, setsearchValue] = useState(nonExpandedText);
   const closeFind = () => {
     close();
   };
 
+  const onChangeSearchInput = () => {};
+  const onChangeReplaceInput = () => {};
+
   const replace = () => {};
   const replaceAll = () => {};
 
@@ -126,9 +132,20 @@ const ExandedFindAndReplaceComponent = ({ close }) => {
         </CloseWrapper>
       </TitleContainer>
       <InputLabel>Find</InputLabel>
-      <FindReplaceInput type="text" placeholder="Something is this doc" />
+      <FindReplaceInput
+        type="text"
+        ref={searchRef}
+        placeholder="Something is this doc"
+        value={searchValue}
+        onChange={onChangeSearchInput}
+      />
       <InputLabel>Replace with</InputLabel>
-      <FindReplaceInput type="text" placeholder="Replace phrase" />
+      <FindReplaceInput
+        type="text"
+        ref={replaceRef}
+        placeholder="Replace text"
+        onChange={onChangeReplaceInput}
+      />
       <CheckBoxWrapper>
         <CheckBox name="case-sensitive" label="Case Sensitive" />
       </CheckBoxWrapper>

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js

@@ -5,17 +5,26 @@ import ExandedFindAndReplaceComponent from './ExandedFindAndReplaceComponent';
 
 const FindAndReplaceComponent = ({ close }) => {
   const [isExpanded, setExpanded] = useState(false);
-
+  const [nonExpandedText, SetnonExpandedText] = useState('');
   const expand = () => {
     setExpanded(true);
   };
 
-  const getNonExpandedText = () => {};
+  const getNonExpandedText = searcString => {
+    SetnonExpandedText(searcString);
+  };
 
   return isExpanded ? (
-    <ExandedFindAndReplaceComponent close={close} previousText="" />
+    <ExandedFindAndReplaceComponent
+      close={close}
+      nonExpandedText={nonExpandedText}
+    />
   ) : (
-    <FindComponent close={close} expand={expand} />
+    <FindComponent
+      close={close}
+      expand={expand}
+      setPreviousSearcValue={getNonExpandedText}
+    />
   );
 };
 

wax-prosemirror-components/src/components/findAndReplace/FindComponent.js

@@ -71,7 +71,7 @@ const CloseWrapper = styled.div`
 
 const ExpandedWrapper = styled.div``;
 
-const FindComponent = ({ close, expand }) => {
+const FindComponent = ({ close, expand, setPreviousSearcValue }) => {
   const {
     app,
     view: { main },
@@ -157,6 +157,7 @@ const FindComponent = ({ close, expand }) => {
 
   const showExpanded = () => {
     expand();
+    setPreviousSearcValue(searchValue);
   };
 
   return (