ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto

replace custom data formatting w date-fns

byarielm.fyi c71e2f56 d1c5e9a1

verified
Changed files
+17 -25
src
components
lib
utils
+11
package-lock.json
··· 20 "@tanstack/react-virtual": "^3.13.13", 21 "actor-typeahead": "^0.1.2", 22 "cookie": "^1.0.2", 23 "jose": "^6.1.0", 24 "jszip": "^3.10.1", 25 "lucide-react": "^0.544.0", ··· 4134 "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", 4135 "dev": true, 4136 "license": "MIT" 4137 }, 4138 "node_modules/debug": { 4139 "version": "4.4.3",
··· 20 "@tanstack/react-virtual": "^3.13.13", 21 "actor-typeahead": "^0.1.2", 22 "cookie": "^1.0.2", 23 + "date-fns": "^4.1.0", 24 "jose": "^6.1.0", 25 "jszip": "^3.10.1", 26 "lucide-react": "^0.544.0", ··· 4135 "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", 4136 "dev": true, 4137 "license": "MIT" 4138 + }, 4139 + "node_modules/date-fns": { 4140 + "version": "4.1.0", 4141 + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", 4142 + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", 4143 + "license": "MIT", 4144 + "funding": { 4145 + "type": "github", 4146 + "url": "https://github.com/sponsors/kossnocorp" 4147 + } 4148 }, 4149 "node_modules/debug": { 4150 "version": "4.4.3",
+1
package.json
··· 25 "@tanstack/react-virtual": "^3.13.13", 26 "actor-typeahead": "^0.1.2", 27 "cookie": "^1.0.2", 28 "jose": "^6.1.0", 29 "jszip": "^3.10.1", 30 "lucide-react": "^0.544.0",
··· 25 "@tanstack/react-virtual": "^3.13.13", 26 "actor-typeahead": "^0.1.2", 27 "cookie": "^1.0.2", 28 + "date-fns": "^4.1.0", 29 "jose": "^6.1.0", 30 "jszip": "^3.10.1", 31 "lucide-react": "^0.544.0",
+1 -6
src/components/HistoryTab.tsx
··· 28 userSettings, 29 onLoadUpload, 30 }: HistoryTabProps) { 31 - const formatDate = (dateString: string) => { 32 - const date = new Date(dateString); 33 - return formatRelativeTime(date.toLocaleDateString("en-US")); 34 - }; 35 - 36 return ( 37 <div className="p-6"> 38 {/* Setup Assistant Banner - Only show if wizard not completed */} ··· 143 {upload.totalUsers === 1 ? "user found" : "users found"} 144 </Badge> 145 <Badge variant="info"> 146 - Uploaded {formatDate(upload.createdAt)} 147 </Badge> 148 </div> 149 </div>
··· 28 userSettings, 29 onLoadUpload, 30 }: HistoryTabProps) { 31 return ( 32 <div className="p-6"> 33 {/* Setup Assistant Banner - Only show if wizard not completed */} ··· 138 {upload.totalUsers === 1 ? "user found" : "users found"} 139 </Badge> 140 <Badge variant="info"> 141 + Uploaded {formatRelativeTime(upload.createdAt)} 142 </Badge> 143 </div> 144 </div>
+4 -19
src/lib/utils/date.ts
··· 1 export function formatDate(dateString: string): string { 2 const date = new Date(dateString); 3 - return date.toLocaleDateString("en-US", { 4 - month: "short", 5 - day: "numeric", 6 - year: "numeric", 7 - hour: "2-digit", 8 - minute: "2-digit", 9 - }); 10 } 11 12 export function formatRelativeTime(dateString: string): string { 13 const date = new Date(dateString); 14 - const now = new Date(); 15 - const diffMs = now.getTime() - date.getTime(); 16 - const diffMins = Math.floor(diffMs / 60000); 17 - const diffHours = Math.floor(diffMs / 3600000); 18 - const diffDays = Math.floor(diffMs / 86400000); 19 - 20 - if (diffMins < 1) return "just now"; 21 - if (diffMins < 60) return `${diffMins}m ago`; 22 - if (diffHours < 24) return `${diffHours}h ago`; 23 - if (diffDays < 7) return `${diffDays}d ago`; 24 - 25 - return formatDate(dateString); 26 }
··· 1 + import { format, formatDistanceToNow } from "date-fns"; 2 + 3 export function formatDate(dateString: string): string { 4 const date = new Date(dateString); 5 + return format(date, "MMM d, yyyy, h:mm a"); 6 } 7 8 export function formatRelativeTime(dateString: string): string { 9 const date = new Date(dateString); 10 + return formatDistanceToNow(date, { addSuffix: true }); 11 }