johnsmil-redux-01-setup-store - create slice, useSelector(), render list.

starter/src/App.jsx

@@ -0,0 +1,10 @@
+import CartContainer from "./components/CartContainer";
+import Navbar from "./components/Navbar";
+
+function App() {
+  return <main>
+    <Navbar />
+    <CartContainer />
+  </main>;
+}
+export default App;

starter/src/components/CartContainer/index.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import CartItem from "../CartItem";
+
+const CartContainer = () => {
+  const {amount, cartItems, total} = useSelector(store => store.cart);
+
+  if (amount < 1) {
+    return (
+      <section className="cart">
+        {/* cart header */}
+
+        <header>
+          <h2>your bag</h2>
+          <h4 className="empty-cart">is currently empty</h4>
+        </header>
+      </section>
+    );
+  }
+
+  return (
+    <section className="cart">
+      {/* cart header */}
+      <header>
+        <h2>your bag</h2>
+      </header>
+
+      {/* cart items */}
+      <div>
+        {cartItems.map(item => {
+          return <CartItem
+            key={item.id}
+            {...item}
+          />;
+        })}
+      </div>
+
+      {/* cart footer */}
+      <footer>
+        <hr />
+
+        <div className="cart-total">
+          <h4>
+            total <span>${total}</span>
+          </h4>
+        </div>
+
+        <button className="btn clear-btn">clear cart</button>
+      </footer>
+    </section>
+  );
+};
+
+export default CartContainer;
+

starter/src/components/CartItem/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const CartItem = () => {
+  return (
+    <div>Cart Item</div>
+  );
+};
+
+export default CartItem;
+

starter/src/components/Navbar/index.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import {CartIcon} from "../../icons";
+
+const Navbar = () => {
+  const {amount} = useSelector(state => state.cart);
+
+  return (
+    <nav>
+      <div className="nav-center">
+        <h3>Redux Toolkit</h3>
+
+        <div className="nav-container">
+          <CartIcon />
+
+          <div className="amount-container">
+            <p className="total-amount">
+            {amount}
+            </p>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
+

starter/src/features/cart/cartSlice.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+import cartItems from "../../cartItems.js";
+
+const initialState = {
+  cartItems: cartItems,
+  amount: 4,
+  total: 0,
+  isLoading: true
+};
+
+const cartSlice = createSlice({
+  name: "cart",
+  initialState,
+});
+
+console.log(cartSlice);
+
+export default cartSlice.reducer;
+

starter/src/icons.js

@@ -46,3 +46,10 @@ export const ChevronUp = () => {
     </svg>
   );
 };
+
+export const Testing = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+  </svg>
+);
+

starter/src/index.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
 import './index.css';
 import App from './App';
+import { store } from './store';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );

starter/src/store.js

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import cartReducer from "./features/cart/cartSlice";
+
+export const store = configureStore({
+  reducer: {
+    cart: cartReducer
+  }
+});
+