From f4532e2ea2154d01c892dd9e3a18ff14270149ba Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sun, 12 Nov 2023 12:06:23 +0000
Subject: [PATCH 1/2] feat: display pwa reload button

---
 .github/workflows/vercel-preview.yml |  2 +-
 pages/[username].js                  | 31 +++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/vercel-preview.yml b/.github/workflows/vercel-preview.yml
index 19d7f94695e..79f254e1669 100644
--- a/.github/workflows/vercel-preview.yml
+++ b/.github/workflows/vercel-preview.yml
@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - feat-pwa
+      - feat-reload-pwa
 
 jobs:
   deploy:
diff --git a/pages/[username].js b/pages/[username].js
index 05a2b940c5b..83309189aef 100644
--- a/pages/[username].js
+++ b/pages/[username].js
@@ -1,5 +1,6 @@
+import { useEffect, useState } from "react";
 import { IconContext } from "react-icons";
-import { FaEye, FaRegFaceSmileWink } from "react-icons/fa6";
+import { FaArrowsRotate, FaEye, FaRegFaceSmileWink } from "react-icons/fa6";
 import { remark } from "remark";
 import strip from "strip-markdown";
 import requestIp from "request-ip";
@@ -15,6 +16,7 @@ import MultiLayout from "@components/layouts/MultiLayout";
 import Page from "@components/Page";
 import UserPage from "@components/user/UserPage";
 import { abbreviateNumber } from "@services/utils/abbreviateNumbers";
+import Button from "@components/Button";
 
 export async function getServerSideProps(context) {
   const { req, res } = context;
@@ -70,6 +72,17 @@ export async function getServerSideProps(context) {
 }
 
 export default function User({ data, BASE_URL, isLoggedIn }) {
+  const [pwa, setPwa] = useState(false);
+
+  useEffect(() => {
+    if (
+      typeof window !== "undefined" &&
+      window.matchMedia("(display-mode: standalone)").matches
+    ) {
+      setPwa(true);
+    }
+  }, []);
+
   return (
     <>
       <PageHead
@@ -120,6 +133,22 @@ export default function User({ data, BASE_URL, isLoggedIn }) {
           </div>
         </Link>
       )}
+
+      {pwa && (
+        <Button
+          onClick={window.location.reload()}
+          overrideClassNames={true}
+          className="fixed top-5 right-5 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-high"
+        >
+          <div className="flex px-4 py-2 bg-tertiary-medium text-primary-low items-center gap-1 rounded-full hover:bg-secondary-medium hover:drop-shadow-lg">
+            <IconContext.Provider
+              value={{ color: "white", style: { verticalAlign: "middle" } }}
+            >
+              <FaArrowsRotate />
+            </IconContext.Provider>
+          </div>
+        </Button>
+      )}
     </>
   );
 }

From d05d7fed85f44d68b465effb7da2b8100fbf45cb Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Sun, 12 Nov 2023 12:14:56 +0000
Subject: [PATCH 2/2] fix: reload pwa

---
 pages/[username].js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/[username].js b/pages/[username].js
index 83309189aef..6356efe0379 100644
--- a/pages/[username].js
+++ b/pages/[username].js
@@ -136,7 +136,7 @@ export default function User({ data, BASE_URL, isLoggedIn }) {
 
       {pwa && (
         <Button
-          onClick={window.location.reload()}
+          onClick={() => window.location.reload()}
           overrideClassNames={true}
           className="fixed top-5 right-5 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-high"
         >