Crossbrowser Issues with React Camper Leader Board

Crossbrowser Issues with React Camper Leader Board
0.0 0

#1

Hey everyone, I am just starting with React and noticing some cross browser compatibility issues with my Camper Leader Board. In firefox my application works fine, but in Chrome, sorting the camper list is completely broken for both total and recent points.
In my application, I am just reordering the this.state.alltime and this.state.recent arrays of objects in order to accomplish sorting. Should I be doing this differently or is there a bigger issue with React and chrome here?

Here is one of the sorting functions:

sortRecent(event){
		var sortRecent;
		if(this.state.order === "decending"){
			sortRecent = this.state.recent.sort((a,b) => {
				return b-a;
			})
			this.setState({
				recent: sortRecent,
				sortBy: "recent",
				order: "acending"
			});
		} else {
			sortRecent = this.state.recent.sort((a,b) => {
				return a-b;
			});
			this.setState({
				recent: sortRecent,
				sortBy: "recent",
				order: "descending"
			});
		}
	}

and there is the link to the pen

any help would be greatly appreciated. Thank you.


#2

How about changing:

sortRecent(event){
		var sortRecent;
		if(this.state.order === "decending"){
			sortRecent = this.state.recent.sort((a,b) => {
				return b-a;
			})

to

sortRecent(event){
		var sortRecent;
		if(this.state.order === "decending"){
			sortAll = this.state.allTime.sort((a,b) => {
				return b.alltime - a.alltime; // specifies the alltime property to sort on
			})

#3

You are awesome! Thank you. I was using firefox and the sorting worked properly so I never thought to check the code. I wonder why firefox still sorted everything properly even though I clearly made a mistake, and did not specify which property to sort on…


#4

Not sure why that is the case for Firefox.

I was messing around with your code and noticed a lot of duplicate code for the sortAll function. I was able to get rid of one of the sorts with the following code. The same could be applied to your sortRecent. In fact, if you think about it, there is a way to only have one sort function for both recent and all clicks.

	sortAll(event){	
		var bdir = 1, adir=-1, newOrder = "decending";
		if(this.state.order === "decending"){
		  bdir *= -1;
		  adir *= -1;
		  newOrder = "acending";
		}
		var sortAll = this.state.allTime.sort((a,b) => {
		   return bdir * b.alltime + adir * a.alltime;
		});
		this.setState({
		  allTime: sortAll,
		  sortBy: "all",
		  order: newOrder
		});	
	}

#5

Also, do you really need to set the state for sortBy? It already has the value “all” when the function runs. I have not learned React, so this may seem like a silly question.


#6

Your implementation of sorting here is much cleaner, thank you. I am a js newbie and still have a lot to learn. As far as the sortBy property on the applications state. Since there are 2 different sets of data(from 2 different api calls), one for recent data, and one for all time data, this flag lets the application know which set of data to display.


#7

I think I understand now. You only keep one of the data sets in the state at any given time?


#8

No, there are both kept in the state of the application when it mounts. In the App component, in the componentWillMount() function, I grab both sets of data and set them the alltime and recent arrays in the components state. Then, in the render function of the App component, I set the data variable equal to either this.state.alltime or this.state.recent depending on what the user has clicked.
I think the confusion here might be because this application doesn’t necessarily act the way you would expect. I was confused by the requirements on this too, since you would think the application would be sorting the same data, and not switch between data sets. But looking at the example project, this is exactly what the example project does, so I just went with it.