Skip to content

Remove dependency on React Router #86

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.

Activity

  1. self-assigned this
    on Oct 3, 2024
  2. david-crespo commented on Dec 30, 2024

    @david-crespo
    CollaboratorAuthor

    Reopened by #100 with use-delegated-links.ts. It's only used on the rfd-site, so we can either inline it there or make it take navigate as an arg so the caller can pass it in.

  3. benjaminleonard commented on Jan 14, 2025

    @benjaminleonard
    Collaborator

    🚀 Issue was released in v2.1.0 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions