From 6ac938184ded37bdeb21f0ba55b2d1ce6d4f1ac1 Mon Sep 17 00:00:00 2001 From: Johnny Gamba Date: Mon, 30 Jan 2017 08:27:34 -0500 Subject: [PATCH] Order attendes by badge color --- README.md | 18 +----------- package.json | 1 + src/Attendees/common/ColorsOrganizer.js | 38 +++++++++++++++++++++++++ src/data/colors.js | 16 +++++++++++ src/data/data.js | 10 +++---- src/reducers/attendees.js | 31 +++++++++++++------- 6 files changed, 81 insertions(+), 33 deletions(-) mode change 100755 => 100644 package.json create mode 100644 src/Attendees/common/ColorsOrganizer.js create mode 100644 src/data/colors.js diff --git a/README.md b/README.md index 9899779..748136e 100755 --- a/README.md +++ b/README.md @@ -1,17 +1 @@ -### Running the app - -1. Ensure you have `npm` installed. - -Follow the instructions for your platform [here](https://github.com/npm/npm). - -2. Install dependencies -```` -npm install -```` - -3. Boot the node server -```` -npm start -```` - -The server is now running at [localhost:3000](localhost:3000) +Requerimiento: Ordenar los participantes de acuerdo al color que tengan en sus placas, si el color agregado no existe entonces debe de ser ubicado al principio de la lista. \ No newline at end of file diff --git a/package.json b/package.json old mode 100755 new mode 100644 index 4f7c805..f9093c0 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "lint": "eslint src" }, "dependencies": { + "lodash": "^4.17.4", "react": "^0.14.6", "react-dom": "^0.14.6", "react-redux": "^5.0.2", diff --git a/src/Attendees/common/ColorsOrganizer.js b/src/Attendees/common/ColorsOrganizer.js new file mode 100644 index 0000000..9bdfbf2 --- /dev/null +++ b/src/Attendees/common/ColorsOrganizer.js @@ -0,0 +1,38 @@ +import Colors from '../../data/colors'; +import _find from 'lodash/find'; +import _cloneDeep from 'lodash/cloneDeep'; +import _orderBy from 'lodash/orderBy'; +import _isUndefined from 'lodash/isUndefined'; + +export default function orderByColor(attendees) { + return orderByWeight(attendees, Colors); +} + +function orderByWeight(attendees, colorsWeights) { + + //In this case we do need 'var' because we need to take advantage of + //hmmm... I don't remember the name right now. + var attendeesWithColorWeightProperty = []; + + attendees.forEach((attendeeFromAttendeesArray)=> { + + var attendee = _cloneDeep(attendeeFromAttendeesArray); + + //We grab the color object which cointains the weight of the color. + let badgeColor = _find(colorsWeights, color => { + return attendee.color === color.name + }); + + //When the color doesn't exist the _find returns null. + //Check if the color the the badge was found in the colors we have hardcoded. + if (!_isUndefined(badgeColor)) { + //We add a new property to the attendee object to order the badges for that property. + attendee.colorsWeight = badgeColor.weight; + } + + attendeesWithColorWeightProperty.push(attendee); + }); + + //Order the attendes by the weight of its color badge, the havier ones go first. + return _orderBy(attendeesWithColorWeightProperty, 'colorsWeight', 'desc',); + }; diff --git a/src/data/colors.js b/src/data/colors.js new file mode 100644 index 0000000..1cbf099 --- /dev/null +++ b/src/data/colors.js @@ -0,0 +1,16 @@ +export default [{ + name: 'red', + weight: 3 + }, { + name: 'blue', + weight: 4 + }, { + name: 'black', + weight: 5 + }, { + name: 'green', + weight: 6 + }, { + name: 'white', + weight: 8 + },] diff --git a/src/data/data.js b/src/data/data.js index f77f8a2..c710306 100755 --- a/src/data/data.js +++ b/src/data/data.js @@ -2,22 +2,22 @@ import uuid from 'uuid'; export default [{ name: 'Charlie Kelly', - color: '#E74C3C', + color: 'white', id: uuid.v4() }, { name: 'Mac', - color: '#553285', + color: 'black', id: uuid.v4() }, { name: 'Frank Reynolds', - color: '#296AA8', + color: 'blue', id: uuid.v4() }, { name: 'Deandra Reynolds', - color: '#202020', + color: 'red', id: uuid.v4() }, { name: 'Dennis Reynolds', - color: '#287572', + color: 'green', id: uuid.v4() },] diff --git a/src/reducers/attendees.js b/src/reducers/attendees.js index 680f05d..3720832 100755 --- a/src/reducers/attendees.js +++ b/src/reducers/attendees.js @@ -1,16 +1,19 @@ -import Data from '../data/data' +import Data from '../data/data'; +import OrderAttendeesByColor from '../Attendees/common/ColorsOrganizer'; export default function attendees (state = [], action) { + + //This should be always an array. + let attendeesOrderedByColor = []; + switch (action.type) { - case 'ADD_ATTENDEE': - // Return a new array with old state and added attendee. - return [{ - name: action.name, - color: action.color - }, - ...state - ]; + case 'ADD_ATTENDEE': + const attendeesWithNewAttendee = [{ name: action.name, color: action.color }, ...state]; + const attendeesOrderedByColorPlusOldState = OrderAttendeesByColor(attendeesWithNewAttendee); + //I don't return attendeesOrderedByColorPlusOldState() directly because we are returning an array not an action to execute something. + return attendeesOrderedByColorPlusOldState; + case 'REMOVE_ATTENDEE': return [ // Grab state from begging to index of one to delete @@ -18,10 +21,16 @@ export default function attendees (state = [], action) { // Grab state from the one after one we want to delete ...state.slice(action.index + 1) ]; - case 'RECEIVE_LIST': + + case 'RECEIVE_LIST': + //I think it is better to create a variable instead of just returning + //orderAttendeesByColor along with state because it clarifies what it is + //being returned, we are returning a noun not a verb. + attendeesOrderedByColor = OrderAttendeesByColor(action.list); + return [ ...state, - ...action.list + ...attendeesOrderedByColor ] default: