From bb99b3eba596737c622792f77b08f934390c3277 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 3 Mar 2023 12:37:26 -0800
Subject: [PATCH] Fixed sticky header scrolling. Updated settings button.

---
 components/helpers/StickyHeader.js          |  7 +--
 components/input/LanguageButton.js          |  4 +-
 components/input/SettingsButton.js          | 64 ++++++++-------------
 components/input/SettingsButton.module.css  | 10 +---
 components/input/ThemeButton.js             |  2 +-
 components/input/ThemeButton.module.css     |  1 -
 components/layout/Header.js                 | 53 ++++++++---------
 components/layout/Header.module.css         | 32 +++--------
 components/layout/ShareLayout.js            | 13 +++++
 components/metrics/MetricCard.module.css    |  1 +
 components/metrics/WebsiteChart.js          | 11 +++-
 components/pages/websites/WebsiteDetails.js |  5 +-
 hooks/useApi.ts                             | 14 ++++-
 hooks/useSticky.js                          | 10 ++--
 lib/auth.ts                                 | 10 +++-
 pages/share/[...id].js                      |  6 +-
 16 files changed, 109 insertions(+), 134 deletions(-)
 create mode 100644 components/layout/ShareLayout.js

diff --git a/components/helpers/StickyHeader.js b/components/helpers/StickyHeader.js
index 29daeb51..62dcb74a 100644
--- a/components/helpers/StickyHeader.js
+++ b/components/helpers/StickyHeader.js
@@ -1,17 +1,16 @@
-import { useEffect, useRef } from 'react';
-import { useMeasure, useCombinedRefs } from 'react-basics';
+import { useMeasure } from 'react-basics';
 import classNames from 'classnames';
 import useSticky from 'hooks/useSticky';
