Add user info

Author: k.golikov

src/actions/api/appAxios.ts

@@ -0,0 +1,16 @@
+import axios, { AxiosInstance } from 'axios';
+import call from '../../utils/call';
+import camelizeKeys from '../../utils/camelizeKeys';
+
+const appAxios = call<AxiosInstance>(() => {
+    const instance = axios.create();
+
+    instance.interceptors.response.use((response) => {
+        response.data = camelizeKeys(response.data);
+        return response;
+    });
+
+    return instance;
+});
+
+export default appAxios;

src/actions/ipapi.co/api/getUserInfo.ts

@@ -0,0 +1,9 @@
+import { UserIpInfo } from '../../../types/ipapi.co';
+import appAxios from '../../api/appAxios';
+
+const getUserInfo = async (): Promise<UserIpInfo> => {
+    const response = await appAxios.get<UserIpInfo>('https://ipapi.co/json/');
+    return response.data;
+};
+
+export default getUserInfo;

src/constants/router/menuItems.ts

@@ -56,11 +56,10 @@ const menuItems: MenuItem[] = [
                 title: 'BG Generator'
             },
             {
-                route: routes.templateTextGenerator,
-                isGray: true
+                route: routes.userInfo
             },
             {
-                route: routes.userInfo,
+                route: routes.templateTextGenerator,
                 isGray: true
             },
             {

src/hooks/useAsync.ts

@@ -7,8 +7,9 @@ export interface AsyncHookParams<T> {
     onComplete?: () => void;
     onLoadingChange?: (isLoading: boolean) => void;
     onErrorChange?: (error: unknown) => void;
-    isLoadingInitial?: boolean;
-    errorInitial?: boolean;
+    initialResult?: T;
+    initialIsLoading?: boolean;
+    initialError?: boolean;
     doInvokeOnMount?: boolean;
 }
 
@@ -19,13 +20,23 @@ const useAsync = <T>(promiseFn: (() => Promise<T>) | Promise<T>, params?: AsyncH
         onComplete,
         onLoadingChange,
         onErrorChange,
-        isLoadingInitial,
-        errorInitial,
+        initialResult,
+        initialIsLoading,
+        initialError,
         doInvokeOnMount
     } = params ?? {};
 
-    const [isLoading, setIsLoading] = useState<boolean>(isLoadingInitial ?? false);
-    const [error, setError] = useState<unknown>(errorInitial);
+    const [result, setResult] = useState<T | undefined>(initialResult);
+    const [isLoading, setIsLoading] = useState<boolean>(initialIsLoading ?? false);
+    const [error, setError] = useState<unknown>(initialError);
+
+    const changeResult = useCallback(
+        (value: T) => {
+            setResult(value);
+            onSuccess?.(value);
+        },
+        [onSuccess]
+    );
 
     const changeLoading = useCallback(
         (value: boolean) => {
@@ -50,7 +61,7 @@ const useAsync = <T>(promiseFn: (() => Promise<T>) | Promise<T>, params?: AsyncH
 
             const result: T = isFunction(promiseFn) ? await promiseFn() : await promiseFn;
 
-            onSuccess?.(result);
+            changeResult(result);
         } catch (e) {
             changeError(e);
             onError?.(e);
@@ -67,6 +78,7 @@ const useAsync = <T>(promiseFn: (() => Promise<T>) | Promise<T>, params?: AsyncH
     }, []);
 
     return {
+        result,
         invoke,
         isLoading,
         error

src/pages/userInfoPage/UserInfoPage.module.scss

@@ -0,0 +1,30 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .ipAddress {
+        font-size: 1.1rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .ipAddressSkeleton {
+        height: 22px !important;
+        width: 165px;
+        margin-top: 3px;
+    }
+
+    .locationSkeleton {
+        height: 22px !important;
+        width: 165px;
+        margin-top: 1px;
+    }
+
+    .ipDataProviderSkeleton {
+        height: 20px !important;
+        width: 200px;
+        margin-bottom: 3.5px;
+    }
+}

src/pages/userInfoPage/UserInfoPage.tsx

@@ -1,19 +1,103 @@
-import React from 'react';
-import PageContainer, { PageTag } from '../../components/pageContainer/PageContainer';
+import React, { FunctionComponent } from 'react';
+import PageContainer from '../../components/pageContainer/PageContainer';
 import Text from 'antd/lib/typography/Text';
-import { Space } from 'antd';
+import { Col, notification, Skeleton, Space, Tag, Tooltip } from 'antd';
+import styles from './UserInfoPage.module.scss';
+import useAsync from '../../hooks/useAsync';
+import getUserInfo from '../../actions/ipapi.co/api/getUserInfo';
+import getErrorMessage from '../../utils/getErrorMessage';
+import ExternalLink from '../../components/ExternalLink';
+import getScreenSize from '../../utils/getScreenSize';
+import getScaledScreenSize from '../../utils/getScaledScreenSize';
 
-const tags = [PageTag.WIP];
+const UserInfoPage: FunctionComponent = () => {
+    const {
+        result: userIpInfo,
+        isLoading: isUserIpInfoLoading,
+        error: userIpInfoError
+    } = useAsync(getUserInfo, {
+        doInvokeOnMount: true,
+        onError: (error) => {
+            console.error(error);
+            notification.error({
+                message: 'An error occurred while getting the IP address',
+                description: getErrorMessage(error)
+            });
+        },
+        onSuccess: console.log
+    });
+
+    const browserLanguages = window.navigator.languages;
+    const realScreenSize = getScaledScreenSize();
+    const screenSize = getScreenSize();
+    const scale = window.devicePixelRatio;
+    const screenOrientation = window.screen.orientation.type;
 
-const UserInfoPage = () => {
     return (
-        <PageContainer title="User Info" tags={tags}>
-            <Space>
-                <Text strong>
-                    <Text>IP: </Text>
-                    <Text copyable>192.168.0.123 (fake)</Text>
+        <PageContainer title="User Info">
+            <Col className={styles.container}>
+                {!userIpInfoError && (
+                    <Space direction="vertical" className="mb-2">
+                        {isUserIpInfoLoading ? (
+                            <>
+                                <Skeleton.Input active className={styles.ipAddressSkeleton} />
+                                <Skeleton.Input active className={styles.locationSkeleton} />
+                                <Skeleton.Input active className={styles.ipDataProviderSkeleton} />
+                            </>
+                        ) : (
+                            <>
+                                <Text strong className={styles.ipAddress}>
+                                    <Text strong>IP: </Text>
+                                    <Text copyable>{userIpInfo?.ip}</Text>
+                                </Text>
+                                <Text>
+                                    <Text strong>Location:</Text>
+                                    <Text className="ms-1">
+                                        {userIpInfo?.countryName}, {userIpInfo?.city}
+                                    </Text>
+                                </Text>
+                                <Text type="secondary">
+                                    The data is provided by{' '}
+                                    <ExternalLink href="https://ipapi.co/">ipapi.co</ExternalLink>
+                                </Text>
+                            </>
+                        )}
+                    </Space>
+                )}
+                <Text>
+                    <Text strong>Browser languages:</Text>
+                    <Text className="ms-2">
+                        {browserLanguages.map((language, index) =>
+                            index === 0 ? (
+                                <Tooltip title="Your primary language" placement="bottom">
+                                    <Tag color="gold">{language}</Tag>
+                                </Tooltip>
+                            ) : (
+                                <Tag color="default">{language}</Tag>
+                            )
+                        )}
+                    </Text>
+                </Text>
+                <Text>
+                    <Text strong>Screen size:</Text>
+                    <Text className="ms-2">
+                        {realScreenSize.width}x{realScreenSize.height}
+                    </Text>
+                    {scale !== 1 && (
+                        <Text className="ms-1" type="secondary">
+                            ({screenSize.width}x{screenSize.height} * {scale})
+                        </Text>
+                    )}
+                </Text>
+                <Text>
+                    <Text strong>Pixel ratio:</Text>
+                    <Text className="ms-2">{scale}</Text>
+                </Text>
+                <Text>
+                    <Text strong>Orientation:</Text>
+                    <Text className="ms-2">{screenOrientation}</Text>
                 </Text>
-            </Space>
+            </Col>
         </PageContainer>
     );
 };

src/types/ipapi.co.ts

@@ -0,0 +1,30 @@
+//Generated by https://mrgrd56.github.io/#/tools/json-to-typescript ;)
+
+export interface UserIpInfo {
+    ip: string;
+    version: string;
+    city: string;
+    region: string;
+    regionCode: string;
+    country: string;
+    countryName: string;
+    countryCode: string;
+    countryCodeIso3: string;
+    countryCapital: string;
+    countryTld: string;
+    continentCode: string;
+    inEu: boolean;
+    postal: string;
+    latitude: number;
+    longitude: number;
+    timezone: string;
+    utcOffset: string;
+    countryCallingCode: string;
+    currency: string;
+    currencyName: string;
+    languages: string;
+    countryArea: number;
+    countryPopulation: number;
+    asn: string;
+    org: string;
+}

src/utils/camelizeKeys.ts

@@ -0,0 +1,20 @@
+import { camelCase, isNil } from 'lodash';
+
+//https://stackoverflow.com/a/50620653/14899408
+
+const camelizeKeys = (obj: any): any => {
+    if (Array.isArray(obj)) {
+        return obj.map((v) => camelizeKeys(v));
+    } else if (!isNil(obj) && obj.constructor === Object) {
+        return Object.keys(obj).reduce(
+            (result, key) => ({
+                ...result,
+                [camelCase(key)]: camelizeKeys(obj[key])
+            }),
+            {}
+        );
+    }
+    return obj;
+};
+
+export default camelizeKeys;