✨ Added header for all the plays now

src/plays/movies/MovieContainer.js

@@ -1,37 +1,45 @@
-
-
-import { movies } from 'data/movies';
-import { useEffect, useState } from 'react';
-import Movie from './Movie';
-import './movies.css';
-
+import PlayHeader from "common/playlists/PlayHeader";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { getPlayById } from "meta/play-meta";
+import { movies } from "data/movies";
+import Movie from "./Movie";
+import "./movies.css";
 
 const fetchMovies = () => {
  return movies;
 };
 
 const MovieContainer = () => {
- console.log(fetchMovies());
+ // The following code is to fetch the current play from the URL
+ const location = useLocation();
+ const { id } = location.state;
+ const play = getPlayById(id);
 
  const [movies, setMovies] = useState([]);
 
  useEffect(() => {
  const movies = fetchMovies();
- console.log('MovieContainer: useEffect: movies: ', movies);
+ console.log("MovieContainer: useEffect: movies: ", movies);
  setMovies(movies);
  }, []);
 
- return(
- <div className="movie-container">
- <h2>Movies</h2>
- <ul className ="movie-list">
- {movies.map(movie => (
- <Movie movie={movie} key={movie.id} />
- ))}
- </ul> 
- </div>
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={play} />
+ <div className="play-details-body">
+ <div className="movie-container">
+ <ul className="movie-list">
+ {movies.map((movie) => (
+ <Movie movie={movie} key={movie.id} />
+ ))}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </>
  );
 };
 
 export default MovieContainer;
-

src/plays/why-react/WhyReact.js

@@ -1,7 +1,14 @@
-import { useState } from 'react';
-import './why-react.css';
+import PlayHeader from "common/playlists/PlayHeader";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { getPlayById } from "meta/play-meta";
+import "./why-react.css";
 
 const WhyReact = () => {
+ // The following code is to fetch the current play from the URL
+ const location = useLocation();
+ const { id } = location.state;
+ const play = getPlayById(id);
  const [reasons] = useState([
  "React is Declarative",
  "It is fast",
@@ -12,26 +19,27 @@ const WhyReact = () => {
  "Write Once, Use Everywhere",
  ]);
 
- return(
+ return (
  <>
- <h1>React</h1>
- <p>
- React is a JavaScript library for building user interfaces.
- It is maintained by <b>Facebook</b> and a community of individual developers and companies.
- </p>
+ <div className="play-details">
+ <PlayHeader play={play} />
+ <div className="play-details-body">
+ <p>
+ React is a JavaScript library for building user interfaces. It is
+ maintained by <b>Facebook</b> and a community of individual
+ developers and companies.
+ </p>
 
- <ul>
- <h2 className="heading">Why React?</h2>
- {
- reasons.map((reason, index) => {
- return(
- <li key={index}>{reason}</li>
- );
- })
- }
- </ul>
+ <ul>
+ <h2 className="heading">Why React?</h2>
+ {reasons.map((reason, index) => {
+ return <li key={index}>{reason}</li>;
+ })}
+ </ul>
+ </div>
+ </div>
  </>
- )
+ );
 };
 
-export default WhyReact;
+export default WhyReact;