Merge pull request #1503 from klembot/fix-story-list-sorting

Fix date sorting in story list, use Lodash ES

.github/workflows/prettify-prs.yml

@@ -20,5 +20,4 @@ jobs:
       - name: Prettify code
         uses: creyD/[email protected]
         with:
-          only_changed: True
-          github_token: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
+          only_changed: True

jest.config.js

@@ -11,6 +11,6 @@ module.exports = {
 	roots: ['<rootDir>/src'],
 	setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
 	testEnvironment: 'jest-environment-jsdom',
-	// segseg is an ESM-only module.
-	transformIgnorePatterns: ['node_modules/(?!(segseg)/)']
+	// lodash and segseg are ESM-only modules.
+	transformIgnorePatterns: ['node_modules/(?!(lodash-es|segseg)/)']
 };

package.json

@@ -31,7 +31,7 @@
 		"i18next-http-backend": "^1.1.1",
 		"is-absolute-url": "^3.0.3",
 		"jsonp": "^0.2.1",
-		"lodash": "^4.17.21",
+		"lodash-es": "^4.17.21",
 		"minimist": "^1.2.8",
 		"mkdir-promise": "^1.0.0",
 		"node-fetch": "^2.6.7",
@@ -74,6 +74,7 @@
 		"@types/jest-axe": "^3.5.1",
 		"@types/jsonp": "^0.2.1",
 		"@types/lodash": "^4.14.168",
+		"@types/lodash-es": "^4.17.12",
 		"@types/minimist": "^1.2.3",
 		"@types/node": "^20.8.4",
 		"@types/node-fetch": "^2.6.1",

