Initial commit

src/frontend/actions/index.ts

@@ -0,0 +1,9 @@
+import test, { TTest } from './testAction';
+
+export type TAction = TTest 
+
+const actions = {
+    test
+}
+
+export default actions

src/frontend/actions/testAction.ts

@@ -0,0 +1,25 @@
+export enum ActionTypesTest {
+    ChangeHello = 'CHANGE_HELLO'
+}
+
+export interface IChangeHello {
+    type: ActionTypesTest.ChangeHello
+    payload: IChangeHelloPayload
+}
+
+export interface IChangeHelloPayload {
+	hello: any | undefined
+}
+
+export type TTest = IChangeHello
+
+const changeHello = (payload: string) => ({
+    type: ActionTypesTest.ChangeHello,
+    payload
+})
+
+const actions = {
+    changeHello
+}
+
+export default actions

src/frontend/components/App.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import PrincipalRoutes from './PrincipalRoutes';
+import { config } from '../../../config';
+
+const App = () => {
+	if(config.ENV === 'development') {
+		useEffect(() => {
+			const ws = new WebSocket(`wss://${config.HOST}/ws`);
+			ws.onmessage = (event) => {
+				if (event.data === 'reload') {
+					window.location.reload();
+				}
+			};
+		}, []);
+	}
+
+	return <PrincipalRoutes />;
+};
+
+export default App;

src/frontend/components/InitialComponent.scss

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/frontend/components/InitialComponent.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './InitialComponent.scss';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+const InitialComponent = ({ hello }: { hello: string }) => {
+
+	return(
+		<div className="App">
+			<header className="App-header">
+				<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
+				<p>This is the text from the store of redux: <strong>{hello}</strong></p>
+				<p>
+					Edit <code>src/frontend/InitialComponent.jsx</code> and save to reload.
+				</p>
+				<a
+					className="App-link"
+					href="https://reactjs.org"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Learn React
+				</a>
+				<Link className="App-link" to="/other-component">Other Component</Link>
+			</header>
+		</div>
+	);
+};
+
+const mapStateToProps = (state) => {
+	return {
+		hello: state.testReducer.hello
+	};
+};
+
+export default connect(mapStateToProps)(InitialComponent);

src/frontend/components/OtherComponent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+// import logo from '../logo.svg';
+import './InitialComponent.scss';
+import { Link } from 'react-router-dom';
+
+const OtherComponent = () => (
+	<div className="App">
+		<header className="App-header">
+			<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
+			<p>
+            Edit <code>src/frontend/OtherComponent.jsx</code> and save to reload.
+			</p>
+			<Link className="App-link" to="/">Initial Component</Link>
+		</header>
+	</div>
+);
+
+export default OtherComponent;

src/frontend/components/PrincipalRoutes.tsx

@@ -0,0 +1,11 @@
+//Router
+import { useRoutes } from 'react-router-dom';
+//Routes
+import routes from '../../routes';
+
+const PrincipalRoutes = () => {
+	let element = useRoutes(routes);
+	return element;
+};
+
+export default PrincipalRoutes;

src/frontend/components/__tests__/App.test.cy.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ProviderMock } from '@mocks';
+import App from '@components/App';
+
+describe('Testing Card Component', () => {
+	beforeEach(() => {
+		cy.mount(
+			<ProviderMock>
+				<App />
+			</ProviderMock>
+		);
+	});
+	it('Show Text', () => {
+		cy.get('p').contains('Edit src/frontend/InitialComponent.jsx and save to reload.');
+	});
+});

src/frontend/components/__tests__/App.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ProviderMock } from '@mocks';
+import App from '@components/App';
+
+describe('<App/> Component', () => {
+    beforeEach(() => {
+        fetchMock.resetMocks();
+    });
+
+    it('Should render root <App /> Component', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        }));
+
+        render(
+            <ProviderMock>
+                <App />
+            </ProviderMock>
+        )
+    })
+})

src/frontend/converter/tsxToString.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+//Redux
+import { Provider } from 'react-redux';
+import setStore from '../setStore';
+import initialState from '../reducers/initialState';
+import { renderToString } from 'react-dom/server';
+import { StaticRouter } from 'react-router-dom/server';
+import App from '../components/App';
+
+const url = process.argv[2];
+
+const store = setStore({ initialState });
+
+const render = () => {
+	return renderToString(
+		<Provider store={store}>
+			<StaticRouter location={`${url}`} >
+				<App />
+			</StaticRouter>
+		</Provider>
+	);
+};
+
+console.log(render());

src/frontend/getPreloadedState/getPreloadedState.ts

@@ -0,0 +1,5 @@
+import setStore from '../setStore';
+import initialState from '../reducers/initialState';
+const store = setStore({ initialState });
+const preloadedState = store.getState();
+console.log(preloadedState);

src/frontend/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { hydrateRoot, createRoot } from 'react-dom/client';
+// Router
+import { BrowserRouter as Router } from 'react-router-dom';
+// Redux
+import { Provider } from 'react-redux';
+import { IInitialState } from './reducers/index';
+import setStore from './setStore';
+import { config } from '../../config';
+
+import './styles/global.scss';
+import App from './components/App';
+import serviceWorkerRegistration from '../../serviceWorkerRegistration';
+
+declare global {
+	interface Window {
+		__PRELOADED_STATE__?: IInitialState;
+	}
+}
+
+declare global {
+	interface NodeModule {
+		hot?: IHot;
+	}
+}
+
+interface IHot {
+	accept: unknown
+}
+
+const { ENV, PREFIX_URL } = config;
+
+const preloadedState = window.__PRELOADED_STATE__;
+const store = setStore({ initialState: preloadedState });
+
+delete window.__PRELOADED_STATE__;
+
+const container = document.getElementById('app')!;
+
+if(ENV === 'development') {
+	const root = createRoot(container);
+	root.render(
+		<Provider store={store}>
+			<Router basename={PREFIX_URL}>
+				<App />
+			</Router>
+		</Provider>
+	);
+}
+
+// add "const root" to be able to rerender.
+ENV === 'production' && hydrateRoot(container,
+	<Provider store={store}>
+		<Router basename={PREFIX_URL}>
+			<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((ENV) && (ENV === 'production')){
+	serviceWorkerRegistration();
+}
+
+/*if(module.hot){
+	module.hot.accept();
+}*/

src/frontend/reducers/index.ts

@@ -0,0 +1,14 @@
+import { combineReducers } from 'redux';
+import testReducer from './testReducer';
+import { IChangeHelloPayload } from '../actions/testAction';
+
+export interface IInitialState {
+	testReducer?: IChangeHelloPayload | undefined
+}
+
+const rootReducer = combineReducers({
+	// Here comes the reducers
+	testReducer
+});
+
+export default rootReducer;

src/frontend/reducers/initialState.ts

@@ -0,0 +1,3 @@
+import { IInitialState } from './';
+const initialState: IInitialState = {};
+export default  initialState;

src/frontend/reducers/testReducer.ts

@@ -0,0 +1,20 @@
+import { TAction } from '../actions';
+
+const initialState = {
+	hello: 'world'
+};
+
+const testReducer = (state = initialState, action: TAction) => {
+	switch (action.type){
+	case 'CHANGE_HELLO': {
+		const newHello = action.payload.hello;
+		return {
+			hello: newHello
+		};
+	}
+	default:
+		return state;
+	}
+};
+
+export default testReducer;

src/frontend/setStore.ts

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

src/frontend/styles/global.scss

@@ -0,0 +1,5 @@
+$base-color: #282c34;
+
+body {
+    background-color: $base-color;
+}