const WeatherWidget = ({ id, editMode }) => {
const [initialized, setInitialized] = useState(false);
const [settings, setSettings] = useState({});
const [widgetApi, setWidgetApi] = useState();
const [tickerTitle, setTickerTitle] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState();
const [roles, setRoles] = useState([]);
const settingsChanged = useCallback(debounce(setSettings, 1000), []);
useEffect(() => {
const **setDataRole** = (json) => {
setRoles(json.data)
}
if (widgetApi && initialized && settings.jsonData) {
var json = validateJSON(settings.jsonData);
**setDataRole**(json);
}
}, [settings])
return (
<Container>
<StyledUl>
<Ticker>
{({ index }) => (
<>
{roles && roles.map(({ key, value }, i) => (
<>
{i === 0 ? null : ','}
<span className="name" style={{ fontSize: "12px", color: settings?.keyColor, whiteSpace: "nowrap", margin: "5px" }}>
{key}
</span>
<span className="goal" style={{ fontSize: "12px", color: settings?.valueColor, whiteSpace: "nowrap", margin: "5px" }}>{value}</span>
</>
))
}
</>
)}
</Ticker>
</StyledUl>
</Container>
);
};