feat: have list of comics an item is featured in

ilyvion · ilyvion · commit aab89f9d4e38 · 2023-09-10T09:50:35.000+02:00
Closes #19
diff --git a/.prettierignore b/.prettierignore
@@ -2,4 +2,7 @@ node_modules
 
 # Ignore artifacts:
 build
-coverage
+coverage
+
+dist
+storybook-static
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Add guest comic/non-canon pills to `ComicList`
 -   Add Storybook link to README
+-   Added list of comics an item is featured in. Closes [#19](https://github.com/Questionable-Content-Extensions/client/issues/19)
 
 ### Changed 🔧
 
diff --git a/src/components/GoToComicDialog/CollapsibleDetails/CollapsibleDetails.tsx b/src/components/GoToComicDialog/CollapsibleDetails/CollapsibleDetails.tsx
@@ -5,14 +5,20 @@ export default function CollapsibleDetails({
     children,
     initiallyOpen,
     indentChildren,
+    onToggle,
 }: {
     summary: string
     children: React.ReactNode
     initiallyOpen?: boolean
     indentChildren?: boolean
+    onToggle?: React.ReactEventHandler<HTMLDetailsElement>
 }) {
     return (
-        <details className={styles.details} open={initiallyOpen}>
+        <details
+            className={styles.details}
+            open={initiallyOpen}
+            onToggle={onToggle}
+        >
             <summary className="py-4 mb-2 flex items-center font-bold border-0 border-b border-solid border-gray-200">
                 {summary}
                 <button className="ml-auto">
diff --git a/src/components/ItemDetailsDialog/ItemDetailsDialog.stories.tsx b/src/components/ItemDetailsDialog/ItemDetailsDialog.stories.tsx
@@ -19,6 +19,7 @@ import {
 import Settings from '~/settings'
 
 import ItemDetailsDialog from './ItemDetailsDialog'
+import { FAYE_COMICS } from '../../mocks'
 
 const fayeImage: any = require('./4.png')
 
@@ -139,6 +140,16 @@ const Template: StoryFn<typeof ItemDetailsDialog> = function (
                     )
                 }
             ),
+            rest.get(
+                'http://localhost:3000/api/v2/itemdata/:itemId/comics',
+                (req, res, ctx) => {
+                    //const { itemId } = req.params
+                    return res(
+                        ctx.delay(1000 + Math.random() * 1000),
+                        ctx.json(FAYE_COMICS)
+                    )
+                }
+            ),
             rest.get(
                 'http://localhost:3000/api/v2/itemdata/:itemId/images',
                 (req, res, ctx) => {
diff --git a/src/components/ItemDetailsDialog/ItemDetailsDialog.tsx b/src/components/ItemDetailsDialog/ItemDetailsDialog.tsx
@@ -16,6 +16,7 @@ import {
 } from '@store/api/comicApiSlice'
 import {
     useAllDataQuery,
+    useComicsQuery,
     useDeleteImageMutation,
     useSetPrimaryImageMutation,
     useUploadImageMutation,
@@ -32,6 +33,7 @@ import { AppDispatch, RootState } from '@store/store'
 import constants from '~/constants'
 
 import ItemDataPanel from './ItemDataPanel/ItemDataPanel'
+import ComicList from '@components/GoToComicDialog/ComicList/ComicList'
 
 const mapState = (state: RootState) => {
     return {
@@ -63,8 +65,6 @@ type ItemDetailsDialogProps = PropsFromRedux & {
     initialItemId: number | null
 }
 
-// TODO: Find a way to list all comics this item is in
-
 function ItemDetailsDialog({
     settings,
     editorItemId,
@@ -161,6 +161,11 @@ function ItemDetailsDialog({
             : skipToken
     )
 
+    const [loadComics, setLoadComics] = useState(false)
+    const { data: itemComics, isLoading: itemComicsIsLoading } = useComicsQuery(
+        loadComics && currentItemId ? { itemId: currentItemId } : skipToken
+    )
+
     return (
         <ModalDialog
             onCloseClicked={onClose}
@@ -188,6 +193,7 @@ function ItemDetailsDialog({
                             onClose()
                         }}
                         onShowItemData={(itemId: ItemId) => {
+                            setLoadComics(false)
                             setCurrentItemId(itemId)
                         }}
                         onDeleteImage={(imageId: number) => {
@@ -210,6 +216,26 @@ function ItemDetailsDialog({
                         onUploadImage={uploadImage}
                         isUploadingImage={isUploadingImage}
                     />
+                    <CollapsibleDetails
+                        summary="Comics item is featured in"
+                        onToggle={(e) => {
+                            setLoadComics(e.currentTarget.open)
+                        }}
+                        initiallyOpen={loadComics}
+                    >
+                        <ComicList
+                            allComicData={itemComics ?? []}
+                            isLoading={itemComicsIsLoading}
+                            subDivideGotoComics={
+                                settings?.subDivideGotoComics ?? true
+                            }
+                            onGoToComic={(comic) => {
+                                setLoadComics(false)
+                                setCurrentComic(comic)
+                                onClose()
+                            }}
+                        />
+                    </CollapsibleDetails>
                     {settings?.editMode ? (
                         <CollapsibleDetails summary="Edit log for item">
                             <EditLogPanel
diff --git a/src/mocks.ts b/src/mocks.ts
@@ -272,6 +272,150 @@ export const FAYE_LOCATIONS: RelatedItem[] = [
     },
 ]
 
+export const FAYE_COMICS: ComicList[] = [
+    {
+        comic: 4805,
+        title: 'Messy Joseph',
+        tagline: 'say no more',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4801,
+        title: 'Five Bars',
+        tagline: "it's the little things",
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4800,
+        title: 'Fumigation',
+        tagline: 'smells kinda mustardy',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4799,
+        title: 'Intestinal Fortitude',
+        tagline: 'just a gut feeling',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4798,
+        title: 'Beast Mode',
+        tagline: 'then the hyenas came',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4796,
+        title: 'Pollen',
+        tagline: 'just a sneeze',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4795,
+        title: 'The Brute Force Method',
+        tagline: 'do not try this at home',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4794,
+        title: 'Skull Buddy',
+        tagline: 'explains a lot',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4793,
+        title: 'Self-Diagnostic',
+        tagline: 'haha woo',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4792,
+        title: 'Heat Shrink',
+        tagline: "it's just really fancy shrinkwrap",
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4791,
+        title: 'Does A Body Good',
+        tagline: 'humans are like 80% goop, robots are about 20%',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4790,
+        title: 'Renowned Entomologist',
+        tagline: 'some never before known to science',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4778,
+        title: 'Frankenmelon',
+        tagline: 'SO smug',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4727,
+        title: 'Stick The Pose',
+        tagline: 'who could have foreseen this',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4716,
+        title: 'Exit Strategy',
+        tagline: 'in reality, bears shit pretty much wherever they feel like',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4712,
+        title: 'The Straight And Narrow',
+        tagline: 'crimes and bad decisions are not necessarily the same thing',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4711,
+        title: 'The Dankest Emmett Lore',
+        tagline:
+            "either Emmett rules or they're a really creative liar. or both",
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4710,
+        title: 'More Emmett Lore',
+        tagline: 'the cool S...',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4705,
+        title: 'Pupating',
+        tagline: 'babies freak me out',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+    {
+        comic: 4704,
+        title: 'Wind-Blown',
+        tagline: 'all other emotions are a subset of either chomp or awoo',
+        isNonCanon: false,
+        isGuestComic: false,
+    },
+]
+
 export const MANY_IMAGES: ItemImageList[] = [
     { id: 1, crc32cHash: 0 },
     { id: 2, crc32cHash: 0 },
diff --git a/src/store/api/itemApiSlice.ts b/src/store/api/itemApiSlice.ts
@@ -1,3 +1,4 @@
+import { ComicList } from '@models/ComicList'
 import { DeleteImageBody } from '@models/DeleteImageBody'
 import { ImageId } from '@models/ImageId'
 import { Item } from '@models/Item'
@@ -69,6 +70,27 @@ export const itemApiSlice = apiSlice.injectEndpoints({
                       ]
                     : [],
         }),
+        comics: builder.query<ComicList[], GetDataQueryArgs>({
+            query: ({ itemId }) => {
+                return {
+                    url: `${constants.itemDataEndpoint}${itemId}/comics`,
+                }
+            },
+            transformResponse: transformResponseByJsonParseResultText,
+            providesTags: (result, _error, args) =>
+                result
+                    ? [
+                          {
+                              type: 'Item',
+                              id: `${args.itemId}-comics`,
+                          },
+                          {
+                              type: 'Item',
+                              id: `${args.itemId}-data`,
+                          },
+                      ]
+                    : [],
+        }),
         imageData: builder.query<ItemImageList[], GetDataQueryArgs>({
             query: ({ itemId }) => {
                 return {
@@ -284,6 +306,7 @@ export const itemApiSlice = apiSlice.injectEndpoints({
 export const {
     useAllItemsQuery,
     useGetItemDataQuery,
+    useComicsQuery,
     useImageDataQuery,
     useFriendDataQuery,
     useLocationDataQuery,
