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

[agent515]

Fix #236
Using platform.js to detect OS at the client-side, only display the corresponding button and Github-repo-link.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ritz078/moose/9sp24l5uu
✅ Preview: https://moose-git-fork-agent515-download-link.ritz078.now.sh

[ritz078]

It detects my mac to be a linux.

[agent515]

In my machine, it is showing windows and Linux button (instead of github) on vercel only.
local looks fine.

[ritz078]

platform.js might be buggy

[agent515]

platform.js might be buggy

Ohh, should I use different package or try out different versions? I tried react-device-detect, it wasn't working properly either. Do you know a reliable package?

[ritz078]

Why not use platform.os instead of matching string?

Also, if it doesn't match any platform, we should show all the options.

[agent515]

Why not use platform.os instead of matching string?

It is an object. So, converted into a string to use regex.

Also, if it doesn't match any platform, we should show all the options.

When I comment out GitHub-link, Mac link looks fine. I am not able to understand what's causing this problem.

I have made some changes still couldn't resolve that issue. Making some pushes to see if anything is improved.

[ritz078]

{
  flag && (
    <>
      <DownloadButton url={macUrl} logo={mdiApple} disabled={false} />
      <DownloadButton logo={mdiMicrosoftWindows} disabled={true} />
      <DownloadButton url={linuxUrl} logo={mdiLinux} disabled={false} />
      <DownloadButton
        url="https://github.com/ritz078/moose"
        logo={mdiGithub}
        disabled={false}
      />
    </>
  );
}

[ritz078]

It is an object. So, converted into a string to use regex.

In that case you can use platform.os.family ?

When I comment out GitHub-link, Mac link looks fine. I am not able to understand what's causing this problem.

Can you try adding a unique key prop to all the DownloadButton components ?

See https://kentcdodds.com/blog/understanding-reacts-key-prop

Also I am thinking that we should have other links too in case someone wants to download a build of other platform.

In the above image "Download for other platforms" is a button. If you click on it, all the links show up. WDYT ?

[agent515]

In that case you can use platform.os.family ?

Yeah, this way seems more appropriate.

Can you try adding a unique key prop to all the DownloadButton components ?

I'll try this out.

Also I am thinking that we should have other links too in case someone wants to download a build of other platform.

In the above image "Download for other platforms" is a button. If you click on it, all the links show up. WDYT ?

I agree. This is a better UI/UX.

I'll make those changes and will let you know.

[ritz078]

closed by mistake.