Create useDetectOS hook

Author: DilsonsPickles

src/components/banner/PromoBanner.tsx

@@ -1,27 +1,21 @@
-import React, { useState, useEffect } from "react";
-import { museHubReleases, audacityReleases } from "../../assets/js/releaseData";
+import { museHubReleases } from "../../assets/js/releaseData";
 import "../../styles/icons.css";
-import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
-import platform from "platform";
-declare interface Props {
-  url: string;
-}
+import useBrowserOS from "../../hooks/useDetectOS";
 
-function PromoBanner({ url }: Props) {
-  //no promo running
-  //return null;
-  const [showBanner, setShowBanner] = useState(true);
+function PromoBanner() {
+  const browserOS = useBrowserOS();
 
-  function getHref() {
-    switch(platform.os.family){
-      case "OS X":
-        return museHubReleases.mac[0].browser_download_url;
-      case "Windows":
-        return museHubReleases.win[0].browser_download_url;
-      default: 
-        setShowBanner(false); return "#";
+  const getHref = () => {
+    if (browserOS === "OS X") {
+      return museHubReleases.mac[0].browser_download_url;
+    } else if (browserOS === "Windows") {
+      return museHubReleases.win[0].browser_download_url;
     }
-  }
+    return "#"; // Default if OS is not supported
+  };
+
+  // Only show the banner for supported OSes
+  const showBanner = browserOS === "OS X" || browserOS === "Windows";
 
   function handleButtonClick() {
     if (typeof _paq !== "undefined") {
@@ -34,29 +28,32 @@ function PromoBanner({ url }: Props) {
     }
   }
 
-  return ( <> { showBanner &&
-      <div
-        id="promo-banner"
-        className="flex items-center justify-center min-h-24 bg-yellow-300 gap-4 flex-wrap"
-      >
-        <div className="flex gap-2 flex-wrap my-4 mx-2">
-          <p className="text-lg text-gray-900">🔥Limited-Time Offer: 80% OFF</p>
-          <p className="text-lg text-gray-900 font-bold">
-            Polyspectral MBC Multiband Compressor! Now $9.99🔥
-          </p>
-        </div>
-        
-        <a
-          href={getHref()}
-          id="promo-button"
-          onClick={handleButtonClick}
-          className="flex text-lg font-bold h-12 my-4 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white"
+  return (
+    <>
+      {showBanner && (
+        <div
+          id="promo-banner"
+          className="flex flex-col lg:flex-row justify-center items-center min-h-24 bg-yellow-300 py-4 gap-4 lg:gap-8"
         >
-          Get it on the Muse Hub
-        </a>
-      </div>
-    } </>
+          <div className="lg:flex text-center">
+            <p className="text-lg text-gray-900">🔥Limited-Time Offer: 80% OFF</p>
+            <p className="text-lg text-gray-900 font-bold">
+              Polyspectral MBC Multiband Compressor! Now $9.99🔥
+            </p>
+          </div>
+
+          <a
+            href={getHref()}
+            id="promo-button"
+            onClick={handleButtonClick}
+            className="flex text-lg font-bold h-12 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white"
+          >
+            Get it on the Muse Hub
+          </a>
+        </div>
+      )}
+    </>
   );
 }
 
-export default PromoBanner;
+export default PromoBanner;

src/hooks/useDetectOS.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import platform from 'platform';
+
+const useBrowserOS = () => {
+  // Define the state with an explicit string type or null
+  const [browserOS, setBrowserOS] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Set the OS using the platform library, ensuring it's a string
+    const detectedOS = platform.os?.family ?? 'Unknown OS';
+    setBrowserOS(detectedOS);
+  }, []);
+
+  return browserOS;
+};
+
+export default useBrowserOS;

src/layouts/BaseLayout.astro

@@ -6,6 +6,7 @@ import "../styles/input.css";
 import BetaBanner from "../components/banner/BetaBanner";
 import SurveyBanner from "../components/banner/SurveyBanner";
 import PromoBanner from "../components/banner/PromoBanner";
+import useBrowserOS from "../hooks/useDetectOS";
 
 export interface Props {
   title: string;
@@ -15,6 +16,7 @@ const {
   title = "Audacity | Free Audio editor, recorder, music making and more!",
   description = "Audacity is the world's most popular audio editing and recording app. Edit, mix, and enhance your audio tracks with the power of Audacity. Download now!",
 } = Astro.props;
+
 ---
 
 <!doctype html>