Forem: Radu Breahna

JavaScript Timer with React Hooks

Radu Breahna — Thu, 12 Sep 2019 21:55:36 +0000

This post is a part of a series about the ins and outs of chroniker.co

The main focus of chroniker.co is time tracking. Thus a way to accurately track time was necessary. This might seem like a trivial problem that can be solved with setTimeout or setInterval. However, things are not that simple with these functions as you will soon find out.

The code I used to track time on this website has changed significantly over time. I started with a simple react hook that used a setInterval and it worked. It was't fancy, and it was accurate when compared to a stopwatch. But when you leave it on for long periods of time, strange things begin to happen.

It becomes VERY inaccurate. If you set setInterval to fire every second, it will absolutely not do that precisely. Sometimes it will wait, sometimes it will be on point. And the result you get is an error that grows with each iteration. There is a great article that goes into detail about this issue.

Another thing to note is what happens to a setInterval when the browser tab in which it is running is inactive/not focused. The browser will re-route its resources to the focused tab, leaving setInterval running with great delays. It will also default to once per second even if you set it to run more frequently. Similar things happen when the computer goes into sleep mode. This is very inconvenient if your website is built around time tracking.

Bottom line is: NEVER trust that setInterval will run your code at exactly the interval you specified.

The solution to this problem comes in many shapes and sizes. However they all have one thing in common: Use the absolute value of Date(). The idea is to save the time before the interval starts and when it executes. That way you can subtract one from another and get the actual interval. You can then adjust either the interval or the logic that consumes it to get some accurate readings.

For example:

const doSomething = () => {
//your code
}

setInterval(() => {
  doSomething();
}, 1000);

The above code tries to run doSomething every second, so it's easy to predict what the absolute time after it finishes should be:

new Date().getTime() + 1000;

However in reality the absolute time when this interval ends will always vary because of the aforementioned reasons and you will have a new time that is either larger or smaller than your prediction.
By subtracting one from another you will get the variation that you need to factor into your timekeeping calculations.

Even with this method your 'clock' will not be accurate to the millisecond like a typical digital stopwatch, however it will be very close. It will start to drift only when counting large intervals of time in the order of days. This type of accuracy was sufficient for my purpose.

When I come across pieces of logic like this I always try to package them into a react hook. Here is what I came up with:


import { useEffect, useRef, useState } from 'react';

const usePreciseTimer = (handler, periodInMilliseconds, activityFlag) => {
  const [timeDelay, setTimeDelay] = useState(1);
  const savedCallback = useRef();
  const initialTime = useRef();

  useEffect(() => {
    savedCallback.current = handler;
  }, [handler]);

  useEffect(() => {
    if (activityFlag) {
      initialTime.current = new Date().getTime();
      const id = setInterval(() => {
        const currentTime = new Date().getTime();
        const delay = currentTime - initialTime.current;
        initialTime.current = currentTime;
        setTimeDelay(delay / 1000);
        savedCallback.current(timeDelay);
      }, periodInMilliseconds);

      return () => {
        clearInterval(id);
      };
    }
  }, [periodInMilliseconds, activityFlag, timeDelay]);
};

export default usePreciseTimer;

First let me explain the hook definition:

usePreciseTimer = (handler, periodInMilliseconds, activityFlag)

This hook expects us to pass it a handler, something it can run every interval - periodInMilliseconds, and it should only run it if the activityFlag evaluates to true. Because I need to display the total elapsed time, I also pass the expired time to the handler so that it can add it to the current elapsed time.

 useEffect(() => {
    savedCallback.current = handler;
  }, [handler]);

Here I make use of the builtin useRef hook to make sure I update the local handler if it ever changes.

if (activityFlag) {
      initialTime.current = new Date().getTime();
      const id = setInterval(() => {
        const currentTime = new Date().getTime();
        const delay = currentTime - initialTime.current;
        initialTime.current = currentTime;
        setTimeDelay(delay / 1000);
        savedCallback.current(timeDelay);
      }, periodInMilliseconds);

      return () => {
        clearInterval(id);
      };
    }

This is where the main logic is executed. If the activityFlag is true, we first save the current time as a reference. Once periodInMilliseconds elapses, our setInterval should start executing. At this point we take another measurement.

We subtract our start time form the real absolute time ending up with a delay. The resulting delay is the actual elapsed time, it can be larger or smaller than periodInMilliseconds.

We then convert the delay time into seconds and pass it to our handler in order to tell it how much time has passed, but not before updating the initialTime with the new currentTime for the next cycle.

return () => {
        clearInterval(id);
      };

Here we cleanup the setInterval when the hook gets unmounted.

Lastly here is the actual way this hook is used:

 usePreciseTimer(updateTime, 1000, state.isActive);

You can check the accuracy live on chroniker.co

I am curious on how to further improve this, let me know what you think :)

Browser Notifications API by Example

Radu Breahna — Fri, 06 Sep 2019 20:45:14 +0000

This post is a part of a series about the ins and outs of chroniker.co

When working on a task, tracking your time is never enough. Pacing is what makes you efficient. An easy way to pace yourself is to periodically check what you've accomplished. Enter the Notification API.

Lately these type of notifications have made their way to almost all major websites. They are easy to implement, they look good, and they grab your attention. On chroniker.co they are used for pacing while also serving as an additional reminder that a timer is turned on.

On KDE they're not as impressive as on macOs or Windows.

While reading the documentation and looking for code samples online I decided to put together a JavaScript class that would wrap the basic functionality and present an easy way to integrate it into any app.
Here is where I'm at:

import Logo from 'assets/img/chroniker.co.png';

class BrowserNotification {
   options = {
     vibrate: [200, 100, 200],
     requireInteraction: false,
     icon: Logo,
     body: 'Sample Text',
   };

  config = {
    title: 'Chroniker',
    timeout: 5000,
  };


  async getRegistration() {
    return navigator.serviceWorker.ready;
  }

  async closeNotifications(timeout = 0) {
    const registration = await this.getRegistration();
    const notifications = await registration.getNotifications();
    setTimeout(() => {
      notifications.map(notification => notification.close());
    }, timeout);
  }

  requestNotificationPermissions = () => {
    const notificationPermissions = async () => {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        await this.closeNotifications();
        const registration = await this.getRegistration();
        await registration.showNotification(this.config.title, this.options);
        await this.closeNotifications(this.config.timeout);
      }
      if (permission === 'denied') {
        alert('Notifications are blocked. Please enable them in your browser settings.');
      }
    };
    notificationPermissions();
  };

  sendNotification = () => {
    const send = async () => {
      if (Notification.permission === 'granted') {
        await this.closeNotifications();
        const registration = await this.getRegistration();
        await registration.showNotification(this.config.title, this.options);
        await this.closeNotifications(this.config.timeout);
      }
    };
    send();
  };
}

export default BrowserNotification;

Now to dissect this piece by piece:

options = {
     vibrate: [200, 100, 200],
     requireInteraction: false,
     icon: Logo,
     body: 'Sample Text',
   };

When you actually push a notification, you can pass an option object as a second argument, here you can specify the notification text, your logo, and some other things, the full list can be found on mdn. I was curious to try the vibrate option which accepts a 'pattern' of impulses that should make some devices vibrate. I haven't gotten this to work yet. Must be doing something wrong.

 config = {
    title: 'Chroniker',
    timeout: 5000,
  };

Next is this attribute that I use to store my app name, and any other values used by this class internally.

async getRegistration() {
    return navigator.serviceWorker.ready;
  }

Everything about these notifications is asynchronous, here we make sure that the service worker has been registered with the browser. It's not strictly necessary to have a registered service worker in order to get these notifications working on a desktop machine, however if you want them to also work on mobile, this seems like the only way now.

Regarding how to implement a service worker, that's a subject for another article.

async closeNotifications(timeout = 0) {
    const registration = await this.getRegistration();
    const notifications = await registration.getNotifications();
    setTimeout(() => {
      notifications.map(notification => notification.close());
    }, timeout);
  }

This method allows us to close all previously deployed notifications. It is advised to do so before sending new ones. This is also the way you would control for how long that popup is displayed on the users screen, hence the timeout.

requestNotificationPermissions = () => {
    const notificationPermissions = async () => {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        await this.closeNotifications();
        const registration = await this.getRegistration();
        await registration.showNotification(this.config.title, this.options);
        await this.closeNotifications(this.config.timeout);
      }
      if (permission === 'denied') {
        alert('Notifications are blocked. Please enable them in your browser settings.');
      }
    };
    notificationPermissions();
  };



//Sample use case 



  const notification = new BrowserNotification();
  notification.options.body = 'Notifications are already enabled. To disable, check your browser settings';

 <Button onClick={notification.requestNotificationPermissions} />

This method is responsible for guiding the user with allowing the app to send notifications, or in case he decided to block them - let him know how to bring them back.

sendNotification = () => {
    const send = async () => {
      if (Notification.permission === 'granted') {
        await this.closeNotifications();
        const registration = await this.getRegistration();
        await registration.showNotification(this.config.title, this.options);
        await this.closeNotifications(this.config.timeout);
      }
    };
    send();
  };

Finally here is the method that actually sends the notification itself. As you can see, first it makes sure to clean the notification stack. Then it sends one out and keeps it on screen until that timeout hits it and it is removed.

