[SALAD-23116] WebApp - Connect demand alerts page

packages/web-app/src/MobileRoutes.tsx

@@ -5,7 +5,7 @@ import { MobilePageNotFound } from './components'
 import { FeatureFlags, useFeatureManager } from './FeatureManager'
 import { MobileAccountSummaryContainer } from './modules/account-views-mobile'
 import { BackupCodesPageContainer } from './modules/backup-codes/BackupCodesPageContainer'
-import { DemandAlertsPageContainer } from './modules/demand-alerts-views'
+import { DemandAlertsPage } from './modules/demand-alerts-views'
 import { DemandMonitorPageContainer } from './modules/demand-monitor-views'
 import { MobileEarningSummaryContainer } from './modules/earn-views-mobile'
 import { PasskeyDeletePageContainer } from './modules/passkey-delete'
@@ -25,9 +25,7 @@ const _Routes = ({ location }: RouteComponentProps) => {
         {isDemandMonitorFeatureFlagEnabled && (
           <Route path="/earn/demand" exact component={DemandMonitorPageContainer} />
         )}
-        {isDemandNotificationsFeatureFlagEnabled && (
-          <Route path="/account/alerts" exact component={DemandAlertsPageContainer} />
-        )}
+        {isDemandNotificationsFeatureFlagEnabled && <Route path="/account/alerts" exact component={DemandAlertsPage} />}
         <Route path="/account/summary" component={MobileAccountSummaryContainer} />
         <Route exact path="/rewards/:id" component={RewardDetailsContainer} />
         <Redirect exact from="/account/summary" to="/account/summary" />

packages/web-app/src/Store.tsx

@@ -10,6 +10,7 @@ import { BackupCodesStore } from './modules/backup-codes'
 import { BalanceStore } from './modules/balance'
 import { BonusStore } from './modules/bonus'
 import { RefreshService } from './modules/data-refresh'
+import { DemandAlertsStore } from './modules/demand-alerts-views/DemandAlertsStore'
 import { DemandMonitorStore } from './modules/demand-monitor-views/DemandMonitorStore'
 import { EngagementStore } from './modules/engagement'
 import { ErrorBoundaryStore } from './modules/error-boundary'
@@ -75,6 +76,7 @@ export class RootStore {
   public readonly passkey: PasskeyStore
   public readonly backupCodes: BackupCodesStore
   public readonly demandMonitor: DemandMonitorStore
+  public readonly demandAlerts: DemandAlertsStore
 
   constructor(axios: AxiosInstance, private readonly featureManager: FeatureManager) {
     this.routing = new RouterStore()
@@ -103,6 +105,7 @@ export class RootStore {
     this.startButtonUI = new StartButtonUIStore(this)
     this.errorBoundary = new ErrorBoundaryStore()
     this.demandMonitor = new DemandMonitorStore(axios)
+    this.demandAlerts = new DemandAlertsStore(axios)
 
     // Pass AnalyticsStore to FeatureManager
     featureManager.setAnalyticsStore(this.analytics)

packages/web-app/src/components/SettingsPage.tsx

@@ -9,7 +9,7 @@ import { AccountContainer } from '../modules/account-views/account-views'
 import { ReferralSettingsContainer } from '../modules/account-views/referral-views'
 import { AchievementPageContainer } from '../modules/achievements-views'
 import { BonusPageContainer } from '../modules/bonus-views'
-import { DemandAlertsPageContainer } from '../modules/demand-alerts-views'
+import { DemandAlertsPage } from '../modules/demand-alerts-views'
 import { IconArrowLeft } from '../modules/reward-views/components/assets'
 import { styles } from './SettingsPage.styles'
 
@@ -74,7 +74,7 @@ const _Settings = ({ appBuild, classes, menuButtons, isUserReferralsEnabled, onC
     isDemandNotificationsFeatureFlagEnabled && {
       url: '/account/alerts',
       text: 'Demand Alerts',
-      component: DemandAlertsPageContainer,
+      component: DemandAlertsPage,
     },
   ].filter((menuItem) => menuItem) as MenuItem[]
 

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsList.tsx

@@ -1,11 +1,14 @@
 import { Button, Text } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
-import type { FunctionComponent } from 'react'
+import { useEffect, useState, type FunctionComponent } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
+import { ErrorText } from '../../../../components'
 import type { SaladTheme } from '../../../../SaladTheme'
 import { DefaultTheme } from '../../../../SaladTheme'
-import { mockedExistingAlertsList } from '../../mocks'
+import { demandScenario } from '../../constants'
+import type { DemandedSubscription } from '../../DemandAlertsStore'
+import { UnsubscribeFromDemandAlertStatus } from '../../DemandAlertsStore'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   container: {
@@ -27,32 +30,85 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  loadingSpinnerWrap: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props extends WithStyles<typeof styles> {
+  demandAlertSubscriptionList?: DemandedSubscription[]
+  fetchDemandAlertSubscriptionList: () => void
+  setUnsubscribeFromDemandAlertStatus: (unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus) => void
+  unsubscribeFromDemandAlert: (subscriptionId: string) => void
+  unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus
+}
+
+const _DemandAlertsList: FunctionComponent<Props> = ({
+  classes,
+  demandAlertSubscriptionList,
+  fetchDemandAlertSubscriptionList,
+  setUnsubscribeFromDemandAlertStatus,
+  unsubscribeFromDemandAlert,
+  unsubscribeFromDemandAlertStatus,
+}) => {
+  const [currentDemandedSubscriptionId, setCurrentDemandedSubscriptionId] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchDemandAlertSubscriptionList()
+    return () => {
+      setUnsubscribeFromDemandAlertStatus(UnsubscribeFromDemandAlertStatus.UNKNOWN)
+    }
+  }, [fetchDemandAlertSubscriptionList, setUnsubscribeFromDemandAlertStatus])
+
+  const handleCancelSubscription = (demandedSubscriptionId: string) => {
+    unsubscribeFromDemandAlert(demandedSubscriptionId)
+    setCurrentDemandedSubscriptionId(demandedSubscriptionId)
+  }
 
-const _DemandAlertsList: FunctionComponent<Props> = ({ classes }) => {
   return (
-    <div className={classes.container}>
-      <Text variant="baseXL">Manage your existing alerts</Text>
-      <Text variant="baseS">You will get alerted on the following scenarios:</Text>
-      <div className={classes.existingAlertsContainer}>
-        {mockedExistingAlertsList.map((existingAlert) => (
-          <div className={classes.alertContainer}>
-            <Text variant="baseS">
-              {existingAlert.gpu} @ {existingAlert.demandScenario}
-            </Text>
-            <Button
-              onClick={() => {}}
-              outlineColor={DefaultTheme.white}
-              label="Unsubscribe"
-              variant="primary"
-              size="small"
-            />
-          </div>
-        ))}
+    demandAlertSubscriptionList &&
+    demandAlertSubscriptionList?.length > 0 && (
+      <div className={classes.container}>
+        <Text variant="baseXL">Manage your existing alerts</Text>
+        <Text variant="baseS">You will get alerted on the following scenarios:</Text>
+        <div className={classes.existingAlertsContainer}>
+          {demandAlertSubscriptionList.map((demandAlertSubscription) => {
+            const isCurrentDemandedSubscriptionId = currentDemandedSubscriptionId === demandAlertSubscription.id
+
+            const withCancelSubscriptionSubmitting =
+              unsubscribeFromDemandAlertStatus === UnsubscribeFromDemandAlertStatus.SUBMITTING &&
+              isCurrentDemandedSubscriptionId
+            const withCancelSubscriptionFailure =
+              unsubscribeFromDemandAlertStatus === UnsubscribeFromDemandAlertStatus.FAILURE &&
+              isCurrentDemandedSubscriptionId
+            const utilizationPctLabel = demandScenario[demandAlertSubscription.utilizationPct]?.label
+
+            return (
+              <>
+                <div className={classes.alertContainer}>
+                  <Text variant="baseS">
+                    {demandAlertSubscription.gpuDisplayName} @ {utilizationPctLabel}
+                  </Text>
+                  <Button
+                    onClick={() => handleCancelSubscription(demandAlertSubscription.id)}
+                    isLoading={withCancelSubscriptionSubmitting}
+                    outlineColor={DefaultTheme.white}
+                    label="Unsubscribe"
+                    variant="primary"
+                    size="small"
+                  />
+                </div>
+                {withCancelSubscriptionFailure && <ErrorText>Something went wrong. Please try again later</ErrorText>}
+              </>
+            )
+          })}
+        </div>
       </div>
-    </div>
+    )
   )
 }
 

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsListContainer.tsx

@@ -0,0 +1,13 @@
+import { connect } from '../../../../connect'
+import type { RootStore } from '../../../../Store'
+import { DemandAlertsList } from './DemandAlertsList'
+
+const mapStoreToProps = (store: RootStore): any => ({
+  demandAlertSubscriptionList: store.demandAlerts.demandAlertSubscriptionList,
+  fetchDemandAlertSubscriptionList: store.demandAlerts.fetchDemandAlertSubscriptionList,
+  setUnsubscribeFromDemandAlertStatus: store.demandAlerts.setUnsubscribeFromDemandAlertStatus,
+  unsubscribeFromDemandAlert: store.demandAlerts.unsubscribeFromDemandAlert,
+  unsubscribeFromDemandAlertStatus: store.demandAlerts.unsubscribeFromDemandAlertStatus,
+})
+
+export const DemandAlertsListContainer = connect(mapStoreToProps, DemandAlertsList)

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/index.ts

@@ -1 +1 @@
-export * from './DemandAlertsList'
+export * from './DemandAlertsListContainer'

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsPage.tsx

@@ -6,8 +6,8 @@ import { useMediaQuery } from 'react-responsive'
 import { Head, mobileSize, Scrollbar } from '../../../components'
 import type { SaladTheme } from '../../../SaladTheme'
 import { withLogin } from '../../auth-views'
-import { DemandAlertsList } from './DemandAlertsList'
-import { DemandAlertsSetUp } from './DemandAlertsSetUp'
+import { DemandAlertsListContainer } from './DemandAlertsList'
+import { DemandAlertsSetUpContainer } from './DemandAlertsSetUp'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   page: {
@@ -43,8 +43,8 @@ const _DemandAlertsPage = ({ classes }: Props) => {
           specific payout tier. When that scenario arrives we will notify you through email and an in-app message.
         </Text>
         <div className={classes.demandContentContainer}>
-          <DemandAlertsSetUp />
-          <DemandAlertsList />
+          <DemandAlertsSetUpContainer />
+          <DemandAlertsListContainer />
         </div>
       </Layout>
     </div>

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUp.tsx

@@ -1,11 +1,16 @@
-import { Button, Text } from '@saladtechnologies/garden-components'
+import { Button, LoadingSpinner, Text } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
-import type { FunctionComponent } from 'react'
+import { useEffect, useState, type FunctionComponent } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { DefaultTheme } from '../../../../SaladTheme'
+import { ErrorText } from '../../../../components'
+import type { DropdownOption } from '../../../../components/Dropdown'
 import { DropdownLight } from '../../../../components/Dropdown'
-import { demandScenarios, mockedGpuNames } from '../../constants'
+import { DefaultTheme } from '../../../../SaladTheme'
+import type { DemandedHardwarePerformance } from '../../../demand-monitor-views/DemandMonitorStore'
+import { demandScenario } from '../../constants'
+import { SubscribeToDemandAlertStatus } from '../../DemandAlertsStore'
+import { getCreateNewSubscriptionErrorText } from './utils'
 
 const styles: () => Record<string, CSS.Properties> = () => ({
   container: {
@@ -26,26 +31,101 @@ const styles: () => Record<string, CSS.Properties> = () => ({
     flexDirection: 'column',
     gap: '5px',
   },
+  loadingSpinnerWrap: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props extends WithStyles<typeof styles> {
+  demandedHardwarePerformanceList?: DemandedHardwarePerformance[]
+  fetchDemandedHardwarePerformanceList: () => void
+  setSubscribeToDemandAlertStatus: (subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus) => void
+  subscribeToDemandAlert: (gpuName: string, utilizationPct: number) => void
+  subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus
+}
+
+const _DemandAlertsSetUp: FunctionComponent<Props> = ({
+  classes,
+  demandedHardwarePerformanceList,
+  fetchDemandedHardwarePerformanceList,
+  setSubscribeToDemandAlertStatus,
+  subscribeToDemandAlert,
+  subscribeToDemandAlertStatus,
+}) => {
+  const createNewSubscriptionErrorText = getCreateNewSubscriptionErrorText(subscribeToDemandAlertStatus)
+
+  const demandHardwareOptions = demandedHardwarePerformanceList?.map((demandHardware) => ({
+    label: demandHardware.displayName,
+    value: demandHardware.name,
+  }))
+
+  const initialSelectedDemandHardwareValue = demandHardwareOptions?.[0]?.value
+  const initialSelectedDemandScenarioValue = demandScenario[0]?.value
+
+  const [selectedDemandHardwareValue, setSelectedDemandHardwareValue] = useState<string | undefined>(
+    initialSelectedDemandHardwareValue,
+  )
+  const [selectedDemandScenarioValue, setSelectedDemandScenarioValue] = useState<string | undefined>(
+    initialSelectedDemandScenarioValue,
+  )
+
+  useEffect(() => {
+    fetchDemandedHardwarePerformanceList()
+    setSelectedDemandHardwareValue(initialSelectedDemandHardwareValue)
+    return () => {
+      setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+    }
+  }, [initialSelectedDemandHardwareValue, fetchDemandedHardwarePerformanceList, setSubscribeToDemandAlertStatus])
+
+  const handleDemandHardwareOptionChange = (demandHardwareOption: DropdownOption) => {
+    setSelectedDemandHardwareValue(demandHardwareOption.value)
+    setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+  }
+
+  const handleDemandScenarioOptionChange = (demandScenarioOption: DropdownOption) => {
+    setSelectedDemandScenarioValue(demandScenarioOption.value)
+    setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+  }
+
+  const handleAddAlert = () => {
+    if (selectedDemandHardwareValue && selectedDemandScenarioValue) {
+      subscribeToDemandAlert(selectedDemandHardwareValue, Number(selectedDemandScenarioValue))
+    }
+  }
 
-const _DemandAlertsSetUp: FunctionComponent<Props> = ({ classes }) => {
   return (
     <div className={classes.container}>
       <Text variant="baseXL">Set up an alert</Text>
       <Text variant="baseS">Select the GPU and the demand scenario you wish to get notified for.</Text>
-      <div className={classes.dropdownContainer}>
-        <div className={classes.dropdownContentContainer}>
-          <Text variant="baseS">GPU</Text>
-          <DropdownLight options={mockedGpuNames} />
-        </div>
-        <div className={classes.dropdownContentContainer}>
-          <Text variant="baseS">Demand Scenario</Text>
-          <DropdownLight options={demandScenarios} />
+      {demandHardwareOptions ? (
+        <>
+          <div className={classes.dropdownContainer}>
+            <div className={classes.dropdownContentContainer}>
+              <Text variant="baseS">GPU</Text>
+              <DropdownLight options={demandHardwareOptions} onChange={handleDemandHardwareOptionChange} />
+            </div>
+            <div className={classes.dropdownContentContainer}>
+              <Text variant="baseS">Demand Scenario</Text>
+              <DropdownLight options={Object.values(demandScenario)} onChange={handleDemandScenarioOptionChange} />
+            </div>
+          </div>
+          <Button
+            isLoading={subscribeToDemandAlertStatus === SubscribeToDemandAlertStatus.SUBMITTING}
+            onClick={handleAddAlert}
+            label="Add Alert"
+            outlineColor={DefaultTheme.darkBlue}
+          />
+          {createNewSubscriptionErrorText && <ErrorText>{createNewSubscriptionErrorText}</ErrorText>}
+        </>
+      ) : (
+        <div className={classes.loadingSpinnerWrap}>
+          <LoadingSpinner variant="light" size={100} />
         </div>
-      </div>
-      <Button onClick={() => {}} label="Add Alert" outlineColor={DefaultTheme.darkBlue} />
+      )}
     </div>
   )
 }

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUpContainer.tsx

@@ -0,0 +1,13 @@
+import { connect } from '../../../../connect'
+import type { RootStore } from '../../../../Store'
+import { DemandAlertsSetUp } from './DemandAlertsSetUp'
+
+const mapStoreToProps = (store: RootStore): any => ({
+  demandedHardwarePerformanceList: store.demandMonitor.demandedHardwarePerformanceList,
+  fetchDemandedHardwarePerformanceList: store.demandMonitor.fetchDemandedHardwarePerformanceList,
+  setSubscribeToDemandAlertStatus: store.demandAlerts.setSubscribeToDemandAlertStatus,
+  subscribeToDemandAlert: store.demandAlerts.subscribeToDemandAlert,
+  subscribeToDemandAlertStatus: store.demandAlerts.subscribeToDemandAlertStatus,
+})
+
+export const DemandAlertsSetUpContainer = connect(mapStoreToProps, DemandAlertsSetUp)

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/index.ts

@@ -1 +1 @@
-export * from './DemandAlertsSetUp'
+export * from './DemandAlertsSetUpContainer'

packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/utils.ts

@@ -0,0 +1,16 @@
+import { SubscribeToDemandAlertStatus } from '../../DemandAlertsStore'
+
+export const getCreateNewSubscriptionErrorText = (
+  subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus,
+): string | null => {
+  switch (subscribeToDemandAlertStatus) {
+    case SubscribeToDemandAlertStatus.FAILURE:
+      return 'Something went wrong. Please try again later'
+    case SubscribeToDemandAlertStatus.ALREADY_EXISTS:
+      return 'An alert with this GPU and Demand Scenario already exists.'
+    case SubscribeToDemandAlertStatus.INVALID_GPU:
+      return 'The GPU configuration provided is invalid.'
+    default:
+      return null
+  }
+}