src/dialogs/context/reducer.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import isEqual from 'lodash/isEqual';
+import {isEqual} from 'lodash-es';
 import {DialogsAction, DialogsState} from '../dialogs.types';
 
 export const reducer: React.Reducer<DialogsState, DialogsAction> = (

src/routes/story-list/__mocks__/story-cards.tsx

@@ -1,3 +1,10 @@
 import * as React from 'react';
+import {StoryCardsProps} from '../story-cards';
 
-export const StoryCards = () => <div data-testid="mock-story-cards" />;
+export const StoryCards = ({stories}: StoryCardsProps) => (
+	<div data-testid="mock-story-cards">
+		{stories.map(story => (
+			<div data-testid="mock-story-card" data-id={story.id} key={story.id} />
+		))}
+	</div>
+);

src/routes/story-list/__tests__/story-list-route.test.tsx

@@ -54,6 +54,46 @@ describe('<StoryListRoute>', () => {
 		expect(screen.getByText('routes.storyList.noStories')).toBeInTheDocument();
 	});
 
+	it('sorts stories by name if the user pref is set to that', () => {
+		const story1 = fakeStory();
+		const story2 = fakeStory();
+
+		story1.name = 'a';
+		story1.lastUpdate = new Date('1/1/2000');
+		story2.name = 'b';
+		story2.lastUpdate = new Date('1/1/1999');
+		renderComponent({
+			prefs: {storyListSort: 'name'},
+			stories: [story2, story1]
+		});
+
+		const storyCards = screen.getAllByTestId('mock-story-card');
+
+		expect(storyCards.length).toBe(2);
+		expect(storyCards[0].dataset.id).toBe(story1.id);
+		expect(storyCards[1].dataset.id).toBe(story2.id);
+	});
+
+	it('sorts stories by reverse chronological edit order if the user pref is set to that', () => {
+		const story1 = fakeStory();
+		const story2 = fakeStory();
+
+		story1.name = 'b';
+		story1.lastUpdate = new Date('1/1/2000');
+		story2.name = 'a';
+		story2.lastUpdate = new Date('1/1/1999');
+		renderComponent({
+			prefs: {storyListSort: 'date'},
+			stories: [story2, story1]
+		});
+
+		const storyCards = screen.getAllByTestId('mock-story-card');
+
+		expect(storyCards.length).toBe(2);
+		expect(storyCards[0].dataset.id).toBe(story1.id);
+		expect(storyCards[1].dataset.id).toBe(story2.id);
+	});
+
 	it('displays a donation prompt if useDonationCheck() says it should be shown', () => {
 		useDonationCheckMock.mockReturnValue({
 			shouldShowDonationPrompt: () => true
@@ -69,11 +109,11 @@ describe('<StoryListRoute>', () => {
 		});
 
 		renderComponent();
-		expect(screen.queryByText('dialogs.appDonation.title')).not.toBeInTheDocument();
+		expect(
+			screen.queryByText('dialogs.appDonation.title')
+		).not.toBeInTheDocument();
 	});
 
-	it.todo('publishes a story when a story card asks to be published');
-
 	it('is accessible', async () => {
 		const {container} = renderComponent();
 

src/routes/story-list/story-list-route.tsx

@@ -1,4 +1,4 @@
-import sortBy from 'lodash/sortBy';
+import {orderBy} from 'lodash-es';
 import * as React from 'react';
 import {useTranslation} from 'react-i18next';
 import {MainContent} from '../../components/container/main-content';
@@ -43,9 +43,9 @@ export const InnerStoryListRoute: React.FC = () => {
 
 		switch (prefs.storyListSort) {
 			case 'date':
-				return sortBy(filteredStories, 'lastUpdated');
+				return orderBy(filteredStories, ['lastUpdate'], ['desc']);
 			case 'name':
-				return sortBy(filteredStories, 'name');
+				return orderBy(filteredStories, 'name');
 		}
 	}, [prefs.storyListSort, prefs.storyListTagFilter, stories]);
 

src/store/stories/action-creators/update-passage.ts

@@ -1,4 +1,4 @@
-import escapeRegExp from 'lodash/escapeRegExp';
+import {escapeRegExp} from 'lodash-es';
 import {Thunk} from 'react-hook-thunk-reducer';
 import {storyWithId} from '../getters';
 import {Passage, StoriesAction, StoriesState, Story} from '../stories.types';

src/store/stories/getters.ts

@@ -1,5 +1,5 @@
 import Fuse from 'fuse.js';
-import uniq from 'lodash/uniq';
+import {uniq} from 'lodash-es';
 import {Passage, StorySearchFlags, Story} from './stories.types';
 import {createRegExp} from '../../util/regexp';
 import {parseLinks} from '../../util/parse-links';

src/util/__tests__/publish.test.ts

@@ -1,4 +1,4 @@
-import escape from 'lodash/escape';
+import {escape} from 'lodash-es';
 import * as publish from '../publish';
 import {AppInfo} from '../app-info';
 import {Passage, Story} from '../../store/stories';

src/util/import.ts

@@ -5,7 +5,7 @@
 // affects startup time in the Twine desktop app. This module moves data from
 // the filesystem into local storage, and the app can't begin until it's done.
 
-import defaults from 'lodash/defaults';
+import {defaults} from 'lodash-es';
 import uuid from 'tiny-uuid';
 import {passageDefaults, storyDefaults, Passage, Story} from '../store/stories';
 

src/util/parse-links.ts

@@ -3,7 +3,7 @@ Parses passage text for links. Optionally, it returns internal links only --
 e.g. those pointing to other passages in a story, not to an external web site.
 */
 
-import uniq from 'lodash/uniq';
+import {uniq} from 'lodash-es';
 
 // The top level regular expression to catch links -- i.e. [[link]].
 const extractLinkTags = (text: string) => text.match(/\[\[.*?\]\]/g) || [];

src/util/publish.ts

@@ -1,4 +1,4 @@
-import escape from 'lodash/escape';
+import {escape} from 'lodash-es';
 import {Passage, Story} from '../store/stories';
 import {AppInfo} from './app-info';
 import {i18n} from './i18n';

src/util/regexp.ts

@@ -1,4 +1,4 @@
-import escapeRegExp from 'lodash/escapeRegExp';
+import {escapeRegExp} from 'lodash-es';
 import {StorySearchFlags} from '../store/stories/stories.types';
 
 /**