Never suppose the context in a component

In Web Development, components are supposed to be reusable. Therefore, if you suppose the context in which a component is used, it can only be used in that context (it may break otherwise!)

For example, I have a component that copies the url to the logs page, modifying the log-id in the url (it’s not important what logs are for this!).

// linkButton.js

export const linkButton = (log) => {
	const url = new URL(window.location.href);
	url.searchParams.set('id', log.id);
	return ... // some html elements
}

This is ok if this component is on the logs page, since the copied url will be .../?page=log-details&?id=119. But what if we wanted to display a log on a different page, such as run-details? Then the copied url would be /?page=run-details&?id=119. This would (1) copy a link to the run details page and (2) would be referencing a run id instead of a log id.

To avoid this, I used an absolute url in the component, and modified the name to reflect the fact that this component copies urls only to logs, and nothing else.

// logLinkButton.js

export const logLinkButton = (log) => {
	const url = new URL(window.location.href);
	url.searchParams.set('id', log.id);
	return ... // some html elements
}

https://github.com/AliceO2Group/Bookkeeping/pull/1061#discussion_r1271814384