Add rooks demo page

Author: k.golikov

src/components/NpmLink.tsx

@@ -4,17 +4,16 @@ import getNpmPackageLink from '../utils/getNpmPackageLink';
 
 interface Props {
     packageName: string;
+    plain?: boolean;
     children?: ReactNode;
 }
 
-const NpmLink: FunctionComponent<Props> = ({ packageName, children }) => {
+const NpmLink: FunctionComponent<Props> = ({ packageName, plain, children }) => {
     const link = getNpmPackageLink(packageName);
 
-    return (
-        <ExternalLink href={link}>
-            <code>{children || packageName}</code>
-        </ExternalLink>
-    );
+    const text = children || packageName;
+
+    return <ExternalLink href={link}>{plain ? text : <code>{text}</code>}</ExternalLink>;
 };
 
 export default React.memo(NpmLink);

src/constants/router/menuItems.ts

@@ -11,6 +11,7 @@ import {
     StarFilled,
     ToolFilled
 } from '@ant-design/icons';
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
 import { routes } from './routes';
 
 const menuItems: MenuItem[] = [
@@ -122,6 +123,10 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.notFound,
                 icon: QuestionCircleFilled
+            },
+            {
+                route: routes.rooksDemo,
+                icon: ElectricBoltIcon
             }
         ]
     },

src/constants/router/routes.tsx

@@ -31,6 +31,7 @@ import DataUrlViewPage from '../../pages/dataUrlViewPage/DataUrlViewPage';
 import RouteContextInitializer from '../../layouts/RouteContextInitializer';
 import JsonToYamlPage from '../../pages/jsonToYamlPage/JsonToYamlPage';
 import CounterPage from '../../pages/counterPage/CounterPage';
+import RooksDemoPage from '../../pages/rooksDemoPage/RooksDemoPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -66,6 +67,7 @@ type AppRoutesMap = Readonly<{
     dataUrl: AppRoute;
     dataUrlView: AppRoute;
     counter: AppRoute;
+    rooksDemo: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -202,6 +204,11 @@ export const routes: AppRoutesMap = {
         component: CounterPage,
         title: 'Counter'
     },
