Remove all uses of react-router-dom

The very little routing that zbib requires can be done without bringing in an additional library and it actually simplifies codebase and slightly reduces bundle size.
mick-schroeder · Jul 15, 2021 · 7f84ba9 · 7f84ba9
1 parent b98ba76
commit 7f84ba9
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 46 deletions.
diff --git a/src/js/bib-component.jsx b/src/js/bib-component.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Container from './components/container';
 import CrashHandler from './components/crash-handler';
 
@@ -29,21 +28,7 @@ ErrorBoundary.propTypes = {
 class ZoteroBibComponent extends React.Component {
 	render() {
 		return (
-			<ErrorBoundary>
-				<BrowserRouter>
-					<Switch>
-						<Route path="/:id([0-9a-fA-f]{32})">
-							<Container config = { this.props.config } />
-						</Route>
-						<Route path="/import">
-							<Container config = { this.props.config } />
-						</Route>
-						<Route path="/">
-							<Container config = { this.props.config } />
-						</Route>
-					</Switch>
-				</BrowserRouter>
-			</ErrorBoundary>
+			<ErrorBoundary><Container config = { this.props.config } /></ErrorBoundary>
 		);
 	}
 

diff --git a/src/js/components/brand.jsx b/src/js/components/brand.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 class Brand extends React.PureComponent {
 	render() {
 		return (
 			<React.Fragment>
 				<h1 className="brand">
-					<Link to="/">
+					<a href="/">
 						ZoteroBib
 
 						<svg width="188" height="38" viewBox="0 0 188 38">
@@ -22,7 +21,7 @@ class Brand extends React.PureComponent {
 								<path d="M163.676.712H168v16.8h.1A7.882,7.882,0,0,1,171.4,14.7a10.553,10.553,0,0,1,4.608-1.032,12.059,12.059,0,0,1,4.777.912,10.729,10.729,0,0,1,3.647,2.52,11.161,11.161,0,0,1,2.328,3.792,13.4,13.4,0,0,1,.816,4.728,13.206,13.206,0,0,1-.816,4.7,11.478,11.478,0,0,1-2.328,3.792,10.57,10.57,0,0,1-3.647,2.544,12.076,12.076,0,0,1-4.777.912,10.6,10.6,0,0,1-4.488-1.008,8.216,8.216,0,0,1-3.432-2.832H168V37h-4.32Zm11.808,32.832a7.775,7.775,0,0,0,3.12-.6,6.872,6.872,0,0,0,2.353-1.631,7.25,7.25,0,0,0,1.488-2.5,9.93,9.93,0,0,0,0-6.384,7.26,7.26,0,0,0-1.488-2.5A6.9,6.9,0,0,0,178.6,18.3a8.409,8.409,0,0,0-6.239,0,6.873,6.873,0,0,0-2.353,1.632,7.2,7.2,0,0,0-1.488,2.5,9.913,9.913,0,0,0,0,6.384,7.189,7.189,0,0,0,1.488,2.5,6.844,6.844,0,0,0,2.353,1.631A7.764,7.764,0,0,0,175.484,33.544Z" fill="#222"/>
 							</g>
 						</svg>
-					</Link>
+					</a>
 				</h1>
 			</React.Fragment>
 		);

diff --git a/src/js/components/container.jsx b/src/js/components/container.jsx
@@ -1,6 +1,5 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState, useReducer } from 'react';
 import ZoteroBib from 'zotero-translation-client';
-import { useParams, useLocation, useHistory } from "react-router-dom";
 import copy from 'copy-to-clipboard';
 import SmoothScroll from 'smooth-scroll';
 import PropTypes from 'prop-types';
@@ -152,9 +151,7 @@ const reducer = (state, action) => {
 
 
 const BibWebContainer = props => {
-	const { id: remoteId } = useParams();
-	const history = useHistory();
-	const location = useLocation();
+	const remoteId = window.location.pathname.match(/\/([0-9a-fA-f]{32})/)?.[1];
 	const citeproc = useRef(null);
 	const bib = useRef(null);
 	const copyData = useRef(null);
@@ -203,7 +200,7 @@ const BibWebContainer = props => {
 	const [multipleChoiceItems, setMultipleChoiceItems] = useState(null);
 	const [editorItem, setEditorItem] = useState(null);
 	const [permalink, setPermalink] = useState(null);
-	const [isQueryHandled, setIsQueryHandled] = useState(location.pathname !== '/import');
+	const [isQueryHandled, setIsQueryHandled] = useState(window.location.pathname !== '/import');
 
 	const wasSentenceCaseStyle = usePrevious(state.isSentenceCaseStyle);
 	const config = useMemo(() => ({ ...defaults, ...props.config }), [props.config]);
@@ -405,10 +402,10 @@ const BibWebContainer = props => {
 				setIsDataReady(true);
 			}
 		} catch(e) {
-			history.push('/');
+			window.history.pushState(null, null, '/');
 			handleError('Failed to load citations by id', e);
 		}
-	}, [citationStyles, config, handleError, history, remoteId]);
+	}, [citationStyles, config, handleError, remoteId]);
 
 	const getCopyData = useCallback(async format => {
 		const { bibliographyItems, bibliographyMeta } = await getOneTimeBibliographyOrFallback(
@@ -760,9 +757,9 @@ const BibWebContainer = props => {
 		localStorage.setItem('zotero-bib-title', title);
 
 		citeproc.current.recreateEngine({ wrap_url_and_doi: false });
-		history.replace('/');
+		history.replaceState(null, null, '/');
 		dispatch({ type: BIBLIOGRAPHY_SOURCE_REPLACED });
-	}, [state.selected, citationStyles, history, config, title]);
+	}, [state.selected, citationStyles, config, title]);
 
 	const handleReadMoreClick = useCallback(event => {
 		const target = document.querySelector('.zbib-illustration');
@@ -800,10 +797,10 @@ const BibWebContainer = props => {
 			setPermalink(`${window.location.origin}/${key}`);
 		} catch(e) {
 			setPermalink(null);
-			history.push('/');
+			window.history.pushState(null, null, '/')
 			handleError('Failed to upload bibliography', e);
 		}
-	}, [state.selected, config, handleError, history, title]);
+	}, [state.selected, config, handleError, title]);
 
 	const handleScroll = useCallback(() => {
 		if(!state.messages.find(m => m.kind === 'WELCOME_MESSAGE')) {
@@ -1061,14 +1058,14 @@ const BibWebContainer = props => {
 	}, [isReadOnly, title, prevTitle]);
 
 	useEffect(() => {
-		if(isDataReady && isStyleReady && state.isCiteprocReady && !isQueryHandled && location.pathname === '/import') {
-			history.replace('/');
+		if(isDataReady && isStyleReady && state.isCiteprocReady && !isQueryHandled && window.location.pathname === '/import') {
+			window.history.replaceState(null, null, '/');
 			setIsQueryHandled(true);
 			(async () => {
 				await handleTranslateIdentifier(identifier, null, true);
 			})();
 		}
-	}, [handleTranslateIdentifier, history, identifier, state.isCiteprocReady, isDataReady, isStyleReady, isQueryHandled, location]);
+	}, [handleTranslateIdentifier, identifier, state.isCiteprocReady, isDataReady, isStyleReady, isQueryHandled]);
 
 	useEffect(() => {
 		document.addEventListener('visibilitychange', handleVisibilityChange);

diff --git a/src/js/components/message.jsx b/src/js/components/message.jsx
@@ -1,17 +1,13 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import { useLocation } from "react-router-dom";
 import { default as KeyHandler } from 'react-key-handler';
 import { KEYDOWN } from 'react-key-handler';
 import Icon from './ui/icon';
 import Button from './ui/button';
-import { usePrevious } from '../hooks/';
 
 const Message = ({ action, id, message, kind, href, onDismiss, onReadMore, onUndoDelete }) => {
-	const location = useLocation();
-	const prevLocation = usePrevious(location);
 	let category;
 
 	switch(kind) {
@@ -32,12 +28,6 @@ const Message = ({ action, id, message, kind, href, onDismiss, onReadMore, onUnd
 		onDismiss(id);
 	}, [id, onDismiss]);
 
-	useEffect(() => {
-		if(prevLocation !== location && typeof(prevLocation)  !== 'undefined') {
-			onDismiss(id);
-		}
-	}, [id, location, onDismiss, prevLocation]);
-
 	return (
 		<div className={ cx('message', category) }>
 			<p className="text">

diff --git a/src/js/components/zbib.jsx b/src/js/components/zbib.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 import cx from 'classnames';
 
 import About from './about';
@@ -214,4 +213,4 @@ class ZBib extends React.PureComponent {
 	}
 }
 
-export default withRouter(UserTypeDetector(ZBib));
+export default UserTypeDetector(ZBib);