Fix plays route failture

plop-templates/component.hbs

@@ -4,11 +4,10 @@ import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
 
-function {{pascalCase name}}() {
+function {{pascalCase name}}(props) {
   // Do not remove the below lines. 
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.

src/common/routing/RouteDefs.jsx

@@ -3,9 +3,11 @@ import { Footer, Header, Home, PageNotFound } from "common";
 import PlayList from "common/playlists/PlayList";
 import { getAllPlays } from "meta/play-meta-util";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { cloneElement } from 'react'
 
 const RouteDefs = () => {
   const plays = getAllPlays();
+
   return (
     <BrowserRouter>
       <Header />
@@ -14,7 +16,7 @@ const RouteDefs = () => {
         <Route path="/plays" element={<App />}>
           <Route index element={<PlayList />} />
           {plays.map((play, index) => (
-            <Route key={index} path={play.path} element={play.component()} />
+            <Route key={index} path={play.path} element={cloneElement(play.component(), {id: play.id})}/>
           ))}
         </Route>
         <Route path="/*" element={<PageNotFound />} />

src/plays/clock/CurrentTimer.jsx

@@ -1,16 +1,15 @@
 
 import PlayHeader from 'common/playlists/PlayHeader';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
 import "./clock.css";
 
-const CurrentTimer = () => {
+const CurrentTimer = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
+
   // Create a real-time date time counter
   const [date, setDate] = useState(new Date());
 

src/plays/counter/CounterApp.jsx

@@ -1,14 +1,12 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 import Counter from "./Counter";
 import "./counter.css";
 
-function CounterApp() {
+function CounterApp(props) {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   const [input, setInput] = useState("");

src/plays/date-time-counter/CdTimerComp.jsx

@@ -1,13 +1,11 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import CountDownTimer from "./CountDownTimer";
 
-const CdTimerComp = () => {
+const CdTimerComp = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;

src/plays/movies/MovieContainer.jsx

@@ -1,17 +1,15 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import Movie from "./Movie";
 
 import useFetch from "common/hooks/useFetch";
 
 import "./movies.css";
 
-const MovieContainer = () => {
+const MovieContainer = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   const MOVIE_API_URI = 'https://json-faker.onrender.com/movies';

src/plays/org-tree/BasicTree.jsx

@@ -1,5 +1,4 @@
 import PlayHeader from "common/playlists/PlayHeader";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import { org } from "./org";
 import React, { Fragment } from "react";
@@ -21,10 +20,9 @@ const Card = (props) => {
   );
 };
 
-const BasicTree = () => {
+const BasicTree = (props) => {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   return (

src/plays/random-meme-generator/RandomMemeGenerator.jsx

@@ -1,17 +1,14 @@
-
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 import { useState, useEffect } from 'react';
 import { FaSyncAlt } from 'react-icons/fa';
 
 import PlayHeader from 'common/playlists/PlayHeader';
 import './random-meme-generator.css';
 
-function RandomMemeGenerator() {
+function RandomMemeGenerator(props) {
   // Do not remove the below lines. 
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.

src/plays/social-card/SocialCard.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
@@ -11,10 +10,9 @@ import { SocialContext } from './context/SocialContext';
 
 import "./social-card.css";
 
-function SocialCard() {
+function SocialCard(props) {
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // The social state carry the information of the social

src/plays/states/States.jsx

@@ -1,14 +1,12 @@
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import { getPlayById } from "meta/play-meta-util";
 import PlayHeader from "common/playlists/PlayHeader";
 import "./states.css";
 
-function States() {
+function States(props) {
   // Do not remove the below lines.
   // The following code is to fetch the current play from the URL
-  const location = useLocation();
-  const { id } = location.state;
+  const { id } = props;
   const play = getPlayById(id);
 
   // Your Code Start below.