Help dialog route (#130)

brandongregoryscott · web-flow · commit f39ea4728898 · 2022-03-31T20:00:56.000-04:00
* Port over logic to load Usage markdown in new UsagePage

* Add timeout render hook to usage page to ensure page doesn't get stuck

* Implement simple hook to scroll to hash in route if present

* Add 'CopyableHeading' component used in markdown renderer for copy-to-clipboard

* Close ProfileMenu when About or Help dialogs are clicked

* Reinstate scrolling to hash - needs to be called on UsagePage I believe since the components haven't been rendered yet in ApplicationLayout

* Add button to open help page in new tab at top of dialog

* Remove unused import
diff --git a/src/components/copyable-heading.tsx b/src/components/copyable-heading.tsx
@@ -0,0 +1,66 @@
+import { Flex } from "components/flex";
+import {
+    Heading,
+    HeadingProps,
+    IconButton,
+    LinkIcon,
+    majorScale,
+    TickIcon,
+    toaster,
+} from "evergreen-ui";
+import { isEmpty, isString, kebabCase } from "lodash";
+import { useCallback, useMemo, useState } from "react";
+
+interface CopyableHeadingProps extends HeadingProps {}
+
+const CopyableHeading: React.FC<CopyableHeadingProps> = (
+    props: CopyableHeadingProps
+) => {
+    const { children } = props;
+    const [copied, setCopied] = useState<boolean>(false);
+
+    const hash: string | undefined = useMemo(() => {
+        let hash: string | undefined = isString(children)
+            ? children
+            : undefined;
+
+        if (Array.isArray(children) && children.some(isString)) {
+            hash = children.find(isString) as string;
+        }
+
+        return isEmpty(hash) ? undefined : kebabCase(hash);
+    }, [children]);
+
+    const handleClick = useCallback(() => {
+        if (isEmpty(hash)) {
+            toaster.danger("Failed to copy link!");
+            return;
+        }
+
+        const { hash: existingHash } = window.location;
+        const currentPath = window.location
+            .toString()
+            .replace(existingHash, "");
+
+        const link = `${currentPath}#${hash}`;
+        setCopied(true);
+        navigator.clipboard.writeText(link);
+        setTimeout(() => setCopied(false), 1500);
+    }, [hash]);
+
+    return (
+        <Flex.Row alignItems="center">
+            <IconButton
+                appearance="minimal"
+                icon={copied ? TickIcon : LinkIcon}
+                intent={copied ? "success" : "none"}
+                marginRight={majorScale(1)}
+                onClick={handleClick}
+                size="small"
+            />
+            <Heading {...props} />
+        </Flex.Row>
+    );
+};
+
+export { CopyableHeading };
diff --git a/src/components/layouts/application-layout.tsx b/src/components/layouts/application-layout.tsx
@@ -3,6 +3,7 @@ import { SidebarNavigation } from "components/sidebar/sidebar-navigation";
 import { Pane } from "evergreen-ui";
 import { RouteProps } from "interfaces/route-props";
 import { useSubscribeToAuthStatus } from "utils/hooks/supabase/use-subscribe-to-auth-status";
+import { useScrollToHash } from "utils/hooks/use-scroll-to-hash";
 
 interface ApplicationLayoutProps extends RouteProps {}
 
@@ -11,6 +12,7 @@ const ApplicationLayout: React.FC<ApplicationLayoutProps> = (
 ) => {
     const { route } = props;
     useSubscribeToAuthStatus();
+    useScrollToHash();
 
     return (
         <Pane display="flex" flexDirection="row" height="100%" width="100%">
diff --git a/src/components/layouts/help-layout.tsx b/src/components/layouts/help-layout.tsx
@@ -0,0 +1,51 @@
+import { majorScale, Pane, Tab, TabNavigation } from "evergreen-ui";
+import { RouteProps } from "interfaces/route-props";
+import { NestedRoutes } from "components/nested-routes";
+import { useHistory, useLocation } from "react-router";
+import { useCallback } from "react";
+import { Sitemap } from "sitemap";
+import upath from "upath";
+import { HelpResource } from "enums/help-resource";
+
+interface HelpLayoutProps extends RouteProps {}
+
+const tabs = Object.values(HelpResource);
+
+const HelpLayout: React.FC<HelpLayoutProps> = (props: HelpLayoutProps) => {
+    const { route } = props;
+    const location = useLocation();
+    const history = useHistory();
+    const isTabSelected = useCallback(
+        (tab: HelpResource): boolean =>
+            location.pathname.endsWith(tab.toLowerCase()),
+        [location]
+    );
+    const handleClick = useCallback(
+        (tab: HelpResource) => () => {
+            history.push(upath.join(Sitemap.help.home, tab.toLowerCase()));
+        },
+        [history]
+    );
+
+    return (
+        <Pane height="100%" overflow="auto" width="100%">
+            <Pane marginLeft={majorScale(2)} marginTop={majorScale(2)}>
+                <TabNavigation>
+                    {tabs.map((tab) => (
+                        <Tab
+                            isSelected={isTabSelected(tab)}
+                            key={tab}
+                            onSelect={handleClick(tab)}>
+                            {tab}
+                        </Tab>
+                    ))}
+                </TabNavigation>
+                <Pane margin={majorScale(2)}>
+                    <NestedRoutes route={route} />
+                </Pane>
+            </Pane>
+        </Pane>
+    );
+};
+
+export { HelpLayout };
diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -1,5 +1,4 @@
 import {
-    Heading,
     Link,
     Image,
     Pane,
@@ -20,6 +19,7 @@ import {
 } from "react-markdown/lib/ast-to-react";
 import ReactMarkdown from "react-markdown";
 import { useMemo } from "react";
+import { CopyableHeading } from "components/copyable-heading";
 
 export type MarkdownComponentMap = Partial<
     Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents
@@ -39,10 +39,18 @@ const defaultComponents: MarkdownComponentMap = {
         />
     ),
     h3: (props) => (
-        <Heading {...omitIs(props)} marginY={majorScale(2)} size={600} />
+        <CopyableHeading
+            {...omitIs(props)}
+            marginY={majorScale(2)}
+            size={600}
+        />
     ),
     h4: (props) => (
-        <Heading {...omitIs(props)} marginY={majorScale(2)} size={500} />
+        <CopyableHeading
+            {...omitIs(props)}
+            marginY={majorScale(2)}
+            size={500}
+        />
     ),
     img: (props) => (
         <Pane marginY={majorScale(2)}>
diff --git a/src/components/pages/usage-page.tsx b/src/components/pages/usage-page.tsx
@@ -0,0 +1,26 @@
+import { Markdown } from "components/markdown";
+import { HelpResource } from "enums/help-resource";
+import { Spinner } from "evergreen-ui";
+import React from "react";
+import { useHelpDocs } from "utils/hooks/use-help-docs";
+import { useScrollToHash } from "utils/hooks/use-scroll-to-hash";
+import { useTimeoutRender } from "utils/hooks/use-timeout-render";
+
+interface UsagePageProps {}
+
+const UsagePage: React.FC<UsagePageProps> = (props: UsagePageProps) => {
+    const { isLoading, content } = useHelpDocs({
+        resource: HelpResource.Usage,
+    });
+    useTimeoutRender();
+    useScrollToHash();
+
+    return (
+        <React.Fragment>
+            {isLoading && <Spinner />}
+            {!isLoading && <Markdown>{content}</Markdown>}
+        </React.Fragment>
+    );
+};
+
+export { UsagePage };
diff --git a/src/components/sidebar/help-dialog.tsx b/src/components/sidebar/help-dialog.tsx
@@ -1,37 +1,55 @@
 import React, { useCallback, useState } from "react";
 import { Dialog, DialogProps } from "components/dialog";
-import UsageMarkdown from "docs/usage.md";
-import { useQuery } from "utils/hooks/use-query";
-import { Spinner, Tablist, Tab, IconButton, CrossIcon } from "evergreen-ui";
+import {
+    Spinner,
+    Tablist,
+    Tab,
+    IconButton,
+    CrossIcon,
+    MinimizeIcon,
+    MaximizeIcon,
+    majorScale,
+    ShareIcon,
+} from "evergreen-ui";
 import { Markdown } from "components/markdown";
 import { Flex } from "components/flex";
+import { HelpResource } from "enums/help-resource";
+import { useHelpDocs } from "utils/hooks/use-help-docs";
+import { useBoolean } from "utils/hooks/use-boolean";
+import { Sitemap } from "sitemap";
+import upath from "upath";
 
 interface HelpDialogProps extends Pick<DialogProps, "onCloseComplete"> {}
 
-enum HelpTab {
-    Usage = "Usage",
-}
-
-const tabs = [HelpTab.Usage];
+const tabs = [HelpResource.Usage];
 
 const HelpDialog: React.FC<HelpDialogProps> = (props: HelpDialogProps) => {
     const { onCloseComplete } = props;
-    const [selectedTab, setSelectedTab] = useState<HelpTab>(HelpTab.Usage);
-    const { resultObject: markdownContent, isLoading } = useQuery<string>({
-        fn: async () => {
-            const response = await fetch(UsageMarkdown);
-            const content = await response.text();
-            return sanitizeContent(content);
-        },
-    });
+    const [selectedTab, setSelectedTab] = useState<HelpResource>(
+        HelpResource.Usage
+    );
+    const { value: isFullscreen, toggle: handleFullscreenClick } = useBoolean();
+    const { isLoading, content } = useHelpDocs({ resource: selectedTab });
+
+    const handleShareClick = useCallback(() => {
+        window.open(upath.join(Sitemap.help.home, selectedTab.toLowerCase()));
+    }, [selectedTab]);
 
     const handleTabSelected = useCallback(
-        (tab: HelpTab) => () => setSelectedTab(tab),
+        (tab: HelpResource) => () => setSelectedTab(tab),
         []
     );
 
     return (
         <Dialog
+            containerProps={
+                isFullscreen
+                    ? {
+                          marginY: majorScale(2),
+                          maxHeight: `calc(100% - ${majorScale(4)}px)`,
+                      }
+                    : undefined
+            }
             hasFooter={false}
             header={({ close }) => (
                 <Flex.Row alignItems="center" width="100%">
@@ -47,23 +65,32 @@ const HelpDialog: React.FC<HelpDialogProps> = (props: HelpDialogProps) => {
                     </Tablist>
                     <IconButton
                         appearance="minimal"
-                        icon={CrossIcon}
+                        icon={ShareIcon}
                         marginLeft="auto"
+                        onClick={handleShareClick}
+                    />
+                    <IconButton
+                        appearance="minimal"
+                        icon={isFullscreen ? MinimizeIcon : MaximizeIcon}
+                        marginLeft={majorScale(1)}
+                        onClick={handleFullscreenClick}
+                    />
+                    <IconButton
+                        appearance="minimal"
+                        icon={CrossIcon}
+                        marginLeft={majorScale(1)}
                         onClick={close}
                     />
                 </Flex.Row>
             )}
             isShown={true}
             onCloseComplete={onCloseComplete}
             title="Usage"
-            width="60%">
+            width={isFullscreen ? "100%" : undefined}>
             {isLoading && <Spinner />}
-            {!isLoading && <Markdown>{markdownContent!}</Markdown>}
+            {!isLoading && <Markdown>{content}</Markdown>}
         </Dialog>
     );
 };
 
-const sanitizeContent = (content: string): string =>
-    content.replace("# Usage", "");
-
 export { HelpDialog };
diff --git a/src/components/sidebar/profile-menu.tsx b/src/components/sidebar/profile-menu.tsx
@@ -35,6 +35,16 @@ const ProfileMenu: React.FC<ProfileMenuProps> = (props: ProfileMenuProps) => {
     const { mutate: logout } = useLogout({ onSettled: handleLogoutsettled });
     const history = useHistory();
 
+    const handleAboutDialogClick = useCallback(() => {
+        onClose();
+        onAboutDialogClick();
+    }, [onAboutDialogClick, onClose]);
+
+    const handleHelpDialogClick = useCallback(() => {
+        onClose();
+        onHelpDialogClick();
+    }, [onClose, onHelpDialogClick]);
+
     const handleLogoutSelect = useCallback(() => {
         onClose();
         setTimeout(logout, 25); // Slight delay to allow popover to close
@@ -52,10 +62,10 @@ const ProfileMenu: React.FC<ProfileMenuProps> = (props: ProfileMenuProps) => {
 
     return (
         <Menu>
-            <Menu.Item icon={InfoSignIcon} onSelect={onAboutDialogClick}>
+            <Menu.Item icon={InfoSignIcon} onSelect={handleAboutDialogClick}>
                 About
             </Menu.Item>
-            <Menu.Item icon={HelpIcon} onSelect={onHelpDialogClick}>
+            <Menu.Item icon={HelpIcon} onSelect={handleHelpDialogClick}>
                 Help
             </Menu.Item>
             {isAuthenticated && (
diff --git a/src/enums/help-resource.ts b/src/enums/help-resource.ts
@@ -0,0 +1,5 @@
+enum HelpResource {
+    Usage = "Usage",
+}
+
+export { HelpResource };
diff --git a/src/routes.ts b/src/routes.ts
@@ -6,15 +6,29 @@ import { LoginPage } from "components/pages/login-page";
 import { LogoutPage } from "components/pages/logout-page";
 import { RegisterPage } from "components/pages/register-page";
 import { WorkstationPage } from "components/pages/workstation-page";
-import { HomeIcon, LogInIcon, LogOutIcon, MusicIcon } from "evergreen-ui";
+import {
+    HelpIcon,
+    HomeIcon,
+    LogInIcon,
+    LogOutIcon,
+    MusicIcon,
+} from "evergreen-ui";
 import { Sitemap } from "sitemap";
 import { RouteDefinition } from "interfaces/route-definition";
 import { RouteMap as GenericRouteMap } from "interfaces/route-map";
 import { InstrumentsPage } from "components/pages/instruments-page";
+import { HelpLayout } from "components/layouts/help-layout";
+import { UsagePage } from "components/pages/usage-page";
+import { HelpResource } from "enums/help-resource";
 
 export interface RouteMap extends GenericRouteMap {
     root: RouteDefinition & {
         routes: {
+            help: RouteDefinition & {
+                routes: {
+                    usage: RouteDefinition;
+                };
+            };
             library: RouteDefinition & {
                 routes: {
                     files: RouteDefinition;
@@ -40,6 +54,21 @@ const Routes: RouteMap = {
         name: "ApplicationLayout",
         path: Sitemap.home,
         routes: {
+            help: {
+                component: HelpLayout,
+                exact: false,
+                icon: HelpIcon,
+                name: "Help",
+                path: Sitemap.help.home,
+                routes: {
+                    usage: {
+                        component: UsagePage,
+                        exact: true,
+                        name: HelpResource.Usage,
+                        path: Sitemap.help.usage,
+                    },
+                },
+            },
             library: {
                 component: LibraryLayout,
                 exact: false,
diff --git a/src/sitemap.ts b/src/sitemap.ts
diff --git a/src/utils/hooks/use-help-docs.ts b/src/utils/hooks/use-help-docs.ts
diff --git a/src/utils/hooks/use-scroll-to-hash.ts b/src/utils/hooks/use-scroll-to-hash.ts
