From f535dca7b99347744e71403f2985cad247a137b5 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 9 Aug 2020 03:04:48 -0700
Subject: [PATCH] Initial expanded view in details.

---
 components/Settings.js                     | 17 ++++--------
 components/WebsiteDetails.js               | 28 ++++++++++++++++++-
 components/WebsiteDetails.module.css       |  8 ++++++
 components/WebsiteList.js                  | 16 ++++++-----
 components/charts/QuickButtons.module.css  |  3 +-
 components/charts/RankingsChart.js         | 10 ++++++-
 components/charts/RankingsChart.module.css |  7 ++++-
 components/common/Button.js                |  3 +-
 components/common/Button.module.css        | 12 ++++++--
 components/common/Icon.js                  |  3 +-
 components/common/Icon.module.css          |  5 ++++
 components/layout/MenuLayout.js            | 32 ++++++++++++++--------
 components/layout/MenuLayout.module.css    |  2 +-
 components/layout/PageHeader.module.css    |  1 +
 14 files changed, 108 insertions(+), 39 deletions(-)

diff --git a/components/Settings.js b/components/Settings.js
index 09f31c33..f3144f65 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
 import WebsiteSettings from './WebsiteSettings';
@@ -8,21 +8,16 @@ import { useSelector } from 'react-redux';
 
 export default function Settings() {
   const user = useSelector(state => state.user);
+  const [option, setOption] = useState('Websites');
 
   const menuOptions = ['Websites', user.is_admin && 'Accounts', 'Profile'];
 
   return (
     <Page>
-      <MenuLayout menu={menuOptions} selectedOption="Websites">
-        {option => {
-          if (option === 'Websites') {
-            return <WebsiteSettings />;
-          } else if (option === 'Accounts') {
-            return <AccountSettings />;
-          } else if (option === 'Profile') {
-            return <ProfileSettings />;
-          }
-        }}
+      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
+        {option === 'Websites' && <WebsiteSettings />}
+        {option === 'Accounts' && <AccountSettings />}
+        {option === 'Profile' && <ProfileSettings />}
       </MenuLayout>
     </Page>
   );
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 4d91b7bb..250ed1f7 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -9,15 +9,18 @@ import { get } from 'lib/web';
 import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
 import styles from './WebsiteDetails.module.css';
 import PageHeader from './layout/PageHeader';
+import MenuLayout from './layout/MenuLayout';
 
 const pageviewClasses = 'col-md-12 col-lg-6';
 const sessionClasses = 'col-12 col-lg-4';
+const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [data, setData] = useState();
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
+  const [expand, setExpand] = useState();
   const { startDate, endDate } = dateRange;
 
   async function loadData() {
@@ -32,6 +35,14 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setTimeout(() => setDateRange(values), 300);
   }
 
+  function handleExpand(title) {
+    setExpand(title);
+  }
+
+  function handleMenuSelect(title) {
+    setExpand(title);
+  }
+
   useEffect(() => {
     if (websiteId) {
       loadData();
@@ -55,7 +66,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           />
         </div>
       </div>
-      {chartLoaded && (
+      {chartLoaded && !expand && (
         <>
           <div className={classNames(styles.row, 'row')}>
             <div className={pageviewClasses}>
@@ -67,6 +78,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={urlFilter}
+                onExpand={handleExpand}
               />
             </div>
             <div className={pageviewClasses}>
@@ -78,6 +90,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={refFilter(data.domain)}
+                onExpand={handleExpand}
               />
             </div>
           </div>
@@ -91,6 +104,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={browserFilter}
+                onExpand={handleExpand}
               />
             </div>
             <div className={sessionClasses}>
@@ -101,6 +115,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 websiteId={websiteId}
                 startDate={startDate}
                 endDate={endDate}
+                onExpand={handleExpand}
               />
             </div>
             <div className={sessionClasses}>
@@ -112,6 +127,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={deviceFilter}
+                onExpand={handleExpand}
               />
             </div>
           </div>
@@ -129,11 +145,21 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 endDate={endDate}
                 dataFilter={countryFilter}
                 onDataLoad={data => setCountryData(data)}
+                onExpand={handleExpand}
               />
             </div>
           </div>
         </>
       )}
+      {expand && (
+        <MenuLayout
+          className={styles.expand}
+          menuClassName={styles.menu}
+          menu={menuOptions}
+          selectedOption={expand}
+          onMenuSelect={handleMenuSelect}
+        />
+      )}
     </Page>
   );
 }
diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
index 7e59d7b9..eb787027 100644
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@@ -2,6 +2,14 @@
   margin-bottom: 30px;
 }
 
+.expand {
+  border-top: 1px solid var(--gray300);
+}
+
+.menu {
+  font-size: var(--font-size-small);
+}
+
 .row {
   border-top: 1px solid var(--gray300);
   min-height: 430px;
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 00668673..49cbfa9f 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -27,13 +27,15 @@ export default function WebsiteList() {
       {data?.map(({ website_id, name }) => (
         <div key={website_id} className={styles.website}>
           <PageHeader>
-            <Link
-              href="/website/[...id]"
-              as={`/website/${website_id}/${name}`}
-              className={styles.title}
-            >
-              {name}
-            </Link>
+            <div>
+              <Link
+                href="/website/[...id]"
+                as={`/website/${website_id}/${name}`}
+                className={styles.title}
+              >
+                {name}
+              </Link>
+            </div>
             <Button
               icon={<Arrow />}
               onClick={() =>
diff --git a/components/charts/QuickButtons.module.css b/components/charts/QuickButtons.module.css
index 81c58856..f84bc42a 100644
--- a/components/charts/QuickButtons.module.css
+++ b/components/charts/QuickButtons.module.css
@@ -1,5 +1,6 @@
 .buttons {
   display: flex;
+  align-content: center;
   position: absolute;
   top: 0;
   right: 0;
@@ -10,7 +11,7 @@
   margin-left: 10px;
 }
 
-.button {
+.buttons .button {
   font-size: var(--font-size-xsmall);
   padding: 4px 8px;
 }
diff --git a/components/charts/RankingsChart.js b/components/charts/RankingsChart.js
index 85acefeb..e3c7fc2c 100644
--- a/components/charts/RankingsChart.js
+++ b/components/charts/RankingsChart.js
@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import CheckVisible from '../helpers/CheckVisible';
+import CheckVisible from 'components/helpers/CheckVisible';
+import Button from 'components/common/Button';
+import Arrow from 'assets/arrow-right.svg';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import styles from './RankingsChart.module.css';
@@ -16,6 +18,7 @@ export default function RankingsChart({
   className,
   dataFilter,
   onDataLoad = () => {},
+  onExpand = () => {},
 }) {
   const [data, setData] = useState();
 
@@ -62,6 +65,11 @@ export default function RankingsChart({
               <Row key={x} label={x} value={y} percent={z} animate={visible} />
             ))}
           </div>
+          <div className={styles.footer}>
+            <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(title)}>
+              <div>More</div>
+            </Button>
+          </div>
         </div>
       )}
     </CheckVisible>
diff --git a/components/charts/RankingsChart.module.css b/components/charts/RankingsChart.module.css
index bb060c04..b5b2da97 100644
--- a/components/charts/RankingsChart.module.css
+++ b/components/charts/RankingsChart.module.css
@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  min-height: 430px;
+  min-height: 460px;
   font-size: var(--font-size-small);
   padding: 20px 0;
   display: flex;
@@ -90,6 +90,11 @@
   transform: translate(-50%, -50%);
 }
 
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
 @media only screen and (max-width: 992px) {
   .container {
     min-height: auto;
diff --git a/components/common/Button.js b/components/common/Button.js
index b61f05d3..1f3a1ecb 100644
--- a/components/common/Button.js
+++ b/components/common/Button.js
@@ -16,8 +16,9 @@ export default function Button({
     <button
       type={type}
       className={classNames(styles.button, className, {
-        [styles.small]: size === 'small',
         [styles.large]: size === 'large',
+        [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
         [styles.action]: variant === 'action',
         [styles.danger]: variant === 'danger',
       })}
diff --git a/components/common/Button.module.css b/components/common/Button.module.css
index 2345ccda..7554daff 100644
--- a/components/common/Button.module.css
+++ b/components/common/Button.module.css
@@ -20,12 +20,20 @@
   margin-left: 10px;
 }
 
+.large {
+  font-size: var(--font-size-large);
+}
+
+.medium {
+  font-size: var(--font-size-normal);
+}
+
 .small {
   font-size: var(--font-size-small);
 }
 
-.large {
-  font-size: var(--font-size-large);
+.xsmall {
+  font-size: var(--font-size-xsmall);
 }
 
 .action {
diff --git a/components/common/Icon.js b/components/common/Icon.js
index f15a7d81..1b6fd1d9 100644
--- a/components/common/Icon.js
+++ b/components/common/Icon.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Icon.module.css';
 
-export default function Icon({ icon, className, size = 'M' }) {
+export default function Icon({ icon, className, size = 'medium' }) {
   return (
     <div
       className={classNames(styles.icon, className, {
@@ -10,6 +10,7 @@ export default function Icon({ icon, className, size = 'M' }) {
         [styles.large]: size === 'large',
         [styles.medium]: size === 'medium',
         [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
       })}
     >
       {icon}
diff --git a/components/common/Icon.module.css b/components/common/Icon.module.css
index 1759a130..47d0ab0d 100644
--- a/components/common/Icon.module.css
+++ b/components/common/Icon.module.css
@@ -32,3 +32,8 @@
   width: 12px;
   height: 12px;
 }
+
+.xsmall > svg {
+  width: 10px;
+  height: 10px;
+}
diff --git a/components/layout/MenuLayout.js b/components/layout/MenuLayout.js
index b288c770..8b88b2b3 100644
--- a/components/layout/MenuLayout.js
+++ b/components/layout/MenuLayout.js
@@ -2,26 +2,34 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import styles from './MenuLayout.module.css';
 
-export default function MenuLayout({ menu, selectedOption, onMenuSelect, children }) {
-  const [option, setOption] = useState(selectedOption);
+export default function MenuLayout({
+  menu,
+  selectedOption,
+  onMenuSelect,
+  className,
+  menuClassName,
+  contentClassName,
+  children,
+}) {
+  function handleMenuSelect(option) {
+    onMenuSelect(option);
+  }
 
   return (
-    <div className={styles.container}>
-      <div className={styles.menu}>
-        {menu.map(item =>
-          item ? (
+    <div className={classNames(styles.container, className)}>
+      <div className={classNames(styles.menu, menuClassName)}>
+        {menu.map(option =>
+          option ? (
             <div
-              className={classNames(styles.option, { [styles.active]: option === item })}
-              onClick={() => setOption(item)}
+              className={classNames(styles.option, { [styles.active]: option === selectedOption })}
+              onClick={() => handleMenuSelect(option)}
             >
-              {item}
+              {option}
             </div>
           ) : null,
         )}
       </div>
-      <div className={styles.content}>
-        {typeof children === 'function' ? children(option) : children}
-      </div>
+      <div className={classNames(styles.content, contentClassName)}>{children}</div>
     </div>
   );
 }
diff --git a/components/layout/MenuLayout.module.css b/components/layout/MenuLayout.module.css
index a465913e..12a7ce94 100644
--- a/components/layout/MenuLayout.module.css
+++ b/components/layout/MenuLayout.module.css
@@ -20,7 +20,7 @@
 .option {
   padding: 8px 16px;
   cursor: pointer;
-  min-width: 140px;
+  min-width: 160px;
   margin-right: 30px;
   border-radius: 4px;
 }
diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
index 0c88c0f2..2a7b3c55 100644
--- a/components/layout/PageHeader.module.css
+++ b/components/layout/PageHeader.module.css
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  align-content: center;
   line-height: 80px;
   font-size: var(--font-size-large);
 }