MP-128 member location and local time

Author: kkartunov

package.json

@@ -32,6 +32,7 @@
     "apexcharts": "^3.36.0",
     "axios": "^1.1.2",
     "browser-cookies": "^1.2.0",
+    "city-timezones": "^1.2.1",
     "classnames": "^2.3.2",
     "contentful": "^9.2.5",
     "country-calling-code": "0.0.3",

src/apps/profiles/src/member-profile/local-info/MemberLocalInfo.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
+import cityTimezones from 'city-timezones'
 import moment from 'moment-timezone'
 
 import { useCountryName, UserProfile } from '~/libs/core'
@@ -12,22 +13,46 @@ interface MemberLocalInfoProps {
 
 const MemberLocalInfo: FC<MemberLocalInfoProps> = (props: MemberLocalInfoProps) => {
 
-    const memberCountry: string | undefined = useCountryName(props.profile?.homeCountryCode)
+    const memberCountry: string | undefined
+        = useCountryName(props.profile?.homeCountryCode || props.profile?.competitionCountryCode)
+
+    const city: string | undefined = props.profile?.addresses?.[0]?.city
+
+    const memberCityTimezone: string | undefined = useMemo(() => {
+        if (!city) {
+            return undefined
+        }
+
+        const cityTimezoneData: cityTimezones.CityData[] = cityTimezones.lookupViaCity(city)
+        let memberTimezone: string | undefined
+
+        if (!cityTimezoneData?.length) {
+            memberTimezone = `${memberCountry}/${city}`
+        } else {
+            memberTimezone = cityTimezoneData[0].timezone
+        }
+
+        return moment.tz.zone(memberTimezone) ? memberTimezone : undefined
+    }, [city, memberCountry])
 
     return (
         <div className={styles.container}>
             <div className={styles.localInfo}>
                 <IconSolid.LocationMarkerIcon />
-                {memberCountry}
-            </div>
-            <div className={styles.localInfo}>
-                <IconSolid.ClockIcon />
-                Local time:
-                {' '}
-                {moment()
-                    .tz('America/New_York')
-                    .format('HH:MM')}
+                {`${!!city ? `${city}, ` : ''}${memberCountry}`}
             </div>
+            {
+                !!memberCityTimezone && (
+                    <div className={styles.localInfo}>
+                        <IconSolid.ClockIcon />
+                        Local time:
+                        {' '}
+                        {moment()
+                            .tz(memberCityTimezone)
+                            .format('hh:mm')}
+                    </div>
+                )
+            }
         </div>
     )
 }

src/libs/core/lib/profile/user-profile.model.ts

@@ -3,6 +3,9 @@ import { UserEMSISkill } from './user-skill.model'
 export type TC_TRACKS = 'DEVELOP' | 'DESIGN' | 'DATA_SCIENCE'
 
 export interface UserProfile {
+    addresses?: Array<{
+        city?: string
+    }>
     competitionCountryCode: string
     createdAt: number
     description: string

yarn.lock

@@ -6392,6 +6392,13 @@ ci-info@^3.6.1:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
+city-timezones@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/city-timezones/-/city-timezones-1.2.1.tgz#7087d1719dd599f1e88ebc2f7fb96e091201d318"
+  integrity sha512-hruuB611QFoUFMsan7xd9B2VPMrA8XC716O/999WW34kmaJUT1hxKF2W8TSXAWkhSqgvbu70DjcDv7/wpM6vow==
+  dependencies:
+    lodash "^4.17.21"
+
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"