From 1d8ddb0d75d4a6b10197c7fba051c6feda573978 Mon Sep 17 00:00:00 2001
From: Nicholas Chiang <nicholas.h.chiang@gmail.com>
Date: Thu, 23 Nov 2023 23:30:14 -0800
Subject: [PATCH] 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.own.tsx  | 39 ------------------
 app/routes/_header.$username.sets.tsx | 57 +++++++++++++++------------
 app/routes/_header.$username.tsx      | 28 ++++++++-----
 app/routes/_header.$username.want.tsx | 39 ------------------
 4 files changed, 50 insertions(+), 113 deletions(-)
 delete mode 100644 app/routes/_header.$username.own.tsx
 delete mode 100644 app/routes/_header.$username.want.tsx

diff --git a/app/routes/_header.$username.own.tsx b/app/routes/_header.$username.own.tsx
deleted file mode 100644
index 1fb9920f..00000000
--- a/app/routes/_header.$username.own.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useLoaderData } from '@remix-run/react'
-import { type DataFunctionArgs } from '@vercel/remix'
-
-import { SetItem } from 'components/set-item'
-
-import { OWN_SET_NAME, getItems } from 'utils/set'
-
-import { prisma } from 'db.server'
-import { requireUserId } from 'session.server'
-
-export async function loader({ request }: DataFunctionArgs) {
-  const userId = await requireUserId(request)
-  const set = await prisma.set.findUnique({
-    where: { name_authorId: { name: OWN_SET_NAME, authorId: userId } },
-    include: {
-      variants: {
-        orderBy: { updatedAt: 'desc' },
-        include: { images: { take: 1 }, product: true },
-      },
-      looks: {
-        orderBy: { updatedAt: 'desc' },
-        include: { images: { take: 1 } },
-      },
-    },
-  })
-  if (set == null) throw new Response('Not Found', { status: 404 })
-  return getItems(set)
-}
-
-export default function OwnPage() {
-  const items = useLoaderData<typeof loader>()
-  return (
-    <ol className='grid grid-cols-5 gap-1'>
-      {items.map((item) => (
-        <SetItem key={item.id} item={item} />
-      ))}
-    </ol>
-  )
-}
diff --git a/app/routes/_header.$username.sets.tsx b/app/routes/_header.$username.sets.tsx
index ad60e70a..ad493c48 100644
--- a/app/routes/_header.$username.sets.tsx
+++ b/app/routes/_header.$username.sets.tsx
@@ -19,10 +19,7 @@ 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
@@ -30,32 +27,40 @@ export async function loader({ params }: DataFunctionArgs) {
 
 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 />
diff --git a/app/routes/_header.$username.tsx b/app/routes/_header.$username.tsx
index 9b5e5c4c..12b83682 100644
--- a/app/routes/_header.$username.tsx
+++ b/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
diff --git a/app/routes/_header.$username.want.tsx b/app/routes/_header.$username.want.tsx
deleted file mode 100644
index a08f4b17..00000000
--- a/app/routes/_header.$username.want.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useLoaderData } from '@remix-run/react'
-import { type DataFunctionArgs } from '@vercel/remix'
-
-import { SetItem } from 'components/set-item'
-
-import { WANT_SET_NAME, getItems } from 'utils/set'
-
-import { prisma } from 'db.server'
-import { requireUserId } from 'session.server'
-
-export async function loader({ request }: DataFunctionArgs) {
-  const userId = await requireUserId(request)
-  const set = await prisma.set.findUnique({
-    where: { name_authorId: { name: WANT_SET_NAME, authorId: userId } },
-    include: {
-      variants: {
-        orderBy: { updatedAt: 'desc' },
-        include: { images: { take: 1 }, product: true },
-      },
-      looks: {
-        orderBy: { updatedAt: 'desc' },
-        include: { images: { take: 1 } },
-      },
-    },
-  })
-  if (set == null) throw new Response('Not Found', { status: 404 })
-  return getItems(set)
-}
-
-export default function WantPage() {
-  const items = useLoaderData<typeof loader>()
-  return (
-    <ol className='grid grid-cols-5 gap-1'>
-      {items.map((item) => (
-        <SetItem key={item.id} item={item} />
-      ))}
-    </ol>
-  )
-}