Countdown Timer: Jira dashboard gadget

Hello, I’m trying to build a countdown timer in Jira dashboard gadget using react.
Below is my code:

import ForgeUI, { DashboardGadget, DashboardGadgetEdit, render, useRef, useEffect, useState, Text, DatePicker, Strong, TextField, Toggle, Select, Option, useProductContext } from "@forge/ui";
import React,{} from 'react';


const View = () => {
  const { extensionContext: { gadgetConfiguration } } = useProductContext();
  // const currentDate = new Date();
  // const countdownDate = new Date(gadgetConfiguration.date);


  const [timerDays, setTimerDays] = useState('00');
  const [timerHours, setTimerHours] = useState('00');
  const [timerMinutes, setTimerMinutes] = useState('00');
  const [timerSeconds, setTimerSeconds] = useState('00');

  let interval = useRef()

  const startTimer = () => {
     const countdownDate = new Date(gadgetConfiguration.date);

    interval  = setInterval(() => {
      // const now = new Date().getTime();
      const currentDate = new Date();

      // Calculate time remaining between the current date and the countdown date
      const timeRemaining = countdownDate - currentDate;
      const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeRemaining %(1000 * 60 * 60 * 24) / (1000 * 60 * 60)));
      const minutes = Math.floor((timeRemaining % (1000 * 60 * 60) / (1000 * 60)));
      const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);


      if (timeRemaining < 0) {
        // stop timer
        clearInterval(interval.current)
      } else {
        // update timer
        setTimerDays(days);
        setTimerHours(hours);
        setTimerMinutes(minutes);
        setTimerSeconds(seconds);
      }

    }, 1000)
  }
  
  useEffect(() => {
    startTimer();
    return() => {
      clearInterval(interval.current);
    };
  });
  
  
  

  return (
    <DashboardGadget>
      <Text>{`${gadgetConfiguration.name}`}</Text>
      <Text>{`Countdown: ${timerDays} days, ${timerHours} hours, ${timerMinutes} minutes, ${timerSeconds} seconds`}</Text>
      <HelloWorld/>
    </DashboardGadget>
  );
};

const Edit = () => {
  const onSubmit = values => {
    return values;
  };

  return (
    <DashboardGadgetEdit onSubmit={onSubmit}>
      <TextField name="name" label="Countdown Title:" />
      <DatePicker name="date" label="Countdown Date" description="Please enter the Countdown date" />
      <Toggle label="Use 'Flip' Countdown" name="isSectionVisible" />
      <Select label="Countdown Alignment" name="countdownAlignment">
        <Option defaultSelected label="Centre" value="Centre" />
        <Option label="Left" value="Left" />
        <Option label="Right" value="Right" />
      </Select>
    </DashboardGadgetEdit>
  );
};

export const runView = render(<View />);
export const runEdit = render(<Edit />);

Note: This is the error message I’m getting after running the code.

Something went wrong
Trace ID: 0000000000000000aa00f90f1d2a2b09
There was an error invoking the function - (0 , _forge_ui__WEBPACK_IMPORTED_MODULE_0__.useRef) is not a function

TypeError: (0 , _forge_ui__WEBPACK_IMPORTED_MODULE_0__.useRef) is not a function
    at Object.View [as type] (index.js:6994:67)
    at index.js:4921:36
    at async index.js:4267:31

Hi @Olamide - I’ve just edited the formatting on your post to make it more readable. Hope that’s ok!

It looks like you’re importing useRef from ForgeUI, but it’s not an available ForgeUI hook (see https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/ for documentation on the hooks available in Forge Ui Kit).

It looks like you can import this from React if you’re creating a UI Kit 2 app (learn more at https://developer.atlassian.com/platform/forge/ui-kit-2/react/)

I hope this helps!
Mel

Thank you @mpaisley - I tried importing useRef from React using the documentation but I’m still getting this error:

Something went wrong
Trace ID: 0000000000000000b69303466ae9fe9b
There was an error invoking the function - Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Invariant Violation: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ca (index.js:5473:316)
at B (index.js:5474:166)
at W (index.js:5482:375)
at useRef (index.js:5485:265)
at Object.View [as type] (index.js:6994:63)
at index.js:4921:36
at async index.js:4267:31