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,17 @@
 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="/bookingseat/:id/:path" element={<BookingSeat/>}/>
+      </Routes>
 
-export default function App() {
-  return <h1>Hello world!</h1>
-}
+    </>
+  );
+}
+
+export default App;

src/Asset/SvgImg.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const SvgImg = ({colorName}) => {
+  return (
+<svg 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/components/BookingSeat.js

@@ -0,0 +1,66 @@
+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,
+  ConfirmButton,
+ } from "../styles/Booking.styled";
+import MovieSeats from "./MovieSeats";
+
+function BookingSeat() {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedSeats, setSelectedSeats] = useState([]);
+
+  let param = useParams();
+  let selected = [];
+
+  if (JSON.stringify(localStorage.getItem(param.id)) !== "null") {
+    selected = localStorage.getItem(param.id);
+  }
+
+  const modalHandle = () => {
+    setModalVisible(true);
+    switch (selectedSeats.length > 10) {
+      case true:
+        setModalVisible(false);
+        alert(`you can't select more than 10 seats.. 
+             you have selected ${selectedSeats.length} seats.
+             Please deselect ${selectedSeats.length - 10} seats`);
+        break;
+      default:
+        switch (selectedSeats.length) {
+          case 0:
+            setModalVisible(false);
+            alert(" Please select seats first");
+            break;
+          default:
+            selected = selected + selectedSeats + ",";
+            localStorage.setItem(param.id, selected);
+            selected = localStorage.getItem(param.id)
+        }
+    }
+  };
+
+  return (
+    <BookingStyles>
+      <VectorImg src={vector} alt="vector" />
+     <MovieSeats selectedSeats ={selectedSeats} 
+     selected ={selected} 
+     setSelectedSeats={setSelectedSeats}
+     />
+     <ConfirmButton onClick={modalHandle}>Confirm booking</ConfirmButton>
+      <article>
+        {modalVisible && (
+          <Modal
+            setVisible={setModalVisible}
+            selectedSeats={selectedSeats}
+            setSelectedSeats={setSelectedSeats}
+          />
+        )}
+      </article>
+    </BookingStyles>
+  );
+}
+export default BookingSeat;

src/components/HomePage.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import MovieCard from "./MovieCard";
+
+import { Container } from "../styles/Container.styled";
+import GlobalStyles from "../styles/Global.styled";
+import { Cards } from "../styles/Cards.styled"
+import PageNotFound from "./PageNotFound";
+import {apiUrl,searchUrl} from "./constants/Global"
+
+
+function HomePage(){
+  const [movies, setMovies] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    getMovies(apiUrl)
+  },
+    [])
+
+  async function getMovies(url) {
+    const response = await axios.get(url);
+    const result = response.data.results;
+
+    setMovies(result);
+  }
+
+  const submit = (e) => {
+    e.preventDefault();
+    if (searchTerm) {
+      getMovies(`${searchUrl}&query=${searchTerm}`)
+    } else {
+      getMovies(apiUrl)
+    }
+  }
+
+  return (
+    <>
+      <GlobalStyles />
+      <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,74 @@
+import React from "react";
+
+import {
+  ModalStyle,
+  CloseButton,
+  DataFlex,
+  MoviePic,
+  ModalH1,
+  ModalH3,
+  ModalH5,
+  ModalSmall,
+  ModalDiv,
+  ModalDivSeat,
+  ModalSeatH1,
+  ModalScreen,
+} from "../styles/Booking.styled";
+
+import close from "../Asset/Xclose.png";
+import { useParams } from "react-router";
+const imgUrl = "https://image.tmdb.org/t/p/w500/";
+export default function Modal({ setVisible, selectedSeats, setSelectedSeats }) {
+  const modalClose = () => {
+    setVisible(false);
+    setSelectedSeats([]);
+  };
+  const param = useParams();
+  return (
+    <ModalScreen>
+      <ModalStyle>
+        <CloseButton onClick={modalClose} src={close} alt="close" />
+        <ModalH1>Thank you for booking</ModalH1>
+        <ModalH3>Order Summary</ModalH3>
+        <ModalDiv>
+          <MoviePic src={imgUrl + param.path} alt="movie" />
+
+          <article>
+            <h3>Seats:</h3>
+            <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>
+  );
+}

src/components/MovieCard.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Card } from "../styles/MovieCard.styled";
+import {imgUrl,fakeImg} from './constants/Global'
+const MovieCard = ({ movie }) => {
+
+    return (
+        <Card key={movie.id}>
+            <h3>{movie.title}</h3>
+            <img src={movie.poster_path?imgUrl + movie.poster_path:fakeImg} alt={movie.id} />
+            <NavLink to={`/bookingseat/${movie.id}${movie.poster_path}`}>
+              <button>Book now</button>
+            </NavLink>
+        </Card>
+    )       
+
+}
+
+
+export default MovieCard;

src/components/MovieSeats.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { data } from "./constants/Global";
+import { BookingTableSeats, SeatRow } from "../styles/Booking.styled";
+import SvgImg from "../Asset/SvgImg";
+
+const MovieSeats = ({ selectedSeats, selected, setSelectedSeats }) => {
+  function handleSeats(id) {
+    if (selected.includes(id)) {
+      alert("already selected");
+      let data = selectedSeats.filter((item) => {
+        return selected.includes(id) !== selectedSeats[item];
+      });
+      setSelectedSeats(data);
+    } else {
+      if (selectedSeats.includes(id)) {
+        const updatedSeats = selectedSeats.filter((seatId) => seatId !== id);
+        setSelectedSeats(updatedSeats);
+      } else {
+        setSelectedSeats((prevSeats) => [...prevSeats, id]);
+      }
+    }
+  }
+  return (
+    <BookingTableSeats>
+      <thead>
+        <tr>
+          <th> </th>
+          {data.seats.map((seatno) => (
+            <th key={seatno}>{seatno}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.id.map((id) => {
+          return (
+            <React.Fragment key={id}>
+              <tr>
+                <SeatRow>{id}</SeatRow>
+                {data.seats.map((_, index) => {
+                  return (
+                    <React.Fragment key={index}>
+                      <td
+                        key={id + index}
+                        onClick={() => handleSeats(id + (index + 1))}
+                      >
+                        {(() => {
+                          switch (selected.includes(id + (index + 1))) {
+                            case true:
+                              return <SvgImg colorName="#626262" />;
+                            default:
+                              switch (
+                                selectedSeats.includes(id + (index + 1))
+                              ) {
+                                case true:
+                                  return <SvgImg colorName="#724FD8" />;
+                                default:
+                                  return <SvgImg colorName="#DADADA" />;
+                              }
+                          }
+                        })()}
+                      </td>
+                    </React.Fragment>
+                  );
+                })}
+              </tr>
+            </React.Fragment>
+          );
+        })}
+      </tbody>
+    </BookingTableSeats>
+  );
+};
+
+export default MovieSeats;

src/components/PageNotFound.js

@@ -0,0 +1,13 @@
+import React from "react";
+import img from "../Asset/undraw.png";
+import { Empty } from "../styles/Empty.styled";
+const PageNotFound = () => {
+  return (
+    <Empty>
+      <h2>Sorry, there is no result for keyword you searched.</h2>
+      <img src={img} alt="no img found" />
+    </Empty>
+  );
+};
+
+export default PageNotFound;

src/components/constants/Global.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],
+};