Priority notifications (#4798)

* new settings screen

* bring back the spinner

* add experimental language

* fix typo, change leading

* integrate priority notifications API

* update package

* use refetch instead of invalidateQueries

* fix read-after-write issue by polling for update

* add spinner for initial load

* rm onmutate, it's overcomplicated

* set error state eagerly

* Change language in description

Co-authored-by: Hailey <me@haileyok.com>

* prettier

* add `Toggle.Platform`

* extract out mutation hook + error state

* rm useless cache mutation

* disambiguate isError and isPending

* rm unused isError

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 94 insertions, 0 deletions

diff --git a/src/view/screens/NotificationsSettings.tsx b/src/view/screens/NotificationsSettings.tsx
new file mode 100644
index 000000000..2716a07f9
--- /dev/null
+++ b/src/view/screens/NotificationsSettings.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import {View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
+import {useNotificationsSettingsMutation} from '#/state/queries/notifications/settings'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a, useTheme} from '#/alf'
+import {Error} from '#/components/Error'
+import * as Toggle from '#/components/forms/Toggle'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+type Props = NativeStackScreenProps<AllNavigatorParams, 'NotificationsSettings'>
+export function NotificationsSettingsScreen({}: Props) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {data, isError: isQueryError, refetch} = useNotificationFeedQuery()
+  const serverPriority = data?.pages.at(0)?.priority
+
+  const {
+    mutate: onChangePriority,
+    isPending: isMutationPending,
+    variables,
+  } = useNotificationsSettingsMutation()
+
+  const priority = isMutationPending
+    ? variables[0] === 'enabled'
+    : serverPriority
+
+  return (
+    <CenteredView style={a.flex_1} sideBorders>
+      <ViewHeader
+        title={_(msg`Notification Settings`)}
+        showOnDesktop
+        showBorder
+      />
+      {isQueryError ? (
+        <Error
+          title={_(msg`Oops!`)}
+          message={_(msg`Something went wrong!`)}
+          onRetry={refetch}
+          sideBorders={false}
+        />
+      ) : (
+        <View style={[a.p_lg, a.gap_md]}>
+          <Text style={[a.text_lg, a.font_bold]}>
+            <FontAwesomeIcon icon="flask" style={t.atoms.text} />{' '}
+            <Trans>Notification filters</Trans>
+          </Text>
+          <Toggle.Group
+            label={_(msg`Priority notifications`)}
+            type="checkbox"
+            values={priority ? ['enabled'] : []}
+            onChange={onChangePriority}
+            disabled={typeof priority !== 'boolean' || isMutationPending}>
+            <View>
+              <Toggle.Item
+                name="enabled"
+                label={_(msg`Enable priority notifications`)}
+                style={[a.justify_between, a.py_sm]}>
+                <Toggle.LabelText>
+                  <Trans>Enable priority notifications</Trans>
+                </Toggle.LabelText>
+                {!data ? <Loader size="md" /> : <Toggle.Platform />}
+              </Toggle.Item>
+            </View>
+          </Toggle.Group>
+          <View
+            style={[
+              a.mt_sm,
+              a.px_xl,
+              a.py_lg,
+              a.rounded_md,
+              t.atoms.bg_contrast_25,
+            ]}>
+            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+              <Trans>
+                Experimental: When this preference is enabled, you'll only
+                receive reply and quote notifications from users you follow.
+                We'll continue to add more controls here over time.
+              </Trans>
+            </Text>
+          </View>
+        </View>
+      )}
+    </CenteredView>
+  )
+}