feat: remove locales from redux store

src/index.tsx

@@ -52,11 +52,6 @@ const renderApp = (Component: any, initState: any, props?: any) => {
 	const store = configureStore({
 		app: {
 			auth: { type, user: { roles: [], stamp: '' } },
-			lg1,
-			lg2,
-			version,
-			properties,
-			error: false,
 		},
 	});
 
@@ -69,7 +64,12 @@ const renderApp = (Component: any, initState: any, props?: any) => {
 		root.render(
 			<QueryClientProvider client={queryClient}>
 				<Provider store={store}>
-					<AppContextProvider lg1={lg1} lg2={lg2}>
+					<AppContextProvider
+						lg1={lg1}
+						lg2={lg2}
+						version={version}
+						properties={properties}
+					>
 						<I18NContext.Provider value={D}>
 							<ApplicationTitle />
 							<main>

src/packages/application/app-context.spec.tsx

@@ -19,7 +19,7 @@ const TestComponent = () => {
 describe('AppContext', () => {
 	it('provides the correct context values', () => {
 		render(
-			<AppContextProvider lg1="English" lg2="French">
+			<AppContextProvider lg1="English" lg2="French" properties={{} as any}>
 				<TestComponent />
 			</AppContextProvider>
 		);

src/packages/application/app-context.tsx

@@ -3,26 +3,40 @@ import { createContext, PropsWithChildren, useContext, useState } from 'react';
 type AppContextTypes = {
 	lg1: string;
 	lg2: string;
+	version?: string;
 	secondLang: {
 		value: boolean;
 		toggle: () => void;
 	};
+	properties: {
+		authorizationHost: string;
+		modules: string[];
+		activeModules: string[];
+		defaultContributor: string;
+		maxLengthScopeNote: string;
+	};
 };
 
 const AppContext = createContext<AppContextTypes | undefined>(undefined);
 
 export const AppContextProvider = ({
 	lg1,
 	lg2,
+	version,
+	properties,
 	children,
-}: PropsWithChildren<Pick<AppContextTypes, 'lg1' | 'lg2'>>) => {
+}: PropsWithChildren<
+	Pick<AppContextTypes, 'lg1' | 'lg2' | 'version' | 'properties'>
+>) => {
 	const [secondLang, setSecondLang] = useState(false);
 
 	return (
 		<AppContext.Provider
 			value={{
 				lg1,
 				lg2,
+				version,
+				properties,
 				secondLang: {
 					value: secondLang,
 					toggle: () => setSecondLang((value) => !value),

src/packages/application/app.tsx

@@ -2,14 +2,12 @@ import { Link } from 'react-router-dom';
 import D from '../deprecated-locales';
 import 'bootstrap/dist/css/bootstrap.css';
 import './app.scss';
-import { useSelector } from 'react-redux';
 import { useTitle } from '../utils/hooks/useTitle';
+import { useAppContext } from './app-context';
 
 function App() {
 	useTitle();
-	const modules = useSelector((state) => {
-		return (state as any).app.properties?.modules ?? [];
-	});
+	const { properties: { modules = [] } = {} } = useAppContext();
 
 	const apps = modules.map((appName: string) => {
 		const app = appName.trim();

src/packages/application/router/index.spec.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux';
 import { RBACLink } from '.';
 import D from '../../i18n';
 import configureStore from '../../redux/configure-store';
-import { renderWithRouter } from '../../tests-utils/render';
+import { renderWithAppContext } from '../../tests-utils/render';
 import { removeToken } from '../../auth/open-id-connect-auth/token-utils';
 
 jest.mock('react-router-dom', () => ({
@@ -27,10 +27,6 @@ const store = configureStore({
 				stamp: 'stamp',
 			},
 		},
-		properties: {
-			authorizationHost: 'http:/auth-host.com',
-		},
-		version: '2.0.0',
 	},
 });
 
@@ -44,7 +40,7 @@ describe('RBACLink Component', () => {
 	it('should render children and footer correctly', () => {
 		useLocationMock.mockReturnValue({ pathname: '/' });
 
-		renderWithRouter(
+		renderWithAppContext(
 			<Provider store={store}>
 				<RBACLink>
 					<div>Child Component</div>
@@ -60,7 +56,7 @@ describe('RBACLink Component', () => {
 	it('should call logout and remove token when logout button is clicked', () => {
 		useLocationMock.mockReturnValue({ pathname: '/' });
 
-		renderWithRouter(
+		renderWithAppContext(
 			<Provider store={store}>
 				<RBACLink>
 					<div>Child Component</div>

src/packages/application/router/index.tsx

@@ -5,11 +5,11 @@ import bauhausLogo from '../../../img/logo_noir.svg';
 import { getEnvVar } from '../../utils/env';
 import D from '../../i18n';
 import 'react-app-polyfill/stable';
-import { useSelector } from 'react-redux';
 import { PropsWithChildren } from 'react';
 import Auth from '../../auth/components/auth';
 import { removeToken } from '../../auth/open-id-connect-auth/token-utils';
 import { ADMIN } from '../../auth/roles';
+import { useAppContext } from '../app-context';
 
 const logout = () => {
 	removeToken();
@@ -19,10 +19,10 @@ const logout = () => {
 
 export const RBACLink = ({ children }: PropsWithChildren<{}>) => {
 	const location = useLocation();
-	const authorizationHost = useSelector(
-		(state) => (state as any).app.properties.authorizationHost
-	);
-	const version = useSelector((state) => (state as any).app.version);
+	const {
+		properties: { authorizationHost },
+	} = useAppContext();
+	const { version } = useAppContext();
 	const footer = `${getEnvVar('NAME')} - Front ${getEnvVar(
 		'VERSION'
 	)} - API ${version}`;

src/packages/application/router/routes.tsx

@@ -4,8 +4,8 @@ import { Route, Switch, Redirect } from 'react-router-dom';
 import auth from '../../auth/hoc';
 
 import App from '../app';
-import { useSelector } from 'react-redux';
 import { Loading, NotFound, UnderMaintenance } from '../../components';
+import { useAppContext } from '../app-context';
 
 const getComponent = (
 	pageName: string,
@@ -43,10 +43,12 @@ const getHomePage = (pages: Record<string, string>) => {
 	);
 };
 export default auth(() => {
-	const activeModules = useSelector(
-		(state) => (state as any).app.properties.activeModules
-	);
-	const modules = useSelector((state) => (state as any).app.properties.modules);
+	const {
+		properties: { activeModules },
+	} = useAppContext();
+	const {
+		properties: { modules },
+	} = useAppContext();
 	const pages = useMemo(() => {
 		return modules.reduce((acc: Record<string, any>, appName: string) => {
 			const app = appName.trim();

src/packages/modules-classifications/item/compare/home-container.js

@@ -1,16 +1,15 @@
-import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { Loading } from '../../../components';
 import Compare from './home';
 import useClassificationItem from '../hook';
-import { getLocales } from '../../../redux/selectors';
 import { useSecondLang } from '../../../utils/hooks/second-lang';
+import { useLocales } from '../../../utils/hooks/useLocales';
 
 const CompareContainer = () => {
 	const { classificationId, itemId } = useParams();
 
 	const [secondLang] = useSecondLang();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 
 	const { isLoading, item } = useClassificationItem(classificationId, itemId);
 

src/packages/modules-classifications/item/home-container.js

@@ -1,18 +1,17 @@
-import { useSelector } from 'react-redux';
 import ItemVisualization from './home';
 import { Loading } from '../../components';
 import { useParams } from 'react-router-dom';
 import useClassificationItem from './hook';
 import { useQueryClient } from '@tanstack/react-query';
 import { fetchingPreviousLevels } from './client';
-import { getLocales } from '../../redux/selectors';
 import { useSecondLang } from '../../utils/hooks/second-lang';
+import { useLocales } from '../../utils/hooks/useLocales';
 
 const ItemVisualizationContainer = () => {
 	const queryClient = useQueryClient();
 	const { classificationId, itemId } = useParams();
 	const [secondLang] = useSecondLang();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 
 	const { isLoading, item } = useClassificationItem(
 		classificationId,

src/packages/modules-classifications/series/visualization/home-container.js

@@ -1,18 +1,17 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import SeriesVisualization from './home';
 import { Loading } from '../../../components';
 import { useParams } from 'react-router-dom';
 import { ClassificationsApi } from '../../../sdk/classification';
-import { getLocales } from '../../../redux/selectors';
 import { useSecondLang } from '../../../utils/hooks/second-lang';
+import { useLocales } from '../../../utils/hooks/useLocales';
 
 const SeriesVisualizationContainer = () => {
 	const { id } = useParams();
 	const [series, setSeries] = useState();
 
 	const [secondLang] = useSecondLang();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 	useEffect(() => {
 		Promise.all([
 			ClassificationsApi.getSeriesGeneral(id),

src/packages/modules-classifications/visualization/home-container.tsx

@@ -1,15 +1,13 @@
 import { useParams } from 'react-router-dom';
-import { useSelector } from 'react-redux';
 import ClassificationVisualization from './home';
 import { Loading } from '../../components';
 import { useClassification, usePublishClassification } from '../hooks';
-import { getLocales } from '../../redux/selectors';
-import { ReduxModel } from '../../redux/model';
 import { useSecondLang } from '../../utils/hooks/second-lang';
+import { useLocales } from '../../utils/hooks/useLocales';
 
 const ClassificationVisualizationContainer = () => {
 	const { id } = useParams<{ id: string }>();
-	const langs = useSelector((state: ReduxModel) => getLocales(state));
+	const langs = useLocales();
 	const [secondLang] = useSecondLang();
 
 	const { isLoading, classification } = useClassification(id);

src/packages/modules-concepts/collections/edition-creation/creation-container.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import buildPayload from '../../../modules-concepts/collections/utils/build-payload/build-payload';
 import CollectionEditionCreation from './home';
@@ -10,15 +9,17 @@ import { Loading } from '../../../components';
 
 import { ConceptsApi } from '../../../sdk';
 import { CollectionApi } from '../../../sdk/collection-api';
-import { getLocales } from '../../../redux/selectors';
 import { useTitle } from '../../../utils/hooks/useTitle';
+import { useLocales } from '../../../utils/hooks/useLocales';
+import { useAppContext } from '../../../application/app-context';
 
 const CreationContainer = () => {
 	const history = useHistory();
-	const langs = useSelector((state) => getLocales(state));
-	const collection = useSelector((state) =>
-		emptyCollection(state.app.properties.defaultContributor)
-	);
+	const langs = useLocales();
+	const {
+		properties: { defaultContributor },
+	} = useAppContext();
+	const collection = emptyCollection(defaultContributor);
 
 	const [loading, setLoading] = useState(true);
 	const [saving, setSaving] = useState(false);

src/packages/modules-concepts/collections/edition-creation/edition-container.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import CollectionEditionCreation from './home';
 import buildPayload from '../../../modules-concepts/collections/utils/build-payload/build-payload';
@@ -9,13 +8,13 @@ import { Loading } from '../../../components';
 
 import { ConceptsApi } from '../../../sdk';
 import { CollectionApi } from '../../../sdk/collection-api';
-import { getLocales } from '../../../redux/selectors';
 import { useTitle } from '../../../utils/hooks/useTitle';
+import { useLocales } from '../../../utils/hooks/useLocales';
 
 const EditionContainer = () => {
 	const { id } = useParams();
 	const history = useHistory();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 
 	const [loadingCollection, setLoadingCollection] = useState(true);
 	const [loadingExtraData, setLoadingExtraData] = useState(true);

src/packages/modules-concepts/collections/visualization/home-container.js

@@ -4,8 +4,9 @@ import { Loading } from '../../../components';
 import CollectionVisualization from './home';
 import { useParams } from 'react-router-dom';
 import { ConceptsApi } from '../../../sdk';
-import { getLocales, getPermission } from '../../../redux/selectors';
+import { getPermission } from '../../../redux/selectors';
 import { useSecondLang } from '../../../utils/hooks/second-lang';
+import { useLocales } from '../../../utils/hooks/useLocales';
 
 const CollectionVisualizationContainer = () => {
 	const { id } = useParams();
@@ -15,7 +16,7 @@ const CollectionVisualizationContainer = () => {
 
 	const permission = useSelector((state) => getPermission(state));
 	const [secondLang] = useSecondLang();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 
 	const fetchData = useCallback(() => {
 		Promise.all([

src/packages/modules-concepts/compare/home-container.js

@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { Loading } from '../../components';
 import ConceptCompare from './home';
 import { ConceptsApi } from '../../sdk';
 import { rmesHtmlToRawHtml } from '../../utils/html-utils';
-import { getLocales } from '../../redux/selectors';
 import { emptyNotes } from '../utils/notes';
 import { range } from '../../utils/array-utils';
 import { useSecondLang } from '../../utils/hooks/second-lang';
+import { useLocales } from '../../utils/hooks/useLocales';
+
 const ConceptCompareContainer = () => {
 	const { id } = useParams();
-	const langs = useSelector((state) => getLocales(state));
+	const langs = useLocales();
 	const [secondLang] = useSecondLang();
 	const [loading, setLoading] = useState(true);