Add language to collection payload (#38961)

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -46,8 +46,16 @@ import { WizardStepTitle } from './wizard_step_title';
 export const CollectionDetails: React.FC = () => {
   const dispatch = useAppDispatch();
   const history = useHistory();
-  const { id, name, description, topic, discoverable, sensitive, items } =
+  const {
-    useAppSelector((state) => state.collections.editor);
+    id,
+    name,
+    description,
+    topic,
+    language,
+    discoverable,
+    sensitive,
+    items,
+  } = useAppSelector((state) => state.collections.editor);
 
   const handleNameChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -110,6 +118,7 @@ export const CollectionDetails: React.FC = () => {
           name,
           description,
           tag_name: topic || null,
+          language: language || null,
           discoverable,
           sensitive,
         };
@@ -125,6 +134,9 @@ export const CollectionDetails: React.FC = () => {
           sensitive,
           account_ids: items.map((item) => item.account_id),
         };
+        if (language) {
+          payload.language = language;
+        }
         if (topic) {
           payload.tag_name = topic;
         }
@@ -149,6 +161,7 @@ export const CollectionDetails: React.FC = () => {
       description,
       topic,
       discoverable,
+      language,
       sensitive,
       dispatch,
       history,
@@ -392,13 +405,8 @@ const renderTagItem = (item: TagSearchResult) => (
 
 const LanguageField: React.FC = () => {
   const dispatch = useAppDispatch();
-  const initialLanguage = useAppSelector(
-    (state) => state.compose.get('default_language') as string,
-  );
   const { language } = useAppSelector((state) => state.collections.editor);
 
-  const selectedLanguage = language ?? initialLanguage;
-
   const handleLanguageChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       dispatch(
@@ -419,7 +427,7 @@ const LanguageField: React.FC = () => {
           defaultMessage='Language'
         />
       }
-      value={selectedLanguage}
+      value={language}
       onChange={handleLanguageChange}
     >
       <option value=''>

app/javascript/mastodon/initial_state.ts

@@ -48,10 +48,10 @@ interface InitialStateMeta {
   status_page_url: string;
   terms_of_service_enabled: boolean;
   emoji_style?: string;
-  wrapstodon?: InitialWrapstodonState | null;
+  wrapstodon?: InitialStateWrapstodon | null;
 }
 
-interface Role {
+interface IntialStateRole {
   id: string;
   name: string;
   permissions: string;
@@ -60,17 +60,27 @@ interface Role {
   collection_limit: number;
 }
 
-interface InitialWrapstodonState {
+interface InitialStateWrapstodon {
   year: number;
   state: ApiAnnualReportState;
 }
 
+interface InitialStateCompose {
+  text: string;
+  default_privacy?: string;
+  default_sensitive?: boolean;
+  default_language?: string;
+  default_quote_policy?: string;
+  me?: string;
+}
+
 export interface InitialState {
   accounts: Record<string, ApiAccountJSON>;
   languages: InitialStateLanguage[];
+  compose: InitialStateCompose;
   critical_updates_pending?: boolean;
   meta: InitialStateMeta;
-  role?: Role;
+  role?: IntialStateRole;
   features: string[];
 }
 

app/javascript/mastodon/reducers/slices/collections.ts

@@ -19,7 +19,7 @@ import type {
   ApiUpdateCollectionPayload,
   CollectionAccountItem,
 } from '@/mastodon/api_types/collections';
-import { me } from '@/mastodon/initial_state';
+import { initialState, me } from '@/mastodon/initial_state';
 import {
   createAppAsyncThunk,
   createAppSelector,
@@ -63,7 +63,7 @@ interface EditorState {
   name: string;
   description: string;
   topic: string;
-  language: string | null;
+  language: string;
   discoverable: boolean;
   sensitive: boolean;
   items: EditorCollectionItem[];
@@ -74,7 +74,7 @@ interface UpdateEditorFieldPayload<K extends keyof EditorState> {
   value: EditorState[K];
 }
 
-const initialState: CollectionState = {
+const initialCollectionState: CollectionState = {
   collections: {},
   createdBy: {},
   featuring: {},
@@ -83,7 +83,7 @@ const initialState: CollectionState = {
     name: '',
     description: '',
     topic: '',
-    language: null,
+    language: initialState?.compose.default_language ?? 'en',
     discoverable: true,
     sensitive: false,
     items: [],
@@ -92,24 +92,24 @@ const initialState: CollectionState = {
 
 const collectionSlice = createSlice({
   name: 'collections',
-  initialState,
+  initialState: initialCollectionState,
   reducers: {
-    init(state, action: PayloadAction<ApiCollectionJSON | null>) {
+    init(state, action: PayloadAction<ApiCollectionJSON>) {
       const collection = action.payload;
 
       state.editor = {
-        id: collection?.id ?? null,
+        id: collection.id,
-        name: collection?.name ?? '',
+        name: collection.name,
-        description: collection?.description ?? '',
+        description: collection.description ?? '',
-        topic: inputToHashtag(collection?.tag?.name ?? ''),
+        topic: inputToHashtag(collection.tag?.name ?? ''),
-        language: collection?.language ?? '',
+        language: collection.language ?? '',
-        discoverable: collection?.discoverable ?? true,
+        discoverable: collection.discoverable,
-        sensitive: collection?.sensitive ?? false,
+        sensitive: collection.sensitive,
-        items: getEditorCollectionItems(collection?.items ?? []),
+        items: getEditorCollectionItems(collection.items),
       };
     },
     reset(state) {
-      state.editor = initialState.editor;
+      state.editor = initialCollectionState.editor;
     },
     updateEditorField<K extends keyof EditorState>(
       state: CollectionState,
@@ -233,7 +233,7 @@ const collectionSlice = createSlice({
     builder.addCase(updateCollection.fulfilled, (state, action) => {
       const { collection } = action.payload;
       state.collections[collection.id] = collection;
-      state.editor = initialState.editor;
+      state.editor = initialCollectionState.editor;
     });
 
     /**
@@ -262,7 +262,7 @@ const collectionSlice = createSlice({
       const { collection } = actions.payload;
 
       state.collections[collection.id] = collection;
-      state.editor = initialState.editor;
+      state.editor = initialCollectionState.editor;
 
       if (state.createdBy[collection.account_id]) {
         state.createdBy[collection.account_id]?.collectionIds.unshift(