feat: add last updated timestamp to WeatherData component
This commit is contained in:
@@ -6,7 +6,7 @@ You can find the web version of the Weather App at [https://weather.the1s.de](ht
|
|||||||
|
|
||||||
## Version
|
## Version
|
||||||
|
|
||||||
Currently hosted version: **1.0.1**
|
Currently hosted version: **development branch (latest)**
|
||||||
|
|
||||||
## Dev info
|
## Dev info
|
||||||
|
|
||||||
|
@@ -1,5 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Sunrise, Sunset } from "lucide-react";
|
import { Sunrise, Sunset } from "lucide-react";
|
||||||
|
import { getDateTime } from "../utils/utils";
|
||||||
|
|
||||||
const WeatherData: React.FC = () => {
|
const WeatherData: React.FC = () => {
|
||||||
const weatherRaw = localStorage.getItem("weather");
|
const weatherRaw = localStorage.getItem("weather");
|
||||||
@@ -75,6 +76,11 @@ const WeatherData: React.FC = () => {
|
|||||||
: "--:--"}
|
: "--:--"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-base text-gray-600 italic font-semibold">
|
||||||
|
Last updated: {getDateTime()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
24
frontend/src/utils/utils.ts
Normal file
24
frontend/src/utils/utils.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
export const getDateTime = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const day = now.getDate();
|
||||||
|
const month = now.toLocaleString("en-GB", { month: "long" });
|
||||||
|
const hours = now.getHours().toString().padStart(2, "0");
|
||||||
|
const minutes = now.getMinutes().toString().padStart(2, "0");
|
||||||
|
|
||||||
|
// Ordinal suffix
|
||||||
|
const getOrdinal = (n: number) => {
|
||||||
|
if (n > 3 && n < 21) return "th";
|
||||||
|
switch (n % 10) {
|
||||||
|
case 1:
|
||||||
|
return "st";
|
||||||
|
case 2:
|
||||||
|
return "nd";
|
||||||
|
case 3:
|
||||||
|
return "rd";
|
||||||
|
default:
|
||||||
|
return "th";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return `${day}${getOrdinal(day)} ${month}, ${hours}:${minutes}`;
|
||||||
|
};
|
Reference in New Issue
Block a user