10195871355

Committed 01 Aug 2024 09:37AM UTC coverage: 32.068% (-0.01%) from 32.082%

Build # 10195871355

Build Type

Pull #9554

github

Committed by

oetherington

Commit Message

Fix notifications page layout

Pull Request Pull Request #9554: EA Notifications redesign

Run Details

4936 of 40104 branches covered (12.31%)

Branch coverage included in aggregate %.

52 of 114 new or added lines in 13 files covered. (45.61%)

3 existing lines in 2 files now uncovered.

28755 of 64956 relevant lines covered (44.27%)

180.66 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,
  },
  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}>
        Turn on 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	},
31	emailContainer: {
32	marginBottom: -30,
33	width: "100%",
34	display: "flex",
35	gap: "8px",
36	},
37	input: {
38	height: 44,
39	},
40	button: {
41	width: 44,
42	height: 44,
43	whiteSpace: "nowrap",
44	},
45	});
46
47	const SubscribedPlaceholder = ({classes}: {	1✔
48	classes: ClassesType<typeof styles>,
49	}) => {
NEW 50	const {ForumIcon} = Components;	×
NEW 51	return (	×
52	<div className={classes.root}>
53	<ForumIcon icon="BellBorder" className={classes.icon} />
54	<div className={classes.title}>
55	No notifications yet
56	</div>
57	<div className={classes.subtitle}>
58	Subscribe to posts, authors or comments to get notified about new activity
59	</div>
60	</div>
61	);
62	}
63
64	const NotSubscribedPlaceholder = ({classes}: {	1✔
65	classes: ClassesType<typeof styles>,
66	}) => {
NEW 67	const currentUser = useCurrentUser();	×
NEW 68	const updateCurrentUser = useUpdateCurrentUser();	×
NEW 69	const currentUserEmail = getUserEmail(currentUser);	×
NEW 70	const [email, setEmail] = useState(currentUserEmail ?? "");	×
NEW 71	const [canEditEmail] = useState(!currentUserEmail?.length);	×
72
NEW 73	const onSubmit = useCallback(() => {	×
NEW 74	void updateCurrentUser({	×
75	email: canEditEmail ? email : undefined,	×
76	subscribedToDigest: true,
77	});
78	}, [updateCurrentUser, email, canEditEmail]);
79
NEW 80	if (!currentUser) {	×
NEW 81	return null;	×
82	}
83
NEW 84	const {ForumIcon, EAOnboardingInput, EAButton} = Components;	×
NEW 85	return (	×
86	<div className={classes.root}>
87	<ForumIcon icon="EAEnvelope" className={classes.icon} />
88	<div className={classes.title}>
89	Turn on email digest
90	</div>
91	<div className={classes.subtitle}>
92	The EA Forum Digest is a curated reading list of Forum posts,{" "}
93	sent every Wednesday
94	</div>
95	<div className={classes.emailContainer}>
96	<EAOnboardingInput
97	value={email}
98	setValue={setEmail}
99	disabled={!canEditEmail}
100	placeholder="Email"
101	className={classes.input}
102	/>
103	<EAButton
104	style="primary"
105	onClick={onSubmit}
106	disabled={email.length < 1}
107	className={classes.button}
108	>
109	->
110	</EAButton>
111	</div>
112	</div>
113	);
114	}
115
116	const NoNotificationsPlaceholder = ({subscribedToDigest, classes}: {	1✔
117	subscribedToDigest: boolean,
118	classes: ClassesType<typeof styles>,
119	}) => {
NEW 120	return (	×
121	subscribedToDigest
122	? <SubscribedPlaceholder classes={classes} />	×
123	: <NotSubscribedPlaceholder classes={classes} />
124	);
125	}
126
127	const NoNotificationsPlaceholderComponent = registerComponent(	1✔
128	"NoNotificationsPlaceholder",
129	NoNotificationsPlaceholder,
130	{styles},
131	);
132
133	declare global {
134	interface ComponentTypes {
135	NoNotificationsPlaceholder: typeof NoNotificationsPlaceholderComponent
136	}
137	}

ForumMagnum / ForumMagnum / 10195871355

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