refactor(examples): simplify no-location demo UI

Author: fadi-george

examples/demo-no-location/src/App.tsx

@@ -8,8 +8,7 @@ const isPlaceholder = (value: string): boolean => value.toLowerCase().startsWith
 export default function App() {
   const [permission, setPermission] = useState<boolean | null>(null);
   const [pushSubscriptionId, setPushSubscriptionId] = useState<string | null>(null);
-  const [locationShared, setLocationShared] = useState<boolean | null>(null);
-  const [status, setStatus] = useState('Ready');
+  const [permissionStatus, setPermissionStatus] = useState<string | null>(null);
 
   const refreshPushState = useCallback(() => {
     void OneSignal.Notifications.hasPermission()
@@ -29,27 +28,24 @@ export default function App() {
   }, [refreshPushState]);
 
   const requestPermission = useCallback(async () => {
-    setStatus('Requesting notification permission...');
+    setPermissionStatus('Requesting notification permission...');
     try {
       const granted = await OneSignal.Notifications.requestPermission(false);
       setPermission(granted);
       refreshPushState();
-      setStatus(
+      setPermissionStatus(
         granted ? 'Notification permission granted.' : 'Notification permission not granted.',
       );
     } catch (error) {
-      setStatus(`Permission request failed: ${String(error)}`);
+      setPermissionStatus(`Permission request failed: ${String(error)}`);
     }
   }, [refreshPushState]);
 
-  const checkLocationBridge = useCallback(async () => {
-    setStatus('Checking location bridge...');
+  const testLocationPermissionRequest = useCallback(async () => {
     try {
-      const shared = await OneSignal.Location.isShared();
-      setLocationShared(shared);
-      setStatus(`Location bridge resolved safely: shared=${String(shared)}.`);
+      await OneSignal.Location.requestPermission();
     } catch (error) {
-      setStatus(`Location bridge rejected: ${String(error)}`);
+      console.error('OneSignal.Location.requestPermission failed:', error);
     }
   }, []);
 
@@ -66,8 +62,8 @@ export default function App() {
         <section className="card">
           <h2>Configuration</h2>
           <p>
-            Builds with <code>ONESIGNAL_DISABLE_LOCATION=true</code> and avoids{' '}
-            <code>OneSignal.Location</code> in normal app flow.
+            This demo initializes OneSignal and requests notification permission only when you tap
+            the button below. Native build flags exclude the location module.
           </p>
           <dl>
             <div>
@@ -96,28 +92,20 @@ export default function App() {
             </div>
           </dl>
           <button type="button" onClick={requestPermission}>
-            Request Notification Permission
+            REQUEST PERMISSION
           </button>
+          {permissionStatus && <p className="result">{permissionStatus}</p>}
         </section>
 
         <section className="card">
           <h2>Location Bridge</h2>
           <p>
-            This optional check calls <code>OneSignal.Location.isShared()</code>. In a no-location
-            Android build it should resolve <code>false</code>; iOS should also remain safe when the
-            location product is omitted.
+            The location test call may not log a JavaScript error; check Android Logcat or Xcode
+            logs for native diagnostics.
           </p>
-          <button type="button" className="secondary" onClick={checkLocationBridge}>
-            Check Location Bridge
+          <button type="button" className="secondary" onClick={testLocationPermissionRequest}>
+            TEST LOCATION REQUEST
           </button>
-          <p className="result">
-            Last location value: {locationShared == null ? 'Not checked' : String(locationShared)}
-          </p>
-        </section>
-
-        <section className="card">
-          <h2>Status</h2>
-          <p>{status}</p>
         </section>
       </div>
     </main>

examples/demo-no-location/src/styles.css

@@ -16,6 +16,7 @@
 }
 
 body {
+  font-size: 14px;
   margin: 0;
 }
 
@@ -32,9 +33,9 @@ button {
   border-radius: 8px;
   color: #ffffff;
   cursor: pointer;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   font-weight: 700;
-  padding: 12px 16px;
+  padding: 9px 12px;
 }
 
 button.secondary {
@@ -58,53 +59,53 @@ button.secondary {
 .appbar-content {
   margin: 0 auto;
   max-width: 720px;
-  padding: 14px 16px;
+  padding: 10px 12px;
 }
 
 .appbar h1 {
   color: #ffffff;
-  font-size: 22px;
+  font-size: 19px;
   font-weight: 700;
   margin: 0;
 }
 
 .appbar p {
   color: #ffffff;
-  font-size: 14px;
+  font-size: 12px;
   margin: 2px 0 0;
 }
 
 .content {
   margin: 0 auto;
   max-width: 720px;
-  padding: 16px 16px 24px;
+  padding: 10px 12px 16px;
 }
 
 .card {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 14px;
+  border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
-  margin-bottom: 16px;
-  padding: 20px;
+  margin-bottom: 10px;
+  padding: 12px;
 }
 
 .card h2 {
-  font-size: 1rem;
-  margin: 0 0 14px;
+  font-size: 0.85rem;
+  margin: 0 0 8px;
   text-transform: uppercase;
 }
 
 dl {
-  margin: 0 0 16px;
+  margin: 0 0 10px;
 }
 
 dl div {
   border-bottom: 1px solid #eceff1;
   display: grid;
-  gap: 12px;
-  grid-template-columns: 130px minmax(0, 1fr);
-  padding: 10px 0;
+  gap: 8px;
+  grid-template-columns: 108px minmax(0, 1fr);
+  padding: 6px 0;
 }
 
 dl div:last-child {
@@ -127,5 +128,5 @@ dd {
 
 .result {
   color: #6b7280;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }