Notifications frontend

src/Wrapper.js

@@ -318,6 +318,7 @@ class Wrapper extends React.PureComponent {
         <GlobalPreferences
           locator={locator}
           wrapper={wrapper}
+          apps={apps}
           onScreenChange={this.openPreferences}
           onClose={this.closePreferences}
         />

src/components/GlobalPreferences/GlobalPreferences.js

@@ -15,7 +15,7 @@ import {
   useViewport,
 } from '@aragon/ui'
 import { Transition, animated } from 'react-spring'
-import { AragonType } from '../../prop-types'
+import { AragonType, AppType } from '../../prop-types'
 import { useEsc } from '../../hooks'
 import Network from './Network/Network'
 import Notifications from './Notifications/Notifications'
@@ -33,13 +33,20 @@ const SECTIONS = new Map([
 const PATHS = Array.from(SECTIONS.keys())
 const VALUES = Array.from(SECTIONS.values())
 
+const CUSTOM_LABELS_INDEX = 0
+const NETWORK_INDEX = 1
+const NOTIFICATIONS_INDEX = 2
+const HELP_AND_FEEDBACK_INDEX = 3
+
 function GlobalPreferences({
+  apps,
   compact,
   locator,
   onClose,
   onNavigation,
   onScreenChange,
   sectionIndex,
+  subsection,
   wrapper,
 }) {
   const toast = useToast()
@@ -97,12 +104,20 @@ function GlobalPreferences({
             selected={sectionIndex}
           />
           <main>
-            {sectionIndex === 0 && (
+            {sectionIndex === CUSTOM_LABELS_INDEX && (
               <CustomLabels dao={dao} wrapper={wrapper} locator={locator} />
             )}
-            {sectionIndex === 1 && <Network wrapper={wrapper} />}
-            {sectionIndex === 2 && <Notifications />}
-            {sectionIndex === 3 && <HelpAndFeedback />}
+            {sectionIndex === NETWORK_INDEX && <Network wrapper={wrapper} />}
+            {sectionIndex === NOTIFICATIONS_INDEX && (
+              <Notifications
+                apps={apps}
+                dao={dao}
+                subsection={subsection}
+                handleNavigation={onNavigation}
+                navigationIndex={2}
+              />
+            )}
+            {sectionIndex === HELP_AND_FEEDBACK_INDEX && <HelpAndFeedback />}
           </main>
         </React.Fragment>
       )}
@@ -111,18 +126,20 @@ function GlobalPreferences({
 }
 
 GlobalPreferences.propTypes = {
+  apps: PropTypes.arrayOf(AppType).isRequired,
   compact: PropTypes.bool,
   locator: PropTypes.object,
   onClose: PropTypes.func.isRequired,
   onNavigation: PropTypes.func.isRequired,
   onScreenChange: PropTypes.func.isRequired,
   sectionIndex: PropTypes.number,
+  subsection: PropTypes.string,
   wrapper: AragonType,
 }
 
 function useGlobalPreferences({ locator = {}, onScreenChange }) {
   const [sectionIndex, setSectionIndex] = useState(null)
-
+  const [subsection, setSubsection] = useState(null)
   const handleNavigation = useCallback(
     index => {
       onScreenChange(PATHS[index])
@@ -132,14 +149,21 @@ function useGlobalPreferences({ locator = {}, onScreenChange }) {
 
   useEffect(() => {
     const { preferences: { path = '' } = {} } = locator
-    if (!path || !SECTIONS.has(path)) {
+    if (!path) {
       setSectionIndex(null)
       return
     }
-    setSectionIndex(PATHS.findIndex(item => item === path))
-  }, [locator])
+    const index = PATHS.findIndex(item => path.startsWith(item))
+    setSectionIndex(index === -1 ? null : index)
+
+    // subsection is the part after the PATH, e.g. for `?p=/notifications/verify` - `/verify`
+    const subsection = index !== -1 ? path.substring(PATHS[index].length) : null
+
+    setSubsection(subsection)
+    // Does the current path start with any of the declared route paths
+  }, [locator, sectionIndex])
 
-  return { sectionIndex, handleNavigation }
+  return { sectionIndex, subsection, handleNavigation }
 }
 
 function Close({ compact, onClick }) {
@@ -176,7 +200,7 @@ Close.propTypes = {
 }
 
 function AnimatedGlobalPreferences(props) {
-  const { sectionIndex, handleNavigation } = useGlobalPreferences({
+  const { sectionIndex, subsection, handleNavigation } = useGlobalPreferences({
     locator: props.locator,
     onScreenChange: props.onScreenChange,
   })
@@ -218,6 +242,7 @@ function AnimatedGlobalPreferences(props) {
               {...props}
               compact={compact}
               sectionIndex={sectionIndex}
+              subsection={subsection}
               onNavigation={handleNavigation}
             />
           </AnimatedWrap>

src/components/GlobalPreferences/Notifications/ManageNotifications.js

@@ -0,0 +1,195 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import { AppType } from '../../../prop-types'
+import {
+  Box,
+  Button,
+  GU,
+  IconTrash,
+  IconCheck,
+  LoadingRing,
+  useTheme,
+  Split,
+} from '@aragon/ui'
+import { getSubscriptions, deleteAccount } from './notification-service-api'
+import {
+  NOTIFICATION_SERVICE_TOKEN_KEY,
+  NOTIFICATION_SERVICE_EMAIL_KEY,
+} from './constants'
+import SubscriptionsForm from './SubscriptionsForm'
+import SubscriptionsTable from './SubscriptionsTable'
+import { DeleteAccountConfirmationModal } from './NotificationModals'
+
+export default function ManageNotifications({
+  apps,
+  dao,
+  email,
+  onLogout,
+  token,
+  onServiceUnavailable,
+}) {
+  const [apiError, setApiError] = useState(null)
+  const [isFetching, setIsFetching] = useState(true)
+  const [subscriptions, setSubscriptions] = useState([])
+
+  const fetchSubscriptions = useCallback(() => {
+    setIsFetching(true)
+    return getSubscriptions(token)
+      .then(subscriptions => {
+        setApiError(null) // reset the error after successfully fetching
+        setSubscriptions(subscriptions)
+        setIsFetching(false)
+        return subscriptions
+      })
+      .catch(error => {
+        setIsFetching(false)
+        setApiError(error)
+      })
+  }, [token, setSubscriptions, setIsFetching, setApiError])
+
+  useEffect(() => {
+    if (!token) {
+      return
+    }
+    fetchSubscriptions()
+  }, [fetchSubscriptions, token])
+
+  useEffect(() => {
+    // Effect for handling api errors
+    if (!apiError) {
+      return
+    }
+    if (apiError instanceof TypeError) {
+      onServiceUnavailable()
+    } else {
+      console.error('Unhandled API error:', apiError)
+    }
+  }, [apiError, onServiceUnavailable])
+
+  return (
+    <React.Fragment>
+      <Split
+        primary={
+          <SubscriptionsForm
+            onApiError={setApiError}
+            fetchSubscriptions={fetchSubscriptions}
+            dao={dao}
+            apps={apps}
+            token={token}
+            isFetchingSubscriptions={isFetching}
+            subscriptions={subscriptions}
+          />
+        }
+        secondary={
+          <React.Fragment>
+            <Box heading="Signed In With Email">
+              {email}
+              <Button
+                css={`
+                  margin-top: ${2 * GU}px;
+                `}
+                wide
+                onClick={onLogout}
+              >
+                Sign Out
+              </Button>
+            </Box>
+            <DeleteAccount
+              onApiError={setApiError}
+              token={token}
+              onLogout={onLogout}
+            />
+          </React.Fragment>
+        }
+      />
+      {(apiError || subscriptions.length > 0) && (
+        <SubscriptionsTable
+          apps={apps}
+          apiError={apiError}
+          onApiError={setApiError}
+          authToken={token}
+          subscriptions={subscriptions}
+          fetchSubscriptions={fetchSubscriptions}
+          isFetchingSubscriptions={isFetching}
+        />
+      )}
+    </React.Fragment>
+  )
+}
+
+ManageNotifications.propTypes = {
+  apps: PropTypes.arrayOf(AppType).isRequired,
+  dao: PropTypes.string,
+  email: PropTypes.string,
+  onLogout: PropTypes.func,
+  onServiceUnavailable: PropTypes.func,
+  token: PropTypes.string,
+}
+
+function DeleteAccount({ token, onLogout, onApiError }) {
+  const [isFetching, setIsFetching] = useState(false)
+  const [isAccountDeleted, setIsAccountDeleted] = useState(false)
+  const theme = useTheme()
+
+  const handleDeleteAccount = useCallback(async () => {
+    try {
+      setIsFetching(true)
+      await deleteAccount(token)
+      localStorage.removeItem(NOTIFICATION_SERVICE_TOKEN_KEY)
+      localStorage.removeItem(NOTIFICATION_SERVICE_EMAIL_KEY)
+      setIsAccountDeleted(true)
+      onLogout()
+    } catch (e) {
+      onApiError(e)
+    }
+    setIsFetching(false)
+  }, [token, onLogout, onApiError])
+
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const onClick = useCallback(() => {
+    setIsModalOpen(true)
+  }, [setIsModalOpen])
+
+  const onCloseModal = useCallback(() => {
+    setIsModalOpen(false)
+  }, [setIsModalOpen])
+
+  const onModalConfirm = useCallback(() => {
+    setIsModalOpen(false)
+    handleDeleteAccount()
+  }, [handleDeleteAccount, setIsModalOpen])
+
+  return (
+    <React.Fragment>
+      <DeleteAccountConfirmationModal
+        visible={isModalOpen}
+        onConfirm={onModalConfirm}
+        onClose={onCloseModal}
+      />
+      <Box heading="Email Notification Data">
+        <Button wide onClick={onClick}>
+          {isFetching ? (
+            <LoadingRing />
+          ) : isAccountDeleted ? (
+            <IconCheck />
+          ) : (
+            <IconTrash
+              css={`
+                color: ${theme.negative};
+                margin-right: ${GU}px;
+              `}
+            />
+          )}
+          Delete your email
+        </Button>
+      </Box>
+    </React.Fragment>
+  )
+}
+
+DeleteAccount.propTypes = {
+  onApiError: PropTypes.func,
+  onLogout: PropTypes.func,
+  token: PropTypes.string,
+}