diff --git a/app/javascript/flavours/glitch/features/collections/editor/details.tsx b/app/javascript/flavours/glitch/features/collections/editor/details.tsx index 4b5b0dbb28..6cbce6531d 100644 --- a/app/javascript/flavours/glitch/features/collections/editor/details.tsx +++ b/app/javascript/flavours/glitch/features/collections/editor/details.tsx @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useState } from 'react'; +import { Fragment, useCallback, useMemo, useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; @@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom'; import { isFulfilled } from '@reduxjs/toolkit'; +import { languages } from '@/flavours/glitch/initial_state'; import { hasSpecialCharacters, inputToHashtag, @@ -22,6 +23,7 @@ import { Fieldset, FormStack, RadioButtonField, + SelectField, TextAreaField, } from 'flavours/glitch/components/form_fields'; import { TextInputField } from 'flavours/glitch/components/form_fields/text_input_field'; @@ -201,6 +203,8 @@ export const CollectionDetails: React.FC = () => { + +
{ value={topic} items={tags} isLoading={isLoading} - renderItem={renderItem} + renderItem={renderTagItem} onSelectItem={handleSelectTopicSuggestion} onChange={handleTopicChange} autoCapitalize='off' @@ -380,4 +384,52 @@ const TopicField: React.FC = () => { ); }; -const renderItem = (item: TagSearchResult) => item.label ?? `#${item.name}`; +const renderTagItem = (item: TagSearchResult) => item.label ?? `#${item.name}`; + +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) => { + dispatch( + updateCollectionEditorField({ + field: 'language', + value: event.target.value, + }), + ); + }, + [dispatch], + ); + + return ( + + } + value={selectedLanguage} + onChange={handleLanguageChange} + > + + {languages?.map(([code, name, localName]) => ( + + ))} + + ); +}; diff --git a/app/javascript/flavours/glitch/initial_state.ts b/app/javascript/flavours/glitch/initial_state.ts index 615dc2848e..4d45af30bf 100644 --- a/app/javascript/flavours/glitch/initial_state.ts +++ b/app/javascript/flavours/glitch/initial_state.ts @@ -180,7 +180,7 @@ export const languages = initialState?.languages.map((lang) => { lang[0], displayNames?.of(lang[0].replace('zh-YUE', 'yue')) ?? lang[1], lang[2], - ]; + ] as InitialStateLanguage; }); // Glitch-soc-specific settings