Skip to content

Commit 3269eff

Browse files
mkrishnan-codesmkrishnan-codes
committed
search logic to worker
1 parent 3fab5ed commit 3269eff

File tree

4 files changed

+94
-62
lines changed

4 files changed

+94
-62
lines changed

‎public/workers/search-worker.js

+28-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,30 @@
1+
/*
2+
REQUEST
3+
{
4+
array,
5+
filtercondition
6+
}
7+
RESPONSE
8+
{
9+
error,
10+
success
11+
}
12+
13+
*/
14+
115
onmessage = (e) => {
2-
console.log('Message received from main script');
3-
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
4-
console.log('Posting message back to main script');
5-
postMessage(workerResult);
16+
try {
17+
const { array,
18+
filter } = e.data;
19+
const success = array.filter(item => item.title.toLowerCase().search(filter.toLowerCase() > -1))
20+
// var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
21+
console.log('Posting message back to main script');
22+
// postMessage(workerResult);
23+
postMessage({ error: false, success });
24+
25+
} catch (error) {
26+
postMessage({ error, success: false });
27+
}
28+
29+
630
}

‎src/components/SearchBox/SearchBox.jsx

+45-26
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import React from 'react';
1+
/* eslint-disable react-hooks/exhaustive-deps */
2+
import React, { useEffect } from 'react';
23
import { InputBase, makeStyles, fade, Popover, ClickAwayListener, ListItem, List, ListItemText } from '@material-ui/core';
34
import SearchIcon from '@material-ui/icons/Search';
5+
import { useDispatch, useSelector } from 'react-redux';
6+
import { search, searchRequest } from '../../reducers/items-reducer';
47
const useStyles = makeStyles((theme) => ({
58
search: {
69
position: 'relative',
@@ -43,7 +46,7 @@ const useStyles = makeStyles((theme) => ({
4346
typography: {
4447
padding: theme.spacing(2),
4548
},
46-
listRoot:{
49+
listRoot: {
4750
width: 220,
4851
backgroundColor: theme.palette.background.paper,
4952
}
@@ -56,28 +59,39 @@ const SearchBox = () => {
5659
let open = Boolean(anchorEl);
5760
const id = open ? 'srch-popover' : undefined;
5861
const handleClick = (event) => {
59-
setAnchorEl(event.currentTarget);
62+
if (!anchorEl) {
63+
setAnchorEl(event.currentTarget);
64+
}
65+
dispatch(search(event.target.value))
6066
};
6167

6268
const handleClose = () => {
6369
setAnchorEl(null);
6470
};
6571
const [selectedIndex, setSelectedIndex] = React.useState(1);
66-
72+
const dispatch = useDispatch();
73+
const searchTxt = useSelector(state => state.items.search)
74+
const suggest = useSelector(state => state.items.suggest)
6775
const handleListItemClick = (event, index) => {
6876
setSelectedIndex(index);
6977
handleClose();
7078
};
79+
useEffect(() => {
80+
if (searchTxt) {
81+
dispatch(searchRequest(searchTxt))
82+
}
83+
}, [searchTxt]);
7184
return (
7285
<ClickAwayListener onClickAway={handleClose}>
7386
<div className={classes.search}>
7487
<div className={classes.searchIcon}>
7588
<SearchIcon />
7689
</div>
7790
<InputBase
78-
onKeyPress={handleClick}
7991
placeholder="Search…"
80-
92+
onChange={handleClick}
93+
value={searchTxt}
94+
autoFocus={true}
8195
classes={{
8296
root: classes.inputRoot,
8397
input: classes.inputInput,
@@ -86,6 +100,8 @@ const SearchBox = () => {
86100
/>
87101
<Popover
88102
id={id}
103+
disableAutoFocus
104+
disableEnforceFocus
89105
open={open}
90106
anchorEl={anchorEl}
91107
onClose={handleClose}
@@ -100,27 +116,30 @@ const SearchBox = () => {
100116
>
101117
<div className={classes.listRoot}>
102118

103-
{/* <Typography className={classes.typography}>The content of the Popover.</Typography> */}
104-
<List component="nav" aria-label="main mailbox folders">
105-
<ListItem
106-
button
107-
selected={selectedIndex === 0}
108-
onClick={(event) => handleListItemClick(event, 0)}
109-
>
110-
{/* <ListItemIcon>
111-
<InboxIcon />
112-
</ListItemIcon>*/}
113-
<ListItemText primary="Inbox" />
114-
</ListItem>
115-
<ListItem
116-
button
117-
selected={selectedIndex === 1}
118-
onClick={(event) => handleListItemClick(event, 1)}
119-
>
120-
<ListItemText primary="dfgdfg" />
119+
{/* <Typography className={classes.typography}>The content of the Popover.</Typography> */}
120+
<List component="nav" aria-label="main mailbox folders">
121+
{/* <ListItem
122+
onClick={(event) => handleListItemClick(event, 0)}
123+
>
124+
125+
<ListItemText primary="Inbox" />
126+
</ListItem>
127+
<ListItem
128+
onClick={(event) => handleListItemClick(event, 1)}
129+
>
130+
<ListItemText primary="dfgdfg" />
121131
122-
</ListItem>
123-
</List>
132+
</ListItem> */}
133+
{
134+
suggest.map(
135+
(sg) => (<ListItem
136+
onClick={(event) => handleListItemClick(event, 0)}
137+
>
138+
<ListItemText primary={sg.title} />
139+
</ListItem>)
140+
)
141+
}
142+
</List>
124143
</div>
125144
</Popover>
126145
</div>

‎src/reducers/items-reducer.js

+1-17
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,6 @@ const postsSlice = createSlice({
3131
},
3232
search(state, action) {
3333
state.search = action.payload;
34-
if (action.payload > 2) {
35-
state.pageSize = state.data.length
36-
// let iter = 0;
37-
// state.data.map((game, i) => {
38-
// if (iter < 10) {
39-
// const flag = game.s && game.s.search();
40-
// if (flag) {
41-
// iter++;
42-
// }
43-
// return game.s && game.s.search(crit) > -1
44-
// } else {
45-
// return false
46-
// }
47-
// })
48-
// state.data = state.wholedata.filter((game) => game.s.search(crit) > -1)
49-
}
5034
},
5135
sort(state, action) {
5236
sortData(state, action.payload)
@@ -62,7 +46,7 @@ const postsSlice = createSlice({
6246
},
6347
getSearchResultSuccess(state, action) {
6448
console.log(state, action);
65-
49+
state.suggest = action.payload;
6650
}
6751

6852
}

‎src/saga/search-worker-saga.js

+20-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// import { take, call, eventChannel, put } from "redux-saga"
2-
import { take, call, put, takeLatest} from 'redux-saga/effects';
3-
import { searchRequest } from '../reducers/items-reducer'
2+
import { take, call, put, takeLatest, select } from 'redux-saga/effects';
3+
import { searchRequest, getSearchResultSuccess } from '../reducers/items-reducer'
44
import { eventChannel } from 'redux-saga';
55
const wsUrl = './workers/search-worker.js'
66

@@ -19,22 +19,25 @@ function initWebsocket() {
1919
ws.onmessage = (e) => {
2020
let msg = null
2121
try {
22-
console.error(e.data)
23-
msg = JSON.parse(e.data)
24-
22+
// console.error(e.data)
23+
// msg = JSON.parse(e.data)
24+
msg = e.data;
2525
} catch (e) {
2626
console.error(`Error parsing : ${e.data}`)
2727
}
2828
if (msg) {
29-
const { payload: book } = msg
30-
const channel = msg.channel
31-
switch (channel) {
32-
case 'ADD_BOOK':
33-
return emitter({ type: 'ADD_BOOK', book })
34-
case 'REMOVE_BOOK':
35-
return emitter({ type: 'REMOVE_BOOK', book })
36-
default:
37-
// nothing to do
29+
const { payload: success } = msg
30+
// const channel = msg.channel
31+
// switch (channel) {
32+
// case 'ADD_BOOK':
33+
// return emitter({ type: 'ADD_BOOK', book })
34+
// case 'REMOVE_BOOK':
35+
// return emitter({ type: 'REMOVE_BOOK', book })
36+
// default:
37+
// // nothing to do
38+
// }
39+
if (success) {
40+
return emitter({ type: getSearchResultSuccess.type, success })
3841
}
3942
}
4043
}
@@ -47,7 +50,9 @@ function initWebsocket() {
4750
}
4851
function* doSendToWorker(action) {
4952
try {
50-
const res = yield call(post, action.payload)
53+
const array = yield select(state => state.items.data);
54+
const payload = { filter: action.payload, array }
55+
const res = yield call(post, payload)
5156
yield put({ type: 'POSTED', res })
5257
} catch (e) {
5358
console.log(e, 'Error');

0 commit comments

Comments
 (0)