Show download button only for the OS of the client-device.

Use React component to show Download Buttons
ritz078 · Feb 6, 2021 · c98e3fd · c98e3fd
1 parent 89f49cd
commit c98e3fd
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 20 deletions.
diff --git a/website/package.json b/website/package.json
@@ -13,6 +13,7 @@
     "@mdi/react": "^1.3.0",
     "axios": "^0.19.2",
     "next": "^9.3.5",
+    "platform": "^1.3.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -2,9 +2,16 @@ import React from "react";
 import { IParticlesParams } from "react-particles-js";
 import dynamic from "next/dynamic";
 import Icon from "@mdi/react";
-import { mdiApple, mdiGithub, mdiLinux, mdiMicrosoftWindows } from "@mdi/js";
+import {
+  mdiApple,
+  mdiConsoleNetworkOutline,
+  mdiGithub,
+  mdiLinux,
+  mdiMicrosoftWindows,
+} from "@mdi/js";
 import Head from "next/head";
 import ProgressiveImage from "react-progressive-image";
+import platform from "platform";
 import axios from "axios";
 
 const Particles = dynamic(() => import("react-particles-js"), {
@@ -44,6 +51,29 @@ export async function getStaticProps() {
 }
 
 export default ({ macUrl, linuxUrl }) => {
+  // Download-button React Component
+  function DownloadButton(props) {
+    return !props.disabled ? (
+      <a href={props.url} target="_blank">
+        <button className="download-button">
+          <Icon path={props.logo} size={1.2} />
+        </button>
+      </a>
+    ) : (
+      <button title="Coming soon" disabled className="download-button">
+        <Icon path={props.logo} size={1.2} />
+      </button>
+    );
+  }
+
+  var platformOs = platform.os.toString();
+  // Client OS is other than Windows, Mac and Linux
+  var flag =
+    !platformOs.match(/Mac OS/i) &&
+    !platformOs.match(/Win/i) &&
+    !platformOs.match(/Linux/i);
+  console.log(flag);
+
   return (
     <div className="wrapper">
       <Head>
@@ -74,24 +104,42 @@ export default ({ macUrl, linuxUrl }) => {
             <span>A torrent client to download, stream and cast torrents.</span>
 
             <div className="downloads">
-              <a href={macUrl} target="_blank">
-                <button className="download-button">
-                  <Icon path={mdiApple} size={1.2} />
-                </button>
-              </a>
-              <button title="Coming soon" disabled className="download-button">
-                <Icon path={mdiMicrosoftWindows} size={1.2} />
-              </button>
-              <a href={linuxUrl} target="_blank">
-                <button className="download-button">
-                  <Icon path={mdiLinux} size={1.2} />
-                </button>
-              </a>
-              <a href="https://github.com/ritz078/moose" target="_blank">
-                <button className="download-button">
-                  <Icon path={mdiGithub} size={1.2} />
-                </button>
-              </a>
+              {/* Display appropriate Download-button for the client */}
+              {platformOs.match(/Mac OS/i) && (
+                <DownloadButton url={macUrl} logo={mdiApple} disabled={false} />
+              )}
+              {platformOs.match(/Win/i) && (
+                <DownloadButton logo={mdiMicrosoftWindows} disabled={true} />
+              )}
+              {platformOs.match(/Linux/i) && (
+                <DownloadButton
+                  url={linuxUrl}
+                  logo={mdiLinux}
+                  disabled={false}
+                />
+              )}
+
+              {/* If the OS doesn't match any of the three, display all the buttons */}
+              {flag && (
+                <DownloadButton url={macUrl} logo={mdiApple} disabled={false} />
+              )}
+              {flag && (
+                <DownloadButton logo={mdiMicrosoftWindows} disabled={true} />
+              )}
+              {flag && (
+                <DownloadButton
+                  url={linuxUrl}
+                  logo={mdiLinux}
+                  disabled={false}
+                />
+              )}
+              {
+                <DownloadButton
+                  url="https://github.com/ritz078/moose"
+                  logo={mdiGithub}
+                  disabled={false}
+                />
+              }
             </div>
           </div>
         </div>

diff --git a/website/src/styles/main.scss b/website/src/styles/main.scss
@@ -94,7 +94,7 @@ body {
 .downloads {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
   width: 300px;
   margin-top: 40px;
 }