Following is the way I use this class on chroniker.co:

import BrowserNotification from 'components/notification';

const notification = new BrowserNotification();

 useEffect(() => {
    if (Math.round(totalTime) !== 0 && (Math.round(totalTime) / 60) % interval === 0) {
      notification.options.body = `${interval} minute(s) passed`;
      notification.sendNotification();
    }
  }, [Math.round(totalTime)]);

On the settings page you will find an input that allows you to specify how often should the app notify you. Above is the actual logic that sends a notification each time the total time can be exactly divided by the users interval. The totalTime and interval variables are extracted from a global state that is not shown here.

That's it for notifications, see you next time!

Further reading:
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
https://developer.mozilla.org/en-US/docs/Web/API/Notification

Dynamic Page Title with React Hooks

Radu Breahna — Thu, 05 Sep 2019 20:45:39 +0000

This post is a part of a series about the ins and outs of chroniker.co

Without going into detail about what chroniker.co is actually for. I will try to illustrate how I added some very small but useful feature to the browser tab in the form of a dynamic title.

When the site tab is not active it's actually hard to understand if the time is running. I wanted some kind of activity indicator that would require only a glance from the user and no further interaction.

Seeing as the browser tab is always visible, the logical solution was to add something to the title.

Contextually it had to be the ⌛ emoji.

I had a flag saved somewhere in state that told me if the app was running, so all that was left was to add the emoji to the beginning of the title when the flag was 1 and remove it when it was 0. Another thing I wanted to achieve was to remove it if the user navigated to a different page, where it was no longer relevant.

chroniker.co is entirely written with react hooks (with small exceptions from third party packages). Naturally I had to wrap this feature in a hook as well.

Here is what came of it:

import { useEffect, useState } from 'react';

const useTitleActivity = (isActive = 1, sequenceActive = '\u23F3', sequenceInactive = '') => {
  const [title, setTitle] = useState(document.title);

  //  Provides consistent string across entire hook
  function getInsertedSequence(sequence) {
    return sequence === '' ? '' : `${sequence} `;
  }

  function cleanTitle(currentTitle) {
    return currentTitle
      .replace(new RegExp(`${getInsertedSequence(sequenceActive)}|${getInsertedSequence(sequenceInactive)}`, 'g'), '');
  }


  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => {
    let newTitle = cleanTitle(title);
    if (isActive === 1) {
      newTitle = `${getInsertedSequence(sequenceActive)}${newTitle}`;
    } else if (isActive === 0) {
      newTitle = `${getInsertedSequence(sequenceInactive)}${newTitle}`;
    }

    setTitle(newTitle);

    return () => {
      document.title = cleanTitle(title);
    };
  }, [isActive, sequenceActive, sequenceInactive]);
};

export default useTitleActivity;

The hook is called useTitleActivity and I use it like this:


useTitleActivity(state.isActive);

Inside it works by first setting the current title in its local state:

const [title, setTitle] = useState(document.title);

The following:

function getInsertedSequence(sequence) {
    return sequence === '' ? '' : `${sequence} `;
  }

is just a local helper that makes sure I insert either exactly what I need or an empty string. In hindsight this might have been overkill

Moving on...

function cleanTitle(currentTitle) {
    return currentTitle
      .replace(new RegExp(`${getInsertedSequence(sequenceActive)}|${getInsertedSequence(sequenceInactive)}`, 'g'), '');
  }

The goal of this function is to remove any foreign elements from the initial title, nothing else.

useEffect(() => {
    document.title = title;
  }, [title]);

This effect will set the document.title with the title from the hook's local state every time that title changes.

And Finaly:

  useEffect(() => {
    let newTitle = cleanTitle(title);
    if (isActive === 1) {
      newTitle = `${getInsertedSequence(sequenceActive)}${newTitle}`;
    } else if (isActive === 0) {
      newTitle = `${getInsertedSequence(sequenceInactive)}${newTitle}`;
    }

    setTitle(newTitle);

    return () => {
      document.title = cleanTitle(title);
    };
  }, [isActive, sequenceActive, sequenceInactive]);
};

I found it easier to sometimes read hook effects from their end as you can clearly see their dependencies.

In this case, every time either isActive, sequenceActive or sequenceInactive change, a few things need to happen.

First we get our clean title.

Then we prefix it with our 'Active' or 'Inactive' emoji depending on the activity flag.

We then set the resulting title in the hook's state, this will make sure to trigger the effect above and sync the local state with the page title.

Finally, in case the user navigates away from the page where this hook is active, we revert the title to its unaltered form.

That's It. It's a small feature although very useful for the end user. Feel free to suggest rewrites/alternatives that would improve the code above.

And if you ever need a pwa for free and easy time tracking then you already know where to find one