feat: add option for sorting members by recent apperance

ilyvion · ilyvion · commit 0f8a9fd72812 · 2024-02-03T08:46:29.000+01:00
in addition to the existing option of sorting by number of appearances. Closes #87
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added ✨
+
+-   Add option for sorting members by recent apperance in addition to the existing option of sorting by number of appearances. Closes [#87](https://github.com/Questionable-Content-Extensions/client/issues/87)
+
 ## [1.2.1] - 2023-09-22
 
 ### Fixed 🐛
diff --git a/src/components/ComicDetailsPanel/ComicDetailsPanel.tsx b/src/components/ComicDetailsPanel/ComicDetailsPanel.tsx
@@ -276,6 +276,7 @@ export default function ComicDetailsPanel() {
                 isLoading={isLoadingInitial}
                 isFetching={isFetching}
                 useColors={settings.useColors}
+                orderMembersByLastAppearance={false}
                 onSetCurrentComic={(c, locked) =>
                     dispatch(setCurrentComic(c, { locked }))
                 }
@@ -368,6 +369,9 @@ export default function ComicDetailsPanel() {
                             }
                             useColors={settings.useColors}
                             editMode={settings.editMode}
+                            orderMembersByLastAppearance={
+                                settings.orderMembersByLastAppearance
+                            }
                             onAddItem={(itemBody) => {
                                 addItem({
                                     token: settings.editModeToken,
diff --git a/src/components/ComicDetailsPanel/ItemNavigation/ItemNavigation.tsx b/src/components/ComicDetailsPanel/ItemNavigation/ItemNavigation.tsx
@@ -15,6 +15,7 @@ export default function ItemNavigation({
     isLoading,
     isFetching,
     useColors,
+    orderMembersByLastAppearance,
     onSetCurrentComic,
     onShowInfoFor,
     mode,
@@ -27,6 +28,7 @@ export default function ItemNavigation({
     isLoading: boolean
     isFetching: boolean
     useColors: boolean
+    orderMembersByLastAppearance: boolean
     onSetCurrentComic: (comicNo: ComicId, locked: boolean) => void
     onShowInfoFor: (item: ItemId) => void
     mode: PickEnum<
@@ -76,8 +78,16 @@ export default function ItemNavigation({
             location: location.map(itemNavigationToNavElement),
             storyline: storyline.map(itemNavigationToNavElement),
             locked: locked.map(itemNavigationToNavElement),
+            all: itemNavigationData.map(itemNavigationToNavElement),
         }
-    }, [cast, location, storyline, locked, itemNavigationToNavElement])
+    }, [
+        cast,
+        location,
+        storyline,
+        locked,
+        itemNavigationData,
+        itemNavigationToNavElement,
+    ])
 
     if (isLoading) {
         return (
@@ -98,42 +108,55 @@ export default function ItemNavigation({
         return <></>
     }
 
-    return (
-        <div className="text-center">
-            {!!itemNavElements.locked.length && (
-                <ItemTypeSection
-                    header="Navigation Locked"
-                    isFetching={isFetching}
-                    mode={mode}
-                    elements={itemNavElements.locked}
-                />
-            )}
-            {!!itemNavElements.cast.length && (
-                <ItemTypeSection
-                    header="Cast Members"
-                    isFetching={isFetching}
-                    mode={mode}
-                    elements={itemNavElements.cast}
-                />
-            )}
-            {!!itemNavElements.location.length && (
-                <ItemTypeSection
-                    header="Locations"
-                    isFetching={isFetching}
-                    mode={mode}
-                    elements={itemNavElements.location}
-                />
-            )}
-            {!!itemNavElements.storyline.length && (
+    if (!orderMembersByLastAppearance) {
+        return (
+            <div className="text-center">
+                {!!itemNavElements.locked.length && (
+                    <ItemTypeSection
+                        header="Navigation Locked"
+                        isFetching={isFetching}
+                        mode={mode}
+                        elements={itemNavElements.locked}
+                    />
+                )}
+                {!!itemNavElements.cast.length && (
+                    <ItemTypeSection
+                        header="Cast Members"
+                        isFetching={isFetching}
+                        mode={mode}
+                        elements={itemNavElements.cast}
+                    />
+                )}
+                {!!itemNavElements.location.length && (
+                    <ItemTypeSection
+                        header="Locations"
+                        isFetching={isFetching}
+                        mode={mode}
+                        elements={itemNavElements.location}
+                    />
+                )}
+                {!!itemNavElements.storyline.length && (
+                    <ItemTypeSection
+                        header="Storylines"
+                        isFetching={isFetching}
+                        mode={mode}
+                        elements={itemNavElements.storyline}
+                    />
+                )}
+            </div>
+        )
+    } else {
+        return (
+            <div className="text-center">
                 <ItemTypeSection
-                    header="Storylines"
+                    header="Recent"
                     isFetching={isFetching}
                     mode={mode}
-                    elements={itemNavElements.storyline}
+                    elements={itemNavElements.all}
                 />
-            )}
-        </div>
-    )
+            </div>
+        )
+    }
 }
 
 function ItemTypeSection({
diff --git a/src/components/FilteredNavigationData/FilteredNavigationData.tsx b/src/components/FilteredNavigationData/FilteredNavigationData.tsx
@@ -24,6 +24,7 @@ export default function FilteredNavigationData({
     onSetCurrentComic,
     onShowInfoFor,
     useColors,
+    orderMembersByLastAppearance,
     editMode,
     onAddItem,
 }: {
@@ -35,6 +36,7 @@ export default function FilteredNavigationData({
     onSetCurrentComic: (comicId: ComicId) => void
     onShowInfoFor: (item: ItemId) => void
     useColors: boolean
+    orderMembersByLastAppearance: boolean
     editMode: boolean
     onAddItem: (item: ItemBody) => void
 }) {
@@ -80,6 +82,9 @@ export default function FilteredNavigationData({
                         isLoading={isLoading}
                         isFetching={isFetching}
                         useColors={useColors}
+                        orderMembersByLastAppearance={
+                            orderMembersByLastAppearance
+                        }
                         onSetCurrentComic={onSetCurrentComic}
                         onShowInfoFor={onShowInfoFor}
                         mode={NavElementMode.Missing}
diff --git a/src/components/SettingsDialog/SettingsPanel/SettingsPanel.tsx b/src/components/SettingsDialog/SettingsPanel/SettingsPanel.tsx
@@ -33,6 +33,18 @@ export default function SettingsPanel({
                     "treated like it's enabled, as an editor needs a list of all the cast to do their job effectively."
                 }
             />
+            <ToggleSetting
+                settings={settings}
+                setting="orderMembersByLastAppearance"
+                updateSettings={updateSettings}
+                label="Order members by last appearance"
+                description={
+                    "Ordinarily, members are ordered by how frequently they appear in the comic's strips. " +
+                    "By enabling this setting, they will instead be ordered by how recently they've appeared in the comic " +
+                    "relative to the currently viewed comic. This can be useful if you're an editor because the comic tends " +
+                    'to focus on a set of characters and locations in bulk, which makes finding them easier with this setting on.'
+                }
+            />
             <ToggleSetting
                 settings={settings}
                 setting="skipNonCanon"
diff --git a/src/models/ByIdQuery.ts b/src/models/ByIdQuery.ts
@@ -1,10 +1,12 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 import type { Exclusion } from './Exclusion'
 import type { Inclusion } from './Inclusion'
+import type { Sorting } from './Sorting'
 import type { Token } from './Token'
 
 export interface ByIdQuery {
     token?: Token
     exclude?: Exclusion
     include?: Inclusion
+    sorting?: Sorting
 }
diff --git a/src/models/Sorting.ts b/src/models/Sorting.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Sorting = 'by-count' | 'by-last-appearance'
diff --git a/src/settings.ts b/src/settings.ts
@@ -21,6 +21,7 @@ export interface SettingValues {
     scrollToTop: boolean
 
     showAllMembers: boolean
+    orderMembersByLastAppearance: boolean
     useColors: boolean
     showItemRandomButton: boolean
     showItemChainButton: boolean
@@ -92,6 +93,7 @@ export class Settings {
         scrollToTop: true,
 
         showAllMembers: false,
+        orderMembersByLastAppearance: false,
         useColors: true,
         showItemRandomButton: false,
         showItemChainButton: false,
diff --git a/src/store/api/comicApiSlice.ts b/src/store/api/comicApiSlice.ts
@@ -30,6 +30,7 @@ export type GetDataQueryArgs = {
     skipGuest: boolean
     skipNonCanon: boolean
     showAllMembers: boolean
+    orderMembersByLastAppearance: boolean
 }
 
 export type GetExcludedQueryArgs = {
@@ -73,6 +74,7 @@ export const comicApiSlice = apiSlice.injectEndpoints({
                 skipGuest,
                 skipNonCanon,
                 showAllMembers,
+                orderMembersByLastAppearance,
             }) => {
                 const urlParameters: ByIdQuery = {}
                 if (editModeToken) {
@@ -86,6 +88,11 @@ export const comicApiSlice = apiSlice.injectEndpoints({
                 if (showAllMembers || editModeToken) {
                     urlParameters.include = 'all'
                 }
+                if (orderMembersByLastAppearance) {
+                    urlParameters.sorting = 'by-last-appearance'
+                } else {
+                    urlParameters.sorting = 'by-count'
+                }
                 const urlQuery = new URLSearchParams(
                     urlParameters as Record<string, string>
                 ).toString()
@@ -392,6 +399,7 @@ export function toGetDataQueryArgs(
         comic,
         editModeToken: settings.editMode ? settings.editModeToken : undefined,
         showAllMembers: settings.showAllMembers,
+        orderMembersByLastAppearance: settings.orderMembersByLastAppearance,
         skipGuest: settings.skipGuest,
         skipNonCanon: settings.skipNonCanon,
     }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.`
	`2`	`+`
	`3`	`+export type Sorting = 'by-count' \| 'by-last-appearance'`