Add CounterPage

Author: k.golikov

src/components/flex/Flex.tsx

@@ -44,7 +44,7 @@ const Flex: FunctionComponent<Props> = (props) => {
         return defaults(
             {
                 display: 'flex',
-                flexDirection: () => {
+                flexDirection: (() => {
                     switch (true) {
                         case row:
                             return 'row';
@@ -53,7 +53,7 @@ const Flex: FunctionComponent<Props> = (props) => {
                         default:
                             return direction;
                     }
-                },
+                })(),
                 justifyContent: justify,
                 alignItems: align,
                 alignContent,

src/constants/router/menuItems.ts

@@ -70,6 +70,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.dateUtils
             },
+            {
+                route: routes.counter
+            },
             {
                 route: routes.jsonToYaml,
                 title: 'JSON to YAML converter',

src/constants/router/routes.tsx

@@ -30,6 +30,7 @@ import DataUrlPage from '../../pages/dataUrlPage/DataUrlPage';
 import DataUrlViewPage from '../../pages/dataUrlViewPage/DataUrlViewPage';
 import RouteContextInitializer from '../../layouts/RouteContextInitializer';
 import JsonToYamlPage from '../../pages/jsonToYamlPage/JsonToYamlPage';
+import CounterPage from '../../pages/counterPage/CounterPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -64,6 +65,7 @@ type AppRoutesMap = Readonly<{
     base64: AppRoute;
     dataUrl: AppRoute;
     dataUrlView: AppRoute;
+    counter: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -195,6 +197,11 @@ export const routes: AppRoutesMap = {
         title: 'Content View',
         isLayoutHidden: true
     },
+    counter: {
+        path: '/tools/counter',
+        component: CounterPage,
+        title: 'Counter'
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,

src/hooks/useArrayStateMutator.ts

@@ -0,0 +1,44 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import useStateProducer from './useStateProducer';
+
+const useArrayStateMutator = <T>(setState: Dispatch<SetStateAction<T[]>>) => {
+    const produceState = useStateProducer(setState);
+
+    return useMemo(() => {
+        const add = (...items: T[]) => setState((state) => [...state, ...items]);
+        const changeByIndex = (index: number, newItem: T) =>
+            produceState((state) => {
+                state[index] = newItem;
+            });
+        const updateByIndex = (index: number, newItem: (oldItem: T) => T) =>
+            produceState((state) => {
+                const oldItem = state[index];
+                if (oldItem === undefined) {
+                    return;
+                }
+
+                changeByIndex(index, newItem(oldItem));
+            });
+        const removeByIndex = (index: number) =>
+            produceState((state) => {
+                state.splice(index, 1);
+            });
+        const fpChangeByIndex = (index: number) => (newItem: T) => changeByIndex(index, newItem);
+        const fpUpdateByIndex = (index: number) => (newItem: (oldItem: T) => T) => updateByIndex(index, newItem);
+        const fpRemoveByIndex = (index: number) => () => removeByIndex(index);
+        const clear = () => setState([]);
+
+        return {
+            add,
+            changeByIndex,
+            updateByIndex,
+            removeByIndex,
+            fpChangeByIndex,
+            fpUpdateByIndex,
+            fpRemoveByIndex,
+            clear
+        };
+    }, [setState]);
+};
+
+export default useArrayStateMutator;

src/hooks/useWriteableLocalstorageState.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { useLocalstorageState } from 'rooks';
+
+type UseLocalstorageStateReturnValue<S> = [S, Dispatch<SetStateAction<S>>, () => void];
+
+const useWriteableLocalstorageState = <S>(
+    key: string,
+    initialState?: S | (() => S)
+): UseLocalstorageStateReturnValue<S> => {
+    const [lsState, setLsState, resetLsState] = useLocalstorageState<S>(key, initialState);
+    const [state, setState] = useState<S>(lsState);
+
+    useEffect(() => {
+        setLsState(state as S);
+    }, [state]);
+
+    return useMemo(() => [state, setState, resetLsState], [state, setState, resetLsState]);
+};
+
+export default useWriteableLocalstorageState;

src/pages/counterPage/CounterPage.module.scss

@@ -0,0 +1,74 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+import getLocalStorageKey from '../../utils/getLocalStorageKey';
+import useArrayStateMutator from '../../hooks/useArrayStateMutator';
+import { Counter } from './types';
+import CounterItem from './components/counterItem/CounterItem';
+import { Button, Modal } from 'antd';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import Flex from '../../components/flex/Flex';
+import useWriteableLocalstorageState from '../../hooks/useWriteableLocalstorageState';
+
+const createCounter = (name = '', count = 0): Counter => ({
+    name: '',
+    count: 0
+});
+
+const initialCounters: Counter[] = [createCounter('Count')];
+
+const CounterPage: FunctionComponent = () => {
+    const [counters, setCounters] = useWriteableLocalstorageState<Counter[]>(
+        getLocalStorageKey('counter', 'counters'),
+        initialCounters
+    );
+    const {
+        fpChangeByIndex: handleItemChange,
+        fpRemoveByIndex: handleItemRemove,
+        add: addItem,
+        clear: clearItems
+    } = useArrayStateMutator(setCounters);
+
+    const handleAddItem = useCallback(() => {
+        addItem(createCounter());
+    }, [addItem]);
+
+    const handleClear = useCallback(() => {
+        Modal.warn({
+            title: 'Clear counters',
+            content: 'Are you sure you want to delete all counters?',
+            onOk: clearItems,
+            okCancel: true
+        });
+    }, [clearItems]);
+
+    return (
+        <PageContainer title="Counters">
+            <Flex column gap={8}>
+                {counters.length > 0 && (
+                    <>
+                        <Flex column>
+                            <Button icon={<CloseOutlined />} size="large" onClick={handleClear}>
+                                Clear counters list
+                            </Button>
+                        </Flex>
+                        <Flex column gap={8}>
+                            {counters.map((counter, index) => (
+                                <CounterItem
+                                    key={index}
+                                    counter={counter}
+                                    onChange={handleItemChange(index)}
+                                    onRemove={handleItemRemove(index)}
+                                />
+                            ))}
+                        </Flex>
+                    </>
+                )}
+                <Button icon={<PlusOutlined />} type="dashed" onClick={handleAddItem} size="large">
+                    Add counter
+                </Button>
+            </Flex>
+        </PageContainer>
+    );
+};
+
+export default CounterPage;

src/pages/counterPage/CounterPage.tsx

@@ -0,0 +1,26 @@
+@import '../../../../styles/main';
+
+.input {
+    border-end-end-radius: 0 !important;
+    border-start-end-radius: 0 !important;
+    margin-right: -1px;
+    z-index: 1;
+    flex: 1;
+}
+
+.firstButton {
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+    z-index: 0;
+}
+
+.counter {
+    padding: 0 5px;
+    min-width: 40px;
+    //cursor: default !important;
+
+    color: black !important;
+    @include themeDark {
+        color: white !important;
+    }
+}

src/pages/counterPage/components/counterItem/CounterItem.module.scss

@@ -0,0 +1,72 @@
+import React, { ChangeEvent, FunctionComponent, useState } from 'react';
+import { Counter } from '../../types';
+import { Button, Input, Popover } from 'antd';
+import { CloseOutlined, MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import Flex from '../../../../components/flex/Flex';
+import ButtonGroup from 'antd/lib/button/button-group';
+import styles from './CounterItem.module.scss';
+import classNames from 'classnames';
+
+interface Props {
+    counter: Counter;
+    onChange: (newCounter: Counter) => void;
+    onRemove: () => void;
+}
+
+const CounterItem: FunctionComponent<Props> = ({ counter, onChange, onRemove }) => {
+    const [isPopoverVisible, setIsPopoverVisible] = useState<boolean>(false);
+
+    const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+        onChange({
+            ...counter,
+            name: event.target.value
+        });
+    };
+
+    const handleCountIncrement = (increment: number) => () => {
+        handleCountChange(counter.count + increment)();
+    };
+
+    const handleCountChange = (count: number) => () => {
+        onChange({
+            ...counter,
+            count
+        });
+    };
+
+    const handlePopoverClick = (callback: () => void) => () => {
+        setIsPopoverVisible(false);
+        callback();
+    };
+
+    return (
+        <Flex row>
+            <Input value={counter.name} onChange={handleNameChange} className={styles.input} />
+            <ButtonGroup>
+                <Popover
+                    placement="bottomRight"
+                    content={
+                        <Flex column gap={8}>
+                            <Button icon={<ReloadOutlined />} onClick={handlePopoverClick(handleCountChange(0))}>
+                                Reset
+                            </Button>
+                            <Button icon={<CloseOutlined />} onClick={handlePopoverClick(onRemove)}>
+                                Remove
+                            </Button>
+                        </Flex>
+                    }
+                    visible={isPopoverVisible}
+                    onVisibleChange={setIsPopoverVisible}
+                >
+                    <Button size="large" className={classNames(styles.firstButton, styles.counter)}>
+                        {counter.count}
+                    </Button>
+                </Popover>
+                <Button icon={<MinusOutlined />} size="large" onClick={handleCountIncrement(-1)} />
+                <Button icon={<PlusOutlined />} size="large" onClick={handleCountIncrement(1)} />
+            </ButtonGroup>
+        </Flex>
+    );
+};
+
+export default CounterItem;

src/pages/counterPage/components/counterItem/CounterItem.tsx

@@ -0,0 +1,4 @@
+export interface Counter {
+    name: string;
+    count: number;
+}