#14 Data URL Generator improvements

Author: k.golikov

src/constants/router/routes.tsx

@@ -11,7 +11,6 @@ import QrScannerPage from '../../pages/qrScannerPage/QrScannerPage';
 import BgGeneratorPage from '../../pages/bgGeneratorPage/BgGeneratorPage';
 import JsEvaluatorPage from '../../pages/jsEvaluatorPage/JsEvaluatorPage';
 import UserInfoPage from '../../pages/userInfoPage/UserInfoPage';
-import RouteWrapper from '../../layouts/RouteWrapper';
 import NotFoundPage from '../../pages/notFoundPage/NotFoundPage';
 import UnitConverterPage from '../../pages/unitConverterPage/UnitConverterPage';
 import SnakeGamePage from '../../pages/snakeGamePage/SnakeGamePage';
@@ -29,6 +28,7 @@ import HtmlEditorPage from '../../pages/htmlEditorPage/HtmlEditorPage';
 import Base64Page from '../../pages/base64Page/Base64Page';
 import DataUrlPage from '../../pages/dataUrlPage/DataUrlPage';
 import DataUrlViewPage from '../../pages/dataUrlViewPage/DataUrlViewPage';
+import RouteWrapper from '../../layouts/RouteWrapper';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;

src/context/RouteContext.ts

@@ -0,0 +1,9 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export interface RouteContextType {
+    title: string;
+}
+
+const RouteContext = createContext<[RouteContextType, Dispatch<SetStateAction<RouteContextType>>]>([] as any);
+
+export default RouteContext;

src/hooks/useRouteContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import RouteContext from '../context/RouteContext';
+
+const useRouteContext = () => useContext(RouteContext);
+
+export default useRouteContext;

src/layouts/RouteContextConsumer.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import useRouteContext from '../hooks/useRouteContext';
+
+const RouteContextConsumer: FunctionComponent = ({ children }) => {
+    const [{ title }] = useRouteContext();
+
+    useEffect(() => {
+        if (title) {
+            document.title = title;
+        }
+    }, [title]);
+
+    return <>{children}</>;
+};
+
+export default RouteContextConsumer;

src/layouts/RouteWrapper.tsx

@@ -1,17 +1,15 @@
-import React, { FunctionComponent, useEffect } from 'react';
-
-interface Props {
-    title: string;
-}
-
-const RouteWrapper: FunctionComponent<Props> = ({ title, children }) => {
-    useEffect(() => {
-        if (title) {
-            document.title = title;
-        }
-    }, [title]);
-
-    return <>{children}</>;
+import React, { FunctionComponent, useState } from 'react';
+import RouteContext, { RouteContextType } from '../context/RouteContext';
+import RouteContextConsumer from './RouteContextConsumer';
+
+const RouteWrapper: FunctionComponent<RouteContextType> = ({ children, ...contextValue }) => {
+    const contextState = useState(contextValue);
+
+    return (
+        <RouteContext.Provider value={contextState}>
+            <RouteContextConsumer>{children}</RouteContextConsumer>
+        </RouteContext.Provider>
+    );
 };
 
 export default RouteWrapper;

src/pages/dataUrlPage/DataUrlPage.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/main';
+
 .container {
     display: flex;
     flex-direction: column;
@@ -11,7 +13,11 @@
 
     .label {
         margin-top: 4px;
-        width: 120px;
+
+        width: 100px;
+        @include mediaSM {
+            width: 120px;
+        }
     }
 
     .input {
@@ -28,3 +34,8 @@
         margin-bottom: 6px;
     }
 }
+
+.copyButton {
+    align-self: flex-start;
+    margin-top: -22px;
+}

src/pages/dataUrlPage/DataUrlPage.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useCallback, useMemo, useState } from 'react';
+import React, { ClipboardEventHandler, FunctionComponent, useCallback, useMemo, useState } from 'react';
 import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
 import styles from './DataUrlPage.module.scss';
 import { Button, Col, Input, notification, Space, Switch, Upload } from 'antd';
@@ -17,29 +17,36 @@ import { UploadFile } from 'antd/lib/upload/interface';
 import getErrorMessage from '../../utils/getErrorMessage';
 import { Base64 } from 'js-base64';
 import readFileAsBase64 from '../../utils/readFileAsBase64';
