add data

Author: NguyenTri-2207

src/component/molecules/CardModal/index.js

@@ -111,23 +111,28 @@ export default function CartModal(props) {
             <h3> {dollarUSLocale.format(price)}đ</h3>
             <div className="evaluate">
               {dataStart.slice(0, props.start).map((index, item) => {
-                return <AiFillStar className="cardpro_evaluate_star" />;
+                return (
+                  <AiFillStar key={index} className="cardpro_evaluate_star" />
+                );
               })}
             </div>
             <div>
               {props.dataRam &&
                 props.dataRam.map((item, index) => {
                   return (
                     <button
+                      key={index}
                       onClick={() => handleRam(index)}
-                      className={`CartModal_Ram ${index === activeRam ? "activeRam" : ""
-                        }`}
+                      className={`CartModal_Ram ${
+                        index === activeRam ? "activeRam" : ""
+                      }`}
                     >
                       <span>{item}</span>
                       <img
                         alt="img"
-                        className={`CartModal_RamImg ${index === activeRam ? "d-block" : "d-none"
-                          }`}
+                        className={`CartModal_RamImg ${
+                          index === activeRam ? "d-block" : "d-none"
+                        }`}
                         src="https://frontend.tikicdn.com/_desktop-next/static/img/pdp_revamp_v2/selected-variant-indicator.svg"
                       />
                     </button>
@@ -138,10 +143,12 @@ export default function CartModal(props) {
               {dataColor.map((item, index) => {
                 return (
                   <button
+                    key={index}
                     style={{ background: item }}
                     onClick={() => handleColor(index)}
-                    className={`CartModal_color ${index === activeColor ? "activeColor" : ""
-                      }`}
+                    className={`CartModal_color ${
+                      index === activeColor ? "activeColor" : ""
+                    }`}
                   ></button>
                 );
               })}

src/component/molecules/CardProduct/index.js

@@ -54,10 +54,10 @@ const CardProduct = ({
       </div>
       <div className="cardpro_evaluate">
         {dataStart.slice(0, start).map((index, item) => {
-          return <AiFillStar className="cardpro_evaluate_star" />;
+          return <AiFillStar key={index} className="cardpro_evaluate_star" />;
         })}
         {dataStart.slice(0, 5 - start).map((index, item) => {
-          return <AiFillStar style={{ color: "#8e9195" }} />;
+          return <AiFillStar key={index} style={{ color: "#8e9195" }} />;
         })}
       </div>
       {cardSale ? (

src/component/molecules/Cart/index.js

@@ -39,7 +39,7 @@ export default function Cart({ ClickClose, deleteProduct, data }) {
             {data &&
               data.slice(1).map((item, index) => {
                 return (
-                  <div className="">
+                  <div className="" key={index}>
                     <div className="content_product">
                       <div className="cart_single d-flex align-items-center">
                         <div className="me-2 content_img">

src/component/organisms/Banner/index.js

@@ -3,7 +3,10 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./index.scss";
-
+import banner1 from "../../../images/banner/banner1.png";
+import banner2 from "../../../images/banner/banner2.png";
+import banner11 from "../../../images/banner/banner11.png";
+import banner12 from "../../../images/banner/banner12.png";
 const Banner = () => {
   var settings = {
     dots: false,
@@ -18,30 +21,16 @@ const Banner = () => {
         <div className="row">
           <div className="col-xl-9 col-12" style={{ borderRadius: "24px" }}>
             <Slider {...settings} className="banner_slider  ">
-              <img
-                alt="banner"
-                src="https://cdn.tgdd.vn/2021/12/banner/tet-samsung-830-300-830x300.png"
-              />
+              <img alt="banner" src={banner1} />
 
-              <img
-                alt="banner"
-                src="https://cdn.tgdd.vn/2022/01/banner/830-300-830x300-4.png"
-              />
+              <img alt="banner" src={banner2} />
             </Slider>
           </div>
           <div className="col-xl-3 d-xl-block d-none">
             <div className="banner_left">
-              <img
-                className="ImgBanner"
-                alt="banner"
-                src="https://cdn.hoanghamobile.com/i/home/Uploads/2022/01/05/san-pham-hot-ip-13.png"
-              />
+              <img className="ImgBanner" alt="banner" src={banner11} />
               <p className="m-0 banner_left-title">NHIỀU KHUYẾN MÃI HOT</p>
-              <img
-                className="ImgBanner"
-                alt="banner"
-                src="https://cdn.hoanghamobile.com/i/home/Uploads/2022/01/07/san-pham-hot-reno6.png"
-              />
+              <img className="ImgBanner" alt="banner" src={banner12} />
             </div>
           </div>
         </div>

src/component/organisms/Layout/index.js

@@ -6,7 +6,6 @@ import {
   Offcanvas,
   Nav,
   Accordion,
-  NavDropdown,
   Button,
 } from "react-bootstrap";
 
@@ -37,7 +36,6 @@ import LogIn from "../Login";
 import logo from "../../../images/icons/logo.png";
 import firebase from "../../../service/firebase";
 import { LoginContex } from "../../context";
-import { addDocument } from "../../../service/api";
 import { Link } from "react-router-dom";
 
 const Layout = ({ children }) => {
@@ -49,13 +47,20 @@ const Layout = ({ children }) => {
   const [showCart, setShowCart] = useState(false);
   const [showLove, setShowLove] = useState(false);
   const [showUser, setShowUser] = useState(false);
-
+  const [dataTest, setDataTest] = useState("");
   // gọi data redux cart
   const dataCart = useSelector((state) => state.cart);
 
-  console.log(dataCart);
+  // console.log(dataCart);
   // gọi data login
 
+  useEffect(() => {
+    fetch(`/api/greeting`)
+      .then((response) => response.json())
+      // 4. Setting *dogImage* to the image url that we received from the response above
+      .then((data) => setDataTest(data));
+  }, []);
+  console.log(dataTest);
   useEffect(() => {
     firebase.auth().onAuthStateChanged((user) => {
       setUserSucsecss(user);