PR-753737: Se agrega soporte para typescript.

src/frontend/index.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-// Router
-import { BrowserRouter as Router } from 'react-router-dom';
-// History
-import { createBrowserHistory } from 'history';
-// Redux
-import { createStore } from 'redux'; //, applyMiddleware
-import { Provider } from 'react-redux';
-import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
-import { config } from '../config';
-import reducer from './reducers';
-
-import App from './components/App';
-import './styles/global.sass';
-
-// Redux DevTools
-/* declare global {
-    interface Window {
-        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
-    }
-} */
-
-const { env } = config;
-
-const composeEnhancers = composeWithDevToolsWeb({
-	// Specify here name, actionsBlacklist, actionsCreators and other options
-});
-
-const preloadedState = window.__PRELOADED_STATE__;
-
-const store = env === 'development' ? createStore(
-	reducer,
-	preloadedState,
-	composeEnhancers(),
-) : createStore(
-	reducer,
-	preloadedState,
-);
-
-delete window.__PRELOADED_STATE__;
-
-const container = document.getElementById('app');
-const history = createBrowserHistory();
-
-// add "const root" to be able to rerender.
-hydrateRoot(container,
-	<Provider store={store}>
-		<Router history={history}>
-			<App />
-		</Router>
-	</Provider>,
-	// Add this comment to update later app and remove warning
-	/* { 
-        onRecoverableError: (error) => {
-          console.error("recoverable", error);
-        }
-    }, */
-);
-
-// Use root.render to update later the app
-/* root.render(
-    <Provider store={store}>
-        <Router history={history}>
-            <App />
-        </Router>
-    </Provider>
-); */
-
-if (module.hot) {
-	module.hot.accept();
-}

src/frontend/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+// Router
+import { BrowserRouter as Router } from 'react-router-dom';
+// Redux
+import { Provider } from 'react-redux';
+import { IInitialState } from './reducers/index.js';
+import setStore from './setStore.js';
+
+import App from './components/App';
+import './styles/global.sass';
+
+declare global {
+	interface Window {
+		__PRELOADED_STATE__?: IInitialState;
+	}
+}
+
+declare global {
+	interface NodeModule {
+		hot?: IHot;
+	}
+}
+
+interface IHot {
+	accept: any
+}
+
+const preloadedState = window.__PRELOADED_STATE__;
+const store = setStore({ initialState: preloadedState });
+
+delete window.__PRELOADED_STATE__;
+
+const container = document.getElementById('app')!;
+
+// add "const root" to be able to rerender.
+hydrateRoot(container,
+	<Provider store={store}>
+		<Router>
+			<App />
+		</Router>
+	</Provider>,
+	// Add this comment to update later app and remove warning
+	/* { 
+        onRecoverableError: (error) => {
+          console.error("recoverable", error);
+        }
+    }, */
+);
+
+// Use root.render to update later the app
+/* root.render(
+    <Provider store={store}>
+        <Router>
+            <App />
+        </Router>
+    </Provider>
+); */
+
+if(module.hot){
+	module.hot.accept();
+};

src/frontend/reducers/index.ts

@@ -1,5 +1,9 @@
 import { combineReducers } from 'redux';
-import testReducer from './testReducer';
+import testReducer, { ITestReducer } from './testReducer';
+
+export interface IInitialState {
+	testReducer?: ITestReducer | undefined
+}
 
 const rootReducer = combineReducers({
 	// Here comes the reducers

src/frontend/reducers/initialState.js

@@ -1,3 +1,2 @@
 let initialState = {};
-
 export default  initialState;

src/frontend/reducers/testReducer.ts

@@ -1,8 +1,12 @@
+export interface ITestReducer {
+	hello: any | undefined
+}
+
 const initialState = {
 	hello: 'world'
 };
 
-let testReducer = (state = initialState, action) => {
+let testReducer = (state = initialState, action: { type: any; payload: { hello: any; }; }) => {
 	switch (action.type){
 	case 'CHANGE_HELLO': {
 		let newHello = action.payload.hello;

src/frontend/setStore.js

@@ -0,0 +1,26 @@
+// Redux
+import { createStore } from 'redux'; //, applyMiddleware
+// import { Provider } from 'react-redux';
+import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
+import { config } from '../config';
+import reducer from './reducers';
+
+const { env } = config;
+
+const composeEnhancers = composeWithDevToolsWeb({
+	// Specify here name, actionsBlacklist, actionsCreators and other options
+});
+
+const setStore = ({ initialState }) => {
+	const store = env === 'development' ? createStore(
+		reducer,
+		initialState,
+		composeEnhancers(),
+	) : createStore(
+		reducer,
+		initialState,
+	);
+	return store;
+};
+
+export default setStore;