111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useRecoilState, useRecoilValue } from 'recoil';
|
|
|
|
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
|
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
|
|
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
|
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
|
import { Select } from '@/ui/input/components/Select';
|
|
|
|
import { i18n } from '@lingui/core';
|
|
import { useLingui } from '@lingui/react/macro';
|
|
import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
|
|
import { isDefined } from '~/utils/isDefined';
|
|
import { logError } from '~/utils/logError';
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
export const LocalePicker = () => {
|
|
const { t } = useLingui();
|
|
const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
|
|
currentWorkspaceMemberState,
|
|
);
|
|
const isDebugMode = useRecoilValue(isDebugModeState);
|
|
|
|
const { updateOneRecord } = useUpdateOneRecord({
|
|
objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
|
|
});
|
|
|
|
const updateWorkspaceMember = async (changedFields: any) => {
|
|
if (!currentWorkspaceMember?.id) {
|
|
throw new Error('User is not logged in');
|
|
}
|
|
|
|
try {
|
|
await updateOneRecord({
|
|
idToUpdate: currentWorkspaceMember.id,
|
|
updateOneRecordInput: changedFields,
|
|
});
|
|
} catch (error) {
|
|
logError(error);
|
|
}
|
|
};
|
|
|
|
if (!isDefined(currentWorkspaceMember)) return;
|
|
|
|
const handleLocaleChange = (value: string) => {
|
|
setCurrentWorkspaceMember({
|
|
...currentWorkspaceMember,
|
|
...{ locale: value },
|
|
});
|
|
updateWorkspaceMember({ locale: value });
|
|
|
|
dynamicActivate(value);
|
|
};
|
|
|
|
const localeOptions = [
|
|
{
|
|
label: t`Portuguese`,
|
|
value: 'pt',
|
|
},
|
|
{
|
|
label: t`French`,
|
|
value: 'fr',
|
|
},
|
|
{
|
|
label: t`German`,
|
|
value: 'de',
|
|
},
|
|
{
|
|
label: t`Italian`,
|
|
value: 'it',
|
|
},
|
|
{
|
|
label: t`Spanish`,
|
|
value: 'es',
|
|
},
|
|
{
|
|
label: t`English`,
|
|
value: 'en',
|
|
},
|
|
{
|
|
label: t`Chinese`,
|
|
value: 'zh',
|
|
},
|
|
];
|
|
|
|
if (isDebugMode) {
|
|
localeOptions.push({
|
|
label: t`Pseudo-English`,
|
|
value: 'pseudo-en',
|
|
});
|
|
}
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<Select
|
|
dropdownId="preferred-locale"
|
|
dropdownWidthAuto
|
|
fullWidth
|
|
value={i18n.locale}
|
|
options={localeOptions}
|
|
onChange={(value) => handleLocaleChange(value)}
|
|
/>
|
|
</StyledContainer>
|
|
);
|
|
};
|