Many improvements

k.golikov · k.golikov · commit 6faf4d69df91 · 2022-06-28T00:17:22.000+05:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,7 @@
         "linebreak-style": ["warn", "unix"],
         "quotes": ["warn", "single"],
         "semi": ["warn", "always"],
-        "no-debugger": "warn"
+        "no-debugger": "warn",
+        "@typescript-eslint/ban-ts-comment": "warn"
     }
 }
diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
         "lint-staged": "^12.3.7",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
+        "raw-loader": "^4.0.2",
         "sass": "^1.49.9",
         "typescript": "^4.4.2"
     },
diff --git a/src/components/NpmLink.tsx b/src/components/NpmLink.tsx
@@ -0,0 +1,20 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import ExternalLink from './ExternalLink';
+import getNpmPackageLink from '../utils/getNpmPackageLink';
+
+interface Props {
+    packageName: string;
+    children?: ReactNode;
+}
+
+const NpmLink: FunctionComponent<Props> = ({ packageName, children }) => {
+    const link = getNpmPackageLink(packageName);
+
+    return (
+        <ExternalLink href={link}>
+            <code>{children || packageName}</code>
+        </ExternalLink>
+    );
+};
+
+export default React.memo(NpmLink);
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
@@ -0,0 +1,74 @@
+import React, { CSSProperties, FunctionComponent, HTMLProps, useMemo } from 'react';
+import { defaults } from 'lodash';
+
+type CSS = CSSProperties;
+
+interface BaseProps extends HTMLProps<HTMLDivElement> {
+    justify?: CSS['justifyContent'];
+    align?: CSS['alignItems'];
+    alignContent?: CSS['alignContent'];
+    flex?: CSS['flex'];
+    gap?: CSS['gap'];
+}
+
+interface PropsWithDirection extends BaseProps {
+    direction?: CSS['flexDirection'];
+    row?: never;
+    column?: never;
+}
+
+interface PropsWithRow extends BaseProps {
+    direction?: never;
+    row: true;
+    column?: never;
+}
+
+interface PropsWithColumn extends BaseProps {
+    direction?: never;
+    row?: never;
+    column: true;
+}
+
+type Props = PropsWithDirection | PropsWithRow | PropsWithColumn;
+
+// type Props<T extends BaseProps> =
+//     T extends PropsWithDirection ? Exclude<PropsWithDirection, 'row' | 'column'> :
+//         T extends PropsWithRow ? PropsWithRow :
+//             T extends PropsWithColumn ? PropsWithColumn
+//                 : BaseProps;
+
+const Flex: FunctionComponent<Props> = (props) => {
+    const { row, column, direction, justify, align, alignContent, flex, gap, style, children, ...restProps } = props;
+
+    const divStyle: CSS = useMemo(() => {
+        return defaults(
+            {
+                display: 'flex',
+                flexDirection: () => {
+                    switch (true) {
+                        case row:
+                            return 'row';
+                        case column:
+                            return 'column';
+                        default:
+                            return direction;
+                    }
+                },
+                justifyContent: justify,
+                alignItems: align,
+                alignContent,
+                flex,
+                gap
+            },
+            style
+        );
+    }, [row, column, direction, justify, align, alignContent, flex, gap, style]);
+
+    return (
+        <div {...restProps} style={divStyle}>
+            {children}
+        </div>
+    );
+};
+
+export default Flex;
diff --git a/src/pages/bytesStringifierPage/BytesStringifierPage.module.scss b/src/pages/bytesStringifierPage/BytesStringifierPage.module.scss
diff --git a/src/pages/bytesStringifierPage/BytesStringifierPage.tsx b/src/pages/bytesStringifierPage/BytesStringifierPage.tsx
@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+import styles from './BytesStringifierPage.module.scss';
+
+const BytesStringifierPage: FunctionComponent = () => {
+    return <PageContainer title="BytesStringifierPage"></PageContainer>;
+};
+
+export default BytesStringifierPage;
diff --git a/src/pages/dataUrlPage/DataUrlPage.tsx b/src/pages/dataUrlPage/DataUrlPage.tsx
@@ -77,7 +77,11 @@ const DataUrlPage: FunctionComponent = () => {
     };
 
     const dataUrlViewUrl = useMemo(() => {
-        return getDataUrlViewUrl(getDataUrlQueryParams(state));
+        const data = getDataUrlQueryParams(state);
+        return {
+            data,
+            viewUrl: getDataUrlViewUrl(data)
+        };
     }, [state]);
 
     const transformContent = useCallback(
@@ -197,11 +201,13 @@ const DataUrlPage: FunctionComponent = () => {
                         </label>
                     </div>
                 </label>
-                <Link to={dataUrlViewUrl} target="_blank" className="mt-3" ref={dataUrlViewLinkRef}>
+                <TextArea readOnly value={dataUrlViewUrl.data.data} rows={4} showCount className="mt-3" />
+                <CopyButton value={dataUrlViewUrl.data.data} className={classNames(styles.copyButton, 'mb-1')} />
+                <Link to={dataUrlViewUrl.viewUrl} target="_blank" ref={dataUrlViewLinkRef}>
                     View the iframe
                 </Link>
                 <TextArea readOnly value={displayedDataUrlViewUrl} rows={4} showCount />
-                <CopyButton value={displayedDataUrlViewUrl} className={styles.copyButton} />
+                <CopyButton value={displayedDataUrlViewUrl} className={classNames(styles.copyButton, 'mb-1')} />
             </Col>
         </PageContainer>
     );
diff --git a/src/pages/htmlEditorPage/HtmlEditorPage.module.scss b/src/pages/htmlEditorPage/HtmlEditorPage.module.scss
@@ -55,6 +55,10 @@
                     .tabTitle {
                         font-size: 28px;
                     }
+
+                    .resultTabTitle {
+                        font-size: 20px;
+                    }
                 }
             }
         }
