ENG-1140: new-trashed-rewardables-flow

api/src/services/ik/rewardablePuzzle/rewardablePuzzleService.ts

@@ -46,9 +46,13 @@ export const editRewardablePuzzle: MutationResolvers['editRewardablePuzzle'] =
 
       const prevRewardable = await db.rewardable.findUnique({
         where: { id: rewardableId },
-        select: { name: true, slug: true },
+        select: { name: true, slug: true, trashedAt: true },
       })
 
+      if (prevRewardable?.trashedAt) {
+        throw new Error("Cannot edit a puzzle that's in the trash")
+      }
+
       const steps = formatCreateSteps(input.puzzle.steps)
       const slug =
         prevRewardable?.name === input.name

api/src/services/ik/rewardables/rewardables.ts

@@ -20,6 +20,9 @@ export const rewardableBySlug: QueryResolvers['rewardableBySlug'] = ({
         slug,
         type,
       },
+      trashedAt: {
+        equals: null,
+      },
     },
   })
 }
@@ -57,6 +60,7 @@ export const rewardablesBySortType: QueryResolvers['rewardablesBySortType'] = ({
     where: {
       sortType,
       listPublicly: true,
+      trashedAt: { equals: null },
     },
   })
 }
@@ -73,7 +77,13 @@ export const rewardablesCollection: QueryResolvers['rewardablesCollection'] =
       ? count
       : smallestPaginationCount
 
-    const typesFilter = types.map((type) => ({ type, listPublicly: true }))
+    const typesFilter = types.map((type) => ({
+      type,
+      listPublicly: true,
+      trashedAt: {
+        equals: null,
+      },
+    }))
     const totalCount = await db.rewardable.count({
       where: { OR: typesFilter },
     })

web/src/components/ProfileCell/ProfileCell.tsx

@@ -12,6 +12,7 @@ import type {
   UserRewardablesQuery,
 } from 'types/graphql'
 
+import { routes } from '@redwoodjs/router'
 import {
   useQuery,
   CellSuccessProps,
@@ -79,6 +80,7 @@ const USER_REWARDABLES_QUERY = gql`
   query UserRewardablesQuery($userId: String!) {
     userRewardables(userId: $userId) {
       id
+      trashedAt
       name
       slug
       nfts {
@@ -120,6 +122,13 @@ export const Success = ({
     variables: { userId: user?.id },
   })
 
+  const liveRewardables = data?.userRewardables.filter(
+    (rewardable) => !rewardable.trashedAt
+  )
+  const trashedRewardables = data?.userRewardables.filter(
+    (rewardable) => rewardable.trashedAt
+  )
+
   return (
     <div>
       <div className="mt-12 flex flex-col gap-6 lg:mt-0 lg:flex-row">
@@ -312,31 +321,55 @@ export const Success = ({
         </div>
       </div>
 
-      <div className="mt-6 flex flex-col gap-6">
-        <div className="overflow-hidden rounded-lg bg-black/30 lg:basis-2/5">
-          <div className="bg-black/30 py-8 px-4 sm:px-8">
-            <p className="">Your Puzzles & Packs</p>
-          </div>
+      {(!!liveRewardables?.length || !!trashedRewardables?.length) && (
+        <div className="flex flex-col gap-6">
+          <div className="overflow-hidden rounded-lg bg-black/30 lg:basis-2/5">
+            <div className="bg-black/30 py-8 px-4 sm:px-8">
+              <p className="">Your Puzzles & Packs</p>
+            </div>
 
-          <div className="flex flex-col gap-4 py-8 px-4 text-sm sm:px-8">
-            <div className="grid gap-4 py-8 px-4 text-sm sm:px-8 md:grid-cols-2">
-              {data?.userRewardables.map((rewardable) => (
-                <Thumbnail
-                  id={rewardable.id} // keep typescript happy
-                  key={rewardable.id}
-                  name={rewardable.name}
-                  href={rewardableLandingRoute({
-                    type: rewardable.type,
-                    slug: rewardable.slug,
-                  })}
-                  isGrid={false} // always false for this display
-                  cloudinaryId={rewardable.nfts?.[0]?.cloudinaryId}
-                />
-              ))}
+            <div className="flex flex-col gap-4 py-8 px-4 text-sm sm:px-8">
+              {!!liveRewardables?.length && (
+                <div className="grid gap-4 py-8 px-4 text-sm sm:px-8 md:grid-cols-2">
+                  {liveRewardables?.map((rewardable) => (
+                    <Thumbnail
+                      id={rewardable.id} // keep typescript happy
+                      key={rewardable.id}
+                      name={rewardable.name}
+                      href={rewardableLandingRoute({
+                        type: rewardable.type,
+                        slug: rewardable.slug,
+                      })}
+                      isGrid={false} // always false for this display
+                      cloudinaryId={rewardable.nfts?.[0]?.cloudinaryId}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {!!trashedRewardables?.length && (
+                <>
+                  <p className="text-stone-300">Puzzles and packs in trash</p>
+                  <div className="grid gap-4 py-8 px-4 text-sm sm:px-8 md:grid-cols-2">
+                    {trashedRewardables?.map((rewardable) => (
+                      <Thumbnail
+                        id={rewardable.id} // keep typescript happy
+                        key={rewardable.id}
+                        name={rewardable.name}
+                        href={routes.editFormArchetype({
+                          slug: rewardable.slug,
+                        })}
+                        isGrid={false} // always false for this display
+                        cloudinaryId={rewardable.nfts?.[0]?.cloudinaryId}
+                      />
+                    ))}
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }