Switch to useShouldShowPtt hook

src/home/RegisteredView.jsx

@@ -13,12 +13,13 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useHistory } from "react-router-dom";
 import { Headline, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
-import { shouldShowPtt } from "../shouldShowPtt";
+import { useShouldShowPtt } from "../useShouldShowPtt";
 
 export function RegisteredView({ client }) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const history = useHistory();
+  const shouldShowPtt = useShouldShowPtt();
   const onSubmit = useCallback(
     (e) => {
       e.preventDefault();
@@ -99,14 +100,16 @@ export function RegisteredView({ client }) {
                 {loading ? "Loading..." : "Go"}
               </Button>
             </FieldRow>
-            {shouldShowPtt() && <FieldRow className={styles.fieldRow}>
-              <InputField
-                id="ptt"
-                name="ptt"
-                label="Push to Talk"
-                type="checkbox"
-              />
-            </FieldRow>}
+            {shouldShowPtt && (
+              <FieldRow className={styles.fieldRow}>
+                <InputField
+                  id="ptt"
+                  name="ptt"
+                  label="Push to Talk"
+                  type="checkbox"
+                />
+              </FieldRow>
+            )}
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage>{error.message}</ErrorMessage>

src/home/UnauthenticatedView.jsx

@@ -15,9 +15,10 @@ import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
-import { shouldShowPtt } from "../shouldShowPtt";
+import { useShouldShowPtt } from "../useShouldShowPtt";
 
 export function UnauthenticatedView() {
+  const shouldShowPtt = useShouldShowPtt();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const [{ privacyPolicyUrl, recaptchaKey }, register] =
@@ -113,14 +114,16 @@ export function UnauthenticatedView() {
                 autoComplete="off"
               />
             </FieldRow>
-            {shouldShowPtt() && <FieldRow>
-              <InputField
-                id="ptt"
-                name="ptt"
-                label="Push to Talk"
-                type="checkbox"
-              />
-            </FieldRow>}
+            {shouldShowPtt && (
+              <FieldRow>
+                <InputField
+                  id="ptt"
+                  name="ptt"
+                  label="Push to Talk"
+                  type="checkbox"
+                />
+              </FieldRow>
+            )}
             <Caption>
               By clicking "Go", you agree to our{" "}
               <Link href={privacyPolicyUrl}>Terms and conditions</Link>

src/shouldShowPtt.js

@@ -1,3 +0,0 @@
-export function shouldShowPtt() {
-  return window.location.hash.startsWith('#ptt');
-}

src/useShouldShowPtt.js

@@ -0,0 +1,6 @@
+import { useLocation } from "react-router-dom";
+
+export function useShouldShowPtt() {
+  const { hash } = useLocation();
+  return hash.startsWith("#ptt");
+}