9570737889

Committed 18 Jun 2024 07:03PM UTC coverage: 15.052% (-0.09%) from 15.137%

Build # 9570737889

Build Type

Pull #7910

github

Committed by

web-flow

Commit Message

Merge 1a3b05c86 into bdbeb944b

Pull Request Pull Request #7910: Implements subscriptions and community alerts page.

Run Details

3748 of 24504 branches covered (15.3%)

Branch coverage included in aggregate %.

1 of 85 new or added lines in 9 files covered. (1.18%)

2 existing lines in 1 file now uncovered.

5183 of 34829 relevant lines covered (14.88%)

4.8 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/pages/NotificationSettings/index.tsx

import { CommunityAlert, ThreadSubscription } from '@hicommonwealth/schemas';
import { useFlag } from 'hooks/useFlag';
import { useCommonNavigate } from 'navigation/helpers';
import React, { useCallback, useState } from 'react';
import app from 'state';
import { trpc } from 'utils/trpcClient';
import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
import {
  CWTab,
  CWTabsRow,
} from 'views/components/component_kit/new_designs/CWTabs';
import { CommunityEntry } from 'views/pages/NotificationSettings/CommunityEntry';
import { getFirebaseMessagingToken } from 'views/pages/NotificationSettings/getFirebaseMessagingToken';
import { useCommunityAlerts } from 'views/pages/NotificationSettings/useCommunityAlerts';
import { useThreadSubscriptions } from 'views/pages/NotificationSettings/useThreadSubscriptions';
import useNotificationSettings from 'views/pages/NotificationSettingsOld/useNotificationSettings';
import { z } from 'zod';
import { CWText } from '../../components/component_kit/cw_text';
import { PageLoading } from '../loading';
import { SubscriptionEntry } from './SubscriptionEntry';
import './index.scss';

type NotificationSection = 'community-alerts' | 'subscriptions';

const NotificationSettings = () => {
  const navigate = useCommonNavigate();
  const threadSubscriptions = useThreadSubscriptions();
  const communityAlerts = useCommunityAlerts();
  const enableKnockPushNotifications = useFlag('knockPushNotifications');
  const registerClientRegistrationToken =
    trpc.subscription.registerClientRegistrationToken.useMutation();

  const communityAlertsIndex = createIndexForCommunityAlerts(
    (communityAlerts.data as unknown as ReadonlyArray<
      z.infer<typeof CommunityAlert>
    >) || [],
  );

  const { bundledSubs } = useNotificationSettings();

  const [threadsFilter, setThreadsFilter] = useState<readonly number[]>([]);
  const [section, setSection] =
    useState<NotificationSection>('community-alerts');

  const handleUnsubscribe = useCallback(
    (id: number) => {
      setThreadsFilter([...threadsFilter, id]);
    },
    [threadsFilter],
  );

  const handlePushNotificationSubscription = useCallback(() => {
    async function doAsync() {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        console.log('Notification permission granted.');
        const token = await getFirebaseMessagingToken();
        await registerClientRegistrationToken.mutateAsync({
          id: 'none',
          token,
        });
      }
    }

    doAsync().catch(console.error);
  }, [registerClientRegistrationToken]);

  if (threadSubscriptions.isLoading) {
    return <PageLoading />;
  } else if (!app.isLoggedIn()) {
    navigate('/', { replace: true });
    return <PageLoading />;
  }

  return (
    <CWPageLayout>
      <div className="NotificationSettingsPage NotificationSettings">
        <CWText type="h3" fontWeight="semiBold" className="page-header-text">
          Notification settings
        </CWText>

        <CWText className="page-subheader-text">
          Manage the emails and alerts you receive about your activity
        </CWText>

        {enableKnockPushNotifications && (
          <div>
            <CWText type="h5">Push Notifications</CWText>

            <p>
              <CWButton
                label="Subscribe to Push Notifications"
                onClick={handlePushNotificationSubscription}
              />
            </p>
          </div>
        )}

        <CWTabsRow>
          <CWTab
            label="Community Alerts"
            isSelected={section === 'community-alerts'}
            onClick={() => setSection('community-alerts')}
          />
          <CWTab
            label="Subscriptions"
            isSelected={section === 'subscriptions'}
            onClick={() => setSection('subscriptions')}
          />
        </CWTabsRow>

        {!communityAlerts.isLoading && section === 'community-alerts' && (
          <>
            <CWText type="h4" fontWeight="semiBold" className="section-header">
              Community Alerts
            </CWText>

            <CWText className="page-subheader-text">
              Get updates on new threads and discussions from these communities
            </CWText>

            {Object.entries(bundledSubs)
              .sort((x, y) => x[0].localeCompare(y[0]))
              .map(([communityName]) => {
                const communityInfo = app?.config.chains.getById(communityName);

                if (!communityInfo?.id) return null; // handles incomplete loading case

                return (
                  <CommunityEntry
                    key={communityInfo.id}
                    communityInfo={communityInfo}
                    communityAlert={communityAlertsIndex[communityInfo.id]}
                  />
                );
              })}
          </>
        )}

        {section === 'subscriptions' && (
          <>
            <CWText type="h4" fontWeight="semiBold" className="section-header">
              Subscriptions
            </CWText>

            <CWText className="page-subheader-text">
              Manage your subscriptions to these discussions
            </CWText>

            {(threadSubscriptions.data || [])
              .filter((current) => current.Thread)
              .filter((current) => !threadsFilter.includes(current.Thread!.id!))
              .map((current) => (
                <>
                  <SubscriptionEntry
                    key={current.Thread!.id!}
                    subscription={current as z.infer<typeof ThreadSubscription>}
                    onUnsubscribe={handleUnsubscribe}
                  />
                </>
              ))}
          </>
        )}
      </div>
    </CWPageLayout>
  );
};

function createIndexForCommunityAlerts(
  communityAlerts: ReadonlyArray<z.infer<typeof CommunityAlert>>,
): Readonly<{ [id: string]: z.infer<typeof CommunityAlert> }> {
  const result: { [id: string]: z.infer<typeof CommunityAlert> } = {};
  communityAlerts.forEach(
    (current) => (result[current.community_id] = current),
  );
  return result;
}

export default NotificationSettings;

1	import { CommunityAlert, ThreadSubscription } from '@hicommonwealth/schemas';
2	import { useFlag } from 'hooks/useFlag';
3	import { useCommonNavigate } from 'navigation/helpers';
4	import React, { useCallback, useState } from 'react';
5	import app from 'state';
6	import { trpc } from 'utils/trpcClient';
7	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
8	import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
9	import {
10	CWTab,
11	CWTabsRow,
12	} from 'views/components/component_kit/new_designs/CWTabs';
13	import { CommunityEntry } from 'views/pages/NotificationSettings/CommunityEntry';
14	import { getFirebaseMessagingToken } from 'views/pages/NotificationSettings/getFirebaseMessagingToken';
15	import { useCommunityAlerts } from 'views/pages/NotificationSettings/useCommunityAlerts';
16	import { useThreadSubscriptions } from 'views/pages/NotificationSettings/useThreadSubscriptions';
17	import useNotificationSettings from 'views/pages/NotificationSettingsOld/useNotificationSettings';
18	import { z } from 'zod';
19	import { CWText } from '../../components/component_kit/cw_text';
20	import { PageLoading } from '../loading';
21	import { SubscriptionEntry } from './SubscriptionEntry';
22	import './index.scss';
23
24	type NotificationSection = 'community-alerts' \| 'subscriptions';
25
NEW 26	const NotificationSettings = () => {	×
NEW 27	const navigate = useCommonNavigate();	×
NEW 28	const threadSubscriptions = useThreadSubscriptions();	×
NEW 29	const communityAlerts = useCommunityAlerts();	×
NEW 30	const enableKnockPushNotifications = useFlag('knockPushNotifications');	×
31	const registerClientRegistrationToken =
NEW 32	trpc.subscription.registerClientRegistrationToken.useMutation();	×
33
NEW 34	const communityAlertsIndex = createIndexForCommunityAlerts(	×
35	(communityAlerts.data as unknown as ReadonlyArray<	×
36	z.infer<typeof CommunityAlert>
37	>) \|\| [],
38	);
39
NEW 40	const { bundledSubs } = useNotificationSettings();	×
41
NEW 42	const [threadsFilter, setThreadsFilter] = useState<readonly number[]>([]);	×
43	const [section, setSection] =
NEW 44	useState<NotificationSection>('community-alerts');	×
45
NEW 46	const handleUnsubscribe = useCallback(	×
47	(id: number) => {
NEW 48	setThreadsFilter([...threadsFilter, id]);	×
49	},
50	[threadsFilter],
51	);
52
NEW 53	const handlePushNotificationSubscription = useCallback(() => {	×
54	async function doAsync() {
NEW 55	const permission = await Notification.requestPermission();	×
NEW 56	if (permission === 'granted') {	×
NEW 57	console.log('Notification permission granted.');	×
NEW 58	const token = await getFirebaseMessagingToken();	×
NEW 59	await registerClientRegistrationToken.mutateAsync({	×
60	id: 'none',
61	token,
62	});
63	}
64	}
65
NEW 66	doAsync().catch(console.error);	×
67	}, [registerClientRegistrationToken]);
68
NEW 69	if (threadSubscriptions.isLoading) {	×
NEW 70	return <PageLoading />;	×
NEW 71	} else if (!app.isLoggedIn()) {	×
NEW 72	navigate('/', { replace: true });	×
NEW 73	return <PageLoading />;	×
74	}
75
NEW 76	return (	×
77	<CWPageLayout>
78	<div className="NotificationSettingsPage NotificationSettings">
79	<CWText type="h3" fontWeight="semiBold" className="page-header-text">
80	Notification settings
81	</CWText>
82
83	<CWText className="page-subheader-text">
84	Manage the emails and alerts you receive about your activity
85	</CWText>
86
87	{enableKnockPushNotifications && (	×
88	<div>
89	<CWText type="h5">Push Notifications</CWText>
90
91	<p>
92	<CWButton
93	label="Subscribe to Push Notifications"
94	onClick={handlePushNotificationSubscription}
95	/>
96	</p>
97	</div>
98	)}
99
100	<CWTabsRow>
101	<CWTab
102	label="Community Alerts"
103	isSelected={section === 'community-alerts'}
NEW 104	onClick={() => setSection('community-alerts')}	×
105	/>
106	<CWTab
107	label="Subscriptions"
108	isSelected={section === 'subscriptions'}
NEW 109	onClick={() => setSection('subscriptions')}	×
110	/>
111	</CWTabsRow>
112
113	{!communityAlerts.isLoading && section === 'community-alerts' && (	×
114	<>
115	<CWText type="h4" fontWeight="semiBold" className="section-header">
116	Community Alerts
117	</CWText>
118
119	<CWText className="page-subheader-text">
120	Get updates on new threads and discussions from these communities
121	</CWText>
122
123	{Object.entries(bundledSubs)
NEW 124	.sort((x, y) => x[0].localeCompare(y[0]))	×
125	.map(([communityName]) => {
NEW 126	const communityInfo = app?.config.chains.getById(communityName);	×
127
NEW 128	if (!communityInfo?.id) return null; // handles incomplete loading case	×
129
NEW 130	return (	×
131	<CommunityEntry
132	key={communityInfo.id}
133	communityInfo={communityInfo}
134	communityAlert={communityAlertsIndex[communityInfo.id]}
135	/>
136	);
137	})}
138	</>
139	)}
140
141	{section === 'subscriptions' && (	×
142	<>
143	<CWText type="h4" fontWeight="semiBold" className="section-header">
144	Subscriptions
145	</CWText>
146
147	<CWText className="page-subheader-text">
148	Manage your subscriptions to these discussions
149	</CWText>
150
151	{(threadSubscriptions.data \|\| [])	×
NEW 152	.filter((current) => current.Thread)	×
NEW 153	.filter((current) => !threadsFilter.includes(current.Thread!.id!))	×
154	.map((current) => (
NEW 155	<>	×
156	<SubscriptionEntry
157	key={current.Thread!.id!}
158	subscription={current as z.infer<typeof ThreadSubscription>}
159	onUnsubscribe={handleUnsubscribe}
160	/>
161	</>
162	))}
163	</>
164	)}
165	</div>
166	</CWPageLayout>
167	);
168	};
169
170	function createIndexForCommunityAlerts(
171	communityAlerts: ReadonlyArray<z.infer<typeof CommunityAlert>>,
172	): Readonly<{ [id: string]: z.infer<typeof CommunityAlert> }> {
NEW 173	const result: { [id: string]: z.infer<typeof CommunityAlert> } = {};	×
NEW 174	communityAlerts.forEach(	×
NEW 175	(current) => (result[current.community_id] = current),	×
176	);
NEW 177	return result;	×
178	}
179
180	export default NotificationSettings;

hicommonwealth / commonwealth / 9570737889

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous