Fix: date & time formatting & string display (keep-starknet-strange#172)

* Autoconnect to relayer

* fix: date time formatting & string

* Remove dayjs

JoyboyCommunity/package.json

@@ -30,7 +30,6 @@
     "@tanstack/react-query": "^5.40.0",
     "buffer": "^6.0.3",
     "crypto-es": "^2.1.0",
-    "dayjs": "^1.11.11",
     "events": "^3.3.0",
     "expo": "~51.0.8",
     "expo-clipboard": "~6.0.3",

JoyboyCommunity/src/context/NostrContext.tsx

@@ -16,10 +16,14 @@ export const NostrProvider: React.FC<React.PropsWithChildren> = ({children}) =>
 
   const relays = JOYBOY_RELAYS;
   const ndk = useMemo(() => {
-    return new NDK({
+    const ndk = new NDK({
       explicitRelayUrls: relays,
       signer: privateKey ? new NDKPrivateKeySigner(privateKey) : undefined,
     });
+
+    ndk.connect();
+
+    return ndk;
   }, [relays, privateKey]);
 
   return <NostrContext.Provider value={{ndk, relays}}>{children}</NostrContext.Provider>;

JoyboyCommunity/src/modules/Post/index.tsx

@@ -16,7 +16,7 @@ import {CommentIcon, LikeFillIcon, LikeIcon, RepostIcon} from '../../assets/icon
 import {Avatar, Text} from '../../components';
 import {useProfile, useStyles, useTheme} from '../../hooks';
 import {MainStackNavigationProps} from '../../types';
-import {timestampToHumanReadable} from '../../utils/common-utils';
+import {getElapsedTimeStringFull} from '../../utils/timestamp';
 import stylesheet from './styles';
 
 export type PostProps = {
@@ -130,7 +130,7 @@ export const Post: React.FC<PostProps> = ({asComment, event}) => {
               )}
 
               <Text color="textLight" fontSize={11} lineHeight={16}>
-                {timestampToHumanReadable(event.created_at)}
+                {getElapsedTimeStringFull(event.created_at * 1000)}
               </Text>
             </View>
           </Pressable>

JoyboyCommunity/src/utils/timestamp.ts

@@ -0,0 +1,123 @@
+export type ElapsedTime = {
+  value: number;
+  unit: 'just_now' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';
+};
+
+/**
+ * Calculates the elapsed time between a timestamp and the current time.
+ * @param {number} timestamp The timestamp to calculate the elapsed time from.
+ * @param {number} currentTimestamp The current timestamp. Defaults to Date.now().
+ * @returns {ElapsedTime} The elapsed time.
+ */
+export const getElapsedFromTimestamp = (
+  timestamp: number,
+  currentTimestamp = Date.now(),
+): ElapsedTime => {
+  const elapsed = Math.floor((currentTimestamp - timestamp) / 1000);
+
+  if (elapsed < 10) {
+    return {value: 0, unit: 'just_now'};
+  }
+
+  if (elapsed < 60) {
+    return {value: elapsed, unit: 'seconds'};
+  }
+
+  const minutes = Math.floor(elapsed / 60);
+  if (minutes < 60) {
+    return {value: minutes, unit: 'minutes'};
+  }
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return {value: hours, unit: 'hours'};
+  }
+
+  const days = Math.floor(hours / 24);
+  if (days < 7) {
+    return {value: days, unit: 'days'};
+  }
+
+  if (days < 31) {
+    return {value: Math.floor(days / 7), unit: 'weeks'};
+  }
+
+  const months = Math.floor(days / 30);
+  if (months < 12) {
+    return {value: months, unit: 'months'};
+  }
+
+  return {value: Math.floor(months / 12), unit: 'years'};
+};
+
+export const getElapsedTimeStringFull = (
+  timestamp: number,
+  currentTimestamp = Date.now(),
+): string => {
+  const elapsed = getElapsedFromTimestamp(timestamp, currentTimestamp);
+
+  switch (elapsed.unit) {
+    case 'just_now':
+      return 'just now';
+
+    case 'seconds':
+      return `${elapsed.value} second${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'minutes':
+      return `${elapsed.value} minute${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'hours':
+      return `${elapsed.value} hour${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'days':
+      return `${elapsed.value} day${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'weeks':
+      return `${elapsed.value} week${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'months':
+      return `${elapsed.value} month${elapsed.value > 1 ? 's' : ''} ago`;
+
+    case 'years':
+      return `${elapsed.value} year${elapsed.value > 1 ? 's' : ''} ago`;
+
+    default:
+      return '';
+  }
+};
+
+export const getElapsedTimeStringShort = (
+  timestamp: number,
+  currentTimestamp = Date.now(),
+): string => {
+  const elapsed = getElapsedFromTimestamp(timestamp, currentTimestamp);
+
+  switch (elapsed.unit) {
+    case 'just_now':
+      return 'just now';
+
+    case 'seconds':
+      return `${elapsed.value}s`;
+
+    case 'minutes':
+      return `${elapsed.value}m`;
+
+    case 'hours':
+      return `${elapsed.value}h`;
+
+    case 'days':
+      return `${elapsed.value}d`;
+
+    case 'weeks':
+      return `${elapsed.value}w`;
+
+    case 'months':
+      return `${elapsed.value}mo`;
+
+    case 'years':
+      return `${elapsed.value}y`;
+
+    default:
+      return '';
+  }
+};

JoyboyCommunity/yarn.lock

@@ -3223,7 +3223,7 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-dayjs@^1.11.11, dayjs@^1.8.15:
+dayjs@^1.8.15:
   version "1.11.11"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
   integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==