JavaScript: Events, 18–21

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47const fetch = makeFetch({
  '/routes': { status: 200, body: '[{"from":"Ojota","to":"Abuja"},{"from":"Ojota","to":"Kano"}]' },
  '/missing': { status: 404, body: 'not found' },
  '/broken': { status: 500, body: 'server error' },
  '/malformed': { status: 200, body: '{not json' },
  '/offline': 'network-error',
});

const out = el('pre', { id: 'out' });
document.body.appendChild(out);

/* Three distinct failures, three distinct messages:
     the request never happened        -> fetch REJECTS
     the server answered with an error -> fetch RESOLVES, response.ok is false
     the body was not what we expected -> response.json() throws  */
async function load(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      return { state: 'http', status: response.status, message: `The server answered ${response.status} ${response.statusText}.` };
    }

    const data = await response.json();          // throws on malformed JSON
    return { state: 'ok', count: data.length, data };
  } catch (error) {
    if (error instanceof SyntaxError) {
      return { state: 'malformed', message: 'The server answered 200, but the body was not valid JSON.' };
    }
    return { state: 'offline', message: 'Could not reach the server. Check your connection.' };
  }
}

for (const url of ['/routes', '/missing', '/broken', '/malformed', '/offline']) {
  const result = await load(url);
  console.log(url.padEnd(11), '->', result.state.padEnd(10), result.message ?? `${result.count} route(s)`);
}

const ok = await load('/routes');
const notFound = await load('/missing');
const serverError = await load('/broken');
const malformed = await load('/malformed');
const offline = await load('/offline');

// The heart of it: a 404 RESOLVES.
const raw404 = await fetch('/missing');
console.log('a 404 response: ok =', raw404.ok, ', status =', raw404.status, '<- it resolved');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47const out = el('pre', { id: 'out' }, 'not asked yet');
document.body.appendChild(out);

const describe = (position) => {
  const { latitude, longitude, accuracy } = position.coords;
  return `latitude ${latitude.toFixed(4)}, longitude ${longitude.toFixed(4)}, accurate to about ${Math.round(accuracy)}m`;
};

// The codes are numbers, not names. Compare against the named constants on the
// geolocation object rather than writing 1, 2, 3 in your own code.
const explain = (error, geo) => {
  if (error.code === geo.PERMISSION_DENIED) return 'You refused permission. Nothing more can be done from here.';
  if (error.code === geo.POSITION_UNAVAILABLE) return 'Your position is not available right now.';
  if (error.code === geo.TIMEOUT) return 'It took too long. Try again.';
  return `Something went wrong: ${error.message}`;
};

// Callback-based, so wrapping it in a promise is usually the first thing you do.
const locate = (geo, options = {}) =>
  new Promise((resolve, reject) => geo.getCurrentPosition(resolve, reject, options));

const granted = makeGeolocation({ kind: 'success', latitude: 6.5244, longitude: 3.3792, accuracy: 18 });
const denied = makeGeolocation({ kind: 'error', code: 1, message: 'User denied Geolocation' });
const unavailable = makeGeolocation({ kind: 'error', code: 2, message: 'Position unavailable' });
const timedOut = makeGeolocation({ kind: 'error', code: 3, message: 'Timeout expired' });

let shown = '';
granted.getCurrentPosition((p) => { shown = describe(p); out.textContent = shown; });
console.log('granted     :', shown);

for (const [name, geo] of [['denied', denied], ['unavailable', unavailable], ['timed out', timedOut]]) {
  let message = '';
  geo.getCurrentPosition(() => {}, (e) => { message = explain(e, geo); });
  console.log(name.padEnd(12), ':', message);
}

// Omitting the error callback: the real API just does nothing.
let ranAnyway = false;
denied.getCurrentPosition(() => { ranAnyway = true; });
console.log('no error callback, success handler ran?', ranAnyway, '<- silently nothing');

// The promise wrapper.
const position = await locate(granted);
console.log('promise-wrapped:', position.coords.latitude);
let caught = null;
try { await locate(denied); } catch (e) { caught = e.code; }
console.log('rejection code :', caught);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38const box = el('input', { id: 'box', value: 'LAG-441-XA' });
const status = el('span', { id: 'status', role: 'status' });
const copy = el('button', { id: 'copy', type: 'button' }, 'Copy');
document.body.appendChild(el('p', {}, [box, copy, status]));

// Passed in, so both the allowed and the refused case can be exercised.
function wireCopy(clipboard) {
  return async () => {
    const text = box.value;
    if (text.trim() === '') { status.textContent = 'Nothing to copy.'; return 'empty'; }
    try {
      await clipboard.writeText(text);
      status.textContent = 'Copied.';                 // always confirm
      return 'copied';
    } catch (error) {
      // Refused, insecure context, or no user gesture. Give a way forward.
      status.textContent = `Could not copy (${error.name}). Select it and press Ctrl+C.`;
      return 'failed';
    }
  };
}

const allowed = makeClipboard();
const refused = makeClipboard({ kind: 'denied' });

const copyAllowed = wireCopy(allowed);
const copyRefused = wireCopy(refused);

console.log('before:', JSON.stringify(status.textContent));
console.log('result:', await copyAllowed());
console.log('status:', status.textContent, '| clipboard now holds:', allowed.written);

console.log('refused:', await copyRefused());
console.log('status :', status.textContent);

box.value = '   ';
console.log('empty  :', await copyAllowed(), '|', status.textContent);
box.value = 'LAG-441-XA';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51const out = el('pre', { id: 'out' });
document.body.appendChild(out);

/* All three states handled, and the order matters: check 'denied' BEFORE asking,
   because asking again after a refusal is pointless and the answer is 'denied'
   without any prompt. */
async function notify(Notification, title, body) {
  if (Notification.permission === 'denied') {
    return { state: 'denied', message: 'Permission was refused earlier. The browser will not ask again.' };
  }

  if (Notification.permission === 'default') {
    const answer = await Notification.requestPermission();
    if (answer !== 'granted') {
      return { state: answer, message: `Not granted: "${answer}". Nothing sent.` };
    }
  }

  try {
    new Notification(title, { body });        // throws without permission
    return { state: 'sent', message: 'Sent.' };
  } catch (error) {
    return { state: 'error', message: `Could not send: ${error.name}` };
  }
}

const fresh = makeNotification('default', 'granted');
const willRefuse = makeNotification('default', 'denied');
const alreadyDenied = makeNotification('denied', 'granted');
const alreadyGranted = makeNotification('granted', 'granted');

console.log('a fresh browser, permission is:', fresh.permission);
const first = await notify(fresh, 'Bus departing', 'Ojota to Abuja, 14 seats left');
console.log('after asking and being allowed :', first, '| now:', fresh.permission);
console.log('what was shown                 :', fresh.shown);

const refusedNow = await notify(willRefuse, 'Bus departing', 'body');
console.log('asked and refused              :', refusedNow);

const denied = await notify(alreadyDenied, 'Bus departing', 'body');
console.log('already denied                 :', denied);
console.log('re-asking after a refusal gives :', await alreadyDenied.requestPermission(), '<- no prompt');

const straight = await notify(alreadyGranted, 'Already allowed', 'no prompt needed');
console.log('already granted                :', straight);

// Constructing one without permission throws.
const tooEarly = makeNotification('default', 'granted');
let threw = null;
try { new tooEarly('too early'); } catch (e) { threw = e.constructor.name; }
console.log('constructing before granting   :', threw);