diff --git a/src/pages/htmlEditorPage/HtmlEditorPage.tsx b/src/pages/htmlEditorPage/HtmlEditorPage.tsx
@@ -15,18 +15,26 @@ import { OnMount } from '@monaco-editor/react';
 import { emmetCSS, emmetHTML, emmetJSX } from 'emmet-monaco-es';
 import { editor } from 'monaco-editor';
 import ButtonGroup from 'antd/lib/button/button-group';
-import { VerticalSplit, ViewHeadline } from '@mui/icons-material';
+import { Code, CodeOff, VerticalSplit, ViewHeadline } from '@mui/icons-material';
 import useChangeValueStateHandler from '../../hooks/useChangeValueStateHandler';
 import Split from 'react-split';
 import './HtmlEditorPage.scss';
+import mergeEnums, { MergeEnums } from '../../utils/mergeEnums';
 
-enum EditorTab {
+enum EditorInTab {
     HTML = 'html',
     CSS = 'css',
     JS = 'js'
 }
 
-type EditorSources = Record<EditorTab, string>;
+enum EditorOutTab {
+    VIEW = 'VIEW'
+}
+
+const EditorTab = mergeEnums(EditorInTab, EditorOutTab);
+type EditorTab = MergeEnums<EditorInTab, EditorOutTab>;
+
+type EditorSources = Record<EditorInTab, string>;
 
 const sourcesInitial: EditorSources = {
     html: `
@@ -63,6 +71,11 @@ const editorOptions: editor.IStandaloneEditorConstructionOptions = {
     minimap: { enabled: false }
 };
 
+const resultEditorOptions: editor.IStandaloneEditorConstructionOptions = {
+    ...editorOptions,
+    readOnly: true
+};
+
 enum ViewMode {
     EDITOR = 'EDITOR',
     SPLIT = 'SPLIT',
@@ -219,6 +232,22 @@ ${sources.js}
                         options={editorOptions}
                     />
                 </Tabs.TabPane>
+                <Tabs.TabPane
+                    tab={
+                        <div className={styles.tabTitleWrapper}>
+                            <Code className={styles.resultTabTitle} />
+                        </div>
+                    }
+                    key={EditorTab.VIEW}
+                    className={styles.editorTab}
+                >
+                    <AppEditor
+                        value={resultSource}
+                        className={styles.editor}
+                        language="html"
+                        options={resultEditorOptions}
+                    />
+                </Tabs.TabPane>
             </Tabs>
         </Col>
     );
diff --git a/src/pages/jsEvaluatorPage/JsEvaluatorPage.tsx b/src/pages/jsEvaluatorPage/JsEvaluatorPage.tsx
@@ -10,14 +10,16 @@ import _, { isObjectLike } from 'lodash';
 import axios from 'axios';
 import Text from 'antd/lib/typography/Text';
 import Paragraph from 'antd/lib/typography/Paragraph';
-import ExternalLink from '../../components/ExternalLink';
 import styles from './JsEvaluatorPage.module.scss';
 import OutputMode from './types/OutputMode';
 import CopyButton from '../../components/copyButton/CopyButton';
 import { BeforeMount } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
 import classNames from 'classnames';
 import AppEditor from '../../components/appEditor/AppEditor';
+import monacoExtraLibs from '../../utils/monaco/monacoExtraLibs';
+import moment from 'moment';
+import NpmLink from '../../components/NpmLink';
 
 interface ShowCountProps {
     formatter: (args: { count: number; maxLength?: number }) => string;
@@ -34,10 +36,11 @@ const codeEditorOptions: editor.IStandaloneEditorConstructionOptions = {
 
 const handleCodeEditorBeforeMount: BeforeMount = (monaco) => {
     monaco.languages.typescript.javascriptDefaults.addExtraLib(`
-declare const $value: string;
-declare const _;
-declare const axios;
-declare const pluralize;`);
+declare const $value: string;`);
+    monacoExtraLibs.lodash(monaco);
+    monacoExtraLibs.axios(monaco);
+    monacoExtraLibs.pluralize(monaco);
+    monacoExtraLibs.moment(monaco);
 };
 
 const JsEvaluatorPage = () => {
@@ -63,6 +66,7 @@ const JsEvaluatorPage = () => {
                 _,
                 axios,
                 pluralize,
+                moment,
                 $easterEgg: '🥚'
             });
 
