Discussion: react-tabs vs. react-router links

[lindapaiste]

Increasing Access

Using standard HTML <a> tags for links is more semantically correct and allows for standard right-click behavior.

Feature enhancement details

There are multiple places in the app where we use tabs to switch between content. Some of these are coded using the react-tabs package, while others use <Link> elements from react-router-dom.

It is my opinion that we should use the react-router-dom approach in situations where the tabs have different URLs but I want to open this up for discussion.

Advantages of react-router-dom

• We can use the router to control the content on the page, instead of manually switching based on pathname
  

  p5.js-web-editor/client/modules/Legal/pages/Legal.jsx

  Lines 37 to 45 in 185a0b1

  	useEffect(() => {
  	if (location.pathname === '/privacy-policy') {
  	setSelectedIndex(0);
  	} else if (location.pathname === '/terms-of-use') {
  	setSelectedIndex(1);
  	} else {
  	setSelectedIndex(2);
  	}
  	}, [location]);

• We don't need any callback function when changing tabs.
  

  p5.js-web-editor/client/modules/Legal/pages/Legal.jsx

  Lines 47 to 59 in 185a0b1

  	function onSelect(index, lastIndex, event) {
  	if (index === lastIndex) return;
  	if (index === 0) {
  	setSelectedIndex(0);
  	history.push('/privacy-policy');
  	} else if (index === 1) {
  	setSelectedIndex(1);
  	history.push('/terms-of-use');
  	} else if (index === 2) {
  	setSelectedIndex(2);
  	history.push('/code-of-conduct');
  	}
  	}

• We can automatically highlight the current tab using the NavLink component (instead of Link) https://reactrouter.com/en/main/components/nav-link
• Links render as HTML <a> elements which is more semantically correct and allows for standard right-click behavior.
  
• Screen readers understand links, and they can be focused using Tab navigation.

Current Usage

Legal page - uses react-tabs
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/Legal/pages/Legal.jsx

Dashboard page - uses react-router-dom (with manual routing and highlighting that I would like to clean up)
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/User/components/DashboardTabSwitcher.jsx

Preferences modal - uses react-tabs
This would stay as-is because there is no URL change involved
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/IDE/components/Preferences/index.jsx

[udittripathi]

I can host the application locally using docker but when I make changes in the code it is not getting refreshed in the browser. So I have to build a new image every time or there is something I am doing wrong? Kindly help me with this.

[avengsum]

@lindapaiste is this issue is solved or anything left that I can work on?