Merge branch 'main' of github.com:ipfs-shipyard/nft.storage

Author: Alan Shaw

packages/api/src/utils/auth-v1.js

@@ -93,14 +93,15 @@ export async function loginOrRegister(event, data) {
       github: parsed.github,
     })
 
-    if (upsert.data === null) {
-      throw new Error('Could not retrieve user from db.')
-    }
-
     if (upsert.error) {
       // @ts-ignore
       throw new Error(`DB error: ${JSON.stringify(upsert.error)}`)
     }
+
+    if (upsert.data === null) {
+      throw new Error('Could not retrieve user from db.')
+    }
+
     const user = upsert.data[0]
 
     return { user, tokenName: 'session' }

packages/api/wrangler.toml

@@ -165,3 +165,31 @@ CLUSTER_API_URL = "https://nft.storage.ipfscluster.io/api/"
 CLUSTER_IPFS_PROXY_API_URL = ""
 CLUSTER_ADDRS = ""
 DATABASE_URL = "http://localhost:8000"
+
+[env.ze]
+type = "webpack"
+name = "nft-storage-ze"
+account_id = "9357c50891f315d3c8a84e87ee47f740"
+workers_dev = true
+usage_model = ""
+route = ""
+zone_id = ""
+kv_namespaces = [
+    { binding = "USERS", preview_id = "ae5de1d8a7b24a7380bcf152d0a34405", id = "ae5de1d8a7b24a7380bcf152d0a34405" },
+    { binding = "NFTS", preview_id = "e151334b3ca14ba381a5eec9c0143e94", id = "e151334b3ca14ba381a5eec9c0143e94" },
+    { binding = "NFTS_IDX", preview_id = "8eb6bf97cfa243ab9bebe5dcb61233dc", id = "8eb6bf97cfa243ab9bebe5dcb61233dc" },
+    { binding = "DEALS", preview_id = "653d8a2c419843f18b9092fb2cc090dd", id = "653d8a2c419843f18b9092fb2cc090dd" },
+    { binding = "METRICS", preview_id = "dae53a615e7741d2a5d89a601e5b4c8d", id = "dae53a615e7741d2a5d89a601e5b4c8d" },
+    { binding = "PINS", preview_id = "a2fe6ea3f15d42deb208d482be50cc01", id = "a2fe6ea3f15d42deb208d482be50cc01" },
+    { binding = "FOLLOWUPS", preview_id = "6b8fd71bbbd241428585a91fb540519d", id = "6b8fd71bbbd241428585a91fb540519d" },
+    { binding = "PINATA_QUEUE", preview_id = "fba21c792337417e85296320a0ae58e4", id = "fba21c792337417e85296320a0ae58e4" }
+]
+
+
+[env.ze.vars]
+ENV = "dev"
+DEBUG = "*"
+CLUSTER_API_URL = "https://ze-cluster-api-nft-storage.loca.lt"
+CLUSTER_IPFS_PROXY_API_URL = "https://ze-ipfs-proxy-api-nft-storage.loca.lt"
+CLUSTER_ADDRS = ""
+DATABASE_URL = "http://localhost:8000"

packages/website/components/button.js

@@ -1,8 +1,16 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Link from 'next/link'
 import clsx from 'clsx'
 
