chore: merge pull request #82 from Questionable-Content-Extensions/hotfix/1.2.1

Hotfix version 1.2.1

Author: ilyvion

.github/workflows/draft_new_hotfix.yml

@@ -0,0 +1,62 @@
+name: 'Draft new hotfix'
+
+on:
+    workflow_dispatch:
+        inputs:
+            version:
+                description: 'The version you want to hotfix.'
+                required: true
+
+jobs:
+    draft-new-hotfix:
+        name: 'Draft a new hotfix'
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Create hotfix branch
+              run: git checkout -b hotfix/${{ github.event.inputs.version }}
+
+            - name: Update changelog
+              uses: thomaseizinger/[email protected]
+              with:
+                  version: ${{ github.event.inputs.version }}
+
+            # In order to make a commit, we need to initialize a user.
+            - name: Initialize mandatory git config
+              run: |
+                  git config user.name "GitHub Actions"
+                  git config user.email [email protected]
+
+            # This step will differ depending on your project setup
+            # Fortunately, yarn has a built-in command for doing this!
+            - name: Bump version in package.json
+              run: npm version ${{ github.event.inputs.version }} --no-git-tag-version
+
+            - name: Commit changelog and manifest files
+              id: make-commit
+              run: |
+                  git add CHANGELOG.md package.json
+                  git commit --message "chore: prepare hotfix ${{ github.event.inputs.version }}"
+
+                  echo "::set-output name=commit::$(git rev-parse HEAD)"
+
+            - name: Push new branch
+              run: git push origin hotfix/${{ github.event.inputs.version }}
+
+            - name: Create pull request
+              uses: thomaseizinger/[email protected]
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  head: hotfix/${{ github.event.inputs.version }}
+                  base: main
+                  title: Hotfix version ${{ github.event.inputs.version }}
+                  reviewers: ${{ github.actor }}
+                  body: |
+                      Hi @${{ github.actor }}!
+
+                      This PR was created in response to a manual trigger of the hotfix workflow here: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}.
+                      I've updated the changelog and bumped the versions in the manifest files in this commit: ${{ steps.make-commit.outputs.commit }}.
+
+                      Merging this PR will create a GitHub release and upload any assets that are created as part of the release build.

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] - 2023-09-22
+
+### Fixed 🐛
+
+-   Use the current edit values to render the item details so they update live when they're changed
+-   Fix broken Redux thunks during earlier refactoring that prevented editors from being able to update and save comic values
+
 ## [1.2.0] - 2023-09-20
 
 ### Added ✨
@@ -385,6 +392,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [0.1.0]: https://github.com/Questionable-Content-Extensions/client/releases/tag/0.1.0
 [issues]: https://github.com/Questionable-Content-Extensions/client/issues
 [1.0.0]: https://github.com/Questionable-Content-Extensions/client/compare/0.6.2...1.0.0
-[Unreleased]: https://github.com/Questionable-Content-Extensions/client/compare/1.2.0...HEAD
+[Unreleased]: https://github.com/Questionable-Content-Extensions/client/compare/1.2.1...HEAD
+[1.2.1]: https://github.com/Questionable-Content-Extensions/client/compare/1.2.0...1.2.1
 [1.2.0]: https://github.com/Questionable-Content-Extensions/client/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/Questionable-Content-Extensions/client/compare/1.0.0...1.1.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "questionable-content-spa",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "Questionable Content Single-Page Application with Extra Features",
     "private": true,
     "scripts": {

src/components/EditorModePanel/EditorModePanel.tsx

@@ -213,7 +213,7 @@ export default function EditorModePanel() {
             }
             onSubmit={(e) => {
                 e.preventDefault()
-                saveChanges()
+                dispatch(saveChanges())
             }}
         >
             <div className="flex justify-between border-b border-solid border-b-stone-300 border-l-0 border-t-0 border-r-0 -mx-2 -mt-2 mb-2">
@@ -229,39 +229,39 @@ export default function EditorModePanel() {
                         navigationData={editorData.missing.cast}
                         title="Missing cast"
                         description="Navigate to comics without cast members"
-                        onSetCurrentComic={setCurrentComic}
+                        onSetCurrentComic={(c) => dispatch(setCurrentComic(c))}
                         id={-1}
                         useColors={settings.useColors}
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.location}
                         title="Missing location"
                         description="Navigate to comics without locations"
-                        onSetCurrentComic={setCurrentComic}
+                        onSetCurrentComic={(c) => dispatch(setCurrentComic(c))}
                         id={-2}
                         useColors={settings.useColors}
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.storyline}
                         title="Missing storyline"
                         description="Navigate to comics without storylines"
-                        onSetCurrentComic={setCurrentComic}
+                        onSetCurrentComic={(c) => dispatch(setCurrentComic(c))}
                         id={-3}
                         useColors={settings.useColors}
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.title}
                         title="Missing title"
                         description="Navigate to comics without a title"
