Add New Components and Display Movies

package.json

@@ -14,6 +14,8 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.0",
     "web-vitals": "^1.1.2"
   },

src/app/store.js

@@ -1,9 +1,11 @@
 import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
 import userReducer from "../features/user/userSlice";
+import movieReducer from "../features/movie/movieSlice";
 
 export default configureStore({
   reducer: {
     user: userReducer,
+    movie: movieReducer,
   },
   middleware: getDefaultMiddleware({
     serializableCheck: false,

src/components/Home.js

@@ -1,7 +1,88 @@
 import styled from "styled-components";
+import ImgSlider from "./ImgSlider";
+import NewDisney from "./NewDisney";
+import Originals from "./Originals";
+import Recommends from "./Recommends";
+import Trending from "./Trending";
+import Viewers from "./Viewers";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import db from "../firebase";
+import { setMovies } from "../features/movie/movieSlice";
+import { selectUserName } from "../features/user/userSlice";
 
 const Home = (props) => {
-  return <div>Home</div>;
+  const dispatch = useDispatch();
+  const userName = useSelector(selectUserName);
+  let recommends = [];
+  let newDisneys = [];
+  let originals = [];
+  let trending = [];
+
+  useEffect(() => {
+    console.log("hello");
+    db.collection("movies").onSnapshot((snapshot) => {
+      snapshot.docs.map((doc) => {
+        console.log(recommends);
+        switch (doc.data().type) {
+          case "recommend":
+            recommends = [...recommends, { id: doc.id, ...doc.data() }];
+            break;
+
+          case "new":
+            newDisneys = [...newDisneys, { id: doc.id, ...doc.data() }];
+            break;
+
+          case "original":
+            originals = [...originals, { id: doc.id, ...doc.data() }];
+            break;
+
+          case "trending":
+            trending = [...trending, { id: doc.id, ...doc.data() }];
+            break;
+          default:
+        }
+      });
+
+      dispatch(
+        setMovies({
+          recommend: recommends,
+          newDisney: newDisneys,
+          original: originals,
+          trending: trending,
+        })
+      );
+    });
+  }, [userName]);
+
+  return (
+    <Container>
+      <ImgSlider />
+      <Viewers />
+      <Recommends />
+      <NewDisney />
+      <Originals />
+      <Trending />
+    </Container>
+  );
 };
 
+const Container = styled.main`
+  position: relative;
+  min-height: calc(100vh - 250px);
+  overflow-x: hidden;
+  display: block;
+  top: 72px;
+  padding: 0 calc(3.5vw + 5px);
+  &:after {
+    background: url("/images/home-background.png") center center / cover
+      no-repeat fixed;
+    content: "";
+    position: absolute;
+    inset: 0px;
+    opacity: 1;
+    z-index: -1;
+  }
+`;
+
 export default Home;

src/components/ImgSlider.js

@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider from "react-slick";
+
+const ImgSlider = (props) => {
+  let settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+  };
+  return (
+    <Carousel {...settings}>
+      <Wrap>
+        <a>
+          <img src="/images/slider-badging.jpeg" alt="" />
+        </a>
+      </Wrap>
+
+      <Wrap>
+        <a>
+          <img src="/images/slider-scale.jpeg" alt="" />
+        </a>
+      </Wrap>
+
+      <Wrap>
+        <a>
+          <img src="/images/slider-badag.jpeg" alt="" />
+        </a>
+      </Wrap>
+
+      <Wrap>
+        <a>
+          <img src="/images/slider-scales.jpeg" alt="" />
+        </a>
+      </Wrap>
+    </Carousel>
+  );
+};
+
+const Carousel = styled(Slider)`
+  margin-top: 20px;
+  & > button {
+    opacity: 0;
+    height: 100%;
+    width: 5vw;
+    z-index: 1;
+    &:hover {
+      opacity: 1;
+      transition: opacity 0.2s ease 0s;
+    }
+  }
+  ul li button {
+    &:before {
+      font-size: 10px;
+      color: rgb(150, 158, 171);
+    }
+  }
+  li.slick-active button:before {
+    color: white;
+  }
+  .slick-list {
+    overflow: initial;
+  }
+  .slick-prev {
+    left: -75px;
+  }
+  .slick-next {
+    right: -75px;
+  }
+`;
+
+const Wrap = styled.div`
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  a {
+    border-radius: 4px;
+    box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
+      rgb(0 0 0 / 73%) 0px 16px 10px -10px;
+    cursor: pointer;
+    display: block;
+    position: relative;
+    padding: 4px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    &:hover {
+      padding: 0;
+      border: 4px solid rgba(249, 249, 249, 0.8);
+      transition-duration: 300ms;
+    }
+  }
+`;
+
+export default ImgSlider;

src/components/NewDisney.js

@@ -0,0 +1,89 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const NewDisney = (props) => {
+  return (
+    <Container>
+      <h4>New to Disney+</h4>
+      <Content>
+        <Wrap>
+          <Link to="/">
+            <img
+              src="https://cdntr1.img.sputniknews.com/img/103140/66/1031406660_0:261:5155:3175_600x0_80_0_0_f56e2ba783acb93d16f35661daced106.jpg.webp"
+              alt=""
+            />
+          </Link>
+        </Wrap>
+        <Wrap>
+          <Link to="/">
+            <img
+              src="https://cdntr1.img.sputniknews.com/img/103140/66/1031406660_0:261:5155:3175_600x0_80_0_0_f56e2ba783acb93d16f35661daced106.jpg.webp"
+              alt=""
+            />
+          </Link>
+        </Wrap>
+        <Wrap>
+          <Link to="/">
+            <img
+              src="https://cdntr1.img.sputniknews.com/img/103140/66/1031406660_0:261:5155:3175_600x0_80_0_0_f56e2ba783acb93d16f35661daced106.jpg.webp"
+              alt=""
+            />
+          </Link>
+        </Wrap>
+        <Wrap>
+          <Link to="/">
+            <img
+              src="https://cdntr1.img.sputniknews.com/img/103140/66/1031406660_0:261:5155:3175_600x0_80_0_0_f56e2ba783acb93d16f35661daced106.jpg.webp"
+              alt=""
+            />
+          </Link>
+        </Wrap>
+      </Content>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  padding: 0 0 26px;
+`;
+
+const Content = styled.div`
+  display: grid;
+  grid-gap: 25px;
+  gap: 25px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+`;
+
+const Wrap = styled.div`
+  padding-top: 56.25%;
+  border-radius: 10px;
+  box-shadow: rgb(0 0 0 / 69%) 0px 26px 30px -10px,
+    rgb(0 0 0 / 73%) 0px 16px 10px -10px;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
+  border: 3px solid rgba(249, 249, 249, 0.1);
+  img {
+    inset: 0px;
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    opacity: 1;
+    position: absolute;
+    transition: opacity 500ms ease-in-out 0s;
+    width: 100%;
+    z-index: 1;
+    top: 0;
+  }
+  &:hover {
+    box-shadow: rgb(0 0 0 / 80%) 0px 40px 58px -16px,
+      rgb(0 0 0 / 72%) 0px 30px 22px -10px;
+    transform: scale(1.05);
+    border-color: rgba(249, 249, 249, 0.8);
+  }
+`;
+export default NewDisney;