@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react'
2
2
import withStyles from 'react-jss'
3
3
import PropTypes from 'prop-types'
4
4
import { connect } from 'react-redux'
5
+ import ReactLoader from '../src/components/library/ReactLoader' //import ReactLoader from '../../../library/ReactLoader'
6
+ import { MdSearch } from 'react-icons/md'
7
+
5
8
import SideBar from '../src/components/library/SideBar/SideBar'
6
9
import {
7
10
getBalance ,
@@ -41,8 +44,26 @@ const Record = ({
41
44
getBalance,
42
45
autoPay,
43
46
purchaseRecord,
44
- proofOfPurchase
47
+ proofOfPurchase,
48
+ searchInput,
49
+ handleSearchInput,
50
+ recordsFetching,
51
+ templatesFetching,
52
+ theme
45
53
} ) => {
54
+
55
+ const fetching = recordsFetching || templatesFetching
56
+
57
+ function handleOnEnter ( e ) {
58
+ if ( e . keyCode === 13 && ! fetching ) {
59
+ handleSubmit ( )
60
+ }
61
+ }
62
+
63
+ function handleSubmit ( ) {
64
+ handleSearchSubmit ( )
65
+ }
66
+
46
67
useEffect ( ( ) => {
47
68
setActivePage ( null )
48
69
} , [ ] )
@@ -177,6 +198,29 @@ useEffect(() => {
177
198
return (
178
199
< div className = { classes . root } >
179
200
< SideBar reroute />
201
+ < div className = { classes . searchContainer } >
202
+ < div className = { classes . inputContainer } >
203
+ < input
204
+ className = { classes . textInput }
205
+ value = { searchInput }
206
+ onChange = { handleSearchInput }
207
+ type = 'text'
208
+ placeholder = { 'Search' }
209
+ onKeyUp = { handleOnEnter }
210
+ />
211
+ </ div >
212
+ < button
213
+ onClick = { handleSubmit }
214
+ className = { classes . submitInput }
215
+ disabled = { fetching }
216
+ >
217
+ { fetching ? < ReactLoader
218
+ size = { 14 }
219
+ color = { theme . palette . primary . main }
220
+ /> : < MdSearch /> }
221
+
222
+ </ button >
223
+ </ div >
180
224
< RecordView
181
225
recordPayload = { recordPayload }
182
226
purchasedData = { purchasedData }
@@ -252,4 +296,4 @@ const mapDispatchToProps = {
252
296
export default connect (
253
297
mapStateToProps ,
254
298
mapDispatchToProps
255
- ) ( withStyles ( styles ) ( Record ) )
299
+ ) ( withStyles ( styles , { injectTheme : true } ) ( Record ) )
0 commit comments