Fix createDataLoadingThunk and related actions (#30408)

app/javascript/mastodon/actions/account_notes.ts

@@ -3,7 +3,8 @@ import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
 
 export const submitAccountNote = createDataLoadingThunk(
  'account_note/submit',
- (accountId: string, note: string) => apiSubmitAccountNote(accountId, note),
+ ({ accountId, note }: { accountId: string; note: string }) =>
+ apiSubmitAccountNote(accountId, note),
  (relationship) => ({ relationship }),
  { skipLoading: true },
 );

app/javascript/mastodon/actions/interactions_typed.ts

@@ -6,8 +6,13 @@ import { importFetchedStatus } from './importer';
 
 export const reblog = createDataLoadingThunk(
  'status/reblog',
- (statusId: string, visibility: StatusVisibility) =>
- apiReblog(statusId, visibility),
+ ({
+ statusId,
+ visibility,
+ }: {
+ statusId: string;
+ visibility: StatusVisibility;
+ }) => apiReblog(statusId, visibility),
  (data, { dispatch, discardLoadData }) => {
  // The reblog API method returns a new status wrapped around the original. In this case we are only
  // interested in how the original is modified, hence passing it skipping the wrapper
@@ -20,7 +25,7 @@ export const reblog = createDataLoadingThunk(
 
 export const unreblog = createDataLoadingThunk(
  'status/unreblog',
- (statusId: string) => apiUnreblog(statusId),
+ ({ statusId }: { statusId: string }) => apiUnreblog(statusId),
  (data, { dispatch, discardLoadData }) => {
  dispatch(importFetchedStatus(data));
 

app/javascript/mastodon/api.ts

@@ -62,12 +62,12 @@ export default function api(withAuthorization = true) {
 export async function apiRequest<ApiResponse = unknown>(
  method: Method,
  url: string,
- params?: unknown,
+ params?: Record<string, unknown>,
 ) {
  const { data } = await api().request<ApiResponse>({
  method,
- url,
- params,
+ url: '/api/' + url,
+ data: params,
  });
 
  return data;

app/javascript/mastodon/api/accounts.ts

@@ -2,6 +2,6 @@ import { apiRequest } from 'mastodon/api';
 import type { ApiRelationshipJSON } from 'mastodon/api_types/relationships';
 
 export const apiSubmitAccountNote = (id: string, value: string) =>
- apiRequest<ApiRelationshipJSON>('post', `/api/v1/accounts/${id}/note`, {
+ apiRequest<ApiRelationshipJSON>('post', `v1/accounts/${id}/note`, {
  comment: value,
  });

app/javascript/mastodon/containers/status_container.jsx

@@ -96,9 +96,9 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
 
  onModalReblog (status, privacy) {
  if (status.get('reblogged')) {
- dispatch(unreblog(status.id));
+ dispatch(unreblog({ statusId: status.get('id') }));
  } else {
- dispatch(reblog(status.id, privacy));
+ dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
  }
  },
 

app/javascript/mastodon/features/account/containers/account_note_container.js

@@ -11,7 +11,7 @@ const mapStateToProps = (state, { account }) => ({
 const mapDispatchToProps = (dispatch, { account }) => ({
 
  onSave (value) {
- dispatch(submitAccountNote(account.get('id'), value));
+ dispatch(submitAccountNote({ accountId: account.get('id'), note: value }));
  },
 
 });

app/javascript/mastodon/features/notifications/containers/notification_container.js

@@ -39,12 +39,12 @@ const mapDispatchToProps = dispatch => ({
  },
 
  onModalReblog (status, privacy) {
- dispatch(reblog(status.id, privacy));
+ dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
  },
 
  onReblog (status, e) {
  if (status.get('reblogged')) {
- dispatch(unreblog(status.id));
+ dispatch(unreblog({ statusId: status.get('id') }));
  } else {
  if (e.shiftKey || !boostModal) {
  this.onModalReblog(status);

app/javascript/mastodon/features/picture_in_picture/components/footer.jsx

@@ -123,7 +123,7 @@ class Footer extends ImmutablePureComponent {
 
  _performReblog = (status, privacy) => {
  const { dispatch } = this.props;
- dispatch(reblog(status.id, privacy));
+ dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
  };
 
  handleReblogClick = e => {
@@ -132,7 +132,7 @@ class Footer extends ImmutablePureComponent {
 
  if (signedIn) {
  if (status.get('reblogged')) {
- dispatch(unreblog(status.id));
+ dispatch(unreblog({ statusId: status.get('id') }));
  } else if ((e && e.shiftKey) || !boostModal) {
  this._performReblog(status);
  } else {

app/javascript/mastodon/features/status/containers/detailed_status_container.js

@@ -74,12 +74,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
  },
 
  onModalReblog (status, privacy) {
- dispatch(reblog(status.id, privacy));
+ dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
  },
 
  onReblog (status, e) {
  if (status.get('reblogged')) {
- dispatch(unreblog(status.id));
+ dispatch(unreblog({ statusId: status.get('id') }));
  } else {
  if (e.shiftKey || !boostModal) {
  this.onModalReblog(status);

app/javascript/mastodon/features/status/index.jsx

@@ -299,7 +299,7 @@ class Status extends ImmutablePureComponent {
  };
 
  handleModalReblog = (status, privacy) => {
- this.props.dispatch(reblog(status.id, privacy));
+ this.props.dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
  };
 
  handleReblogClick = (status, e) => {
@@ -308,7 +308,7 @@ class Status extends ImmutablePureComponent {
 
  if (signedIn) {
  if (status.get('reblogged')) {
- dispatch(unreblog(status.id));
+ dispatch(unreblog({ statusId: status.get('id') }));
  } else {
  if ((e && e.shiftKey) || !boostModal) {
  this.handleModalReblog(status);

app/javascript/mastodon/reducers/statuses.js

@@ -122,13 +122,13 @@ export default function statuses(state = initialState, action) {
  return statusTranslateUndo(state, action.id);
  default:
  if(reblog.pending.match(action))
- return state.setIn([action.meta.params.statusId, 'reblogged'], true);
+ return state.setIn([action.meta.arg.statusId, 'reblogged'], true);
  else if(reblog.rejected.match(action))
- return state.get(action.meta.params.statusId) === undefined ? state : state.setIn([action.meta.params.statusId, 'reblogged'], false);
+ return state.get(action.meta.arg.statusId) === undefined ? state : state.setIn([action.meta.arg.statusId, 'reblogged'], false);
  else if(unreblog.pending.match(action))
- return state.setIn([action.meta.params.statusId, 'reblogged'], false);
+ return state.setIn([action.meta.arg.statusId, 'reblogged'], false);
  else if(unreblog.rejected.match(action))
- return state.get(action.meta.params.statusId) === undefined ? state : state.setIn([action.meta.params.statusId, 'reblogged'], true);
+ return state.get(action.meta.arg.statusId) === undefined ? state : state.setIn([action.meta.arg.statusId, 'reblogged'], true);
  else
  return state;
  }

app/javascript/mastodon/store/typed_functions.ts

@@ -92,20 +92,20 @@ type OnData<LoadDataResult, ReturnedData> = (
 // Overload when there is no `onData` method, the payload is the `onData` result
 export function createDataLoadingThunk<
  LoadDataResult,
- Args extends readonly unknown[],
+ Args extends Record<string, unknown>,
 >(
  name: string,
- loadData: (...args: Args) => Promise<LoadDataResult>,
+ loadData: (args: Args) => Promise<LoadDataResult>,
  thunkOptions?: AppThunkOptions,
 ): ReturnType<typeof createThunk<Args, LoadDataResult>>;
 
 // Overload when the `onData` method returns discardLoadDataInPayload, then the payload is empty
 export function createDataLoadingThunk<
  LoadDataResult,
- Args extends readonly unknown[],
+ Args extends Record<string, unknown>,
 >(
  name: string,
- loadData: (...args: Args) => Promise<LoadDataResult>,
+ loadData: (args: Args) => Promise<LoadDataResult>,
  onDataOrThunkOptions?:
  | AppThunkOptions
  | OnData<LoadDataResult, DiscardLoadData>,
@@ -115,22 +115,22 @@ export function createDataLoadingThunk<
 // Overload when the `onData` method returns nothing, then the mayload is the `onData` result
 export function createDataLoadingThunk<
  LoadDataResult,
- Args extends readonly unknown[],
+ Args extends Record<string, unknown>,
 >(
  name: string,
- loadData: (...args: Args) => Promise<LoadDataResult>,
+ loadData: (args: Args) => Promise<LoadDataResult>,
  onDataOrThunkOptions?: AppThunkOptions | OnData<LoadDataResult, void>,
  thunkOptions?: AppThunkOptions,
 ): ReturnType<typeof createThunk<Args, LoadDataResult>>;
 
 // Overload when there is an `onData` method returning something
 export function createDataLoadingThunk<
  LoadDataResult,
- Args extends readonly unknown[],
+ Args extends Record<string, unknown>,
  Returned,
 >(
  name: string,
- loadData: (...args: Args) => Promise<LoadDataResult>,
+ loadData: (args: Args) => Promise<LoadDataResult>,
  onDataOrThunkOptions?: AppThunkOptions | OnData<LoadDataResult, Returned>,
  thunkOptions?: AppThunkOptions,
 ): ReturnType<typeof createThunk<Args, Returned>>;
@@ -142,7 +142,7 @@ export function createDataLoadingThunk<
  *
  * It is a wrapper around RTK's [`createAsyncThunk`](https://redux-toolkit.js.org/api/createAsyncThunk)
  * @param name Prefix for the actions types
- * @param loadData Function that loads the data. It's arguments will become the thunk's arguments
+ * @param loadData Function that loads the data. It's (object) argument will become the thunk's argument
  * @param onDataOrThunkOptions
  * Callback called on the results from `loadData`.
  *
@@ -162,11 +162,11 @@ export function createDataLoadingThunk<
  */
 export function createDataLoadingThunk<
  LoadDataResult,
- Args extends readonly unknown[],
+ Args extends Record<string, unknown>,
  Returned,
 >(
  name: string,
- loadData: (...args: Args) => Promise<LoadDataResult>,
+ loadData: (args: Args) => Promise<LoadDataResult>,
  onDataOrThunkOptions?: AppThunkOptions | OnData<LoadDataResult, Returned>,
  maybeThunkOptions?: AppThunkOptions,
 ) {
@@ -184,7 +184,7 @@ export function createDataLoadingThunk<
  return createThunk<Args, Returned>(
  name,
  async (arg, { getState, dispatch }) => {
- const data = await loadData(...arg);
+ const data = await loadData(arg);
 
  if (!onData) return data as Returned;