FR | image files

package.json

@@ -15,6 +15,8 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "styled-components": "^5.3.5"

public/index.html

@@ -10,6 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Rubik:wght@600&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,5 +1,16 @@
 import React from "react";
+import { Routes, Route } from "react-router-dom";
+import HomePage from "../src/components/HomePage";
+import BookingSeat from "../src/components/BookingSeat";
+function App() {
+    return (
+        <>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/book/:id/:title" element={<BookingSeat />} />
+            </Routes>
+        </>
+    );
+}
 
-export default function App() {
-  return <h1>Hello world!</h1>
-}
+export default App;

src/Asset/SeatIcon.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const SvgImg = ({colorName,onClick}) => {
+  return (
+<svg  onClick={onClick} width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="29.5" y="12.5" width="41" height="41" fill={colorName} stroke="white"/>
+<mask id="path-2-inside-1_324_100" fill="white">
+<path fillRule="evenodd" clipRule="evenodd" d="M28 26H6V71H94V26H72V55H28V26Z"/>
+</mask>
+<path fillRule="evenodd" clipRule="evenodd" d="M28 26H6V71H94V26H72V55H28V26Z" fill={colorName}/>
+<path d="M6 26V25H5V26H6ZM28 26H29V25H28V26ZM6 71H5V72H6V71ZM94 71V72H95V71H94ZM94 26H95V25H94V26ZM72 26V25H71V26H72ZM72 55V56H73V55H72ZM28 55H27V56H28V55ZM6 27H28V25H6V27ZM7 71V26H5V71H7ZM94 70H6V72H94V70ZM93 26V71H95V26H93ZM72 27H94V25H72V27ZM71 26V55H73V26H71ZM72 54H28V56H72V54ZM29 55V26H27V55H29Z" fill="white" mask="url(#path-2-inside-1_324_100)"/>
+</svg>
+  )
+}
+
+export default SvgImg

src/GlobalConstants.js

@@ -0,0 +1,11 @@
+export const imgUrl = "https://image.tmdb.org/t/p/w500/";
+export const fakeImg = "http://via.placeholder.com/1080x1580/";
+export const apiKey = "api_key=" + process.env.REACT_APP_API_KEY;
+export const baseUrl = "https://api.themoviedb.org/3";
+export const apiUrl =
+    baseUrl + "/discover/movie?sort_by=popularity.desc&" + apiKey;
+export const searchUrl = baseUrl + "/search/movie?" + apiKey + "&query=";
+export const data = {
+    id: ["A", "B", "C", "D"],
+    seats: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+};

src/components/BookingSeat.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import Modal from "./Modal";
+import vector from "../Asset/Vector 1.png";
+import { BookingStyles, VectorImg } from "../styles/Booking.styled";
+import MovieSeats from "./MovieSeats";
+import { Button } from "../components/Button/Button";
+
+const BookingSeat = () => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedSeats, setSelectedSeats] = useState([]);
+
+  let param = useParams();
+  let bookedSeats = [];
+
+  if (JSON.stringify(localStorage.getItem(param.id)) !== "null") {
+    bookedSeats = localStorage.getItem(param.id);
+  }
+
+  const modalHandle = () => {
+    setModalVisible(true);
+    switch (true) {
+      case selectedSeats.length > 10:
+        setModalVisible(false);
+        alert(`you can't select more than 10 seats.. 
+             you have selected ${selectedSeats.length} seats.
+             Please deselect ${selectedSeats.length - 10} seats`);
+        break;
+
+      case selectedSeats.length === 0:
+        setModalVisible(false);
+        alert(" Please select seats first");
+        break;
+      default:
+        bookedSeats = bookedSeats + selectedSeats + ",";
+        localStorage.setItem(param.id, bookedSeats);
+        bookedSeats = localStorage.getItem(param.id);
+    }
+  };
+
+  return (
+    <BookingStyles>
+      <VectorImg src={vector} alt="vector" />
+      <MovieSeats
+        selectedSeats={selectedSeats}
+        bookedSeats={bookedSeats}
+        setSelectedSeats={setSelectedSeats}
+      />
+      <Button modalHandle={modalHandle} buttonText="Confirm booking"></Button>
+
+      {modalVisible && (
+        <Modal
+          setVisible={setModalVisible}
+          selectedSeats={selectedSeats}
+          setSelectedSeats={setSelectedSeats}
+        />
+      )}
+    </BookingStyles>
+  );
+};
+export default BookingSeat;

src/components/Button/Button.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { ButtonStyle } from "../Button/Button.styled";
+export const Button = (props) => {
+  return (
+    <ButtonStyle onClick={props.modalHandle}>{props.buttonText}</ButtonStyle>
+  );
+};

src/components/Button/Button.styled.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+export const ButtonStyle = styled.button`
+  height: 43px;
+
+  background-color: #352c9a;
+  color: #ffffff;
+  font-family: "Rubik";
+  font-size: 16px;
+  font-weight: 500;
+  border-style: none;
+
+  button:hover {
+    background-color: #724fd8;
+  }
+
+  button:active {
+    background-color: #724fdf;
+    text-decoration: underline;
+  }
+
+  button:disabled {
+    background-color: #626262;
+  }
+`;

