Fix 🐛 Bug reactplay#479: The Console has bunch of warnings (reactplay…

…#480) * Fix 🐛 Bug reactplay#479: The Console has bunch of warnings * Addressing review comments * Fix spacing issue * Remove `quoteArray` from dependency Co-authored-by: Tapas Adhikary <[email protected]>
Bhavika-Maurya · Aug 30, 2022 · 8a5aac2 · 8a5aac2
1 parent 6d02e4a
commit 8a5aac2
Show file tree

Hide file tree

Showing 16 changed files with 422 additions and 354 deletions.
diff --git a/src/common/createplay/CreatePlay.jsx b/src/common/createplay/CreatePlay.jsx
@@ -10,26 +10,34 @@ import "./create-play.scss";
 import Loader from "common/spinner/spinner";
 import { Plays } from "common/services/plays";
 import { useNavigate } from "react-router-dom";
-import { useSearchParams } from "react-router-dom";
-import { ReactComponent as NotAllowedImage } from "../../images/img-403.svg"
+import { ReactComponent as NotAllowedImage } from "../../images/img-403.svg";
 
 const NoCreationInProdScreen = () => {
- return <div className="w-full h-full flex flex-col justify-center items-center gap-8">
- <div>
- <NotAllowedImage width={550} />
- </div>
+ return (
+ <div className="w-full h-full flex flex-col justify-center items-center gap-8">
+ <div>
+ <NotAllowedImage width={550} />
+ </div>
 
- <div className="text-center">
- You can't create plays in production
- <br />
- <a className="text-link-default" href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md" target="_blank" rel="noopener noreferrer">read this</a> for more details
+ <div className="text-center">
+ You can't create plays in production
+ <br />
+ <a
+ className="text-link-default"
+ href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ read this
+ </a>{" "}
+ for more details
+ </div>
  </div>
- </div>
-}
+ );
+};
 
 const CreatePlay = () => {
  const { isAuthenticated, isLoading } = useAuthenticationStatus();
- const [searchParams] = useSearchParams();
 
  const userData = useUserData();
  let navigate = useNavigate();
@@ -102,7 +110,7 @@ const CreatePlay = () => {
  };
 
  if (process.env.NODE_ENV !== "development") {
- return <NoCreationInProdScreen />
+ return <NoCreationInProdScreen />;
  }
 
  if (isLoading || isDataLoading) {
@@ -115,7 +123,11 @@ const CreatePlay = () => {
  }
 
  if (!isAuthenticated) {
- window.location = NHOST.AUTH_URL(`https://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`);
+ window.location = NHOST.AUTH_URL(
+ `https://localhost:${
+ process.env.RAECT_APP_DEV_PORT ?? "3000"
+ }/plays/create`
+ );
  return null;
  } else {
  initializeData();

diff --git a/src/common/footer/ExtendedFooter.jsx b/src/common/footer/ExtendedFooter.jsx
@@ -11,70 +11,70 @@ const ExtendedFooter = () => {
  const { showShareModal, setShowShareModal } = useContext(SearchContext);
 
  return (
- <div className='app-footer--home app-footer'>
- <div className='app-footer-body'>
- <div className='body-primary'>
+ <div className="app-footer--home app-footer">
+ <div className="app-footer-body">
+ <div className="body-primary">
  <h3>
- <span className='sr-only'>ReactPlay</span>
- <img src={LogoLight} alt='Logo of ReactPlay' />
+ <span className="sr-only">ReactPlay</span>
+ <img src={LogoLight} alt="Logo of ReactPlay" />
  </h3>
- <p className='p-lg'>
+ <p className="p-lg">
  An open-source project made with ❤️ by{" "}
  <a
- href='https://tapasadhikary.com'
- className='text-link-default'
- target='_blank'
- rel='noopener noreferrer'
+ href="https://tapasadhikary.com"
+ className="text-link-default"
+ target="_blank"
+ rel="noopener noreferrer"
  >
  Tapas Adhikary
  </a>{" "}
  and friends.
  </p>
  <p>
  <small>Connect with us</small>
- <ul className='social-links'>
+ <ul className="social-links">
  <li>
  <a
- href='https://twitter.com/reactplayio'
- className='social-link'
- target='_blank'
- rel='noopener noreferrer'
+ href="https://twitter.com/reactplayio"
+ className="social-link"
+ target="_blank"
+ rel="noopener noreferrer"
  >
- <BsTwitter className='icon' />
- <span className='sr-only'>Twitter</span>
+ <BsTwitter className="icon" />
+ <span className="sr-only">Twitter</span>
  </a>
  </li>
  <li>
  <a
- href='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/reactplay'
- className='social-link'
- target='_blank'
- rel='noopener noreferrer'
+ href="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/reactplay"
+ className="social-link"
+ target="_blank"
+ rel="noopener noreferrer"
  >
- <BsGithub className='icon' />
- <span className='sr-only'>Github</span>
+ <BsGithub className="icon" />
+ <span className="sr-only">Github</span>
  </a>
  </li>
  <li>
  <a
- href='https://discord.gg/vrTxWUP8Am'
- className='social-link'
- target='_blank'
- rel='noopener noreferrer'
+ href="https://discord.gg/vrTxWUP8Am"
+ className="social-link"
+ target="_blank"
+ rel="noopener noreferrer"
  >
- <FaDiscord className='icon' />
- <span className='sr-only'>Discord</span>
+ <FaDiscord className="icon" />
+ <span className="sr-only">Discord</span>
  </a>
  </li>
  <li>
  <a
- href='https://blog.reactplay.io/'
- className='social-link'
- target='_blank'
- rel='noopener noreferrer'
+ href="https://blog.reactplay.io/"
+ className="social-link"
+ target="_blank"
+ rel="noopener noreferrer"
  >
- <IoLogoRss className='icon' />
- <span className='sr-only'>BlogPost</span>
+ <IoLogoRss className="icon" />
+ <span className="sr-only">BlogPost</span>
  </a>
  </li>
  </ul>
@@ -83,10 +83,10 @@ const ExtendedFooter = () => {
  <small>Email us</small>{" "}
  <div>
  <a
- href='mailto:[email protected]'
- target='_blank'
- rel='noopener noreferrer'
- className='text-link-default'
+ href="mailto:[email protected]"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="text-link-default"
  >
  [email protected]
  </a>
@@ -96,70 +96,71 @@ const ExtendedFooter = () => {
  <a href="https://www.netlify.com" className="inline-block"> <img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" /> </a>
  </p>
  </div>
- <div className='body-secondary'>
- <h3 className='section-title mt-3'>About</h3>
- <p className='mb-4'>
+ <div className="body-secondary">
+ <h3 className="section-title mt-3">About</h3>
+ <p className="mb-4">
  ReactPlay is an opensource platform that helps you learn, create and
  share ReactJS projects with the developer community.
  </p>
- <div className='flex flex-wrap gap-1'>
+ <div className="flex flex-wrap gap-1">
  <a
- href='https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md'
- target='_blank'
- rel='noopener noreferrer'
- className='btn-primary mr-2'
+ href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="btn-primary mr-2"
  >
- <IoAddSharp className='icon' />
- <span className='btn-label'>Create</span>
+ <IoAddSharp className="icon" />
+ <span className="btn-label">Create</span>
  </a>
- <Link to='/plays' className='btn-default-light'>
- <MdManageSearch className='icon' />
- <span className='btn-label'>Browse</span>
+ <Link to="/plays" className="btn-default-light">
+ <MdManageSearch className="icon" />
+ <span className="btn-label">Browse</span>
  </Link>
  </div>
- <p className='mt-10'>
+ <p className="mt-10">
  Not sure how to get started? <br />
  We have a lot of ideas for you to get started.
- <div className='mt-2'>
- <Link to='/ideas' className='home-anchor home-anchor-sm'>
- <span className='text'>Get started</span>
+ <div className="mt-2">
+ <Link to="/ideas" className="home-anchor home-anchor-sm">
+ <span className="text">Get started</span>
  </Link>
  </div>
- <div className='mt-2'>
+ <div className="mt-2">
  <a
- href='https://blog.reactplay.io/'
- target='_blank'
- rel='noopener noreferrer'
- className='home-anchor home-anchor-sm'
+ href="https://blog.reactplay.io/"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="home-anchor home-anchor-sm"
  >
- <span className='text'>Read our blog posts</span>
+ <span className="text">Read our blog posts</span>
  </a>
  </div>
  </p>
  </div>
- <div className='body-tertiary'>
- <h3 className='section-title'>Show love</h3>
- <p className='mb-2'>
+ <div className="body-tertiary">
+ <h3 className="section-title">Show love</h3>
+ <p className="mb-2">
  Enjoying ReactPlay? Please help us spreading the word You can share
  about ReactPlay on any of your favorite social media platforms.
  </p>
  <button
  onClick={() => setShowShareModal(!showShareModal)}
- className='home-anchor home-anchor-sm'
- href='#'
+ className="home-anchor home-anchor-sm"
+ href="#"
  >
- <span className='text'>Share about ReactPlay</span>
+ <span className="text">Share about ReactPlay</span>
  </button>
- <p className='mt-10 mb-2'>
+ <p className="mt-10 mb-2">
  Your support means a lot to us. Want to be our Sponsor and support
  us?
  </p>
  <a
- target='_blank'
- className='home-anchor home-anchor-sm'
- href='https://github.com/sponsors/reactplay'
+ target="_blank"
+ rel="noopener noreferrer"
+ className="home-anchor home-anchor-sm"
+ href="https://github.com/sponsors/reactplay"
  >
- <span className='text'>Sponsor ReactPlay</span>
+ <span className="text">Sponsor ReactPlay</span>
  </a>
  </div>
  </div>

diff --git a/src/common/footer/Footer.jsx b/src/common/footer/Footer.jsx
@@ -1,13 +1,17 @@
 import { Link } from "react-router-dom";
 
-const Footer = () => { return (
- <footer className='app-footer text-center'>
- <hr className='separater' />
- <div className='flex justify-center items-center py-2'>
- <Link to='/tech-stacks'>
+const Footer = () => {
+ return (
+ <footer className="app-footer text-center">
+ <hr className="separater" />
+ <div className="flex justify-center items-center py-2">
+ <Link to="/tech-stacks">
  ReactPlay - The MIT License (MIT) Copyright &copy;
  {new Date().getFullYear()} . Powered by{" "}
- <a className='text-link-default'>Top Notch Tech Stacks</a>.
+ <a href="/" className="text-link-default">
+ Top Notch Tech Stacks
+ </a>
+ .
  </Link>
  </div>
  </footer>