feat: make it possible to navigate to a random comic by item

Closes #20

Author: ilyvion

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   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)
 -   Added feature and setting for whether to show the current comic's tagline as its tooltip. Closes [#47](https://github.com/Questionable-Content-Extensions/client/issues/47)
+-   Added feature and setting for being able to navigate to random comics by item. Closes [#20](https://github.com/Questionable-Content-Extensions/client/issues/20)
 
 ### Changed 🔧
 

src/components/ComicDetailsPanel/ComicDetailsPanel.tsx

@@ -242,7 +242,6 @@ function ComicDetailsPanel({
                 <ErrorPresenter error={comicDataError} />
             )}
             <ItemNavigation
-                currentComic={currentComic}
                 itemNavigationData={comicItems ?? []}
                 isLoading={isLoadingInitial}
                 isFetching={isFetching}
@@ -324,7 +323,6 @@ function ComicDetailsPanel({
                     <>
                         <hr className="my-4 mx-0 border-solid border-b max-w-none" />
                         <FilteredNavigationData
-                            currentComic={currentComic}
                             isLoading={isLoadingInitial}
                             isFetching={isFetching}
                             isSaving={isSaving}

src/components/ComicDetailsPanel/ItemNavigation/ItemNavigation.stories.tsx

@@ -1,4 +1,6 @@
 import { NavElementMode } from '@components/NavElement/NavElement'
+import { setCurrentComic } from '@store/comicSlice'
+import store from '@store/store'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { COMIC_DATA_666_HYDRATED_ITEMS } from '~/mocks'
@@ -28,12 +30,17 @@ const Template: StoryFn<typeof ItemNavigation> = (args) => {
             | NavElementMode.Missing
     }
 
+    const state = store.getState()
+
+    if (state.comic.current !== 666) {
+        store.dispatch(setCurrentComic(666))
+    }
+
     return <ItemNavigation {...args} />
 }
 
 export const Default = Template.bind({})
 Default.args = {
-    currentComic: 666,
     itemNavigationData: COMIC_DATA_666_HYDRATED_ITEMS,
     useColors: true,
     isLoading: false,

src/components/ComicDetailsPanel/ItemNavigation/ItemNavigation.tsx

@@ -4,15 +4,13 @@ import InlineSpinner from '@components/InlineSpinner'
 import NavElement, { NavElementMode } from '@components/NavElement/NavElement'
 import Spinner from '@components/Spinner'
 import useItemNavigationDataByType from '@hooks/useItemNavigationDataByType'
-import { ComicId } from '@models/ComicId'
 import { HydratedItemNavigationData } from '@models/HydratedItemData'
 import { ItemId } from '@models/ItemId'
 
 import { PickEnum } from '~/tsUtils'
 
 export default function ItemNavigation({
     itemNavigationData,
-    currentComic,
     isLoading,
     isFetching,
     useColors,
@@ -24,7 +22,6 @@ export default function ItemNavigation({
     onAddItem,
 }: {
     itemNavigationData: HydratedItemNavigationData[]
-    currentComic: ComicId
     isLoading: boolean
     isFetching: boolean
     useColors: boolean
@@ -46,7 +43,6 @@ export default function ItemNavigation({
             return (
                 <NavElement
                     key={item.id}
-                    currentComic={currentComic}
                     item={item}
                     onSetCurrentComic={onSetCurrentComic}
                     useColors={useColors}
@@ -66,7 +62,6 @@ export default function ItemNavigation({
             onSetCurrentComic,
             onShowInfoFor,
             useColors,
-            currentComic,
         ]
     )
 

src/components/EditorModePanel/EditorModePanel.tsx

@@ -268,7 +268,6 @@ function EditorModePanel({
                 <>
                     <MissingNavElement
                         navigationData={editorData.missing.cast}
-                        currentComic={currentComic}
                         title="Missing cast"
                         description="Navigate to comics without cast members"
                         onSetCurrentComic={setCurrentComic}
@@ -277,7 +276,6 @@ function EditorModePanel({
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.location}
-                        currentComic={currentComic}
                         title="Missing location"
                         description="Navigate to comics without locations"
                         onSetCurrentComic={setCurrentComic}
@@ -286,7 +284,6 @@ function EditorModePanel({
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.storyline}
-                        currentComic={currentComic}
                         title="Missing storyline"
                         description="Navigate to comics without storylines"
                         onSetCurrentComic={setCurrentComic}
@@ -295,7 +292,6 @@ function EditorModePanel({
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.title}
-                        currentComic={currentComic}
                         title="Missing title"
                         description="Navigate to comics without a title"
                         onSetCurrentComic={setCurrentComic}
@@ -304,7 +300,6 @@ function EditorModePanel({
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.tagline}
-                        currentComic={currentComic}
                         title="Missing tagline"
                         description="Navigate to comics without a tagline"
                         onSetCurrentComic={setCurrentComic}

src/components/EditorModePanel/MissingNavElement/MissingNavElement.tsx

@@ -1,19 +1,16 @@
 import NavElement, { NavElementMode } from '@components/NavElement/NavElement'
-import { ComicId } from '@models/ComicId'
 import { NavigationData } from '@models/NavigationData'
 
 // TODO: Set up stories for `MissingNavElement`
 export default function MissingNavElement({
     navigationData,
-    currentComic,
     id,
     title,
     description,
     onSetCurrentComic,
     useColors,
 }: {
     navigationData: NavigationData | null
-    currentComic: ComicId
     id: number
     title: string
     description: string
@@ -38,7 +35,6 @@ export default function MissingNavElement({
                         type: 'cast',
                         count: 0,
                     }}
-                    currentComic={currentComic}
                     onSetCurrentComic={onSetCurrentComic}
                     useColors={useColors}
                     onShowInfoFor={() => {}}

src/components/FilteredNavigationData/FilteredNavigationData.stories.tsx

@@ -1,3 +1,5 @@
+import { setCurrentComic } from '@store/comicSlice'
+import store from '@store/store'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { COMIC_DATA_666_HYDRATED_ITEMS } from '~/mocks'
@@ -9,12 +11,17 @@ export default {
 } as Meta<typeof FilteredNavigationData>
 
 const Template: StoryFn<typeof FilteredNavigationData> = (args) => {
+    const state = store.getState()
+
+    if (state.comic.current !== 666) {
+        store.dispatch(setCurrentComic(666))
+    }
+
     return <FilteredNavigationData {...args} />
 }
 
 export const Default = Template.bind({})
 Default.args = {
-    currentComic: 666,
     editMode: false,
     isFetching: false,
     isLoading: false,

src/components/FilteredNavigationData/FilteredNavigationData.tsx

@@ -11,7 +11,6 @@ import { ItemId } from '@models/ItemId'
 import { ItemType } from '@models/ItemType'
 
 export default function FilteredNavigationData({
-    currentComic,
     isLoading,
     isFetching,
     isSaving,
@@ -23,7 +22,6 @@ export default function FilteredNavigationData({
     editMode,
     onAddItem,
 }: {
-    currentComic: ComicId
     isLoading: boolean
     isFetching: boolean
     isSaving: boolean
@@ -73,7 +71,6 @@ export default function FilteredNavigationData({
             {(filteredItemData.length > 0 || isLoading) && !hasError ? (
                 <div className="overflow-y-auto overflow-x-hidden max-h-52">
                     <ItemNavigation
-                        currentComic={currentComic}
                         itemNavigationData={filteredItemData}
                         isLoading={isLoading}
                         isFetching={isFetching}

src/components/ItemDetailsDialog/ItemDetails/ItemDetails.tsx

@@ -24,7 +24,6 @@ import ValueEditor from './ValueEditor/ValueEditor'
 
 const mapState = (state: RootState) => {
     return {
-        currentComic: state.comic.current,
         name: state.itemEditor.name,
         isNameDirty: isNameDirtySelector(state),
         shortName: state.itemEditor.shortName,
@@ -63,7 +62,6 @@ type ItemDetailsProps = PropsFromRedux & {
 }
 
 export function ItemDetails({
-    currentComic,
     name,
     isNameDirty,
     shortName,
@@ -228,7 +226,6 @@ export function ItemDetails({
                 <strong>Navigation bar preview:</strong>
             </p>
             <NavElement
-                currentComic={currentComic}
                 item={{
                     id: item.id,
                     shortName: item.shortName,

src/components/NavElement/NavElement.stories.tsx

@@ -1,8 +1,12 @@
+import { setCurrentComic } from '@store/comicSlice'
+import { setSettings } from '@store/settingsSlice'
+import store from '@store/store'
 import { expect } from '@storybook/jest'
 import { Meta, StoryFn } from '@storybook/react'
 import { userEvent, within } from '@storybook/testing-library'
 
-import { MARTEN, MARTEN_HYDRATED, MARTEN_ITEM } from '~/mocks'
+import { MARTEN, MARTEN_HYDRATED, MARTEN_ITEM, useMswReady } from '~/mocks'
+import Settings from '~/settings'
 
 import NavElement, { NavElementMode } from './NavElement'
 
@@ -18,23 +22,65 @@ export default {
                 NavElementMode[NavElementMode.Preview],
             ],
         },
+        onSetCurrentComic: { action: 'onSetCurrentComic' },
+        onShowInfoFor: { action: 'onShowInfoFor' },
+        onAddItem: { action: 'onAddItem' },
+        onRemoveItem: { action: 'onRemoveItem' },
     },
 } as Meta<typeof NavElement>
 
-const Template: StoryFn<typeof NavElement> = (args) => {
+const Template: StoryFn<typeof NavElement> = function (
+    this: { withRandom?: boolean },
+    args
+) {
+    const mswReady = useMswReady()
+
+    const state = store.getState()
+
+    if (state.comic.current !== 666) {
+        store.dispatch(setCurrentComic(666))
+    }
+    if (this.withRandom && !state.settings.values?.showItemRandomButton) {
+        store.dispatch(
+            setSettings({
+                ...Settings.DEFAULTS,
+                showItemRandomButton: true,
+            })
+        )
+    } else if (
+        !this.withRandom &&
+        state.settings.values?.showItemRandomButton
+    ) {
+        store.dispatch(
+            setSettings({
+                ...Settings.DEFAULTS,
+                showItemRandomButton: false,
+            })
+        )
+    }
+
+    const { worker, rest } = window.msw
+    worker.use(
+        rest.get(
+            'http://localhost:3000/api/v2/itemdata/1/comics/random',
+            (req, res, ctx) => {
+                return res(ctx.json(4269))
+            }
+        )
+    )
+
     // For better Storybook experience, we pretend this field is a string
     // and then turn it into a number here
     const mode = args.mode
     if (typeof mode === 'string') {
         args.mode = NavElementMode[mode] as unknown as NavElementMode
     }
 
-    return <NavElement {...args} />
+    return mswReady ? <NavElement {...args} /> : <></>
 }
 
 export const Default = Template.bind({})
 Default.args = {
-    currentComic: 666,
     item: MARTEN_HYDRATED,
     useColors: true,
     mode: NavElementMode[NavElementMode.Present] as unknown as NavElementMode,
@@ -96,3 +142,8 @@ EditModeMissing.play = ({ canvasElement, args }) => {
     userEvent.click(canvas.getByTitle('Add Marten to comic'))
     expect(args.onAddItem).toBeCalledWith(MARTEN.id)
 }
+
+export const WithRandomButton = Template.bind({ withRandom: true })
+WithRandomButton.args = {
+    ...Default.args,
+}