use localized dates for localeTimeString as well · jack.is/leaflet@142b194

+12 -14

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

··· 17 17 import { usePathname } from "next/navigation"; 18 18 import { QuoteContent } from "../Quotes"; 19 19 import { timeAgo } from "src/utils/timeAgo"; 20 + import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 20 21 21 22 export type Comment = { 22 23 record: Json; ··· 250 251 }; 251 252 252 253 const DatePopover = (props: { date: string }) => { 253 - let [t, full] = useMemo(() => { 254 - return [ 255 - timeAgo(props.date), 256 - new Date(props.date).toLocaleTimeString(undefined, { 257 - year: "numeric", 258 - month: "2-digit", 259 - day: "2-digit", 260 - hour: "2-digit", 261 - minute: "2-digit", 262 - }), 263 - ]; 264 - }, [props.date]); 254 + const timeAgoText = useMemo(() => timeAgo(props.date), [props.date]); 255 + const fullDate = useLocalizedDate(props.date, { 256 + year: "numeric", 257 + month: "2-digit", 258 + day: "2-digit", 259 + hour: "2-digit", 260 + minute: "2-digit", 261 + }); 262 + 265 263 return ( 266 264 <Popover 267 265 trigger={ 268 - <div className="italic text-sm text-tertiary hover:underline">{t}</div> 266 + <div className="italic text-sm text-tertiary hover:underline">{timeAgoText}</div> 269 267 } 270 268 > 271 - <div className="text-sm text-secondary">{full}</div> 269 + <div className="text-sm text-secondary">{fullDate}</div> 272 270 </Popover> 273 271 ); 274 272 };

+11 -13

app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx

··· 10 10 import { useInitialPageLoad } from "components/InitialPageLoadProvider"; 11 11 import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 12 12 import { CommentTiny } from "components/Icons/CommentTiny"; 13 + import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 13 14 import { 14 15 BlueskyEmbed, 15 16 PostNotAvailable, ··· 121 122 122 123 const ClientDate = (props: { date?: string }) => { 123 124 let pageLoaded = useInitialPageLoad(); 125 + const formattedDate = useLocalizedDate(props.date || new Date().toISOString(), { 126 + month: "short", 127 + day: "numeric", 128 + year: "numeric", 129 + hour: "numeric", 130 + minute: "numeric", 131 + hour12: true, 132 + }); 133 + 124 134 if (!pageLoaded) return null; 125 135 126 - let datetimeFormatted = new Date(props.date ? props.date : "").toLocaleString( 127 - "en-US", 128 - { 129 - month: "short", 130 - day: "numeric", 131 - year: "numeric", 132 - hour: "numeric", 133 - minute: "numeric", 134 - hour12: true, 135 - }, 136 - ); 137 - 138 - return <div className="text-xs text-tertiary">{datetimeFormatted}</div>; 136 + return <div className="text-xs text-tertiary">{formattedDate}</div>; 139 137 };

+15 -7

app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx

··· 8 8 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 9 9 import { Checkbox } from "components/Checkbox"; 10 10 import { useEffect, useState } from "react"; 11 + import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 11 12 12 13 type subscriber = { email: string | undefined; did: string | undefined }; 13 14 ··· 198 199 @{props.handle} 199 200 </a> 200 201 )} 201 - <div className="px-1 py-0 h-max rounded-md text-sm italic text-tertiary"> 202 - {new Date(props.createdAt).toLocaleString(undefined, { 203 - year: "2-digit", 204 - month: "2-digit", 205 - day: "2-digit", 206 - })} 207 - </div> 202 + <SubscriberDate createdAt={props.createdAt} /> 208 203 </div> 209 204 </> 210 205 // </Checkbox> ··· 235 230 </Menu> 236 231 ); 237 232 }; 233 + 234 + function SubscriberDate(props: { createdAt: string }) { 235 + const formattedDate = useLocalizedDate(props.createdAt, { 236 + year: "2-digit", 237 + month: "2-digit", 238 + day: "2-digit", 239 + }); 240 + return ( 241 + <div className="px-1 py-0 h-max rounded-md text-sm italic text-tertiary"> 242 + {formattedDate} 243 + </div> 244 + ); 245 + }

+14 -14

components/Blocks/BlueskyPostBlock/index.tsx

··· 13 13 import { useInitialPageLoad } from "components/InitialPageLoadProvider"; 14 14 import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 15 15 import { CommentTiny } from "components/Icons/CommentTiny"; 16 + import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 16 17 17 18 export const BlueskyPostBlock = (props: BlockProps & { preview?: boolean }) => { 18 19 let { permissions } = useEntitySetContext(); ··· 28 29 input?.focus(); 29 30 } else input?.blur(); 30 31 }, [isSelected, props.entityID, props.preview]); 31 - 32 - let initialPageLoad = useInitialPageLoad(); 33 32 34 33 switch (true) { 35 34 case !post: ··· 81 80 //getting the url to the post 82 81 let postId = post.post.uri.split("/")[4]; 83 82 let url = `https://bsky.app/profile/${post.post.author.handle}/post/${postId}`; 84 - 85 - let datetimeFormatted = initialPageLoad 86 - ? new Date(timestamp ? timestamp : "").toLocaleString("en-US", { 87 - month: "short", 88 - day: "numeric", 89 - year: "numeric", 90 - hour: "numeric", 91 - minute: "numeric", 92 - hour12: true, 93 - }) 94 - : ""; 95 83 96 84 return ( 97 85 <div ··· 141 129 </> 142 130 )} 143 131 <div className="w-full flex gap-2 items-center justify-between"> 144 - <div className="text-xs text-tertiary">{datetimeFormatted}</div> 132 + {timestamp && <PostDate timestamp={timestamp} />} 145 133 <div className="flex gap-2 items-center"> 146 134 {post.post.replyCount && post.post.replyCount > 0 && ( 147 135 <> ··· 166 154 ); 167 155 } 168 156 }; 157 + 158 + function PostDate(props: { timestamp: string }) { 159 + const formattedDate = useLocalizedDate(props.timestamp, { 160 + month: "short", 161 + day: "numeric", 162 + year: "numeric", 163 + hour: "numeric", 164 + minute: "numeric", 165 + hour12: true, 166 + }); 167 + return <div className="text-xs text-tertiary">{formattedDate}</div>; 168 + }

Configure Feed

Configure Feed