From 5af78196d10104bbec4355fd0c98cb2b7909fa09 Mon Sep 17 00:00:00 2001
From: Cooper Ransom <cooperransom08@outlook.com>
Date: Sat, 6 Apr 2024 13:09:31 -0400
Subject: [PATCH] Fix janky code

---
 src/setup/Layout.tsx                 |  6 +++---
 src/stores/banner/BannerLocation.tsx | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/setup/Layout.tsx b/src/setup/Layout.tsx
index 413689c3..82c4ae8f 100644
--- a/src/setup/Layout.tsx
+++ b/src/setup/Layout.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
 
-import { useIsMobile } from "@/hooks/useIsMobile";
 import { useBannerSize, useBannerStore } from "@/stores/banner";
 import { ExtensionBanner } from "@/stores/banner/BannerLocation";
 import { getExtensionState } from "@/utils/extension";
@@ -11,7 +10,7 @@ export function Layout(props: { children: ReactNode }) {
   const location = useBannerStore((s) => s.location);
   const [extensionState, setExtensionState] =
     useState<ExtensionStatus>("unknown");
-  const { isMobile } = useIsMobile();
+  const [storeLoaded, setStoreLoaded] = useState(false);
 
   useEffect(() => {
     let isMounted = true;
@@ -19,6 +18,7 @@ export function Layout(props: { children: ReactNode }) {
     getExtensionState().then((state) => {
       if (isMounted) {
         setExtensionState(state);
+        setStoreLoaded(true);
       }
     });
 
@@ -29,7 +29,7 @@ export function Layout(props: { children: ReactNode }) {
 
   return (
     <div>
-      {extensionState !== "success" ? (
+      {storeLoaded && extensionState !== "success" ? (
         <div className="fixed inset-x-0 z-[1000]">
           <ExtensionBanner extensionState={extensionState} />
         </div>
diff --git a/src/stores/banner/BannerLocation.tsx b/src/stores/banner/BannerLocation.tsx
index c88a7969..bd34e801 100644
--- a/src/stores/banner/BannerLocation.tsx
+++ b/src/stores/banner/BannerLocation.tsx
@@ -3,7 +3,6 @@ import { Trans, useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
-import { useIsMobile } from "@/hooks/useIsMobile";
 import { useBannerStore, useRegisterBanner } from "@/stores/banner";
 import type { ExtensionStatus } from "@/utils/extension";
 
@@ -66,11 +65,11 @@ export function ExtensionBanner(props: {
   const currentLocation = useBannerStore((s) => s.location);
   const loc = props.location ?? null;
   const { pathname } = useLocation();
-  const isEligible =
+  const isEligible = !(
     /CrOS/.test(navigator.userAgent) ||
     /TV/.test(navigator.userAgent) ||
-    /iPhone|iPad|iPod/i.test(navigator.userAgent);
-  const { isMobile } = useIsMobile();
+    /iPhone|iPad|iPod/i.test(navigator.userAgent)
+  );
 
   useEffect(() => {
     if (loc) {
@@ -89,8 +88,8 @@ export function ExtensionBanner(props: {
   if (currentLocation !== loc || pathname === "/onboarding/extension")
     return null;
 
-  // Show the banner with a 36.5% chance or not if users dont meet requirements
-  if (!isEligible && !isMobile && Math.random() < 0.365) {
+  // Show the banner with a 36.5% chance or not if users don't meet requirements
+  if (isEligible && Math.random() < 0.365) {
     let bannerText = "";
     switch (props.extensionState) {
       case "noperms":