-                        onSetCurrentComic={setCurrentComic}
+                        onSetCurrentComic={(c) => dispatch(setCurrentComic(c))}
                         id={-4}
                         useColors={settings.useColors}
                     />
                     <MissingNavElement
                         navigationData={editorData.missing.tagline}
                         title="Missing tagline"
                         description="Navigate to comics without a tagline"
-                        onSetCurrentComic={setCurrentComic}
+                        onSetCurrentComic={(c) => dispatch(setCurrentComic(c))}
                         id={-5}
                         useColors={settings.useColors}
                     />
@@ -280,7 +280,7 @@ export default function EditorModePanel() {
                     label="Title"
                     inputId="qcext-comic-title"
                     value={title}
-                    onValueChange={setTitle}
+                    onValueChange={(t) => dispatch(setTitle(t))}
                     dirty={isTitleDirty}
                 />
             </ExpandingEditor>
@@ -295,7 +295,7 @@ export default function EditorModePanel() {
                     label="Tagline"
                     inputId="qcext-comic-tagline"
                     value={tagline}
-                    onValueChange={setTagline}
+                    onValueChange={(t) => dispatch(setTagline(t))}
                     dirty={isTaglineDirty}
                 />
             </ExpandingEditor>
@@ -312,9 +312,11 @@ export default function EditorModePanel() {
                     inputId="qcext-comic-publish-date"
                     dateValue={publishDate}
                     isAccurateValue={isAccuratePublishDate}
-                    onDateValueChange={(date) => setPublishDate(date)}
+                    onDateValueChange={(date) => dispatch(setPublishDate(date))}
                     onIsAccurateValueChange={(isAccuratePublishDate) =>
-                        setIsAccuratePublishDate(isAccuratePublishDate)
+                        dispatch(
+                            setIsAccuratePublishDate(isAccuratePublishDate)
+                        )
                     }
                     isDateValueDirty={isPublishDateDirty}
                     isIsAccurateValueDirty={isIsAccuratePublishDateDirty}

src/components/ItemDetailsDialog/ItemDataPanel/ItemDataPanel.tsx

@@ -7,6 +7,7 @@ import { ItemImageList as ItemImageData } from '@models/ItemImageList'
 import { ItemType } from '@models/ItemType'
 import { RelatedItem as ItemRelationData } from '@models/RelatedItem'
 import { UploadImageArgs } from '@store/api/itemApiSlice'
+import { useAppSelector } from '@store/hooks'
 
 import { createTintOrShade } from '~/color'
 
@@ -44,6 +45,9 @@ export default function ItemDataPanel({
     onUploadImage: (args: UploadImageArgs) => Promise<unknown>
     isUploadingImage: boolean
 }) {
+    const shortName = useAppSelector((state) => state.itemEditor.shortName)
+    const color = useAppSelector((state) => state.itemEditor.color)
+
     if (hasError) {
         return (
             <div className="text-center">
@@ -74,18 +78,18 @@ export default function ItemDataPanel({
         )
     }
 
-    let backgroundColor = itemData.color
+    let backgroundColor = color
     if (!backgroundColor.startsWith('#')) {
         backgroundColor = `#${backgroundColor}`
     }
-    const foregroundColor = createTintOrShade(itemData.color)
+    const foregroundColor = createTintOrShade(color)
 
     return (
         <>
             <div className="grid grid-cols-2 gap-4">
                 <ItemImageViewer
                     itemId={itemData.id}
-                    itemShortName={itemData.shortName}
+                    itemShortName={shortName}
                     primaryImage={itemData.primaryImage}
                     itemImageData={itemImageData}
                     itemDataUrl={itemDataUrl}

src/components/ItemDetailsDialog/ItemDetails/ItemDetails.tsx

@@ -204,10 +204,10 @@ export default function ItemDetails({
             <NavElement
                 item={{
                     id: item.id,
-                    shortName: item.shortName,
-                    name: item.name,
+                    shortName: shortName,
+                    name: name,
                     type: item.type,
-                    color: item.color,
+                    color: color,
                     first: item.first,
                     previous: item.first,
                     next: item.last,

src/components/ItemDetailsDialog/ItemDetailsDialog.tsx

@@ -47,6 +47,7 @@ export default function ItemDetailsDialog({
     const isItemDirty = useAppSelector((state) => isStateDirtySelector(state))
     const currentComic = useAppSelector((state) => state.comic.current)
     const lockedToItem = useAppSelector((state) => state.comic.lockedToItem)
+    const itemName = useAppSelector((state) => state.itemEditor.name)
 
     const [previousInitialItemId, setPreviousInitialItemId] = useState<
         number | null
@@ -114,8 +115,8 @@ export default function ItemDetailsDialog({
         if (isItemDataFetching) {
             return 'Loading...'
         }
-        return itemData?.name ?? 'Loading...'
-    }, [hasAllItemDataError, hasItemDataError, isItemDataFetching, itemData])
+        return itemName ?? 'Loading...'
+    }, [hasAllItemDataError, hasItemDataError, isItemDataFetching, itemName])
 
     const {
         data: itemLogs,