Order attendes by badge color

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.

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",

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',);
+  };

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
+  },]

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()
   },]

src/reducers/attendees.js

@@ -1,27 +1,36 @@
-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
 				...state.slice(0, action.index),
 				// 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: