github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/hooks/timeZone.hook.ts (about)

     1  /* eslint-disable prefer-template */
     2  /* eslint-disable @typescript-eslint/restrict-plus-operands */
     3  import { useEffect, useMemo } from 'react';
     4  import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
     5  import {
     6    changeTimeZoneOffset,
     7    selectTimezoneOffset,
     8  } from '@webapp/redux/reducers/ui';
     9  
    10  export default function useTimeZone() {
    11    const dispatch = useAppDispatch();
    12    const selectedOffset = useAppSelector(selectTimezoneOffset);
    13    const offset = new Date().getTimezoneOffset();
    14  
    15    useEffect(() => {
    16      if (typeof selectedOffset !== 'number') {
    17        dispatch(changeTimeZoneOffset(offset));
    18      }
    19    }, []);
    20  
    21    const browserTimeLabel = useMemo(() => {
    22      const absOffset = Math.abs(offset);
    23  
    24      return `Browser Time (UTC${offset < 0 ? '+' : '-'}${
    25        ('00' + Math.floor(absOffset / 60)).slice(-2) +
    26        ':' +
    27        ('00' + (absOffset % 60)).slice(-2)
    28      })`;
    29    }, [offset]);
    30  
    31    return {
    32      offset: typeof selectedOffset !== 'number' ? offset : selectedOffset,
    33      options: [
    34        {
    35          label: browserTimeLabel,
    36          value: offset,
    37          key: 'local',
    38        },
    39        {
    40          label: 'Default (UTC)',
    41          value: 0,
    42          key: 'utc',
    43        },
    44      ],
    45      changeTimeZoneOffset: (value: number) =>
    46        dispatch(changeTimeZoneOffset(value)),
    47    };
    48  }