10251997578

Committed 05 Aug 2024 03:49PM UTC coverage: 32.034% (-0.03%) from 32.06%

Build # 10251997578

Build Type

Pull #9554

github

Committed by

oetherington

Commit Message

Close notifications popover when navigating to settings

Pull Request Pull Request #9554: EA Notifications redesign

Run Details

4936 of 40156 branches covered (12.29%)

Branch coverage included in aggregate %.

55 of 142 new or added lines in 14 files covered. (38.73%)

4 existing lines in 3 files now uncovered.

28759 of 65029 relevant lines covered (44.22%)

180.47 hits per line

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

29.41

/packages/lesswrong/components/notifications/NoNotificationsPlaceholder.tsx

import React, { useCallback, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { useCurrentUser } from "../common/withUser";
import { getUserEmail } from "@/lib/collections/users/helpers";
import { useUpdateCurrentUser } from "../hooks/useUpdateCurrentUser";

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "32px",
    padding: "60px 24px",
    color: theme.palette.grey[600],
    lineHeight: "140%",
    textAlign: "center",
  },
  icon: {
    width: 60,
    height: 60,
  },
  title: {
    color: theme.palette.grey[1000],
    fontSize: 18,
    fontWeight: 600,
  },
  subtitle: {
    fontSize: 14,
    fontWeight: 500,
    lineHeight: "21px",
  },
  emailContainer: {
    marginBottom: -30,
    width: "100%",
    display: "flex",
    gap: "8px",
  },
  input: {
    height: 44,
  },
  button: {
    width: 44,
    height: 44,
    whiteSpace: "nowrap",
  },
});

const SubscribedPlaceholder = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const {ForumIcon} = Components;
  return (
    <div className={classes.root}>
      <ForumIcon icon="BellBorder" className={classes.icon} />
      <div className={classes.title}>
        No notifications yet
      </div>
      <div className={classes.subtitle}>
        Subscribe to posts, authors or comments to get notified about new activity
      </div>
    </div>
  );
}

const NotSubscribedPlaceholder = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const updateCurrentUser = useUpdateCurrentUser();
  const currentUserEmail = getUserEmail(currentUser);
  const [email, setEmail] = useState(currentUserEmail ?? "");
  const [canEditEmail] = useState(!currentUserEmail?.length);

  const onSubmit = useCallback(() => {
    void updateCurrentUser({
      email: canEditEmail ? email : undefined,
      subscribedToDigest: true,
    });
  }, [updateCurrentUser, email, canEditEmail]);

  if (!currentUser) {
    return null;
  }

  const {ForumIcon, EAOnboardingInput, EAButton} = Components;
  return (
    <div className={classes.root}>
      <ForumIcon icon="EAEnvelope" className={classes.icon} />
      <div className={classes.title}>
        Subscribe to email digest
      </div>
      <div className={classes.subtitle}>
        The EA Forum Digest is a curated reading list of Forum posts,{" "}
        sent every Wednesday
      </div>
      <div className={classes.emailContainer}>
        <EAOnboardingInput
          value={email}
          setValue={setEmail}
          disabled={!canEditEmail}
          placeholder="Email"
          className={classes.input}
        />
        <EAButton
          style="primary"
          onClick={onSubmit}
          disabled={email.length < 1}
          className={classes.button}
        >
          -&gt;
        </EAButton>
      </div>
    </div>
  );
}

const NoNotificationsPlaceholder = ({subscribedToDigest, classes}: {
  subscribedToDigest: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  return (
    subscribedToDigest
      ? <SubscribedPlaceholder classes={classes} />
      : <NotSubscribedPlaceholder classes={classes} />
    );
}

const NoNotificationsPlaceholderComponent = registerComponent(
  "NoNotificationsPlaceholder",
  NoNotificationsPlaceholder,
  {styles},
);

declare global {
  interface ComponentTypes {
    NoNotificationsPlaceholder: typeof NoNotificationsPlaceholderComponent
  }
}

1	import React, { useCallback, useState } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { useCurrentUser } from "../common/withUser";	1✔
4	import { getUserEmail } from "@/lib/collections/users/helpers";	1✔
5	import { useUpdateCurrentUser } from "../hooks/useUpdateCurrentUser";	1✔
6
7	const styles = (theme: ThemeType) => ({	1✔
8	root: {
9	display: "flex",
10	flexDirection: "column",
11	alignItems: "center",
12	gap: "32px",
13	padding: "60px 24px",
14	color: theme.palette.grey[600],
15	lineHeight: "140%",
16	textAlign: "center",
17	},
18	icon: {
19	width: 60,
20	height: 60,
21	},
22	title: {
23	color: theme.palette.grey[1000],
24	fontSize: 18,
25	fontWeight: 600,
26	},
27	subtitle: {
28	fontSize: 14,
29	fontWeight: 500,
30	lineHeight: "21px",
31	},
32	emailContainer: {
33	marginBottom: -30,
34	width: "100%",
35	display: "flex",
36	gap: "8px",
37	},
38	input: {
39	height: 44,
40	},
41	button: {
42	width: 44,
43	height: 44,
44	whiteSpace: "nowrap",
45	},
46	});
47
48	const SubscribedPlaceholder = ({classes}: {	1✔
49	classes: ClassesType<typeof styles>,
50	}) => {
NEW 51	const {ForumIcon} = Components;	×
NEW 52	return (	×
53	<div className={classes.root}>
54	<ForumIcon icon="BellBorder" className={classes.icon} />
55	<div className={classes.title}>
56	No notifications yet
57	</div>
58	<div className={classes.subtitle}>
59	Subscribe to posts, authors or comments to get notified about new activity
60	</div>
61	</div>
62	);
63	}
64
65	const NotSubscribedPlaceholder = ({classes}: {	1✔
66	classes: ClassesType<typeof styles>,
67	}) => {
NEW 68	const currentUser = useCurrentUser();	×
NEW 69	const updateCurrentUser = useUpdateCurrentUser();	×
NEW 70	const currentUserEmail = getUserEmail(currentUser);	×
NEW 71	const [email, setEmail] = useState(currentUserEmail ?? "");	×
NEW 72	const [canEditEmail] = useState(!currentUserEmail?.length);	×
73
NEW 74	const onSubmit = useCallback(() => {	×
NEW 75	void updateCurrentUser({	×
76	email: canEditEmail ? email : undefined,	×
77	subscribedToDigest: true,
78	});
79	}, [updateCurrentUser, email, canEditEmail]);
80
NEW 81	if (!currentUser) {	×
NEW 82	return null;	×
83	}
84
NEW 85	const {ForumIcon, EAOnboardingInput, EAButton} = Components;	×
NEW 86	return (	×
87	<div className={classes.root}>
88	<ForumIcon icon="EAEnvelope" className={classes.icon} />
89	<div className={classes.title}>
90	Subscribe to email digest
91	</div>
92	<div className={classes.subtitle}>
93	The EA Forum Digest is a curated reading list of Forum posts,{" "}
94	sent every Wednesday
95	</div>
96	<div className={classes.emailContainer}>
97	<EAOnboardingInput
98	value={email}
99	setValue={setEmail}
100	disabled={!canEditEmail}
101	placeholder="Email"
102	className={classes.input}
103	/>
104	<EAButton
105	style="primary"
106	onClick={onSubmit}
107	disabled={email.length < 1}
108	className={classes.button}
109	>
110	->
111	</EAButton>
112	</div>
113	</div>
114	);
115	}
116
117	const NoNotificationsPlaceholder = ({subscribedToDigest, classes}: {	1✔
118	subscribedToDigest: boolean,
119	classes: ClassesType<typeof styles>,
120	}) => {
NEW 121	return (	×
122	subscribedToDigest
123	? <SubscribedPlaceholder classes={classes} />	×
124	: <NotSubscribedPlaceholder classes={classes} />
125	);
126	}
127
128	const NoNotificationsPlaceholderComponent = registerComponent(	1✔
129	"NoNotificationsPlaceholder",
130	NoNotificationsPlaceholder,
131	{styles},
132	);
133
134	declare global {
135	interface ComponentTypes {
136	NoNotificationsPlaceholder: typeof NoNotificationsPlaceholderComponent
137	}
138	}

ForumMagnum / ForumMagnum / 10251997578

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