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