From a32d7e30229359867e1e857566b721812e234fc9 Mon Sep 17 00:00:00 2001 From: Mohammed Date: Tue, 19 Apr 2022 15:53:43 +0000 Subject: [PATCH 1/3] Fix plays route failture --- .gitpod.yml | 9 +++++++++ src/common/routing/RouteDefs.jsx | 4 +++- src/plays/clock/CurrentTimer.jsx | 7 +++---- src/plays/counter/CounterApp.jsx | 6 ++---- src/plays/date-time-counter/CdTimerComp.jsx | 6 ++---- src/plays/movies/MovieContainer.jsx | 6 ++---- src/plays/org-tree/BasicTree.jsx | 6 ++---- src/plays/random-meme-generator/RandomMemeGenerator.jsx | 7 ++----- src/plays/social-card/SocialCard.jsx | 6 ++---- src/plays/states/States.jsx | 6 ++---- 10 files changed, 29 insertions(+), 34 deletions(-) create mode 100644 .gitpod.yml diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000000..a7ddbe677a --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,9 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) +# and commit this file to your remote git repository to share the goodness with others. + +tasks: + - init: yarn install && yarn run build + command: yarn run start + + diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx index 238e0acf5f..8caeec6f5f 100644 --- a/src/common/routing/RouteDefs.jsx +++ b/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 (
@@ -14,7 +16,7 @@ const RouteDefs = () => { }> } /> {plays.map((play, index) => ( - + ))} } /> diff --git a/src/plays/clock/CurrentTimer.jsx b/src/plays/clock/CurrentTimer.jsx index 2b7c511f46..bbf3bfc15b 100644 --- a/src/plays/clock/CurrentTimer.jsx +++ b/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()); diff --git a/src/plays/counter/CounterApp.jsx b/src/plays/counter/CounterApp.jsx index 11db6168f3..029f484e7f 100644 --- a/src/plays/counter/CounterApp.jsx +++ b/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(""); diff --git a/src/plays/date-time-counter/CdTimerComp.jsx b/src/plays/date-time-counter/CdTimerComp.jsx index eb6d838838..b05e528ec8 100644 --- a/src/plays/date-time-counter/CdTimerComp.jsx +++ b/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; diff --git a/src/plays/movies/MovieContainer.jsx b/src/plays/movies/MovieContainer.jsx index b1c8dd7567..a6292ab597 100644 --- a/src/plays/movies/MovieContainer.jsx +++ b/src/plays/movies/MovieContainer.jsx @@ -1,6 +1,5 @@ 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"; @@ -8,10 +7,9 @@ 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'; diff --git a/src/plays/org-tree/BasicTree.jsx b/src/plays/org-tree/BasicTree.jsx index d41073cd3d..f24ad67d8b 100644 --- a/src/plays/org-tree/BasicTree.jsx +++ b/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 ( diff --git a/src/plays/random-meme-generator/RandomMemeGenerator.jsx b/src/plays/random-meme-generator/RandomMemeGenerator.jsx index c3e7e44c13..1dfe4c7876 100644 --- a/src/plays/random-meme-generator/RandomMemeGenerator.jsx +++ b/src/plays/random-meme-generator/RandomMemeGenerator.jsx @@ -1,5 +1,3 @@ - -import { useLocation } from 'react-router-dom'; import { getPlayById } from 'meta/play-meta-util'; import { useState, useEffect } from 'react'; import { FaSyncAlt } from 'react-icons/fa'; @@ -7,11 +5,10 @@ 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. diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx index 2d81aec384..786bd0c386 100644 --- a/src/plays/social-card/SocialCard.jsx +++ b/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 diff --git a/src/plays/states/States.jsx b/src/plays/states/States.jsx index 2010fcb200..f879100b0f 100644 --- a/src/plays/states/States.jsx +++ b/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. From 9f0c609bb1792c50d71b45a0330a8aab054d3d7a Mon Sep 17 00:00:00 2001 From: Mohammed Taha <62352949+6km@users.noreply.github.com> Date: Tue, 19 Apr 2022 17:57:48 +0200 Subject: [PATCH 2/3] Delete .gitpod.yml --- .gitpod.yml | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 .gitpod.yml diff --git a/.gitpod.yml b/.gitpod.yml deleted file mode 100644 index a7ddbe677a..0000000000 --- a/.gitpod.yml +++ /dev/null @@ -1,9 +0,0 @@ -# This configuration file was automatically generated by Gitpod. -# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) -# and commit this file to your remote git repository to share the goodness with others. - -tasks: - - init: yarn install && yarn run build - command: yarn run start - - From 4bef5b4898659e53e3906fe2520fcd5a5a699cff Mon Sep 17 00:00:00 2001 From: Mohammed Date: Tue, 19 Apr 2022 17:03:26 +0000 Subject: [PATCH 3/3] Update component.hbs --- plop-templates/component.hbs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/plop-templates/component.hbs b/plop-templates/component.hbs index b982c07fea..ee365c00f6 100644 --- a/plop-templates/component.hbs +++ b/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.