13 |
14 |
15 |
17 |
18 |
21 | );
22 | };
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/cart/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/products/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/main/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "fruit-plate.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "fruit-plage.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "fruit-plage.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/main/src/bootstrap.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(
8 | document.getElementById('root') as HTMLElement
9 | );
10 | root.render(
11 | Products
19 |Sorry.. there was an error
; 28 | } 29 | 30 | return this.props.children; 31 | } 32 | } 33 | 34 | export default ErrorBoundary; -------------------------------------------------------------------------------- /main/src/components/ErrorBoundary/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component, ErrorInfo, ReactNode } from "react"; 2 | 3 | interface Props { 4 | children?: ReactNode; 5 | } 6 | 7 | interface State { 8 | hasError: boolean; 9 | } 10 | 11 | class ErrorBoundary extends ComponentSorry.. there was an error
; 28 | } 29 | 30 | return this.props.children; 31 | } 32 | } 33 | 34 | export default ErrorBoundary; -------------------------------------------------------------------------------- /products/src/components/ErrorBoundary/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component, ErrorInfo, ReactNode } from "react"; 2 | 3 | interface Props { 4 | children?: ReactNode; 5 | } 6 | 7 | interface State { 8 | hasError: boolean; 9 | } 10 | 11 | class ErrorBoundary extends ComponentSorry.. there was an error
; 28 | } 29 | 30 | return this.props.children; 31 | } 32 | } 33 | 34 | export default ErrorBoundary; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "micro-frontend-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "engines": { 6 | "npm": ">=8.0.0", 7 | "node": ">=16.0.0 " 8 | }, 9 | "devDependencies": { 10 | "turbo": "^1.10.12" 11 | }, 12 | "scripts": { 13 | "start": "yarn turbo run start", 14 | "build": "yarn turbo run build", 15 | "test": "yarn turbo run test" 16 | }, 17 | "workspaces": [ 18 | "main", 19 | "cart", 20 | "products" 21 | ], 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "packageManager": "yarn@3.6.1" 41 | } 42 | -------------------------------------------------------------------------------- /cart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 |Unable to Fetch: {`${remote}/${component}`}
;
25 | const Component = React.lazy(
26 | loadComponent(remote, remoteUrl, `./${component}`, scope)
27 | );
28 | return (
29 |
23 |
24 | <>
25 |
52 |
53 |
27 |
28 |
49 |
50 |
51 |
32 | ← Back
33 |
51 | );
52 | };
53 |
54 | export default CheckoutPage;
55 |
--------------------------------------------------------------------------------
/cart/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 | const Dotenv = require("dotenv-webpack");
4 | const { dependencies } = require("./package.json");
5 |
6 | module.exports = (env) => {
7 | const PRODUCTS_HOST = env.PRODUCTS_HOST || "http://localhost:9002";
8 | return {
9 | mode: "development",
10 | devServer: {
11 | port: 9003,
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.(js|jsx|ts|tsx)?$/,
17 | exclude: /node_modules/,
18 | use: [
19 | {
20 | loader: "babel-loader",
21 | options: {
22 | presets: ["@babel/preset-env", "@babel/preset-react"],
23 | },
24 | },
25 | ],
26 | },
27 | {
28 | test: /\.(ts|tsx)?$/,
29 | exclude: /node_modules/,
30 | use: [
31 | {
32 | loader: "ts-loader",
33 | },
34 | ],
35 | },
36 | ],
37 | },
38 | plugins: [
39 | new Dotenv(),
40 | new ModuleFederationPlugin({
41 | name: "CART",
42 | filename: "remoteEntry.js",
43 | exposes: {
44 | "./Cart": "./src/components/CartButton",
45 | "./CheckoutPage": "./src/features/checkout",
46 | },
47 | remotes: {
48 | PRODUCTS: `PRODUCTS@${PRODUCTS_HOST}/remoteEntry.js`,
49 | },
50 | shared: {
51 | ...dependencies,
52 | react: {
53 | eager: true,
54 | singleton: true,
55 | requiredVersion: dependencies["react"],
56 | },
57 | "react-dom": {
58 | eager: true,
59 | singleton: true,
60 | requiredVersion: dependencies["react-dom"],
61 | },
62 | },
63 | }),
64 | new HtmlWebpackPlugin({
65 | template: "./public/index.html",
66 | }),
67 | ],
68 | resolve: {
69 | extensions: [".js", ".jsx", ".ts", ".tsx"],
70 | },
71 | target: "web",
72 | };
73 | };
74 |
--------------------------------------------------------------------------------
/main/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | export const fetchRemote = (url, remoteName) =>
3 | new Promise((resolve, reject) => {
4 | // We define a script tag to use the browser for fetching the remoteEntry.js file
5 | const script = document.createElement("script");
6 | script.src = url;
7 | script.onerror = (err) => {
8 | console.error(err);
9 | reject(new Error(`Failed to fetch remote: ${remoteName}`));
10 | };
11 | // When the script is loaded we need to resolve the promise back to Module Federation
12 | script.onload = () => {
13 | // The script is now loaded on window using the name defined within the remote
14 | const proxy = {
15 | get: (request) => window[remoteName].get(request),
16 | init: (arg) => {
17 | try {
18 | return window[remoteName].init(arg);
19 | } catch (e) {
20 | console.error(e);
21 | console.error(`Failed to initialize remote: ${remoteName}`);
22 | reject(e);
23 | }
24 | },
25 | };
26 | resolve(proxy);
27 | };
28 | // Lastly we inject the script tag into the document's head to trigger the script load
29 | document.head.appendChild(script);
30 | });
31 |
32 | export const loadComponent =
33 | (remoteName, remoteUrl, moduleName, scope = "default") =>
34 | async () => {
35 | if (!(remoteName in window)) {
36 | // Need to load the remote first
37 | // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
38 | // eslint-disable-next-line no-undef
39 | await __webpack_init_sharing__(scope); // TODO when would you use a different scope?
40 | const fetchedContainer = await fetchRemote(
41 | `${remoteUrl.replace(/\/$/, "")}/remoteEntry.js`,
42 | remoteName
43 | );
44 | // eslint-disable-next-line no-undef
45 | await fetchedContainer.init(__webpack_share_scopes__[scope]);
46 | }
47 | const container = window[remoteName]; // Assuming the remote has been loaded using the above function
48 | const factory = await container.get(moduleName);
49 | const Module = factory();
50 | return Module;
51 | };
52 |
--------------------------------------------------------------------------------
/cart/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cart",
3 | "version": "0.1.0",
4 | "private": true,
5 | "peerDependencies": {
6 | "react": "*",
7 | "react-dom": "*"
8 | },
9 | "dependencies": {
10 | "@mui/icons-material": "^5.14.3",
11 | "@mui/material": "^5.14.5",
12 | "@mui/styled-engine-sc": "^5.12.0",
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-router-dom": "^6.15.0",
16 | "styled-components": "^6.0.7",
17 | "zustand": "^4.4.1"
18 | },
19 | "devDependencies": {
20 | "@babel/cli": "^7.22.10",
21 | "@babel/core": "^7.22.10",
22 | "@babel/plugin-transform-runtime": "^7.22.10",
23 | "@babel/plugin-transform-typescript": "^7.22.10",
24 | "@babel/preset-env": "^7.22.10",
25 | "@babel/preset-react": "^7.22.5",
26 | "@babel/preset-typescript": "^7.22.5",
27 | "@testing-library/jest-dom": "^6.0.0",
28 | "@testing-library/react": "^14.0.0",
29 | "@testing-library/user-event": "^14.4.3",
30 | "@types/jest": "^29.5.3",
31 | "@types/node": "^20.5.0",
32 | "@types/react": "^18.2.20",
33 | "@types/react-dom": "^18.2.7",
34 | "babel-loader": "^9.1.3",
35 | "dotenv-webpack": "^8.0.1",
36 | "html-webpack-plugin": "^5.5.3",
37 | "react-scripts": "5.0.1",
38 | "ts-loader": "^9.4.4",
39 | "typescript": "^5.1.6",
40 | "web-vitals": "^3.4.0",
41 | "webpack": "^5.88.2",
42 | "webpack-cli": "^5.1.4",
43 | "webpack-dev-server": "^4.15.1",
44 | "webpack-server": "^0.1.2"
45 | },
46 | "scripts": {
47 | "cra-start": "react-scripts start",
48 | "cra-build": "react-scripts build",
49 | "test": "react-scripts test",
50 | "eject": "react-scripts eject",
51 | "start": "webpack serve --env CART_HOST=http://localhost:9003 --env PRODUCTS_HOST=http://localhost:9002",
52 | "build": "webpack build"
53 | },
54 | "eslintConfig": {
55 | "extends": [
56 | "react-app",
57 | "react-app/jest"
58 | ]
59 | },
60 | "browserslist": {
61 | "production": [
62 | ">0.2%",
63 | "not dead",
64 | "not op_mini all"
65 | ],
66 | "development": [
67 | "last 1 chrome version",
68 | "last 1 firefox version",
69 | "last 1 safari version"
70 | ]
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/cart/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/main/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/products/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/products/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 | const Dotenv = require("dotenv-webpack");
4 | const { dependencies } = require("./package.json");
5 |
6 | module.exports = (env) => {
7 | const CART_HOST = env.CART_HOST || "http://localhost:9002";
8 | return {
9 | mode: "development",
10 | devServer: {
11 | port: 9002,
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.(js|jsx|ts|tsx)?$/,
17 | exclude: /node_modules/,
18 | use: [
19 | {
20 | loader: "babel-loader",
21 | options: {
22 | presets: ["@babel/preset-env", "@babel/preset-react"],
23 | },
24 | },
25 | ],
26 | },
27 | {
28 | test: /\.(ts|tsx)?$/,
29 | exclude: /node_modules/,
30 | use: [
31 | {
32 | loader: "ts-loader",
33 | },
34 | ],
35 | },
36 | {
37 | test: /\.(jpe?g|png|svg)$/,
38 | loader: "file-loader",
39 | options: {
40 | name: "[path][name].[hash].[ext]",
41 | },
42 | },
43 | ],
44 | },
45 | plugins: [
46 | new Dotenv(),
47 | new ModuleFederationPlugin({
48 | name: "PRODUCTS",
49 | filename: "remoteEntry.js",
50 | remotes: {
51 | CART: `CART@${CART_HOST}/remoteEntry.js`,
52 | },
53 | exposes: {
54 | "./ProductsList": "./src/components/ProductsList",
55 | "./ProductCard": "./src/components/ProductCard",
56 | "./products": "./src/products",
57 | },
58 | shared: {
59 | ...dependencies,
60 | react: {
61 | eager: true,
62 | singleton: true,
63 | requiredVersion: dependencies["react"],
64 | },
65 | "react-dom": {
66 | eager: true,
67 | singleton: true,
68 | requiredVersion: dependencies["react-dom"],
69 | },
70 | },
71 | }),
72 | new HtmlWebpackPlugin({
73 | template: "./public/index.html",
74 | }),
75 | ],
76 | resolve: {
77 | extensions: [".js", ".jsx", ".ts", ".tsx"],
78 | },
79 | };
80 | };
81 |
--------------------------------------------------------------------------------
/main/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 | const Dotenv = require("dotenv-webpack");
4 | const webpack = require("webpack");
5 | const { dependencies } = require("./package.json");
6 |
7 | module.exports = (env) => {
8 | const PRODUCTS_HOST = env.PRODUCTS_HOST || "http://localhost:9002";
9 | const CART_HOST = env.CART_HOST || "http://localhost:9002";
10 | return {
11 | mode: "development",
12 | devServer: {
13 | port: 9001,
14 | historyApiFallback: { index: "/", disableDotRule: true },
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.(js|jsx|ts|tsx)?$/,
20 | exclude: /node_modules/,
21 | use: [
22 | {
23 | loader: "babel-loader",
24 | options: {
25 | presets: ["@babel/preset-env", "@babel/preset-react"],
26 | plugins: ["@babel/plugin-transform-runtime"],
27 | },
28 | },
29 | ],
30 | },
31 | {
32 | test: /\.(ts|tsx)?$/,
33 | exclude: /node_modules/,
34 | use: [
35 | {
36 | loader: "ts-loader",
37 | },
38 | ],
39 | },
40 | {
41 | test: /\.css$/i,
42 | use: ["style-loader", "css-loader"],
43 | },
44 | ],
45 | },
46 | plugins: [
47 | new Dotenv(),
48 | new ModuleFederationPlugin({
49 | name: "MAIN",
50 | remotes: {
51 | // CART: `CART@${CART_HOST}/remoteEntry.js`,
52 | // PRODUCTS: `PRODUCTS@${PRODUCTS_HOST}/remoteEntry.js`,
53 | },
54 | shared: {
55 | ...dependencies,
56 | react: {
57 | eager: true,
58 | singleton: true,
59 | requiredVersion: dependencies["react"],
60 | },
61 | "react-dom": {
62 | eager: true,
63 | singleton: true,
64 | requiredVersion: dependencies["react-dom"],
65 | },
66 | },
67 | }),
68 | new HtmlWebpackPlugin({
69 | template: "./public/index.html",
70 | }),
71 | new webpack.DefinePlugin({
72 | "process.env.PRODUCTS_HOST": JSON.stringify(PRODUCTS_HOST),
73 | "process.env.CART_HOST": JSON.stringify(CART_HOST),
74 | }),
75 | ],
76 | resolve: {
77 | extensions: [".js", ".jsx", ".ts", ".tsx"],
78 | },
79 | };
80 | };
81 |
--------------------------------------------------------------------------------
/main/src/context/remotes.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useState, useContext, FC } from "react";
2 |
3 | export interface Remote {
4 | name: string;
5 | url?: string;
6 | }
7 |
8 | export interface Remotes {
9 | remotes: Remote[];
10 | updateRemoteUrl: (name: string, newUrl: string) => void;
11 | }
12 |
13 | const initRemotes = [
14 | { name: "PRODUCTS", url: process.env.PRODUCTS_HOST || "" },
15 | { name: "CART", url: process.env.CART_HOST || "" },
16 | ];
17 |
18 | const initState: Remotes = {
19 | remotes: initRemotes,
20 | updateRemoteUrl: () => {},
21 | };
22 |
23 | export const STORAGE_KEY = "fruit-remotes";
24 |
25 | const storeRemotes = (remotes: Remote[]) => {
26 | localStorage.setItem(STORAGE_KEY, JSON.stringify(remotes));
27 | };
28 |
29 | const hydrateRemotes = (): Remote[] => {
30 | try {
31 | const raw = localStorage.getItem(STORAGE_KEY);
32 | if (raw) {
33 | const parsed = JSON.parse(raw);
34 | if (Array.isArray(parsed)) {
35 | return parsed;
36 | }
37 | }
38 | return [];
39 | } catch {
40 | return [];
41 | }
42 | };
43 |
44 | export const RemotesContext = createContext(initState);
45 |
46 | export const RemotesProvider: FC<{
47 | children: any;
48 | }> = ({ children }) => {
49 | const storedRemotes = hydrateRemotes();
50 | const [remotes, setRemotes] = useStateCheckout
34 |Total: ${total.toFixed(2)}
35 |
36 | {cart.map(({ name, quantity }) => (
37 |
50 |
38 |
47 | ))}
48 | {cart.length === 0 && No items in cart
} 49 |
41 |
71 | );
72 | };
73 |
74 | export default CheckoutPanel;
75 |
--------------------------------------------------------------------------------
/main/src/components/RemoteControls/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import List from "@mui/material/List";
3 | import Cached from "@mui/icons-material/Cached";
4 | import Launch from "@mui/icons-material/Launch";
5 | import ListItem from "@mui/material/ListItem";
6 | import Button from "@mui/material/Button";
7 | import TextField from "@mui/material/TextField";
8 | import { useRemotes, STORAGE_KEY } from "../../context/remotes";
9 | import { findRemoteUrl } from "../../utils/remote";
10 |
11 | export const RemoteControls = () => {
12 | const [remotes, updateRemoteUrl] = useRemotes();
13 | const [productsUrl, setProductsUrl] = useState(
14 | findRemoteUrl("PRODUCTS", remotes)
15 | );
16 | const [cartUrl, setCartUrl] = useState(findRemoteUrl("CART", remotes));
17 | const handleProductsChange = (e: React.ChangeEventCart
42 |
43 |
52 |
53 | Total: ${total.toFixed(2)}
54 |
55 | {cart.map(({ name, quantity }) => (
56 |
70 |
57 |
67 | ))}
68 | {cart.length === 0 && No items in cart
} 69 |-
34 |
69 |
96 | );
97 | }
98 |
99 | return (
100 |
70 | {
72 | events?.publish("removeItem", { name, quantity: 1 });
73 | }}
74 | >
75 |
77 | {quantity}
78 | {
80 | events?.publish("addItem", { name });
81 | }}
82 | >
83 |
85 |
86 |
95 |
113 |
115 |