+import countly from '../lib/countly'
+
 /**
+ * @typedef {Object} TrackingProp
+ * @prop {string} ui UI section id. One of countly.ui.
+ * @prop {string} [action] Action id. used to uniquely identify an action within a ui section.
+ * @prop {string} [event] Custom event name to be used instead of the default CTA_LINK_CLICK.
+ * @prop {Object} [data] Extra data to send to countly.
+ *
  * @typedef {Object} ButtonProps
  * @prop {string} [id]
  * @prop {string} [wrapperClassName]
@@ -13,6 +21,8 @@ import clsx from 'clsx'
  * @prop {React.ReactChildren | string | React.ReactElement} children
  * @prop {boolean} [disabled]
  * @prop {boolean} [small]
+ * @prop {string} [id]
+ * @prop {TrackingProp} [tracking] Tracking data to send to countly on button click
  */
 
 /**
@@ -30,7 +40,25 @@ export default function Button({
   children,
   disabled = false,
   small = false,
+  tracking,
 }) {
+  const onClickHandler = useCallback(
+    (event) => {
+      tracking &&
+        countly.trackEvent(tracking.event || countly.events.CTA_LINK_CLICK, {
+          ui: tracking.ui,
+          action: tracking.action,
+          link:
+            typeof href === 'string'
+              ? href
+              : (href?.pathname || '') + (href?.hash || ''),
+          ...(tracking.data || {}),
+        })
+      onClick && onClick(event)
+    },
+    [tracking, onClick, href]
+  )
+
   wrapperClassName = clsx(
     'dib',
     'bg-nsgray',
@@ -59,7 +87,7 @@ export default function Button({
         className
       )}
       style={btnStyle}
-      onClick={onClick}
+      onClick={onClickHandler}
       disabled={disabled}
       id={id}
     >

packages/website/components/footer.js

@@ -1,5 +1,16 @@
+import { useCallback } from 'react'
 import Link from 'next/link'
+
+import countly from '../lib/countly'
+
 export default function Footer() {
+  const onLinkClick = useCallback((event) => {
+    countly.trackCustomLinkClick(
+      countly.events.LINK_CLICK_FOOTER,
+      event.currentTarget
+    )
+  }, [])
+
   return (
     <footer className="bg-black db db-m flex-ns items-center justify-between f7 white pv3 ph5">
       <div>
@@ -8,6 +19,7 @@ export default function Footer() {
           <a
             href="https://protocol.ai/"
             className="nspink underline-hover no-underline"
+            onClick={onLinkClick}
           >
             Protocol Labs
           </a>
@@ -20,14 +32,18 @@ export default function Footer() {
             className="nspink no-underline underline-hover v-mid"
             target="_blank"
             rel="noreferrer"
+            onClick={onLinkClick}
           >
             Status
           </a>
         </span>
         <Dot />
         <span className="db db-m dib-ns mv3">
           <Link href="/terms">
-            <a className="nspink no-underline underline-hover v-mid">
+            <a
+              className="nspink no-underline underline-hover v-mid"
+              onClick={onLinkClick}
+            >
               Terms of Service
             </a>
           </Link>
@@ -38,6 +54,7 @@ export default function Footer() {
           <a
             href="https://github.com/ipfs-shipyard/nft.storage/issues/new"
             className="nspink underline-hover no-underline"
+            onClick={onLinkClick}
           >
             Open an Issue
           </a>

packages/website/components/hero.js

@@ -1,3 +1,4 @@
+import countly from '../lib/countly'
 import Button from './button.js'
 
 const crossStyle = {
@@ -73,6 +74,7 @@ export default function Hero() {
             <Button
               wrapperClassName="mh3 mb3"
               href="#getting-started"
+              tracking={{ ui: countly.ui.HOME_HERO, action: 'Get Started' }}
             >
               Get Started
             </Button>

packages/website/components/navbar.js

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState, useCallback } from 'react'
 import Router, { useRouter } from 'next/router'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -8,6 +8,7 @@ import { useResizeObserver } from '../hooks/resize-observer'
 import Button from './button.js'
 import Cross from '../icons/cross'
 import Hamburger from '../icons/hamburger'
+import countly from '../lib/countly'
 
 /**
  * Navbar Component
@@ -60,18 +61,30 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
     ],
     [user, isSmallVariant, version]
   )
+  const onLinkClick = useCallback((event) => {
+    countly.trackCustomLinkClick(
+      countly.events.LINK_CLICK_NAVBAR,
+      event.currentTarget
+    )
+  }, [])
 
-  async function logout() {
-    await getMagic().user.logout()
-    await queryClient.invalidateQueries('magic-user')
-    Router.push({ pathname: '/', query: version ? { version } : null })
-  }
-
-  const toggleMenu = () => {
+  const toggleMenu = useCallback(() => {
     isMenuOpen
       ? document.body.classList.remove('overflow-hidden')
       : document.body.classList.add('overflow-hidden')
     setMenuOpen(!isMenuOpen)
+  }, [isMenuOpen])
+
+  const onMobileLinkClick = useCallback((event) => {
+    onLinkClick(event)
+
+    toggleMenu()
+  }, [onLinkClick, toggleMenu])
+
+  async function logout() {
+    await getMagic().user.logout()
+    await queryClient.invalidateQueries('magic-user')
+    Router.push({ pathname: '/', query: version ? { version } : null })
   }
 
   return (
@@ -92,7 +105,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
           </div>
         )}
         <Link href={{ pathname: '/', query: version ? { version } : null }}>
-          <a className="no-underline v-mid">
+          <a className="no-underline v-mid" onClick={onLinkClick}>
             <img
               src="/images/logo-nft.storage-sm.png"
               width="160"
@@ -114,6 +127,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
                       'f4 black no-underline underline-hover v-mid',
                       item.spacing
                     )}
+                    onClick={onLinkClick}
                   >
                     {item.name}
                   </a>
@@ -125,7 +139,15 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
             ))}
           <div className="mb1">
             {user ? (
-              <Button onClick={logout} id="logout">
+              <Button
+                onClick={logout}
+                id="logout"
+                tracking={{
+                  event: countly.events.LOGOUT_CLICK,
+                  ui: countly.ui.NAVBAR,
+                  action: 'Logout',
+                }}
+              >
                 Logout
               </Button>
             ) : (
@@ -135,6 +157,10 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
                   query: version ? { version } : null,
                 }}
                 id="login"
+                tracking={{
+                  ui: countly.ui.NAVBAR,
+                  action: 'Login',
+                }}
               >
                 Login
               </Button>
@@ -177,15 +203,15 @@ export default function Navbar({ bgColor = 'bg-nsorange', user }) {
                   item.spacing,
                   bgColor === 'bg-nsgreen' ? 'black' : 'white'
                 )}
-                onClick={() => toggleMenu()}
+                onClick={onMobileLinkClick}
               >
                 {item.name}
               </a>
             </Link>
           ))}
         </div>
         <div className="flex flex-column items-center mb4">
-          <Button className="flex justify-center" onClick={() => toggleMenu()}>
+          <Button className="flex justify-center" onClick={toggleMenu}>
             <Cross fill="currentColor" />
           </Button>
         </div>