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

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(`http://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`);
+    window.location = NHOST.AUTH_URL(
+      `http://localhost:${
+        process.env.RAECT_APP_DEV_PORT ?? "3000"
+      }/plays/create`
+    );
     return null;
   } else {
     initializeData();

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='https://github.com/reactplay'
-                  className='social-link'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  href="https://github.com/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:contact@reactplay.io'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='text-link-default'
+                href="mailto:contact@reactplay.io"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-link-default"
               >
                 contact@reactplay.io
               </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>

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>