Add Data Url Generator

Author: k.golikov

package.json

@@ -19,6 +19,7 @@
         "classnames": "^2.3.1",
         "emmet-monaco-es": "^5.1.0",
         "immer": "^9.0.12",
+        "js-base64": "^3.7.2",
         "konva": "^8.3.5",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",

src/constants/router/menuItems.ts

@@ -64,21 +64,28 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.htmlEditor
             },
+            {
+                route: routes.dataUrl
+            },
+            {
+                route: routes.base64,
+                isHidden: true
+            },
             {
                 route: routes.imageCompressor,
-                isGray: true
+                isHidden: true
             },
             {
                 route: routes.dateUtils,
-                isGray: true
+                isHidden: true
             },
             {
                 route: routes.templateTextGenerator,
-                isGray: true
+                isHidden: true
             },
             {
                 route: routes.unitConverter,
-                isGray: true
+                isHidden: true
             }
         ]
     },

src/constants/router/routes.tsx

@@ -26,11 +26,15 @@ import NotificationsTestPage from '../../pages/notificationsTestPage/Notificatio
 import DateUtilsPage from '../../pages/dateUtilsPage/DateUtilsPage';
 import ImageCompressorPage from '../../pages/imageCompressorPage/ImageCompressorPage';
 import HtmlEditorPage from '../../pages/htmlEditorPage/HtmlEditorPage';
+import Base64Page from '../../pages/base64Page/Base64Page';
+import DataUrlPage from '../../pages/dataUrlPage/DataUrlPage';
+import DataUrlViewPage from '../../pages/dataUrlViewPage/DataUrlViewPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
     component: ComponentType;
     title: string;
+    isLayoutHidden?: boolean;
 }
 
 type AppRoutesMap = Readonly<{
@@ -55,6 +59,9 @@ type AppRoutesMap = Readonly<{
     dateUtils: AppRoute;
     imageCompressor: AppRoute;
     htmlEditor: AppRoute;
+    base64: AppRoute;
+    dataUrl: AppRoute;
+    dataUrlView: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -165,6 +172,22 @@ export const routes: AppRoutesMap = {
         component: HtmlEditorPage,
         title: 'HTML Editor'
     },
+    base64: {
+        path: '/tools/base64',
+        component: Base64Page,
+        title: 'Base64 Tools'
+    },
+    dataUrl: {
+        path: '/tools/data-url',
+        component: DataUrlPage,
+        title: 'Data URL Generator'
+    },
+    dataUrlView: {
+        path: '/tools/data-url/view',
+        component: DataUrlViewPage,
+        title: 'Content View',
+        isLayoutHidden: true
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,

src/hooks/useAppLocation.ts

@@ -2,10 +2,10 @@ import { AppRoute, appRoutesList } from '../constants/router/routes';
 import { useLocation } from 'react-router-dom';
 import { useMemo } from 'react';
 
-const useAppLocation = (): AppRoute => {
+const useAppLocation = (): AppRoute | undefined => {
     const { pathname } = useLocation();
 
-    return useMemo(() => appRoutesList.find((route) => route.path === pathname) as AppRoute, [pathname]);
+    return useMemo(() => appRoutesList.find((route) => route.path === pathname), [pathname]);
 };
 
 export default useAppLocation;

src/hooks/useQuery.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useQuery = <T extends object = Record<string, string>>(): T extends any[] ? never : T => {
+    const { search } = useLocation();
+
+    return useMemo(() => Object.fromEntries(new URLSearchParams(search)) as any, [search]);
+};
+
+export default useQuery;

src/hooks/useStateProducer.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import produce, { Draft } from 'immer';
+import { Nothing } from 'immer/src/internal';
+
+type ValidRecipeReturnType<State> = State | void | undefined | (State extends undefined ? Nothing : never);
+
+type RecipeReturnType<State> = ValidRecipeReturnType<State> | Promise<ValidRecipeReturnType<State>>;
+
+type Recipe<S> = (draft: Draft<S>) => RecipeReturnType<Draft<S>>;
+
+export const produceState = <S extends object>(
+    setState: Dispatch<SetStateAction<S>>,
+    recipe: Recipe<S>
+): void | Promise<void> => {
+    setState((state) => {
+        return produce(state, recipe as any);
+    });
+};
+
+const useStateProducer = <S extends object>(setState: Dispatch<SetStateAction<S>>) => {
+    return useCallback(
+        (recipe: Recipe<S>) => {
+            produceState(setState, recipe);
+        },
+        [setState]
+    );
+};
+
+export default useStateProducer;

src/layouts/appLayout/AppLayout.tsx

@@ -15,6 +15,12 @@ const AppLayout: FunctionComponent = ({ children }) => {
 
     const isFooterShown = !isFooterHidden || appRoute === routes.root;
 
+    const isLayoutHidden = appRoute?.isLayoutHidden === true;
+
+    if (isLayoutHidden) {
+        return <>{children}</>;
+    }
+
     return (
         <Layout className={styles.container}>
             <AppHeader />

src/layouts/appLayout/utils/routeMenuItems.tsx

@@ -7,14 +7,14 @@ import classNames from 'classnames';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import AppSettings from '../../../types/AppSettings';
 
-export const renderRoute = ({ route, title, icon, isGray }: MenuRouteItem): ItemType => {
+export const renderRoute = ({ route, title, icon, isHidden }: MenuRouteItem): ItemType => {
     const { path } = route;
 
     return {
         key: path,
         icon: renderComponent(icon),
         label: (
-            <Link to={path ?? ''} className={classNames({ 'opacity-50': isGray })}>
+            <Link to={path ?? ''} className={classNames({ 'opacity-50': isHidden })}>
                 {title ?? route.title}
             </Link>
         )
@@ -36,7 +36,7 @@ interface MenuItemBase {
 export interface MenuRouteItem extends MenuItemBase {
     title?: string;
     route: AppRoute;
-    isGray?: boolean;
+    isHidden?: boolean;
 }
 
 export interface SubMenuItem extends MenuItemBase {
@@ -63,7 +63,7 @@ export const renderMenuItem = (menuItem: MenuItem, index: number, settings: AppS
                               return true;
                           }
 
-                          return !('route' in item) || !item.isGray;
+                          return !('route' in item) || !item.isHidden;
                       })
                       .map((item, index) => renderMenuItem(item, index, settings))
                 : [

src/pages/base64Page/Base64Page.module.scss

@@ -0,0 +1,8 @@
+import React, { FunctionComponent } from 'react';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+
+const Base64Page: FunctionComponent = () => {
+    return <PageContainer title="Base64Page"></PageContainer>;
+};
+
+export default Base64Page;