From ba9fb3dd67e8590833a8f483ebc666aae94bfa99 Mon Sep 17 00:00:00 2001
From: Ammaar Aslam <ammaaraslam7@gmail.com>
Date: Sat, 27 Aug 2022 16:09:31 +0530
Subject: [PATCH] simplification of dynamic title change logic

---
 src/common/routing/RouteDefs.jsx |  8 +++--
 src/meta/DefMeta.jsx             | 50 ++++++++++++++------------------
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx
index 40a87b276..3b2fe1cb8 100644
--- a/src/common/routing/RouteDefs.jsx
+++ b/src/common/routing/RouteDefs.jsx
@@ -29,8 +29,10 @@ const RouteDefs = () => {
           <Route path="/tech-stacks" element={<TechStack />} />
           <Route path="/plays" element={<App />}>
             <Route index element={<PlayList />} />
-            <Route exact path="create" element= {<CreatePlay />}/>
-            {process.env.NODE_ENV === "development" && <Route exact path="created/:playid" element={<PlayCreated />} />}
+            <Route exact path="create" element={<CreatePlay />} />
+            {process.env.NODE_ENV === "development" && (
+              <Route exact path="created/:playid" element={<PlayCreated />} />
+            )}
             <Route idex exact path=":username" element={<PlayMeta />}>
               <Route exact path=":playname" element={<PlayMeta />}>
                 <Route exact path=":param1" element={<PlayMeta />}>
@@ -56,4 +58,4 @@ const RouteDefs = () => {
   );
 };
 
-export default RouteDefs;
\ No newline at end of file
+export default RouteDefs;
diff --git a/src/meta/DefMeta.jsx b/src/meta/DefMeta.jsx
index 0274718f0..11e5010dd 100644
--- a/src/meta/DefMeta.jsx
+++ b/src/meta/DefMeta.jsx
@@ -3,28 +3,28 @@ import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
 function DefMeta() {
-  const [title, setTitle] = useState("ReactPlay - One app to learn, create, and share ReactJS projects")
-  const currentPath = useLocation().pathname
+  const [title, setTitle] = useState(
+    "ReactPlay - One app to learn, create, and share ReactJS projects."
+  );
+  const currentPath = useLocation().pathname;
 
   useEffect(() => {
-    if (currentPath === "/plays") {
-      setTitle("ReactPlay - Plays")
-    }
-    else if (currentPath === "/ideas") {
-      setTitle("ReactPlay - Ideas")
-    }
-    else if (currentPath === "/tech-stacks") {
-      setTitle("ReactPlay - Tech Stacks")
-    }
-    else if (currentPath === "/plays/create") {
-      setTitle("ReactPlay - Create Play")
-    }
+    // Array of paths and it's corresponding title. This array is used for changing the title of the website dynamically.
+    const routes = [
+      {
+        path: "/",
+        title:
+          "ReactPlay - One app to learn, create, and share ReactJS projects.",
+      },
+      { path: "/plays", title: "ReactPlay - Plays" },
+      { path: "/ideas", title: "ReactPlay - Ideas" },
+      { path: "/tech-stacks", title: "ReactPlay - Tech Stacks" },
+      { path: "/plays/create", title: "ReactPlay - Create Play" },
+    ];
 
-    else {
-      setTitle("ReactPlay - One app to learn, create, and share ReactJS projects.")
-    }
-  
-  }, [currentPath])
+    // Logic to set title of website dynamically depending on the path.
+    routes.some((route) => route.path === currentPath && setTitle(route.title));
+  }, [currentPath, routes]);
   return (
     <Helmet>
       <title>{title}</title>
@@ -46,11 +46,7 @@ function DefMeta() {
     share ReactJS projects with the developer community."
         data-react-helmet="true"
       />
-      <meta
-        property="og:title"
-        content={title}
-        data-react-helmet="true"
-      />
+      <meta property="og:title" content={title} data-react-helmet="true" />
       <meta
         property="og:image"
         content="https://reactplay.io/og-image.png" // React should default these to public
@@ -66,11 +62,7 @@ function DefMeta() {
         content="https://reactplay.io"
         data-react-helmet="true"
       />
-      <meta
-        name="twitter:title"
-        content={title}
-        data-react-helmet="true"
-      />
+      <meta name="twitter:title" content={title} data-react-helmet="true" />
       <meta
         name="twitter:description"
         content="ReactPlay is an open-source application to learn, create and