From 778dfdc728a101fca9ece3a14e590d3b8e1d43e1 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Thu, 14 Dec 2017 12:32:07 +0100 Subject: Use id's instead of user objects --- src/client/react/components/container/Results.jsx | 20 +++---- src/client/react/components/container/Search.jsx | 10 +--- .../react/components/presentational/Result.jsx | 16 +++--- src/client/react/reducers/search.js | 26 ++++----- src/client/react/users.js | 66 ++++++++++++++++++++++ 5 files changed, 96 insertions(+), 42 deletions(-) create mode 100644 src/client/react/users.js diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx index 9be2639..911ea27 100644 --- a/src/client/react/components/container/Results.jsx +++ b/src/client/react/components/container/Results.jsx @@ -4,27 +4,22 @@ import { connect } from 'react-redux'; import classnames from 'classnames'; import Result from '../presentational/Result'; -const Results = (({ results, selectedResult }) => ( +const Results = (({ results, isExactMatch, selectedResult }) => (
0, + 'search__results--has-results': !isExactMatch && results.length > 0, })} > - {results.map(user => ( - + {!isExactMatch && results.map(userId => ( + ))}
)); Results.propTypes = { - results: PropTypes.arrayOf(PropTypes.shape({ - type: PropTypes.string, - value: PropTypes.string, - })).isRequired, - selectedResult: PropTypes.shape({ - type: PropTypes.string, - value: PropTypes.string, - }), + results: PropTypes.arrayOf(PropTypes.string).isRequired, + isExactMatch: PropTypes.bool.isRequired, + selectedResult: PropTypes.string, }; Results.defaultProps = { @@ -33,6 +28,7 @@ Results.defaultProps = { const mapStateToProps = state => ({ results: state.search.results, + isExactMatch: state.search.isExactMatch, selectedResult: state.search.selectedResult, }); diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx index 50917dd..babe0c4 100644 --- a/src/client/react/components/container/Search.jsx +++ b/src/client/react/components/container/Search.jsx @@ -7,14 +7,10 @@ import SearchIcon from 'react-icons/lib/md/search'; import { inputChange, changeSelectedResult } from '../../actions/search'; +import users from '../../users'; import Results from './Results'; import IconFromUserType from '../presentational/IconFromUserType'; -const userShape = { - value: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, -}; - class Search extends React.Component { constructor(props) { super(props); @@ -73,7 +69,7 @@ class Search extends React.Component {
} />
@@ -95,7 +91,7 @@ class Search extends React.Component { Search.propTypes = { value: PropTypes.string.isRequired, - selectedResult: PropTypes.shape(userShape), + selectedResult: PropTypes.string, isExactMatch: PropTypes.bool.isRequired, dispatch: PropTypes.func.isRequired, }; diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx index 80f65d4..0b9e024 100644 --- a/src/client/react/components/presentational/Result.jsx +++ b/src/client/react/components/presentational/Result.jsx @@ -1,26 +1,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; +import users from '../../users'; import IconFromUserType from './IconFromUserType'; -const Result = ({ user, selected }) => ( +const Result = ({ userId, isSelected }) => (
-
-
{user.value}
+
+
{users.byId[userId].value}
); Result.propTypes = { - user: PropTypes.shape({ - value: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - }).isRequired, - selected: PropTypes.bool.isRequired, + userId: PropTypes.string.isRequired, + isSelected: PropTypes.bool.isRequired, }; export default Result; diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js index 6ef0f4d..cad491b 100644 --- a/src/client/react/reducers/search.js +++ b/src/client/react/reducers/search.js @@ -1,43 +1,42 @@ -/* global USERS */ import fuzzy from 'fuzzy'; +import users from '../users'; const DEFAULT_STATE = { input: '', results: [ - { type: 's', value: '18561' }, + 's/18562', ], selectedResult: null, isExactMatch: false, }; -function getSearchResults(query) { +function getSearchResults(allUsers, query) { if (query.trim() === '') { return []; } - const allResults = fuzzy.filter(query, USERS, { + const allResults = fuzzy.filter(query, allUsers, { extract: user => user.value, }); const firstResults = allResults.splice(0, 4); - const users = firstResults.map(result => result.original); + const userIds = firstResults.map(result => result.original.id); - return users; + return userIds; } const search = (state = DEFAULT_STATE, action) => { switch (action.type) { case 'SEARCH/INPUT_CHANGE': { - let results = getSearchResults(action.typedValue); + const results = getSearchResults(users.allUsers, action.typedValue); let selectedResult = null; let isExactMatch = false; // Is the typed value exactly the same as the first result? Then show the // appropiate icon instead of the generic search icon. - if ((results.length > 0) && (action.typedValue === results[0].value)) { + if ((results.length === 1) && (action.typedValue === users.byId[results[0]].value)) { [selectedResult] = results; isExactMatch = true; - results = results.splice(1); } return { @@ -51,6 +50,9 @@ const search = (state = DEFAULT_STATE, action) => { case 'SEARCH/CHANGE_SELECTED_RESULT': { const { results, isExactMatch } = state; + + if (isExactMatch) return state; + const prevSelectedResult = state.selectedResult; const prevSelectedResultIndex = results.indexOf(prevSelectedResult); let nextSelectedResultIndex = @@ -62,15 +64,11 @@ const search = (state = DEFAULT_STATE, action) => { nextSelectedResultIndex = -1; } - let nextSelectedResult = + const nextSelectedResult = nextSelectedResultIndex === -1 ? null : results[nextSelectedResultIndex]; - if (isExactMatch) { - nextSelectedResult = prevSelectedResult; - } - return { ...state, selectedResult: nextSelectedResult, diff --git a/src/client/react/users.js b/src/client/react/users.js new file mode 100644 index 0000000..01ff093 --- /dev/null +++ b/src/client/react/users.js @@ -0,0 +1,66 @@ +/* global USERS */ + +import { combineReducers, createStore } from 'redux'; + +const getId = ({ type, value }) => `${type}/${value}`; + +const byId = (state = {}, action) => { + switch (action.type) { + case 'USERS/ADD_USER': + return { + ...state, + [action.user.id]: { + ...action.user, + }, + }; + default: + return state; + } +}; + +const allIds = (state = [], action) => { + switch (action.type) { + case 'USERS/ADD_USER': + return [ + ...state, + action.user.id, + ]; + default: + return state; + } +}; + +const allUsers = (state = [], action) => { + switch (action.type) { + case 'USERS/ADD_USER': + return [ + ...state, + { + ...action.user, + }, + ]; + default: + return state; + } +}; + +const store = createStore(combineReducers({ + byId, + allIds, + allUsers, +})); + +USERS.forEach((user) => { + store.dispatch({ + type: 'USERS/ADD_USER', + user: { + type: user.type, + value: user.value, + id: getId(user), + }, + }); +}); + +const users = store.getState(); + +export default users; -- cgit v1.1