Skip to content

Commit 7d4d8d7

Browse files
lsbyerleylsbyerley
committed
fix: lint, move userdropdown
1 parent 3130ccc commit 7d4d8d7

File tree

2 files changed

+87
-80
lines changed

2 files changed

+87
-80
lines changed

‎app/components/user-dropdown.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {
2+
Form,
3+
Link,
4+
useSubmit,
5+
} from '@remix-run/react'
6+
import { useRef } from 'react'
7+
import { Button } from '#app/components/ui/button.tsx'
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuPortal,
13+
DropdownMenuTrigger,
14+
} from '#app/components/ui/dropdown-menu.tsx'
15+
import { Icon } from '#app/components/ui/icon.tsx'
16+
import { getUserImgSrc } from '#app/utils/misc.tsx'
17+
import { useUser } from '#app/utils/user.ts'
18+
19+
export function UserDropdown() {
20+
const user = useUser()
21+
const submit = useSubmit()
22+
const formRef = useRef<HTMLFormElement>(null)
23+
return (
24+
<DropdownMenu>
25+
<DropdownMenuTrigger asChild>
26+
<Button asChild variant="secondary">
27+
<Link
28+
to={`/users/${user.username}`}
29+
// this is for progressive enhancement
30+
onClick={e => e.preventDefault()}
31+
className="flex items-center gap-2"
32+
>
33+
<img
34+
className="h-8 w-8 rounded-full object-cover"
35+
alt={user.name ?? user.username}
36+
src={getUserImgSrc(user.image?.id)}
37+
/>
38+
<span className="text-body-sm font-bold">
39+
{user.name ?? user.username}
40+
</span>
41+
</Link>
42+
</Button>
43+
</DropdownMenuTrigger>
44+
<DropdownMenuPortal>
45+
<DropdownMenuContent sideOffset={8} align="start">
46+
<DropdownMenuItem asChild>
47+
<Link prefetch="intent" to={`/users/${user.username}`}>
48+
<Icon className="text-body-md" name="avatar">
49+
Profile
50+
</Icon>
51+
</Link>
52+
</DropdownMenuItem>
53+
<DropdownMenuItem asChild>
54+
<Link prefetch="intent" to={`/users/${user.username}/notes`}>
55+
<Icon className="text-body-md" name="pencil-2">
56+
Notes
57+
</Icon>
58+
</Link>
59+
</DropdownMenuItem>
60+
<DropdownMenuItem
61+
asChild
62+
// this prevents the menu from closing before the form submission is completed
63+
onSelect={event => {
64+
event.preventDefault()
65+
submit(formRef.current)
66+
}}
67+
>
68+
<Form action="/logout" method="POST" ref={formRef}>
69+
<Icon className="text-body-md" name="exit">
70+
<button type="submit">Logout</button>
71+
</Icon>
72+
</Form>
73+
</DropdownMenuItem>
74+
</DropdownMenuContent>
75+
</DropdownMenuPortal>
76+
</DropdownMenu>
77+
)
78+
}

‎app/root.tsx

