Skip to content

Commit

Permalink
webui: use useReducer also for language state collection
Browse files Browse the repository at this point in the history
  • Loading branch information
@KKoukiou
KKoukiou committed Jun 21, 2023
1 parent 1a04685 commit 6b7ea2d
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 47 deletions.
40 changes: 40 additions & 0 deletions ui/webui/src/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ import {
getFormatData,
getUsableDisks,
} from "./apis/storage.js";
import {
getCommonLocales,
getLanguages,
getLanguageData,
getLocales,
getLocaleData,
} from "./apis/localization.js";

export const getDevicesAction = () => {
return async function fetchUserThunk (dispatch) {
Expand Down Expand Up @@ -81,3 +88,36 @@ export const getDiskSelectionAction = () => {
});
};
};

export const getLanguagesAction = () => {
return async function fetchUserThunk (dispatch) {
const languageIds = await getLanguages();

dispatch(getCommonLocalesAction());
return languageIds.map(language => dispatch(getLanguageDataAction({ language })));
};
};

export const getLanguageDataAction = ({ language }) => {
return async function fetchUserThunk (dispatch) {
const localeIds = await getLocales({ lang: language });
const languageData = await getLanguageData({ lang: language });
const locales = await Promise.all(localeIds.map(async locale => await getLocaleData({ locale })));

return dispatch({
type: "GET_LANGUAGE_DATA",
payload: { languageData: { [language]: { languageData, locales } } }
});
};
};

