Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API updates #102

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

API updates #102

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf2af63
Converting rfd-site to use npm package
augustuswm Jan 9, 2025
8cbcfd3
Add missing licenses
augustuswm Jan 9, 2025
b6eac66
Update to latest remix. Add single fetch. Remove defer
augustuswm Jan 9, 2025
afc03f9
Update `@oxide/design-system` - fix peer dep
benjaminleonard Jan 15, 2025
d9b64cb
Merge branch 'main' into rfd-api-v2
benjaminleonard Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions app/components/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,35 +444,36 @@ const RFDPreview = ({ number }: { number: number }) => {
<div className="flex h-6 items-center border-b px-3 text-mono-xs border-b-secondary">
<div className="text-quaternary">Updated:</div>
<div className="ml-1 text-default">
{dayjs(rfd.commit_date).format('YYYY/MM/DD h:mm A')}
{dayjs(rfd.committedAt).format('YYYY/MM/DD h:mm A')}
</div>
</div>

<div className="flex w-full flex-col items-start p-6">
<StatusBadge label={rfd.state} />
{rfd.state && <StatusBadge label={rfd.state} />}
<div className="mt-2 !text-[32px] !leading-[1.15] text-sans-3xl text-raise">
{rfd.title}
</div>
<ul className="mt-6 w-full">
{rfd.toc.map(
(item) =>
item.level === 1 && (
<div className="w-full border-b py-2 border-b-default" key={item.id}>
<Link
to={`/rfd/${rfd.number}#${item.id}`}
className="block"
prefetch="intent"
>
<DialogDismiss className="text-left">
<li
className="text-sans-sm text-default hover:text-default children:!text-sans-sm"
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</DialogDismiss>
</Link>
</div>
),
)}
{rfd.toc &&
rfd.toc.map(
(item) =>
item.level === 1 && (
<div className="w-full border-b py-2 border-b-default" key={item.id}>
<Link
to={`/rfd/${rfd.number}#${item.id}`}
className="block"
prefetch="intent"
>
<DialogDismiss className="text-left">
<li
className="text-sans-sm text-default hover:text-default children:!text-sans-sm"
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</DialogDismiss>
</Link>
</div>
),
)}
</ul>
</div>
</>
Expand Down
12 changes: 6 additions & 6 deletions app/components/rfd/RfdPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,8 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {

if (!rfdPreview) return null

const { title, number, state, commit_date, number_string } = rfdPreview
const authors = generateAuthors(rfdPreview.authors || '')
const { title, number, state, committedAt, formattedNumber } = rfdPreview
const authors = rfdPreview.authors || []
return (
<div
ref={floatingEl}
Expand All @@ -212,15 +212,15 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {
>
<Link
prefetch="intent"
to={`/rfd/${number_string}`}
to={`/rfd/${formattedNumber}`}
className="mr-2 block text-sans-lg text-accent-tertiary hover:text-accent-secondary"
>
{number}
</Link>
<div>
<Link
prefetch="intent"
to={`/rfd/${number_string}`}
to={`/rfd/${formattedNumber}`}
className="mb-1 block text-sans-lg hover:text-default"
>
{title}
Expand All @@ -246,9 +246,9 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {
))}
</div>
<div className="flex space-x-1 text-sans-sm text-tertiary">
<div>{state.charAt(0).toUpperCase() + state.slice(1)}</div>
{state && <div>{state.charAt(0).toUpperCase() + state.slice(1)}</div>}
<span className="text-quaternary">•</span>
<div>{dayjs(commit_date).fromNow()}</div>
<div>{dayjs(committedAt).fromNow()}</div>
</div>
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,18 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

import type { Author } from '~/components/rfd/RfdPreview'
import { auth, isAuthenticated } from '~/services/authn.server'
import {
fetchRfds,
findAuthors,
findLabels,
isLocalMode,
provideNewRfdNumber,
type RfdListItem,
} from '~/services/rfd.server'
import styles from '~/styles/index.css?url'

import LoadingBar from './components/LoadingBar'
import { inlineCommentsCookie, themeCookie } from './services/cookies.server'
import { isLocalMode } from './services/rfd.local.server'
import {
fetchRfds,
getAuthors,
getLabels,
provideNewRfdNumber,
type RfdListItem,
} from './services/rfd.server'

export const meta: MetaFunction = () => {
return [{ title: 'RFD / Oxide' }]
Expand All @@ -54,10 +54,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {

const user = await isAuthenticated(request)
try {
const rfds: RfdListItem[] = await fetchRfds(user)
const rfds: RfdListItem[] = (await fetchRfds(user)) || []

const authors: Author[] = rfds ? findAuthors(rfds) : []
const labels: string[] = rfds ? findLabels(rfds) : []
const authors: Author[] = rfds ? getAuthors(rfds) : []
const labels: string[] = rfds ? getLabels(rfds) : []

return json({
// Any data added to the ENV key of this loader will be injected into the
Expand All @@ -68,7 +68,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
rfds,
authors,
labels,
isLocalMode,
localMode: isLocalMode(),
newRfdNumber: provideNewRfdNumber([...rfds]),
})
} catch (err) {
Expand Down Expand Up @@ -127,14 +127,14 @@ const Layout = ({ children, theme }: { children: React.ReactNode; theme?: string
)

export default function App() {
const { theme, isLocalMode } = useLoaderData<typeof loader>()
const { theme, localMode } = useLoaderData<typeof loader>()

return (
<Layout theme={theme}>
<LoadingBar />
<QueryClientProvider client={queryClient}>
<Outlet />
{isLocalMode && (
{localMode && (
<div className="overlay-shadow fixed bottom-6 left-6 z-10 rounded p-2 text-sans-sm text-notice bg-notice-secondary">
Local authoring mode
</div>
Expand Down
45 changes: 26 additions & 19 deletions app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,17 @@ export default function Index() {

let isMatch = false

if (authorEmailParam && rfd.authors.includes(authorEmailParam)) {
if (
authorEmailParam &&
rfd.authors?.some((author) => author.email === authorEmailParam)
) {
isMatch = true
}

if (authorNameParam && rfd.authors.includes(authorNameParam)) {
if (
authorNameParam &&
rfd.authors?.some((author) => author.name === authorNameParam)
) {
isMatch = true
}

Expand All @@ -102,10 +108,7 @@ export default function Index() {
return false
}

return rfd.labels
.split(',')
.map((label) => label.trim())
.includes(labelParam)
return rfd.labels.map((label) => label.trim()).includes(labelParam)
})
}

Expand Down Expand Up @@ -139,7 +142,11 @@ export default function Index() {

const sortedRfds = sortBy(filteredRfds, (rfd) => {
const sortVal =
sortAttr === 'number' ? rfd.number : new Date(rfd.commit_date).getTime()
sortAttr === 'number'
? rfd.number
: rfd.committedAt
? new Date(rfd.committedAt).getTime()
: new Date().getTime()
const mult = sortDir === 'asc' ? 1 : -1
return sortVal * mult
})
Expand Down Expand Up @@ -258,8 +265,8 @@ export default function Index() {
navigate(
`/rfd/${
exactMatch
? exactMatch.number_string
: matchedItems[0].number_string
? exactMatch.formattedNumber
: matchedItems[0].formattedNumber
}`,
)
}
Expand Down Expand Up @@ -318,7 +325,7 @@ export default function Index() {
</Container>

{matchedItems.map((rfd) => (
<RfdRow key={rfd.number_string} rfd={rfd} />
<RfdRow key={rfd.formattedNumber} rfd={rfd} />
))}
</ul>
</div>
Expand Down Expand Up @@ -349,8 +356,8 @@ const RfdRow = ({ rfd }: { rfd: RfdListItem }) => {
<Container className="relative rounded-lg border text-sans-md border-secondary 800:h-20">
<div className="grid h-full w-full grid-cols-12 items-center gap-2 px-5 py-4 800:gap-6 800:py-0">
<Link
to={`/rfd/${rfd.number_string}`}
key={rfd.number_string}
to={`/rfd/${rfd.formattedNumber}`}
key={rfd.formattedNumber}
prefetch="intent"
className="group order-2 col-span-12 -m-4 p-4 pr-10 text-sans-lg 600:col-span-8 800:order-1 800:col-span-5 800:text-sans-md"
>
Expand All @@ -361,7 +368,7 @@ const RfdRow = ({ rfd }: { rfd: RfdListItem }) => {
</Link>

<div className="order-1 col-span-12 flex flex-col items-start 800:order-2 800:col-span-3 1000:col-span-2">
<StatusBadge label={rfd.state} />
{rfd.state && <StatusBadge label={rfd.state} />}
</div>

<div className="order-3 col-span-12 flex space-x-2 text-sans-md text-default 800:col-span-3 800:block 800:space-x-0 1000:col-span-2">
Expand All @@ -376,24 +383,24 @@ const RfdRow = ({ rfd }: { rfd: RfdListItem }) => {
{() => (
<>
<div className="text-secondary 800:text-default">
{dayjs(rfd.commit_date).format('MMM D, YYYY')}
{rfd.committedAt && dayjs(rfd.committedAt).format('MMM D, YYYY')}
</div>
<div className="text-quaternary 800:hidden">/</div>
<div className="text-secondary 800:text-tertiary">
{dayjs(rfd.commit_date).format('h:mm A')}
{rfd.committedAt && dayjs(rfd.committedAt).format('h:mm A')}
</div>
</>
)}
</ClientOnly>
</div>

<Labels labels={rfd.labels} />
{rfd.labels && <Labels labels={rfd.labels} />}
</div>
</Container>
)
}

const Labels = ({ labels }: { labels: string }) => (
const Labels = ({ labels }: { labels: string[] }) => (
<div className="order-4 col-span-3 hidden max-h-[2.5rem] 1000:flex">
<ClientOnly
fallback={
Expand All @@ -408,7 +415,7 @@ const Labels = ({ labels }: { labels: string }) => (
</div>
)

const LabelsInner = ({ labels }: { labels: string }) => {
const LabelsInner = ({ labels }: { labels: string[] }) => {
const containerEl = useRef<HTMLDivElement>(null)
const { isOverflow } = useIsOverflow(containerEl)
return (
Expand All @@ -417,7 +424,7 @@ const LabelsInner = ({ labels }: { labels: string }) => {
className="relative flex flex-shrink flex-wrap gap-1 overflow-hidden pr-8 text-tertiary"
>
{labels ? (
labels.split(',').map((label) => (
labels.map((label) => (
<Link key={label} to={`/?label=${label.trim()}`}>
<Badge color="neutral">{label.trim()}</Badge>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions app/routes/rfd.$slug.discussion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export async function loader({ request, params: { slug } }: LoaderFunctionArgs)

// If you don't see an RFD but you are logged in, you can't tell whether you
// don't have access or it doesn't exist. That's fine.
if (!rfd || !rfd.discussion_link) throw resp404()
if (!rfd || !rfd.discussion) throw resp404()

return redirect(rfd.discussion_link)
return redirect(rfd.discussion)
}
Loading
Loading