fix(app/profile): own/want nav items go to sets

This patch updates the user profile page so that the "own" and "want"
navigation items simply open the corresponding set page. There is
nothing particularly special about these sets, so I figured I might as
well have them included just as normal sets and exposed so to the end
user.

This does result in some unintuitive behavior where both the "sets" and
the "own/want" tab will be active at a given time. But it makes sense.

app/routes/_header.$username.sets.tsx

@@ -19,43 +19,48 @@ import { prisma } from 'db.server'
 export async function loader({ params }: DataFunctionArgs) {
   if (params.username == null) throw new Response('Not Found', { status: 404 })
   const sets = await prisma.set.findMany({
-    where: {
-      author: { username: params.username },
-      name: { notIn: [OWN_SET_NAME, WANT_SET_NAME] },
-    },
+    where: { author: { username: params.username } },
     orderBy: { updatedAt: 'desc' },
   })
   return sets
 }
 
 export default function UserSetsPage() {
   const sets = useLoaderData<typeof loader>()
+  const want = sets.find((set) => set.name === WANT_SET_NAME)
+  const own = sets.find((set) => set.name === OWN_SET_NAME)
   return (
     <div className='flex gap-6'>
       <ol className='flex-none w-48 h-min sticky top-14'>
-        <SetLink to='../want'>
-          <ShoppingCart className='w-3 h-3' />
-          {WANT_SET_NAME}
-        </SetLink>
-        <SetLink to='../own'>
-          <Shirt className='w-3 h-3' />
-          {OWN_SET_NAME}
-        </SetLink>
-        <Separator className='m-2 w-auto' />
-        {sets.map((set) => (
-          <SetLink key={set.id} to={set.id.toString()}>
-            {({ isActive }) => (
-              <>
-                {isActive ? (
-                  <FolderOpen className='flex-none w-3 h-3' />
-                ) : (
-                  <FolderClosed className='flex-none w-3 h-3' />
-                )}
-                <span className='truncate'>{set.name}</span>
-              </>
-            )}
+        {want && (
+          <SetLink to={want.id.toString()}>
+            <ShoppingCart className='w-3 h-3' />
+            {WANT_SET_NAME}
           </SetLink>
-        ))}
+        )}
+        {own && (
+          <SetLink to={own.id.toString()}>
+            <Shirt className='w-3 h-3' />
+            {OWN_SET_NAME}
+          </SetLink>
+        )}
+        {(want != null || own != null) && <Separator className='m-2 w-auto' />}
+        {sets
+          .filter((set) => set !== want && set !== own)
+          .map((set) => (
+            <SetLink key={set.id} to={set.id.toString()}>
+              {({ isActive }) => (
+                <>
+                  {isActive ? (
+                    <FolderOpen className='flex-none w-3 h-3' />
+                  ) : (
+                    <FolderClosed className='flex-none w-3 h-3' />
+                  )}
+                  <span className='truncate'>{set.name}</span>
+                </>
+              )}
+            </SetLink>
+          ))}
       </ol>
       <div className='flex-1 h-min'>
         <Outlet />

app/routes/_header.$username.tsx

@@ -77,7 +77,10 @@ export async function loader({ params }: DataFunctionArgs) {
   const [user, lookCount] = await Promise.all([
     prisma.user.findUnique({
       where: { username: params.username },
-      include: { _count: { select: { reviews: true, sets: true } } },
+      include: {
+        sets: { where: { name: { in: [WANT_SET_NAME, OWN_SET_NAME] } } },
+        _count: { select: { reviews: true, sets: true } },
+      },
     }),
     prisma.look.count({
       where: { sets: { some: { author: { username: params.username } } } },
@@ -127,6 +130,9 @@ export async function action({ request, params }: DataFunctionArgs) {
 export const useUser = () => useOutletContext<SerializeFrom<typeof loader>>()
 
 export default function UserPage() {
+  const { sets } = useLoaderData<typeof loader>()
+  const want = sets.find((set) => set.name === WANT_SET_NAME)
+  const own = sets.find((set) => set.name === OWN_SET_NAME)
   return (
     <main className='grid max-w-screen-xl mx-auto p-6'>
       <Header />
@@ -135,14 +141,18 @@ export default function UserPage() {
           <Bookmark className='w-3 h-3' />
           Saved
         </Tab>
-        <Tab to='want'>
-          <ShoppingCart className='w-3 h-3' />
-          {WANT_SET_NAME}
-        </Tab>
-        <Tab to='own'>
-          <Shirt className='w-3 h-3' />
-          {OWN_SET_NAME}
-        </Tab>
+        {want && (
+          <Tab to={`sets/${want.id}`}>
+            <ShoppingCart className='w-3 h-3' />
+            {WANT_SET_NAME}
+          </Tab>
+        )}
+        {own && (
+          <Tab to={`sets/${own.id}`}>
+            <Shirt className='w-3 h-3' />
+            {OWN_SET_NAME}
+          </Tab>
+        )}
         <Tab to='sets'>
           <Folder className='w-3 h-3' />
           Sets