Centralize logic for moving to neighboring commits in a Vuex action

app/assets/javascripts/diffs/store/actions.js

@@ -665,5 +665,25 @@ export function changeCurrentCommit({ dispatch, commit, state }, { commitId }) {
   return dispatch('fetchDiffFilesMeta');
 }
 
+export function moveToNeighboringCommit({ dispatch, state }, { direction }) {
+  const previousCommitId = state.commit?.prev_commit_id;
+  const nextCommitId = state.commit?.next_commit_id;
+  const canMove = {
+    next: !state.isLoading && nextCommitId,
+    previous: !state.isLoading && previousCommitId,
+  };
+  let commitId;
+
+  if (direction === 'next' && canMove.next) {
+    commitId = nextCommitId;
+  } else if (direction === 'previous' && canMove.previous) {
+    commitId = previousCommitId;
+  }
+
+  if (commitId) {
+    dispatch('changeCurrentCommit', { commitId });
+  }
+}
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

spec/frontend/diffs/store/actions_spec.js

@@ -44,6 +44,7 @@ import {
   setExpandedDiffLines,
   setSuggestPopoverDismissed,
   changeCurrentCommit,
+  moveToNeighboringCommit,
 } from '~/diffs/store/actions';
 import eventHub from '~/notes/event_hub';
 import * as types from '~/diffs/store/mutation_types';
@@ -1406,4 +1407,44 @@ describe('DiffsStoreActions', () => {
       },
     );
   });
+
+  describe('moveToNeighboringCommit', () => {
+    it.each`
+      direction     | expected         | currentCommit
+      ${'next'}     | ${'NEXTSHA'}     | ${{ next_commit_id: 'NEXTSHA' }}
+      ${'previous'} | ${'PREVIOUSSHA'} | ${{ prev_commit_id: 'PREVIOUSSHA' }}
+    `(
+      'for the direction "$direction", dispatches the action to move to the SHA "$expected"',
+      ({ direction, expected, currentCommit }) => {
+        return testAction(
+          moveToNeighboringCommit,
+          { direction },
+          { commit: currentCommit },
+          [],
+          [{ type: 'changeCurrentCommit', payload: { commitId: expected } }],
+        );
+      },
+    );
+
+    it.each`
+      direction     | diffsAreLoading | currentCommit
+      ${'next'}     | ${false}        | ${{ prev_commit_id: 'PREVIOUSSHA' }}
+      ${'next'}     | ${true}         | ${{ prev_commit_id: 'PREVIOUSSHA' }}
+      ${'next'}     | ${false}        | ${undefined}
+      ${'previous'} | ${false}        | ${{ next_commit_id: 'NEXTSHA' }}
+      ${'previous'} | ${true}         | ${{ next_commit_id: 'NEXTSHA' }}
+      ${'previous'} | ${false}        | ${undefined}
+    `(
+      'given `{ "isloading": $diffsAreLoading, "commit": $currentCommit }` in state, no actions are dispatched',
+      ({ direction, diffsAreLoading, currentCommit }) => {
+        return testAction(
+          moveToNeighboringCommit,
+          { direction },
+          { commit: currentCommit, isLoading: diffsAreLoading },
+          [],
+          [],
+        );
+      },
+    );
+  });
 });