From 1d18059cab7b321fbbe534a6559b904aa65c878b Mon Sep 17 00:00:00 2001 From: jackie1santana Date: Thu, 18 Jul 2024 12:14:38 -0500 Subject: [PATCH 1/5] fix: seconds ago --- index.js | 37 +++++++++++++++++++++++++++++++++---- package.json | 2 +- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 6486406..895e285 100644 --- a/index.js +++ b/index.js @@ -58,9 +58,9 @@ function showtimeago(dateParam) { const now = new Date(); const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000 const YEAR_IN_MS = 365.25 * DAY_IN_MS; // Account for leap years - const yesterday = new Date(now - DAY_IN_MS); + const yesterday = new Date(now.getTime() - DAY_IN_MS); - const seconds = Math.round((now - date) / 1000); + const seconds = Math.round((now.getTime() - date.getTime()) / 1000); const minutes = Math.round(seconds / 60); const hours = Math.round(minutes / 60); const days = Math.round(hours / 24); @@ -76,8 +76,22 @@ function showtimeago(dateParam) { return '1 year ago'; } + // Detailed logging for debugging + // console.log({ + // seconds, + // minutes, + // hours, + // days, + // months, + // years, + // isToday, + // isYesterday, + // now, + // date + // }); + switch (true) { - case (seconds < 5): + case (seconds < 2): return 'now'; case (seconds < 60): return `${seconds} seconds ago`; @@ -115,5 +129,20 @@ function showtimeago(dateParam) { throw new Error(error.message); } } +// console.log(showtimeago("2024-07-18T17:12:00.000Z")); +// Example usage to test with current time +// const now = new Date(); +// console.log("Current time:", now.toISOString()); +// console.log("Result:", showtimeago(now)); + +// // Test with 5 seconds ago +// const fiveSecondsAgo = new Date(now.getTime() - 5000); +// console.log("5 seconds ago:", fiveSecondsAgo.toISOString()); +// console.log("Result:", showtimeago(fiveSecondsAgo)); + +// // Test with 1 minute ago +// const oneMinuteAgo = new Date(now.getTime() - 60000); +// console.log("1 minute ago:", oneMinuteAgo.toISOString()); +// console.log("Result:", showtimeago(oneMinuteAgo)); -module.exports = showtimeago; +module.exports = showtimeago; \ No newline at end of file diff --git a/package.json b/package.json index 39fded3..1c94d0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "showtimeago", - "version": "4.0.2", + "version": "4.0.3", "description": "ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.", "main": "index.js", "scripts": { From 6ef24b0025c95afa666611fbd0b0a797880c96d4 Mon Sep 17 00:00:00 2001 From: jackie1santana Date: Thu, 18 Jul 2024 12:24:00 -0500 Subject: [PATCH 2/5] error handling to prevent future dates --- __test__/showTimeAgo.spec.js | 3 --- index.js | 9 ++++++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/__test__/showTimeAgo.spec.js b/__test__/showTimeAgo.spec.js index f39e368..e9136cf 100644 --- a/__test__/showTimeAgo.spec.js +++ b/__test__/showTimeAgo.spec.js @@ -77,9 +77,6 @@ test('Test Date for the start of Unix Epoch (January 1, 1970)', () => { expect(showTimeAgo(epochStart)).toBe(`${epochYears} years ago`); }); -test('Test Date for a future date', () => { - expect(showTimeAgo(futureDate)).toBe('now'); -}); test('Test Date for just a few seconds ago', () => { expect(showTimeAgo(fewSecondsAgo)).toContain('seconds ago'); diff --git a/index.js b/index.js index 895e285..cf6154b 100644 --- a/index.js +++ b/index.js @@ -56,6 +56,12 @@ function showtimeago(dateParam) { function timeAgo(dateParam) { const date = validateDateParam(dateParam); const now = new Date(); + + // Check if the date is in the future + if (date > now) { + throw new Error("Invalid date: The provided date is in the future."); + } + const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000 const YEAR_IN_MS = 365.25 * DAY_IN_MS; // Account for leap years const yesterday = new Date(now.getTime() - DAY_IN_MS); @@ -129,7 +135,8 @@ function showtimeago(dateParam) { throw new Error(error.message); } } -// console.log(showtimeago("2024-07-18T17:12:00.000Z")); + +console.log(showtimeago("2024-07-18T17:12:00.000Z")); // Example usage to test with current time // const now = new Date(); // console.log("Current time:", now.toISOString()); From 26418fcbe41d3e988381deb1702d3f7f7940edeb Mon Sep 17 00:00:00 2001 From: jackie1santana Date: Thu, 18 Jul 2024 12:24:21 -0500 Subject: [PATCH 3/5] updated npm version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1c94d0e..7bae6ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "showtimeago", - "version": "4.0.3", + "version": "4.0.4", "description": "ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.", "main": "index.js", "scripts": { From a12080076f25c5ee730c0f3e8d21217052f03172 Mon Sep 17 00:00:00 2001 From: jackie1santana Date: Thu, 18 Jul 2024 13:12:43 -0500 Subject: [PATCH 4/5] fix: cdn unkg error --- README.md | 162 ++++++++++++++++++++++++++++++++++++++++++++++-------- index.js | 4 +- 2 files changed, 140 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 56a6fab..f96b0ff 100644 --- a/README.md +++ b/README.md @@ -56,13 +56,13 @@ outputs: `2022-07-02T23:12:01.449Z` _ISO date format_ **CDN 🌐**: - https://cdn.jsdelivr.net/npm/showtimeago/index.js -- https://unpkg.com/browse/showtimeago/index.js +- https://unpkg.com/showtimeago@4.0.4/index.js _This is essentially a CommonJS module, so you may ignore the error: Uncaught ReferenceError: module is not defined at showTimeAgo.js:115:1 on the client side._ **CDN Set up:** -`` +`` ``` const showTimeAgo = showtimeago @@ -73,29 +73,138 @@ console.log(showTimeAgo(new Date())) ___ #### By default, showTimeAgo updates only when the page is reloaded -_How to display showTimeAgo with real-time updates without reloading the page?_ +# Time Ago Display Examples +___ +## Node.js Example (with reload) + +```javascript +const showTimeAgo = require('showtimeago'); -**Vanilla Javascript Example:** +function updateTimeAgo() { + const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z'); + console.clear(); // Clear the console + console.log(`Time ago: ${showPastTime}`); +} -``` +// Initial update +updateTimeAgo(); + +// Update every minute +const intervalId = setInterval(updateTimeAgo, 60000); + +// To stop the interval after a certain time (e.g., 1 hour): +// setTimeout(() => clearInterval(intervalId), 3600000); +``` +## Node.js Example (with reload) writing to a file + +```javascript const showTimeAgo = require('showtimeago'); +const fs = require('fs'); - let showPastTime = showTimeAgo('2022-07-02T23:12:01.449Z') - const showTimeAgoToBrowser = document.querySelector('div') - showTimeAgoToBrowser.innerHTML = `${showPastTime}`; +function updateTimeAgo() { + const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z'); + fs.writeFileSync('timeago.txt', `Time ago: ${showPastTime}`); + console.log(`Updated timeago.txt: ${showPastTime}`); +} -setInterval(() => { - showPastTime = showTimeAgo('2022-07-02T23:12:01.449Z') - showTimeAgoToBrowser.innerHTML = `${showPastTime}`; +// Initial update +updateTimeAgo(); - // 600000 = 1 minute in ms -}, 60000) +// Update every minute +const intervalId = setInterval(updateTimeAgo, 60000); -clearInterval(showPastTime) +// To stop the interval after a certain time (e.g., 1 hour): +// setTimeout(() => clearInterval(intervalId), 3600000); ``` +___ +## Vanilla JavaScript Example + +### HTML Setup +```html + + + + + + + Time Ago Example + + + +
+ + + + + +``` + +### (without reload in Vanilla JS) -**React Example:** +```javascript +const showTimeAgo = window.showTimeAgo; + +function updateTimeAgo() { + const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z'); + const showTimeAgoToBrowser = document.getElementById('timeAgoDisplay'); + showTimeAgoToBrowser.textContent = `Time ago: ${showPastTime}`; +} + +// Initial update +updateTimeAgo(); + +// Update every minute without reloading the page +setInterval(updateTimeAgo, 60000); ``` + +### (with reload in Vanilla JS) + +```javascript +const showTimeAgo = window.showTimeAgo; + +function updateTimeAgo() { + const showPastTime = showTimeAgo('2024-07-18T17:12:00.000Z'); + const showTimeAgoToBrowser = document.getElementById('timeAgoDisplay'); + showTimeAgoToBrowser.innerHTML = `Time ago: ${showPastTime}`; +} + +// Initial update +updateTimeAgo(); + +// Update every minute +setInterval(updateTimeAgo, 60000); +``` +___ +## React Example (with rerender) +```jsx +import * as React from "react"; +import showTimeAgo from "showtimeago"; + +export default function App() { + const [showPastTime, setPastTime] = React.useState(null); + + React.useEffect(() => { + function updateTimeAgo() { + setPastTime(showTimeAgo('2024-07-18T17:12:00.000Z')); + } + + // Initial update + updateTimeAgo(); + + // Update every minute + const timer = setInterval(updateTimeAgo, 60000); + + // Cleanup function + return () => clearInterval(timer); + }, []); // Empty dependency array means this effect runs once on mount + + return
User Posted Comment {showPastTime}
; +} +``` + +## React Example (without rerender) + +```jsx import * as React from "react"; import showTimeAgo from "showtimeago"; @@ -103,21 +212,26 @@ export default function App() { const [showPastTime, setPastTime] = React.useState(null); React.useEffect(() => { - setPastTime(showTimeAgo('2022-07-02T23:12:01.449Z')); + function updateTimeAgo() { + const currentTime = showTimeAgo('2024-07-18T17:12:00.000Z'); + if (currentTime !== showPastTime) { + setPastTime(currentTime); + } + } - const timer = window.setInterval(() => { - setPastTime(showTimeAgo('2022-07-02T23:12:01.449Z')); + // Initial update + updateTimeAgo(); - // 600000 = 1 minute in ms - }, 60000); + // Update every minute without causing a re-render if the value hasn't changed + const timer = setInterval(updateTimeAgo, 60000); - return () => window.clearInterval(timer); - }, [showPastTime]); + // Cleanup function + return () => clearInterval(timer); + }, [showPastTime]); // Add showPastTime as a dependency - return
User Posted Comment { showPastTime }
; + return
User Posted Comment {showPastTime}
; } ``` -_With the code above, ShowTimeAgo will automatically update every minute without needing a page reload._ ## Contributing 🤝 We welcome all contributions! If you have any cool ideas or features you think should be added, please: diff --git a/index.js b/index.js index cf6154b..22a2258 100644 --- a/index.js +++ b/index.js @@ -18,7 +18,7 @@ function showtimeago(dateParam) { const year = date.getFullYear(); let hours = date.getHours(); let minutes = date.getMinutes(); - const ampm = hours >= 12 ? 'pm' : 'am'; + const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12 || 12; // Convert hours to 12-hour format minutes = minutes < 10 ? `0${minutes}` : minutes; // Add leading zero to minutes @@ -136,7 +136,7 @@ function showtimeago(dateParam) { } } -console.log(showtimeago("2024-07-18T17:12:00.000Z")); +// console.log(showtimeago("2024-07-18T17:12:00.000Z")); // Example usage to test with current time // const now = new Date(); // console.log("Current time:", now.toISOString()); From e530b186fded8e589dc588ae29f1ce50da20371a Mon Sep 17 00:00:00 2001 From: jackie1santana Date: Thu, 18 Jul 2024 13:13:08 -0500 Subject: [PATCH 5/5] version upgrade --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7bae6ed..21536b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "showtimeago", - "version": "4.0.4", + "version": "4.0.5", "description": "ShowTimeAgo is a utility that provides a human-readable format of how long ago a date was with zero configuration.", "main": "index.js", "scripts": {