+9-80
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,43 @@ import {
66
type MetaFunction,
77
} from '@remix-run/node'
88
import {
9-
Form,
109
Link,
1110
Links,
1211
Meta,
1312
Outlet,
1413
Scripts,
1514
ScrollRestoration,
1615
useLoaderData,
17-
useSubmit,
1816
} from '@remix-run/react'
1917
import { withSentry } from '@sentry/remix'
20-
import { useRef, useState } from 'react'
18+
import { useState } from 'react'
2119
import { HoneypotProvider } from 'remix-utils/honeypot/react'
20+
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
2221
import { LogoIcon, MenuIcon, XIcon } from '#app/components/icons'
22+
import { EpicProgress } from '#app/components/progress-bar.tsx'
2323
import SiteFooter from '#app/components/site-footer.js'
24+
import { useToast } from '#app/components/toaster.tsx'
25+
import { Button } from '#app/components/ui/button.tsx'
26+
import { href as iconsHref } from '#app/components/ui/icon.tsx'
2427
import {
2528
SheetTrigger,
2629
SheetClose,
2730
SheetContent,
2831
Sheet,
2932
} from '#app/components/ui/sheet'
30-
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
31-
import { EpicProgress } from '#app/components/progress-bar.tsx'
32-
import { useToast } from '#app/components/toaster.tsx'
33-
import { Button } from '#app/components/ui/button.tsx'
34-
import {
35-
DropdownMenu,
36-
DropdownMenuContent,
37-
DropdownMenuItem,
38-
DropdownMenuPortal,
39-
DropdownMenuTrigger,
40-
} from '#app/components/ui/dropdown-menu.tsx'
41-
import { Icon, href as iconsHref } from '#app/components/ui/icon.tsx'
4233
import { EpicToaster } from '#app/components/ui/sonner.tsx'
43-
import tailwindStyleSheetUrl from './styles/tailwind.css?url'
34+
import { ThemeSwitch, useTheme } from '#app/routes/resources+/theme'
4435
import { getUserId, logout } from '#app/utils/auth.server.ts'
4536
import { ClientHintCheck, getHints } from '#app/utils/client-hints.tsx'
4637
import { prisma } from '#app/utils/db.server.ts'
4738
import { getEnv } from '#app/utils/env.server.ts'
4839
import { honeypot } from '#app/utils/honeypot.server.ts'
49-
import { combineHeaders, getDomainUrl, getUserImgSrc } from '#app/utils/misc.tsx'
40+
import { combineHeaders, getDomainUrl } from '#app/utils/misc.tsx'
5041
import { useNonce } from '#app/utils/nonce-provider.ts'
5142
import { type Theme, getTheme } from '#app/utils/theme.server.ts'
5243
import { makeTimings, time } from '#app/utils/timing.server.ts'
5344
import { getToast } from '#app/utils/toast.server.ts'
54-
import { useUser } from '#app/utils/user.ts'
55-
import { ThemeSwitch, useTheme } from '#app/routes/resources+/theme'
45+
import tailwindStyleSheetUrl from './styles/tailwind.css?url'
5646

5747
export const links: LinksFunction = () => {
5848
return [
@@ -307,67 +297,6 @@ function AppWithProviders() {
307297

308298
export default withSentry(AppWithProviders)
309299

310-
export function UserDropdown() {
311-
const user = useUser()
312-
const submit = useSubmit()
313-
const formRef = useRef<HTMLFormElement>(null)
314-
return (
315-
<DropdownMenu>
316-
<DropdownMenuTrigger asChild>
317-
<Button asChild variant="secondary">
318-
<Link
319-
to={`/users/${user.username}`}
320-
// this is for progressive enhancement
321-
onClick={e => e.preventDefault()}
322-
className="flex items-center gap-2"
323-
>
324-
<img
325-
className="h-8 w-8 rounded-full object-cover"
326-
alt={user.name ?? user.username}
327-
src={getUserImgSrc(user.image?.id)}
328-
/>
329-
<span className="text-body-sm font-bold">
330-
{user.name ?? user.username}
331-
</span>
332-
</Link>
333-
</Button>
334-
</DropdownMenuTrigger>
335-
<DropdownMenuPortal>
336-
<DropdownMenuContent sideOffset={8} align="start">
337-
<DropdownMenuItem asChild>
338-
<Link prefetch="intent" to={`/users/${user.username}`}>
339-
<Icon className="text-body-md" name="avatar">
340-
Profile
341-
</Icon>
342-
</Link>
343-
</DropdownMenuItem>
344-
<DropdownMenuItem asChild>
345-
<Link prefetch="intent" to={`/users/${user.username}/notes`}>
346-
<Icon className="text-body-md" name="pencil-2">
347-
Notes
348-
</Icon>
349-
</Link>
350-
</DropdownMenuItem>
351-
<DropdownMenuItem
352-
asChild
353-
// this prevents the menu from closing before the form submission is completed
354-
onSelect={event => {
355-
event.preventDefault()
356-
submit(formRef.current)
357-
}}
358-
>
359-
<Form action="/logout" method="POST" ref={formRef}>
360-
<Icon className="text-body-md" name="exit">
361-
<button type="submit">Logout</button>
362-
</Icon>
363-
</Form>
364-
</DropdownMenuItem>
365-
</DropdownMenuContent>
366-
</DropdownMenuPortal>
367-
</DropdownMenu>
368-
)
369-
}
370-
371300
export function ErrorBoundary() {
372301
// the nonce doesn't rely on the loader so we can access that
373302
const nonce = useNonce()

0 commit comments

Comments
 (0)