Merge pull request #3232 from harryo/master

Format time using dateLocale

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -52,7 +52,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     },
   ];
 
-  const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss');
+  const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'pp');
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 

src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx

@@ -10,6 +10,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
   const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
   const { dateLocale } = useLocale();
   const { labels, formatMessage } = useMessages();
+  const { weekStartsOn } = dateLocale.options;
+  const daysOfWeek = Array(7)
+    .fill(weekStartsOn)
+    .map((d, i) => (d + i) % 7);
 
   const [, max] = data
     ? data.reduce((arr: number[], hours: number[], index: number) => {
@@ -40,7 +44,9 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
           {Array(24)
             .fill(null)
             .map((_, i) => {
-              const label = format(addHours(startOfDay(new Date()), i), 'haaa');
+              const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale })
+                .replace(/\D00 ?/, '')
+                .toLowerCase();
               return (
                 <div key={i} className={styles.hour}>
                   {label}
@@ -48,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
               );
             })}
         </div>
-        {data?.map((day: number[], index: number) => {
+        {data &&
-          return (
+          daysOfWeek.map((index: number) => {
-            <div key={index} className={styles.day}>
+            const day = data[index];
-              <div className={styles.header}>
+            return (
-                {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+              <div key={index} className={styles.day}>
+                <div className={styles.header}>
+                  {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+                </div>
+                {day?.map((hour: number) => {
+                  const pct = hour / max;
+                  return (
+                    <div key={hour} className={classNames(styles.cell)}>
+                      {hour > 0 && (
+                        <TooltipPopup
+                          label={`${formatMessage(labels.visitors)}: ${hour}`}
+                          position="right"
+                        >
+                          <div
+                            className={styles.block}
+                            style={{ opacity: pct, transform: `scale(${pct})` }}
+                          />
+                        </TooltipPopup>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
-              {day?.map((hour: number, n) => {
+            );
-                const pct = hour / max;
+          })}
-                return (
-                  <div key={n} className={classNames(styles.cell)}>
-                    {hour > 0 && (
-                      <TooltipPopup
-                        label={`${formatMessage(labels.visitors)}: ${hour}`}
-                        position="right"
-                      >
-                        <div
-                          className={styles.block}
-                          style={{ opacity: pct, transform: `scale(${pct})` }}
-                        />
-                      </TooltipPopup>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })}
       </div>
     </LoadingPanel>
   );

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx

@@ -34,7 +34,7 @@ export function SessionActivity({
         return (
           <Fragment key={eventId}>
             {showHeader && (
-              <div className={styles.header}>{formatTimezoneDate(createdAt, 'EEEE, PPP')}</div>
+              <div className={styles.header}>{formatTimezoneDate(createdAt, 'PPPP')}</div>
             )}
             <div key={eventId} className={styles.row}>
               <div className={styles.time}>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
         </dd>
 
         <dt>{formatMessage(labels.lastSeen)}</dt>
-        <dd>{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
+        <dd>{formatTimezoneDate(data?.lastAt, 'PPPPpp')}</dd>
 
         <dt>{formatMessage(labels.firstSeen)}</dt>
-        <dd>{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
+        <dd>{formatTimezoneDate(data?.firstAt, 'PPPPpp')}</dd>
 
         <dt>{formatMessage(labels.country)}</dt>
         <dd>

src/components/hooks/useTimezone.ts

@@ -1,12 +1,14 @@
 import { setItem } from '@/lib/storage';
 import { TIMEZONE_CONFIG } from '@/lib/constants';
 import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
-import useStore, { setTimezone } from '@/store/app';
+import useStore, { setTimezone } from 'store/app';
+import useLocale from './useLocale';
 
 const selector = (state: { timezone: string }) => state.timezone;
 
 export function useTimezone() {
   const timezone = useStore(selector);
+  const { dateLocale } = useLocale();
 
   const saveTimezone = (value: string) => {
     setItem(TIMEZONE_CONFIG, value);
@@ -20,6 +22,7 @@ export function useTimezone() {
         : date.split(' ').join('T') + 'Z',
       timezone,
       pattern,
+      { locale: dateLocale },
     );
   };