+    rooksDemo: {
+        path: '/other/rooks-demo',
+        component: RooksDemoPage,
+        title: 'Rooks Demo'
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,

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

@@ -43,7 +43,7 @@ const CounterItem: FunctionComponent<Props> = ({ counter, onChange, onRemove })
         <Flex row>
             <Input value={counter.name} onChange={handleNameChange} className={styles.input} />
             <ButtonGroup>
-                <Popover
+                <Popover //TODO use Dropdown (https://ant.design/components/dropdown/) instead
                     placement="bottomRight"
                     content={
                         <Flex column gap={8}>

src/pages/rooksDemoPage/RooksDemoPage.module.scss

@@ -0,0 +1,170 @@
+import React, { ChangeEvent, EventHandler, FunctionComponent, useCallback, useEffect, useState } from 'react';
+import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
+import NpmLink from '../../components/NpmLink';
+import { Button, Col, Input, Space } from 'antd';
+import RooksHookHeading from './components/RooksHookHeading';
+import {
+    useCounter,
+    useDebounce,
+    useDidMount,
+    useInput,
+    useIntervalWhen,
+    useLocalstorageState,
+    useSessionstorageState,
+    useToggle,
+    useWillUnmount
+} from 'rooks';
+import delay from '../../utils/delay';
+import Flex from '../../components/flex/Flex';
+import { MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import Text from 'antd/lib/typography/Text';
+import getLocalStorageKey from '../../utils/getLocalStorageKey';
+import TextArea from 'antd/lib/input/TextArea';
+import searchWords from './data/words.json';
+import { isEmpty } from 'lodash';
+import pluralize from 'pluralize';
+
+interface StorageState {
+    text: string;
+}
+
+const initialStorageState: StorageState = {
+    text: 'Initial text'
+};
+
+const titleExtra = (
+    <NpmLink packageName="rooks" plain>
+        npm package
+    </NpmLink>
+);
+
+const RooksDemoPage: FunctionComponent = () => {
+    const [didMountValue, setDidMountValue] = useState<string>('not mounted');
+
+    //! useInput
+    const debounceInput = useInput('');
+    const [debounceResults, setDebounceResults] = useState<string[]>(searchWords);
+
+    //! useCounter
+    const {
+        value: timeoutCounter,
+        increment: incrementTimeoutCounter,
+        decrement: decrementTimeoutCounter,
+        reset: resetTimeoutCounter
+    } = useCounter(0);
+
+    //! useToggle
+    const [isIntervalEnabled, toggleIntervalEnabled] = useToggle(true);
+
+    //! useLocalstorageState
+    const [localStorageState, setLocalStorageState] = useLocalstorageState<StorageState>(
+        getLocalStorageKey('rooks-demo', 'localStorageState'),
+        initialStorageState
+    );
+    //! useSessionstorageState
+    const [sessionStorageState, setSessionStorageState] = useSessionstorageState<StorageState>(
+        getLocalStorageKey('rooks-demo', 'sessionStorageState'),
+        initialStorageState
+    );
+
+    //! useDidMount
+    useDidMount(async () => {
+        await delay(1000);
+        setDidMountValue('mounted 1s ago');
+    });
+
+    //! useWillUnmount
+    useWillUnmount(async () => {
+        await delay(10);
+        setDidMountValue('unmounted 0.01s ago');
+    });
+
+    const timeoutCallback = useCallback(() => {
+        incrementTimeoutCounter();
+    }, []);
+
+    //! useIntervalWhen
+    useIntervalWhen(timeoutCallback, 500, isIntervalEnabled);
+
+    const handleLocalStorageTextChange = useCallback<EventHandler<ChangeEvent<HTMLTextAreaElement>>>((event) => {
+        setLocalStorageState({
+            ...localStorageState,
+            text: event.target.value
+        });
+    }, []);
+
+    const handleSessionStorageTextChange = useCallback<EventHandler<ChangeEvent<HTMLTextAreaElement>>>((event) => {
+        setSessionStorageState({
+            ...sessionStorageState,
+            text: event.target.value
+        });
+    }, []);
+
+    const handleEveryDebounceInputChange = useCallback((searchQuery: string) => {
+        setDebounceResults(
+            searchWords.filter((word) => {
+                if (isEmpty(searchQuery)) {
+                    return true;
+                }
+
+                return word.trim().toLocaleLowerCase().includes(searchQuery.trim().toLocaleLowerCase());
+            })
+        );
+    }, []);
+
+    const handleDebounceInputChange = useDebounce(handleEveryDebounceInputChange, 500);
+
+    useEffect(() => handleDebounceInputChange(debounceInput.value), [debounceInput.value]);
+
+    return (
+        <PageContainer title="Rooks demo" titleExtra={titleExtra}>
+            <Space direction="vertical" size="middle">
+                <Col>
+                    <RooksHookHeading hooks={['useDidMount', 'useWillUnmount']} />
+                    {didMountValue}
+                </Col>
+                <Col>
+                    <RooksHookHeading hooks={['useIntervalWhen', 'useCounter', 'useToggle']} />
+                    <Flex column gap={6}>
+                        <Flex row gap={6}>
+                            <Button onClick={toggleIntervalEnabled}>
+                                <Text type={isIntervalEnabled ? 'success' : 'danger'}>
+                                    {isIntervalEnabled ? 'Interval enabled' : 'Interval disabled'}
+                                </Text>
+                            </Button>
+                        </Flex>
+                        <Flex row gap={6} align="center">
+                            <Button icon={<PlusOutlined />} size="small" onClick={incrementTimeoutCounter} />
+                            <Button icon={<MinusOutlined />} size="small" onClick={decrementTimeoutCounter} />
+                            <Button icon={<ReloadOutlined />} size="small" onClick={resetTimeoutCounter} />
+                            <h3 className="m-0">{timeoutCounter}</h3>
+                        </Flex>
+                    </Flex>
+                </Col>
+                <Col>
+                    <RooksHookHeading hooks={['useLocalstorageState']} />
+                    <TextArea value={localStorageState.text} onChange={handleLocalStorageTextChange} />
+                </Col>
+                <Col>
+                    <RooksHookHeading hooks={['useSessionstorageState']} />
+                    <TextArea value={sessionStorageState.text} onChange={handleSessionStorageTextChange} />
+                </Col>
+                <Col>
+                    <RooksHookHeading hooks={['useDebounce', 'useInput']} />
+                    <Flex column gap={6}>
+                        <Input {...debounceInput} placeholder="Search..." />
+                        <TextArea
+                            readOnly
+                            placeholder="Results"
+                            rows={4}
+                            value={debounceResults.join('\n')}
+                            showCount={{ formatter: () => pluralize('result', debounceResults.length, true) }}
+                        />
+                    </Flex>
+                </Col>
+            </Space>
+        </PageContainer>
+    );
+};
+
+export default RooksDemoPage;

src/pages/rooksDemoPage/RooksDemoPage.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import Flex from '../../../components/flex/Flex';
+import ExternalLink from '../../../components/ExternalLink';
+import { isEqual, sortBy } from 'lodash';
+
+interface Props {
+    hooks: string[];
+}
+
+const getLink = (hook: string) => `https://react-hooks.org/docs/${hook}`;
+
+const RooksHookHeading: FunctionComponent<Props> = ({ hooks }) => {
+    return (
+        <h3>
+            <Flex row gap={8}>
+                {hooks.map((hook) => (
+                    <ExternalLink href={getLink(hook)}>{hook}</ExternalLink>
+                ))}
+            </Flex>
+        </h3>
+    );
+};
+
+export default React.memo(RooksHookHeading, (prev, next) => isEqual(sortBy(prev), sortBy(next)));

src/pages/rooksDemoPage/components/RooksHookHeading.tsx

@@ -0,0 +1,102 @@
+[
+    "galaxy",
+    "flow",
+    "pastel",
+    "level",
+    "deal",
+    "casualty",
+    "gallery",
+    "chimpanzee",
+    "mourning",
+    "fur",
+    "illness",
+    "exchange",
+    "stand",
+    "forbid",
+    "rhetoric",
+    "story",
+    "detective",
+    "epicalyx",
+    "beach",
+    "gradient",
+    "pledge",
+    "monopoly",
+    "bin",
+    "island",
+    "cycle",
+    "liver",
+    "watch",
+    "uncle",
+    "tip",
+    "tendency",
+    "trance",
+    "seize",
+    "reactor",
+    "charm",
+    "absorption",
+    "opinion",
+    "prison",
+    "tropical",
+    "heart",
+    "bike",
+    "pass",
+    "radiation",
+    "trust",
+    "salvation",
+    "period",
+    "salad",
+    "imposter",
+    "cutting",
+    "systematic",
+    "last",
+    "pioneer",
+    "cheap",
+    "volume",
+    "robot",
+    "continuation",
+    "archive",
+    "world",
+    "bold",
+    "sector",
+    "chair",
+    "tough",
+    "script",
+    "border",
+    "detail",
+    "pillow",
+    "talented",
+    "action",
+    "rhythm",
+    "writer",
+    "trace",
+    "psychology",
+    "formulate",
+    "genuine",
+    "credibility",
+    "contract",
+    "blade",
+    "desert",
+    "sensitive",
+    "fisherman",
+    "hesitate",
+    "art",
+    "slide",
+    "patrol",
+    "cottage",
+    "dead",
+    "yearn",
+    "waste",
+    "coat",
+    "information",
+    "button",
+    "depend",
+    "owner",
+    "interface",
+    "hard",
+    "line",
+    "slip",
+    "dance",
+    "nerve",
+    "nail",
+    "gate"
+]