+import CopyButton from '../../components/copyButton/CopyButton';
 
 interface DataUrlState {
     title: string;
     mimeType: string;
     encoding: string;
     content: string;
     isBase64: boolean;
+    isAutoBase64: boolean;
 }
 
 const initialState: DataUrlState = {
     title: '',
     mimeType: 'text/plain',
     encoding: 'utf-8',
     content: 'Hello World',
-    isBase64: false
+    isBase64: false,
+    isAutoBase64: false
 };
 
 const getDataUrlQueryParams = (state: DataUrlState): DataUrlViewPageQueryParams => {
     // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
 
+    const isAutoBase64 = state.isAutoBase64 && !state.isBase64;
+    const isBase64 = state.isBase64 || isAutoBase64;
+    const content = isAutoBase64 ? Base64.encode(state.content) : state.content;
+
     const charsetPart = state.encoding && `;charset=${state.encoding}`;
-    const base64Part = state.isBase64 ? ';base64' : '';
-    const dataPart = `,${state.content}`;
+    const base64Part = isBase64 ? ';base64' : '';
+    const dataPart = `,${content}`;
 
     const data = `data:${state.mimeType}${charsetPart}${base64Part}${dataPart}`;
 
@@ -91,33 +98,60 @@ const DataUrlPage: FunctionComponent = () => {
     const encodeBase64Content = useCallback(() => transformContent(Base64.encode), [transformContent]);
     const decodeBase64Content = useCallback(() => transformContent(Base64.decode), [transformContent]);
 
-    const handleFileChange = useCallback(async (info: UploadChangeParam<UploadFile<unknown>>) => {
-        const { file } = info;
-
-        if (file.status !== 'done') {
-            return;
-        }
-
-        const { name, type } = file;
-
-        const blob = file.originFileObj;
-
+    const handleFileChange = useCallback(async (blob: Blob, name: string) => {
         const content = (blob && (await readFileAsBase64(blob))) ?? '';
 
         setState({
             title: name,
-            mimeType: type ?? '',
+            mimeType: blob.type ?? '',
             isBase64: true,
+            isAutoBase64: false,
             encoding: '',
             content
         });
     }, []);
 
+    const handleUploadedFileChange = useCallback(
+        async (info: UploadChangeParam<UploadFile<unknown>>) => {
+            const { file } = info;
+
+            if (file.status !== 'done') {
+                return;
+            }
+
+            const blob = file.originFileObj;
+
+            if (!blob) {
+                return;
+            }
+
+            await handleFileChange(blob, file.name);
+        },
+        [handleFileChange]
+    );
+
+    const handleContentPaste = useCallback<ClipboardEventHandler<HTMLTextAreaElement>>(
+        async (event) => {
+            const file = event.clipboardData.files[0];
+
+            if (file === undefined) {
+                return;
+            }
+
+            await handleFileChange(file, file.name);
+        },
+        [handleFileChange]
+    );
+
     return (
         <PageContainer title="Data URL Generator">
             <Col xs={24} lg={18} xl={12} className={styles.container}>
                 <Space className="mb-2">
-                    <Upload customRequest={dummyAntdUploadRequest} onChange={handleFileChange} showUploadList={false}>
+                    <Upload
+                        customRequest={dummyAntdUploadRequest}
+                        onChange={handleUploadedFileChange}
+                        showUploadList={false}
+                    >
                         <Button icon={<UploadOutlined />}>Upload file</Button>
                     </Upload>
                 </Space>
@@ -141,21 +175,33 @@ const DataUrlPage: FunctionComponent = () => {
                             value={state.content}
                             onChange={handleStateChange('content')}
                             rows={3}
+                            showCount
+                            onPaste={handleContentPaste}
+                            allowClear
                         />
-                        <Space className="mt-2">
+                        <Space className="mt-2" wrap>
                             <Button onClick={encodeBase64Content}>Encode base64</Button>
                             <Button onClick={decodeBase64Content}>Decode base64</Button>
                         </Space>
                         <label className={classNames(styles.formItem, 'mt-2')}>
                             <Switch checked={state.isBase64} onChange={handleStateChange('isBase64')} />
                             <span className="ms-3">Base64</span>
                         </label>
+                        <label className={classNames(styles.formItem, 'mt-2')}>
+                            <Switch
+                                checked={state.isAutoBase64 && !state.isBase64}
+                                onChange={handleStateChange('isAutoBase64')}
+                                disabled={state.isBase64}
+                            />
+                            <span className="ms-3">Auto convert text to base64</span>
+                        </label>
                     </div>
                 </label>
-                <Link to={dataUrlViewUrl} className="mt-3" ref={dataUrlViewLinkRef}>
+                <Link to={dataUrlViewUrl} target="_blank" className="mt-3" ref={dataUrlViewLinkRef}>
                     View the iframe
                 </Link>
-                <TextArea readOnly value={displayedDataUrlViewUrl} rows={4} />
+                <TextArea readOnly value={displayedDataUrlViewUrl} rows={4} showCount />
+                <CopyButton value={displayedDataUrlViewUrl} className={styles.copyButton} />
             </Col>
         </PageContainer>
     );

src/pages/dataUrlViewPage/DataUrlViewPage.tsx

@@ -1,9 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 import useQuery from '../../hooks/useQuery';
 import styles from './DataUrlViewPage.module.scss';
 import { Navigate } from 'react-router-dom';
 import { routes } from '../../constants/router/routes';
-import RouteWrapper from '../../layouts/RouteWrapper';
+import useRouteContext from '../../hooks/useRouteContext';
+import useStateProducer from '../../hooks/useStateProducer';
 
 export interface DataUrlViewPageQueryParams {
     data?: string;
@@ -12,18 +13,24 @@ export interface DataUrlViewPageQueryParams {
 
 const DataUrlViewPage: FunctionComponent = () => {
     const { data, title } = useQuery<DataUrlViewPageQueryParams>();
+    const [, setRouteContext] = useRouteContext();
+
+    const produceRouteContext = useStateProducer(setRouteContext);
 
     if (!data) {
         return <Navigate to={routes.dataUrl.path} />;
     }
 
+    useEffect(() => {
+        produceRouteContext((routeContext) => {
+            routeContext.title = title ?? routes.dataUrlView.title;
+        });
+    }, [title]);
+
     return (
-        //FIXME title is not displayed
-        <RouteWrapper title={title ?? routes.dataUrlView.title}>
-            <div className={styles.container}>
-                <iframe className={styles.iframe} src={data} />
-            </div>
-        </RouteWrapper>
+        <div className={styles.container}>
+            <iframe className={styles.iframe} src={data} />
+        </div>
     );
 };