Cart Content

cart/src/App.jsx

@@ -3,8 +3,17 @@ import ReactDOM from "react-dom";
 
 import "./index.scss";
 
-const App = () => (
-  <div className="mt-10 text-3xl mx-auto max-w-6xl">
-  </div>
-);
+import Header from "home/Header";
+import Footer from "home/Footer";
+import CartContent from "./CartContent";
+
+const App = () => {
+    return (
+    <div>
+        <Header />
+        <CartContent />
+        <Footer />
+    </div>
+    )
+};
 ReactDOM.render(<App />, document.getElementById("app"));

cart/src/CartContent.jsx

@@ -0,0 +1,8 @@
+import React, { useState, useEffect }  from "react";
+
+export default function CartContent(){
+    const [token, setToken] = useState("");
+
+    useEffect(() => {}, []);
+    return <div> JWT {token} </div> ;
+}

cart/src/cart.js

@@ -0,0 +1,17 @@
+import { BehaviourSubject} from "rxjs";
+
+const API_SERVER = "http://localhost:8080";
+export const jwt = new BehaviourSubject(null);
+
+// Not dealing with route protection/ error routes
+export const login = (username, password) => fetch(`${API_SERVER}/auth/login`, {
+    method: "POST",
+    headers: {"Content-Type" : "application/json"},
+    body: JSON.stringify({username, password})
+})
+    .then((res) => res.json())
+    .then((data) => {
+        jwt.next(data.access_token);
+        return data.access_token;
+    });
+

cart/webpack.config.js

@@ -43,7 +43,11 @@ module.exports = (_, argv) => ({
     new ModuleFederationPlugin({
       name: "cart",
       filename: "remoteEntry.js",
-      remotes: {},
+      remotes: {
+        home: "home@http://localhost:3000/remoteEntry.js",
+        pdp: "pdp@http://localhost:3001/remoteEntry.js",
+        cart: "cart@http://localhost:3002/remoteEntry.js"
+      },
       exposes: {},
       shared: {
         ...deps,