export const getCommonLocalesAction = () => {
return async function fetchUserThunk (dispatch) {
const commonLocales = await getCommonLocales();

return dispatch({
type: "GET_COMMON_LOCALES",
payload: { commonLocales }
});
};
};
3 changes: 2 additions & 1 deletion ui/webui/src/components/AnacondaWizard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import {

const _ = cockpit.gettext;

export const AnacondaWizard = ({ dispatch, deviceData, diskSelection, onAddErrorNotification, toggleContextHelp, hideContextHelp, title, conf }) => {
export const AnacondaWizard = ({ dispatch, deviceData, diskSelection, languages, commonLocales, onAddErrorNotification, toggleContextHelp, hideContextHelp, title, conf }) => {
const [isFormValid, setIsFormValid] = useState(true);
const [stepNotification, setStepNotification] = useState();
const [isInProgress, setIsInProgress] = useState(false);
Expand All @@ -57,6 +57,7 @@ export const AnacondaWizard = ({ dispatch, deviceData, diskSelection, onAddError
const stepsOrder = [
{
component: InstallationLanguage,
data: { dispatch, languages, commonLocales },
id: "installation-language",
label: _("Welcome"),
},
Expand Down
2 changes: 2 additions & 0 deletions ui/webui/src/components/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ export const Application = () => {
hideContextHelp={() => setIsHelpExpanded(false)}
title={title}
deviceData={state.devices}
languages={state.languages}
commonLocales={state.commonLocales}
diskSelection={state.diskSelection}
dispatch={dispatch}
conf={conf}
Expand Down
74 changes: 29 additions & 45 deletions ui/webui/src/components/localization/InstallationLanguage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,7 @@ import { setLocale } from "../../apis/boss.js";

import {
getLanguage,
getLanguages,
getLanguageData,
getLocales,
getLocaleData,
setLanguage,
getCommonLocales,
} from "../../apis/localization.js";

import {
Expand All @@ -54,6 +49,7 @@ import {
} from "../../helpers/language.js";
import { AnacondaPage } from "../AnacondaPage.jsx";
import { getOsReleaseByKey } from "../../helpers/product.js";
import { getLanguagesAction } from "../../actions.js";

import "./InstallationLanguage.scss";

Expand All @@ -69,9 +65,6 @@ class LanguageSelector extends React.Component {
constructor (props) {
super(props);
this.state = {
languages: [],
locales: [],
commonLocales: [],
search: "",
lang: "",
};
Expand All @@ -93,28 +86,14 @@ class LanguageSelector extends React.Component {
} catch (e) {
this.props.onAddErrorNotification(e);
}

const languageIds = await getLanguages();
// Create the languages state object
this.setState({ languages: await Promise.all(languageIds.map(async lang => await getLanguageData({ lang }))) });
// Create the locales state object
const localeIds = await Promise.all(languageIds.map(async lang => await getLocales({ lang })));
const locales = await Promise.all(localeIds.map(async localeId => {
return await Promise.all(localeId.map(async locale => await getLocaleData({ locale })));
}));
this.setState({ locales }, this.updateNativeName);

// Create a list of common locales.
this.setState({ commonLocales: await getCommonLocales() });
}

async updateNativeName (localeData) {
localeData = localeData || await getLocaleData({ locale: this.state.lang });
this.props.getNativeName(getLocaleNativeName(localeData));
async updateNativeName (localeItem) {
this.props.setNativeName(getLocaleNativeName(localeItem));
}

renderOptions (filter) {
const { languages, locales } = this.state;
const { languages } = this.props;
const idPrefix = this.props.idPrefix;
const filterLow = filter.toLowerCase();

Expand All @@ -124,10 +103,11 @@ class LanguageSelector extends React.Component {
let foundSelected = false;
// Returns a locale with a given code.
const findLocaleWithId = (localeCode) => {
for (const locale of this.state.locales) {
for (const subLocale of locale) {
if (getLocaleId(subLocale) === localeCode) {
return subLocale;
for (const languageId in languages) {
const languageItem = languages[languageId];
for (const locale of languageItem.locales) {
if (getLocaleId(locale) === localeCode) {
return locale;
}
}
}
Expand Down Expand Up @@ -180,7 +160,7 @@ class LanguageSelector extends React.Component {
key="group-common-languages"
>
{
this.state.commonLocales
this.props.commonLocales
.map(findLocaleWithId)
.filter(locale => locale)
.map(locale => createMenuItem(locale, "option-common-"))
Expand All @@ -192,20 +172,20 @@ class LanguageSelector extends React.Component {
}

// List alphabetically.
for (const langLocales of locales) {
const currentLang = languages.find(lang => getLanguageId(lang) === getLanguageId(langLocales[0]));

const label = cockpit.format("$0 ($1)", getLanguageNativeName(currentLang), getLanguageEnglishName(currentLang));
const languagesIds = Object.keys(languages).sort();
for (const languageId of languagesIds) {
const languageItem = languages[languageId];
const label = cockpit.format("$0 ($1)", getLanguageNativeName(languageItem.languageData), getLanguageEnglishName(languageItem.languageData));

if (!filter || label.toLowerCase().indexOf(filterLow) !== -1) {
filtered.push(
<MenuGroup
label={label}
labelHeadingLevel="h3"
id={idPrefix + "-group-" + getLanguageId(currentLang)}
key={"group-" + getLanguageId(currentLang)}
id={idPrefix + "-group-" + getLanguageId(languageItem.languageData)}
key={"group-" + getLanguageId(languageItem.languageData)}
>
{langLocales.map(locale => createMenuItem(locale, "option-alpha-"))}
{languageItem.locales.map(locale => createMenuItem(locale, "option-alpha-"))}
</MenuGroup>
);
}
Expand All @@ -227,11 +207,12 @@ class LanguageSelector extends React.Component {
}

render () {
const { languages, locales, lang, commonLocales } = this.state;
const { lang } = this.state;
const { languages, commonLocales } = this.props;

const handleOnSelect = (_event, item) => {
const { locales } = this.state;
for (const locale of locales) {
for (const localeItem of locale) {
for (const languageItem in languages) {
for (const localeItem of languages[languageItem].locales) {
if (getLocaleId(localeItem) === item) {
setLangCookie({ cockpitLang: convertToCockpitLang({ lang: getLocaleId(localeItem) }) });
setLanguage({ lang: getLocaleId(localeItem) })
Expand Down Expand Up @@ -261,7 +242,7 @@ class LanguageSelector extends React.Component {
}
};

const isLoading = languages.length === 0 || languages.length !== locales.length || commonLocales.length === 0;
const isLoading = languages.length === 0 || commonLocales.length === 0;

if (isLoading) {
return <EmptyStatePanel loading />;
Expand Down Expand Up @@ -315,7 +296,7 @@ class LanguageSelector extends React.Component {
}
LanguageSelector.contextType = AddressContext;

export const InstallationLanguage = ({ idPrefix, setIsFormValid, onAddErrorNotification }) => {
export const InstallationLanguage = ({ idPrefix, languages, commonLocales, dispatch, setIsFormValid, onAddErrorNotification }) => {
const [nativeName, setNativeName] = React.useState(false);
const { setLanguage } = React.useContext(LanguageContext);
const [distributionName, setDistributionName] = useState("");
Expand All @@ -324,7 +305,8 @@ export const InstallationLanguage = ({ idPrefix, setIsFormValid, onAddErrorNotif
getOsReleaseByKey("NAME").then(
setDistributionName
);
}, []);
dispatch(getLanguagesAction());
}, [dispatch]);

return (
<AnacondaPage title={cockpit.format("Welcome to $0", distributionName)}>
Expand All @@ -349,9 +331,11 @@ export const InstallationLanguage = ({ idPrefix, setIsFormValid, onAddErrorNotif
<LanguageSelector
id="language-selector"
idPrefix={idPrefix}
languages={languages}
commonLocales={commonLocales}
setIsFormValid={setIsFormValid}
onAddErrorNotification={onAddErrorNotification}
getNativeName={setNativeName}
setNativeName={setNativeName}
reRenderApp={setLanguage}
/>
</FormGroup>
Expand Down
13 changes: 12 additions & 1 deletion ui/webui/src/reducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,14 @@ export const reducer = (state, action) => {
} else if (action.type === "GET_DISK_SELECTION") {
return { ...state, diskSelection: action.payload.diskSelection };
}

if (action.type === "GET_LANGUAGE_DATA") {
return { ...state, languages: { ...action.payload.languageData, ...state.languages } };
}

if (action.type === "GET_COMMON_LOCALES") {
return { ...state, commonLocales: action.payload.commonLocales };
}
};

export const initialState = {
Expand All @@ -49,5 +57,8 @@ export const initialState = {
usableDisks: [],
selectedDisks: [],
ignoredDisks: []
}
},

languages: {},
commonLocales: []
};

0 comments on commit 6b7ea2d

Please sign in to comment.