-import { UI_LAYOUT_BODY } from 'lib/constants';
 
 export default function StickyHeader({
   className,
   stickyClassName,
   stickyStyle,
   enabled = true,
+  scrollElement,
   children,
 }) {
-  const { ref: scrollRef, isSticky } = useSticky({ scrollElementId: UI_LAYOUT_BODY });
+  const { ref: scrollRef, isSticky } = useSticky({ scrollElement });
   const { ref: measureRef, dimensions } = useMeasure();
 
   return (
diff --git a/components/input/LanguageButton.js b/components/input/LanguageButton.js
index f01b4716..afd447ac 100644
--- a/components/input/LanguageButton.js
+++ b/components/input/LanguageButton.js
@@ -7,7 +7,7 @@ import Icons from 'components/icons';
 import { labels } from 'components/messages';
 import styles from './LanguageButton.module.css';
 
-export default function LanguageButton({ tooltipPosition = 'top' }) {
+export default function LanguageButton({ tooltipPosition = 'top', menuPosition = 'right' }) {
   const { formatMessage } = useIntl();
   const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
@@ -25,7 +25,7 @@ export default function LanguageButton({ tooltipPosition = 'top' }) {
           </Icon>
         </Button>
       </Tooltip>
-      <Popup position="right" alignment="end">
+      <Popup position={menuPosition} alignment="end">
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (
diff --git a/components/input/SettingsButton.js b/components/input/SettingsButton.js
index 7c2a2ae2..46a01e13 100644
--- a/components/input/SettingsButton.js
+++ b/components/input/SettingsButton.js
@@ -1,49 +1,33 @@
-import { useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import TimezoneSetting from '../pages/settings/profile/TimezoneSetting';
-import DateRangeSetting from '../pages/settings/profile/DateRangeSetting';
-import { Button, Icon } from 'react-basics';
+import { useIntl } from 'react-intl';
+import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
+import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
+import Icons from 'components/icons';
+import { labels } from 'components/messages';
 import styles from './SettingsButton.module.css';
-import Gear from 'assets/gear.svg';
-import useDocumentClick from '../../hooks/useDocumentClick';
 
 export default function SettingsButton() {
-  const [show, setShow] = useState(false);
-  const ref = useRef();
-
-  function handleClick() {
-    setShow(state => !state);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current?.contains(e.target)) {
-      setShow(false);
-    }
-  });
+  const { formatMessage } = useIntl();
 
   return (
-    <div className={styles.button} ref={ref}>
-      <Button variant="light" onClick={handleClick}>
-        <Icon>
-          <Gear />
-        </Icon>
-      </Button>
-      {show && (
-        <div className={styles.panel}>
-          <dt>
-            <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
-          </dt>
-          <dd>
+    <PopupTrigger>
+      <Tooltip label={formatMessage(labels.settings)} position="bottom">
+        <Button variant="quiet">
+          <Icon>
+            <Icons.Gear />
+          </Icon>
+        </Button>
+      </Tooltip>
+      <Popup className={styles.popup} position="bottom" alignment="end">
+        <Form>
+          <FormRow label={formatMessage(labels.timezone)}>
             <TimezoneSetting />
-          </dd>
-          <dt>
-            <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
-          </dt>
-          <dd>
+          </FormRow>
+          <FormRow label={formatMessage(labels.defaultDateRange)}>
             <DateRangeSetting />
-          </dd>
-        </div>
-      )}
-    </div>
+          </FormRow>
+        </Form>
+      </Popup>
+    </PopupTrigger>
   );
 }
diff --git a/components/input/SettingsButton.module.css b/components/input/SettingsButton.module.css
index 57084735..0f6f90ea 100644
--- a/components/input/SettingsButton.module.css
+++ b/components/input/SettingsButton.module.css
@@ -1,8 +1,4 @@
-.button {
-  position: relative;
-}
-
-.panel {
+.popup {
   background: var(--base50);
   border: 1px solid var(--base500);
   border-radius: 4px;
@@ -14,7 +10,3 @@
   padding: 20px;
   z-index: 100;
 }
-
-.panel dd {
-  display: flex;
-}
diff --git a/components/input/ThemeButton.js b/components/input/ThemeButton.js
index 656a7dad..cca3560a 100644
--- a/components/input/ThemeButton.js
+++ b/components/input/ThemeButton.js
@@ -1,5 +1,5 @@
 import { useTransition, animated } from 'react-spring';
-import { Button, Icon, PopupTrigger, Tooltip } from 'react-basics';
+import { Button, Icon, Tooltip } from 'react-basics';
 import { useIntl } from 'react-intl';
 import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
diff --git a/components/input/ThemeButton.module.css b/components/input/ThemeButton.module.css
index 3f7c705a..c64647eb 100644
--- a/components/input/ThemeButton.module.css
+++ b/components/input/ThemeButton.module.css
@@ -1,6 +1,5 @@
 .button {
   width: 50px;
-  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 88499768..9b5f0a2f 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -1,38 +1,31 @@
-import { useRouter } from 'next/router';
-import { Column, Row } from 'react-basics';
-import classNames from 'classnames';
-import HamburgerButton from 'components/common/HamburgerButton';
-import UpdateNotice from 'components/common/UpdateNotice';
+import { Column, Icon, Row, Text } from 'react-basics';
+import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';
 import ThemeButton from 'components/input/ThemeButton';
-import UserButton from 'components/input/UserButton';
 import SettingsButton from 'components/input/SettingsButton';
-import useConfig from 'hooks/useConfig';
-import useUser from 'hooks/useUser';
+import Icons from 'components/icons';
 import styles from './Header.module.css';
 
-export default function Header({ className }) {
-  const { user } = useUser();
-  const { pathname } = useRouter();
-  const { updatesDisabled, adminDisabled } = useConfig();
-  const isSharePage = pathname.includes('/share/');
-  const allowUpdate = user?.isAdmin && !updatesDisabled && !isSharePage;
-
+export default function Header() {
   return (
-    <>
-      {allowUpdate && <UpdateNotice />}
-      <header className={classNames(styles.header, className)}>
-        <Row>
-          <Column className={styles.title}></Column>
-          <HamburgerButton />
-          <Column className={styles.buttons}>
-            <ThemeButton />
-            <LanguageButton menuAlign="right" />
-            <SettingsButton />
-            {user && !adminDisabled && <UserButton />}
-          </Column>
-        </Row>
-      </header>
-    </>
+    <header className={styles.header}>
+      <Row>
+        <Column>
+          <Link href="https://umami.is" target="_blank">
+            <a className={styles.title}>
+              <Icon size="lg">
+                <Icons.Logo />
+              </Icon>
+              <Text>umami</Text>
+            </a>
+          </Link>
+        </Column>
+        <Column className={styles.buttons}>
+          <ThemeButton tooltipPosition="bottom" />
+          <LanguageButton tooltipPosition="bottom" menuPosition="bottom" />
+          <SettingsButton />
+        </Column>
+      </Row>
+    </header>
   );
 }
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
index f1dbfdfd..c896e967 100644
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -2,42 +2,24 @@
   display: flex;
   align-items: center;
   width: 100%;
-  height: 50px;
-  border-bottom: 1px solid var(--base300);
+  padding: 30px 30px 0 30px;
 }
 
 .title {
-  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
   font-size: var(--font-size-lg);
   font-weight: 700;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-.logo {
-  margin-right: 12px;
-}
-
-.links {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-md);
-  font-weight: 600;
-}
-
-.links a + a {
-  margin-left: 40px;
+  color: var(--font-color100);
 }
 
 .buttons {
-  flex: 1;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 
 @media only screen and (max-width: 992px) {
diff --git a/components/layout/ShareLayout.js b/components/layout/ShareLayout.js
new file mode 100644
index 00000000..2e3fe3a4
--- /dev/null
+++ b/components/layout/ShareLayout.js
@@ -0,0 +1,13 @@
+import { Container } from 'react-basics';
+import Header from './Header';
+import Footer from './Footer';
+
+export default function ShareLayout({ children }) {
+  return (
+    <Container>
+      <Header />
+      {children}
+      <Footer />
+    </Container>
+  );
+}
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 7a033209..520c2b01 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -18,6 +18,7 @@
 .label {
   display: flex;
   align-items: center;
+  font-weight: 700;
   gap: 5px;
   white-space: nowrap;
   min-height: 30px;
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 52132fd7..001399db 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Icon, Text, Row, Column, Flexbox } from 'react-basics';
+import { Button, Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
@@ -14,8 +14,9 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
-import { getDateArray, getDateLength, getDateRangeValues } from 'lib/date';
+import { getDateArray, getDateLength } from 'lib/date';
 import Icons from 'components/icons';
+import { UI_LAYOUT_BODY } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './WebsiteChart.module.css';
 
@@ -82,7 +83,11 @@ export default function WebsiteChart({
         )}
       </WebsiteHeader>
       <FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
-      <StickyHeader stickyClassName={styles.sticky} enabled={stickyHeader}>
+      <StickyHeader
+        stickyClassName={styles.sticky}
+        enabled={stickyHeader}
+        scrollElement={document.getElementById(UI_LAYOUT_BODY) || document}
+      >
         <Row className={styles.header}>
           <Column>
             <MetricsBar websiteId={websiteId} />
diff --git a/components/pages/websites/WebsiteDetails.js b/components/pages/websites/WebsiteDetails.js
index d5b1c655..ad252b99 100644
--- a/components/pages/websites/WebsiteDetails.js
+++ b/components/pages/websites/WebsiteDetails.js
@@ -1,8 +1,5 @@
 import { useState } from 'react';
-import { Icons, Loading } from 'react-basics';
-import { useIntl } from 'react-intl';
-import Link from 'next/link';
-import classNames from 'classnames';
+import { Loading } from 'react-basics';
 import Page from 'components/layout/Page';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import useApi from 'hooks/useApi';
diff --git a/hooks/useApi.ts b/hooks/useApi.ts
index 40a0638d..9e1e7e20 100644
--- a/hooks/useApi.ts
+++ b/hooks/useApi.ts
@@ -1,12 +1,20 @@
-import { useApi as nextUseApi } from 'next-basics';
-import { getClientAuthToken } from 'lib/client';
 import { useRouter } from 'next/router';
 import * as reactQuery from '@tanstack/react-query';
+import { useApi as nextUseApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import { SHARE_TOKEN_HEADER } from 'lib/constants';
+import useStore from 'store/app';
+
+const selector = state => state.shareToken;
 
 export default function useApi() {
   const { basePath } = useRouter();
+  const shareToken = useStore(selector);
 
-  const { get, post, put, del } = nextUseApi(getClientAuthToken(), basePath);
+  const { get, post, put, del } = nextUseApi(
+    { authorization: `Bearer ${getClientAuthToken()}`, [SHARE_TOKEN_HEADER]: shareToken?.token },
+    basePath,
+  );
 
   return { get, post, put, del, ...reactQuery };
 }
diff --git a/hooks/useSticky.js b/hooks/useSticky.js
index 9aed8cdb..f2c0c7a6 100644
--- a/hooks/useSticky.js
+++ b/hooks/useSticky.js
@@ -1,25 +1,23 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function useSticky({ scrollElementId, defaultSticky = false }) {
+export default function useSticky({ scrollElement = document, defaultSticky = false }) {
   const [isSticky, setIsSticky] = useState(defaultSticky);
   const ref = useRef(null);
   const initialTop = useRef(null);
 
   useEffect(() => {
-    const element = scrollElementId ? document.getElementById(scrollElementId) : window;
-
     const handleScroll = () => {
-      setIsSticky(element.scrollTop > initialTop.current);
+      setIsSticky((scrollElement?.scrollTop ?? window.scrollY) > initialTop.current);
     };
 
     if (initialTop.current === null) {
       initialTop.current = ref?.current?.offsetTop;
     }
 
-    element.addEventListener('scroll', handleScroll);
+    scrollElement.addEventListener('scroll', handleScroll, true);
 
     return () => {
-      element.removeEventListener('scroll', handleScroll);
+      scrollElement.removeEventListener('scroll', handleScroll, true);
     };
   }, [ref, setIsSticky]);
 
diff --git a/lib/auth.ts b/lib/auth.ts
index 31b34fe9..1722b15d 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -50,8 +50,12 @@ export function isValidToken(token, validation) {
   return false;
 }
 
-export async function canViewWebsite({ user }: Auth, websiteId: string) {
-  if (user.isAdmin) {
+export async function canViewWebsite({ user, shareToken }: Auth, websiteId: string) {
+  if (user?.isAdmin) {
+    return true;
+  }
+
+  if (shareToken?.websiteId === websiteId) {
     return true;
   }
 
@@ -72,7 +76,7 @@ export async function canCreateWebsite({ user }: Auth, teamId?: string) {
   if (teamId) {
     const teamUser = await getTeamUser(teamId, user.id);
 
-    return hasPermission(teamUser.role, PERMISSIONS.websiteCreate);
+    return hasPermission(teamUser?.role, PERMISSIONS.websiteCreate);
   }
 
   return hasPermission(user.role, PERMISSIONS.websiteCreate);
diff --git a/pages/share/[...id].js b/pages/share/[...id].js
index 381eef73..aa6caab3 100644
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import AppLayout from 'components/layout/AppLayout';
+import ShareLayout from 'components/layout/ShareLayout';
 import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
 import useShareToken from 'hooks/useShareToken';
 
@@ -14,8 +14,8 @@ export default function SharePage() {
   }
 
   return (
-    <AppLayout>
+    <ShareLayout>
       <WebsiteDetails websiteId={shareToken.websiteId} />
-    </AppLayout>
+    </ShareLayout>
   );
 }