src/components/HomePage.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import MovieCard from "./MovieCard";
+
+import { Container } from "../styles/Container.styled";
+
+import { Cards } from "../styles/Cards.styled";
+import PageNotFound from "./PageNotFound";
+import { apiUrl, searchUrl } from "../GlobalConstants";
+
+const HomePage = () => {
+  const [movies, setMovies] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const getMovies = async (url) => {
+    try {
+      const response = await axios.get(url);
+      const result = response.data.results;
+      setMovies(result);
+    } catch (e) {
+      console.log("error", e);
+    }
+  };
+
+  const submit = (e) => {
+    e.preventDefault();
+    if (searchTerm) {
+      getMovies(`${searchUrl}&query=${searchTerm}`);
+    } else {
+      getMovies(apiUrl);
+    }
+  };
+
+  useEffect(() => {
+    getMovies(apiUrl);
+  }, []);
+  return (
+    <>
+      <Container>
+        <h1>Book Tickets</h1>
+        <form onSubmit={submit}>
+          <input
+            type="text"
+            placeholder="search"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </form>
+      </Container>
+      {movies.length > 0 ? (
+        <Cards>
+          {movies.map((movie) => (
+            <MovieCard movie={movie} key={movie.id} />
+          ))}
+        </Cards>
+      ) : (
+        <PageNotFound />
+      )}
+    </>
+  );
+};
+
+export default HomePage;

src/components/Modal.js

@@ -0,0 +1,79 @@
+import React from "react";
+
+import {
+  ModalStyle,
+  CloseButton,
+  DataFlex,
+  MoviePic,
+  ModalH1,
+  ModalH3,
+  ModalH5,
+  ModalSmall,
+  ModalDiv,
+  ModalDivSeat,
+  ModalSeatH1,
+  ModalScreen,
+  ModalSeatH3,
+} from "../styles/Booking.styled";
+
+import close from "../Asset/Xclose.png";
+import { useParams } from "react-router";
+import { imgUrl } from "../GlobalConstants";
+
+const Modal = ({ setVisible, selectedSeats, setSelectedSeats }) => {
+  const modalClose = () => {
+    setVisible(false);
+    setSelectedSeats([]);
+  };
+  const param = useParams();
+  const imgPath = localStorage.getItem(param.title);
+
+  return (
+    <ModalScreen>
+      <ModalStyle>
+        <CloseButton onClick={modalClose} src={close} alt="close" />
+        <ModalH1>Thank you for booking</ModalH1>
+        <ModalH3>Order Summary</ModalH3>
+        <ModalDiv>
+          <MoviePic src={imgUrl + imgPath} alt="movie" />
+
+          <article>
+            <ModalSeatH3>Seats:</ModalSeatH3>
+            <ModalDivSeat>
+              <ModalSeatH1>{selectedSeats.toString()}</ModalSeatH1>
+            </ModalDivSeat>
+            <DataFlex>
+              <article>
+                <ModalH5>{selectedSeats.length}*250</ModalH5>
+                <br />
+                <ModalSmall>CGST(12%)</ModalSmall>
+                <br />
+                <ModalSmall>SGST(12%)</ModalSmall>
+              </article>
+              <article>
+                <ModalH5>{selectedSeats.length * 250}</ModalH5>
+                <br />
+                <ModalSmall>
+                  {12 * (1 / 100) * (selectedSeats.length * 250)}
+                </ModalSmall>
+                <br />
+                <ModalSmall>
+                  {12 * (1 / 100) * (selectedSeats.length * 250)}
+                </ModalSmall>
+              </article>
+            </DataFlex>
+            <hr />
+            <DataFlex>
+              <ModalH5>Total</ModalH5>
+              <ModalH5>
+                {selectedSeats.length * 250 +
+                  12 * (1 / 100) * (selectedSeats.length * 250) * 2}
+              </ModalH5>
+            </DataFlex>
+          </article>
+        </ModalDiv>
+      </ModalStyle>
+    </ModalScreen>
+  );
+};
+export default Modal;

src/components/MovieCard.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Card } from "../styles/MovieCard.styled";
+import { imgUrl, fakeImg } from "../GlobalConstants";
+import { Button } from "../components/Button/Button";
+const MovieCard = ({ movie }) => {
+  const ImagePath = (title, path) => {
+    localStorage.setItem(title, path);
+  };
+  return (
+    <Card key={movie.id}>
+      <h3>{movie.title}</h3>
+      <img
+        src={movie.poster_path ? imgUrl + movie.poster_path : fakeImg}
+        alt={movie.id}
+      />
+      <NavLink to={`/book/${movie.id}/${movie.title}`}>
+        <Button
+          modalHandle={() => ImagePath(movie.title, movie.poster_path)}
+          buttonText="Book Now"
+        ></Button>
+      </NavLink>
+    </Card>
+  );
+};
+
+export default MovieCard;