@@ -112,18 +116,8 @@ const JsEvaluatorPage = () => {
                                         <code>$value</code>
                                     </label>
                                 </Tooltip>
-                                ,{' '}
-                                <ExternalLink href="https://lodash.com/">
-                                    <code>_</code>
-                                </ExternalLink>
-                                ,{' '}
-                                <ExternalLink href="https://github.com/axios/axios">
-                                    <code>axios</code>
-                                </ExternalLink>
-                                ,{' '}
-                                <ExternalLink href="https://github.com/plurals/pluralize">
-                                    <code>pluralize</code>
-                                </ExternalLink>
+                                , <NpmLink packageName="lodash">_</NpmLink>, <NpmLink packageName="axios" />,{' '}
+                                <NpmLink packageName="pluralize" />, <NpmLink packageName="moment" />
                             </Paragraph>
                         </Text>
 
@@ -134,7 +128,7 @@ const JsEvaluatorPage = () => {
                             value={evalValue}
                             onChange={setEvalValue}
                             options={codeEditorOptions}
-                            height="250px"
+                            height="400px"
                             width="100%"
                             beforeMount={handleCodeEditorBeforeMount}
                         />
@@ -157,6 +151,7 @@ const JsEvaluatorPage = () => {
                                     className={classNames('font-monospace mb-2', styles.textarea)}
                                     readOnly
                                     value={evaluatedJs}
+                                    rows={6}
                                 />
                                 <CopyButton value={evaluatedJs} />
                             </Col>
diff --git a/src/pages/userInfoPage/UserInfoPage.tsx b/src/pages/userInfoPage/UserInfoPage.tsx
@@ -1,20 +1,23 @@
 import React, { FunctionComponent } from 'react';
 import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
 import Text from 'antd/lib/typography/Text';
-import { Col, notification, Skeleton, Space, Tag, Tooltip } from 'antd';
+import { Button, Col, notification, Row, 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';
+import { ReloadOutlined } from '@ant-design/icons';
+import Flex from '../../components/flex/Flex';
 
 const UserInfoPage: FunctionComponent = () => {
     const {
         result: userIpInfo,
         isLoading: isUserIpInfoLoading,
-        error: userIpInfoError
+        error: userIpInfoError,
+        invoke: fetchUserInfo
     } = useAsync(getUserInfo, {
         doInvokeOnMount: true,
         onError: (error) => {
@@ -34,7 +37,16 @@ const UserInfoPage: FunctionComponent = () => {
     const screenOrientation = window.screen.orientation.type;
 
     return (
-        <PageContainer title="User Info">
+        <PageContainer
+            title={
+                <Flex row gap={3}>
+                    <div>User Info</div>
+                    <Button size="small" type="link" onClick={fetchUserInfo}>
+                        <ReloadOutlined />
+                    </Button>
+                </Flex>
+            }
+        >
             <Col className={styles.container}>
                 {!userIpInfoError && (
                     <Space direction="vertical" className="mb-2">
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -1,3 +1,12 @@
 /// <reference types="react-scripts" />
 
 declare const __DEV__: never;
+
+declare type RawLoaded = {
+    default: string;
+};
+
+declare module '!raw-loader!*' {
+    const contents: string;
+    export = contents;
+}
diff --git a/src/utils/mergeEnums.ts b/src/utils/mergeEnums.ts
@@ -0,0 +1,7 @@
+const mergeEnums = <T1, T2>(e1: T1, e2: T2) => {
+    return { ...e1, ...e2 };
+};
+
+export type MergeEnums<T1, T2> = T1 | T2;
+
+export default mergeEnums;
diff --git a/src/utils/monaco/monacoExtraLibs.ts b/src/utils/monaco/monacoExtraLibs.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`"linebreak-style": ["warn", "unix"],`
`16`	`16`	`"quotes": ["warn", "single"],`
`17`	`17`	`"semi": ["warn", "always"],`
`18`		`- "no-debugger": "warn"`
	`18`	`+ "no-debugger": "warn",`
	`19`	`+ "@typescript-eslint/ban-ts-comment": "warn"`
`19`	`20`	`}`
`20`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,10 @@`
`55`	`55`	`.tabTitle {`
`56`	`56`	`font-size: 28px;`
`57`	`57`	`}`
	`58`	`+`
	`59`	`+ .resultTabTitle {`
	`60`	`+ font-size: 20px;`
	`61`	`+ }`
`58`	`62`	`}`
`59`	`63`	`}`
`60`	`64`	`}`