Skip to content

Remove dependency on React Router #86

@david-crespo

Description

@david-crespo

We use RR in one spot in this repo:

import { Link } from 'react-router-dom'
import { Button, buttonStyle } from '../'
const buttonStyleProps = { variant: 'ghost', size: 'sm', color: 'secondary' } as const
type Props = {
icon?: ReactElement
title: string
body?: string
} & ( // only require buttonTo or onClick if buttonText is present
| { buttonText: string; buttonTo: string }
| { buttonText: string; onClick: () => void }
| { buttonText?: never }
)
export function EmptyMessage(props: Props) {
let button: ReactElement | null = null
if (props.buttonText && 'buttonTo' in props) {
button = (
<Link className={cn('mt-6', buttonStyle(buttonStyleProps))} to={props.buttonTo}>
{props.buttonText}
</Link>
)
} else if (props.buttonText && 'onClick' in props) {
button = (
<Button {...buttonStyleProps} className="mt-6" onClick={props.onClick}>
{props.buttonText}
</Button>
)
}
return (
<div className="m-4 flex max-w-[14rem] flex-col items-center text-center">
{props.icon && (
<div className="mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary">
{props.icon}
</div>
)}
<h3 className="text-sans-semi-lg">{props.title}</h3>
{props.body && <p className="mt-1 text-sans-md text-secondary">{props.body}</p>}
{button}
</div>
)
}

And it's used only once in the entire org:

https://github.com/oxidecomputer/oxide-computer/blob/f59e4282b775b6ee582535cfc4a44b92a035c370/app/routes/events/index.tsx#L122-L126

If we inline that definition in oxide-computer we can delete EmptyMessage here and remove the dep.

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions