remove react helmet and create utily function

Author: ryanburgess

package.json

@@ -43,7 +43,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "jest": "^29.7.0",
-    "jsonfile": "^6.1.0",
-    "react-helmet": "^6.1.0"
+    "jsonfile": "^6.1.0"
   }
 }

src/App.js

@@ -19,7 +19,7 @@ const App = () => {
   useEffect(() => {
     setEpisodes(episodesData);
   }, []);
-
+  
   return (
     <Router>
       <div className="app">

src/components/EpisodeDetail.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import '../css/EpisodeDetail.css'; // Import the CSS file for styling
 import panelistsData from '../content/panel.json'; // Import the JSON file
 import { createURL } from '../utils';
-import { Helmet } from 'react-helmet';
+import { setMetaTags } from '../setMetaTags';
 
 const EpisodeDetail = ({ episode }) => {
   const [transcript, setTranscript] = useState('');
@@ -12,6 +12,13 @@ const EpisodeDetail = ({ episode }) => {
       import(`../transcripts/${episode.episode}.js`)
         .then((module) => setTranscript(module.default))
         .catch((error) => console.error('Error loading transcript:', error));
+      
+      setMetaTags({
+        title: episode.title,
+        description: episode.description,
+        image: `https://frontendhappyhour.com/public/img/episodes/friendly-preview/${createURL(episode.title)}.jpeg`,
+        url: `https://frontendhappyhour.com/episodes/${createURL(episode.title)}`
+      });
     }
   }, [episode]);
 
@@ -25,7 +32,7 @@ const EpisodeDetail = ({ episode }) => {
     episode.panel.includes(panelist.name)
   );
 
- // Function to get guest image URL
+  // Function to get guest image URL
   // if the guest has a twitter account the image is saved as their username .jpg
   // if the guest doesn't have twitter the image is saved as their first-lastname.jpg lowercase
   const getGuestImageUrl = (guest) => {
@@ -37,21 +44,6 @@ const EpisodeDetail = ({ episode }) => {
 
   return (
     <div className="episode-detail">
-      <Helmet>
-        <meta name="viewport" content="width=device-width" />
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <link rel="alternate" type="application/rss+xml" href="https://feeds.soundcloud.com/users/soundcloud:users:206137365/sounds.rss" />
-        <meta property="og:image" content={`https://frontendhappyhour.com/public/img/episodes/friendly-preview/${createURL(episode.title)}.jpeg`} />
-        <meta property="og:description" content={`${episode.description}`} />
-        <meta property="og:title" content={`${episode.title} - Front End Happy Hour`} />
-        <meta name="twitter:description" content={`${episode.description}`} />
-        <meta property="twitter:title" content={`${episode.title} - Front End Happy Hour`} />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@frontendhappyhour" />
-        <meta name="twitter:creator" content="@frontendhappyhour" />
-        <link rel="icon" href="https://frontendhappyhour.com/favicon.ico" type="image/x-icon" />
-        <link rel="canonical" href={`https://frontendhappyhour.com/episodes/${createURL(episode.title)}`} />
-      </Helmet>
       <h1>{episode.title}</h1>
       <p className="episode-published">Published on: {episode.published}</p>
       <p>{episode.description}</p>
@@ -108,9 +100,7 @@ const EpisodeDetail = ({ episode }) => {
               <li key={index} className="guest">
                 <a href={guest.twitter ? `https://twitter.com/${guest.twitter}` : '#'} target="_blank" rel="noopener noreferrer">
                   <img src={getGuestImageUrl(guest)} alt={guest.name} className="guest-image" />
-                  <p>
-                    {guest.name}
-                  </p>
+                  <p>{guest.name}</p>
                 </a>
               </li>
             ))}

src/setMetaTags.js

@@ -0,0 +1,33 @@
+// src/setMetaTags.js
+export const setMetaTags = ({ title, description, image, url }) => {
+  document.title = title;
+
+  const metaTags = [
+    { name: 'description', content: description },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
+    { property: 'og:image', content: image },
+    { property: 'og:url', content: url },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:image', content: image },
+  ];
+
+  metaTags.forEach(tag => {
+    let element = document.querySelector(`meta[name="${tag.name}"], meta[property="${tag.property}"]`);
+    if (element) {
+      element.content = tag.content;
+    } else {
+      element = document.createElement('meta');
+      if (tag.name) {
+        element.name = tag.name;
+      }
+      if (tag.property) {
+        element.setAttribute('property', tag.property);
+      }
+      element.content = tag.content;
+      document.head.appendChild(element);
+    }
+  });
+};