React JS: Countdown timer restart when page is reloaded Simple solution

Max-Xampy — Tue, 28 Sep 2021 08:14:04 +0000

React <Countdown/> is a customizable countdown component for React.

It seems that we lost the counter if we reload the browser page. To avoid that we will use the local storage to persist our timer data.

We will use the package example source code
https://codesandbox.io/s/sad-zhukovsky-hs7hc

You can find the final solution here
https://codesandbox.io/s/serene-leftpad-40e7e

But first, we verify that we have installed the required packages and have imported them. Our code header must look like this

import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown";
import { useState, useEffect } from "react";

Next is our counter renderer function component.

// Random component
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const renderer = ({ hours, minutes, seconds, completed }) => {
  if (completed) {
    // Render a complete state
    return <Completionist />;
  } else {
    // Render a countdown
    return (
      <span>
        {hours}:{minutes}:{seconds}
      </span>
    );
  }
};

Our next step will be a function to read data from local storage

const getLocalStorageValue = (s) => localStorage.getItem(s);

Next we create our App function component and defined required data. The most important data is the delay value.

const App = () => {
  const [data, setData] = useState(
    { date: Date.now(), delay: 60000 } //60 seconds
  );
  const wantedDelay = 60000; //60 s

  return (
    <div>
      <Countdown
        date={data.date + data.delay}
        renderer={renderer}
        onStart={(delta) => {
          //Save the end date
          if (localStorage.getItem("end_date") == null)
            localStorage.setItem(
              "end_date",
              JSON.stringify(data.date + data.delay)
            );
        }}
        onComplete={() => {
          if (localStorage.getItem("end_date") != null)
            localStorage.removeItem("end_date");
        }}
      />
    </div>
  );

Now our main problem is how to handle the browser page reloaded; for that we will use a react hook (with class component it will be componentDidMount function).

  //[START] componentDidMount
  //Code runs only one time after each reloading
  useEffect(() => {
    const savedDate = getLocalStorageValue("end_date");
    if (savedDate != null && !isNaN(savedDate)) {
      const currentTime = Date.now();
      const delta = parseInt(savedDate, 10) - currentTime;

      //Do you reach the end?
      if (delta > wantedDelay) {
        //Yes we clear uour saved end date
        if (localStorage.getItem("end_date").length > 0)
          localStorage.removeItem("end_date");
      } else {
        //No update the end date  
        setData({ date: currentTime, delay: delta });
      }
    }
  }, []);
  //[END] componentDidMount

Instead of using localstorage, we can use a remote server or anything else. The most important is to save our end date of the count down.

Thanks

Android JUnit5 Gradle: No tests found for given includes Error

Max-Xampy — Thu, 16 Sep 2021 17:21:30 +0000

Hi I hope you're an android developper.

I will share how to solve the common problem "No tests found for given includes ...".

The Error

It occurs after we finished to add JUnit5 dependencies to gradle, wrote and run tests.

Before the error

I was on Android Studio 3.6 and using gradle 3.6.4. And when I upgraded Android Studio to the latest version Arctic Fox Patch 2, my tests did not run anymore.

So I decided to upgrade the version of JUnit 5.3.2 to 5.7.2 with no success. Then I started searching.

Common Solution

The common solution I found was to update the build.gradle file like this

Even adding it under adroid section in build.gradle file or in the build.gradle itsef, I got the following error, when I tried to sync or rerun you test:

I dig more deeper on gradle, finally I've found out the solution

The solution

Just remove the common solution and add lines like on the screenshot

And after that, sync the project with the gradle file, and run the test.

The tests is instantiated and....

As we wrote a good test...

Conclusion

No matter what happens as an error, reading the documentation is one of the best places to start searching for a solution.