9486851544

Committed 12 Jun 2024 05:12PM UTC coverage: 31.938% (+0.06%) from 31.88%

Build # 9486851544

Build Type

Pull #9385

github

Committed by

s-cheng

Commit Message

add feedback form and subscribe to email digest links

Pull Request Pull Request #9385: [EA Forum only] on-site digest page

Run Details

4821 of 39324 branches covered (12.26%)

Branch coverage included in aggregate %.

21 of 60 new or added lines in 8 files covered. (35.0%)

1 existing line in 1 file now uncovered.

28011 of 63476 relevant lines covered (44.13%)

180.38 hits per line

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

19.51

/packages/lesswrong/components/ea-forum/EADigestPage.tsx

import React, { CSSProperties } from "react";
import { Components, fragmentTextForQuery, registerComponent } from "../../lib/vulcan-lib";
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { useMulti } from "../../lib/crud/withMulti";
import moment from "moment";
import { useLocation } from "@/lib/routeUtil";
import { gql, useQuery } from "@apollo/client";
import { useCurrentUser } from "../common/withUser";
import { Link } from "@/lib/reactRouterWrapper";
import { useMessages } from "../common/withMessages";
import { useUpdateCurrentUser } from "../hooks/useUpdateCurrentUser";
import { digestLink } from "./EABestOfPage";

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    justifyItems: 'end',
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.text.alwaysWhite,
    padding: '30px 30px 60px',
    marginTop: -30,
    marginBottom: -165,
    [theme.breakpoints.down("sm")]: {
      display: 'block',
      paddingTop: 50,
      paddingLeft: 20,
      paddingRight: 20,
      marginLeft: -8,
      marginRight: -8,
    }
  },
  topSection: {
    maxWidth: 765,
    padding: '10px 3px 26px'
  },
  pageTitle: {
    display: 'flex',
    columnGap: '20px',
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 32,
    fontWeight: 700,
    marginTop: 0,
    marginBottom: 6,
  },
  previewLabel: {
    color: theme.palette.grey[300],
    fontSize: 20,
    fontWeight: 500,
    marginLeft: 16,
  },
  subscribeTooltip: {
  },
  subscribeIcon: {
    opacity: 0.7,
    cursor: 'pointer'
  },
  success: {
    display: 'flex',
    alignItems: 'center',
    columnGap: 10,
    fontSize: 13,
    lineHeight: '19px',
    color: theme.palette.grey[800],
    textWrap: 'pretty',
  },
  successCheckIcon: {
    color: theme.palette.icon.greenCheckmark
  },
  successLink: {
    color: theme.palette.primary.main
  },
  pageDescription: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 16,
    fontWeight: 500,
    lineHeight: "150%",
  },
  feedback: {
    fontWeight: 500,
    fontStyle: "italic",
    fontSize: 14,
    marginTop: 10,
    opacity: 0.8,
    "& a": {
      textDecoration: 'underline',
      '&:hover': {
        textDecoration: 'underline',
      }
    },
  },
  heading: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 20,
    fontWeight: 700,
    marginTop: 0,
    marginBottom: 20,
  },
  imageFade: {
    background: `
      linear-gradient(
        90deg,
        var(--digest-background) 0%,
        var(--digest-background) 50%,
        ${theme.palette.greyAlpha(0)} 80%
      );
    `,
    position: "fixed",
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: -1,
    [theme.breakpoints.down("xs")]: {
      background: `
      linear-gradient(
        135deg,
        var(--digest-background) 0%,
        var(--digest-background) 50%,
        ${theme.palette.greyAlpha(0)} 80%
      );
    `,
    }
  },
  image: {
    position: "fixed",
    top: 0,
    right: 0,
    width: '50%',
    height: '100%',
    objectFit: 'cover',
    zIndex: -2,
  },
});

const digestPostsQuery = gql`
  query getDigestPosts($num: Int) {
    DigestPosts(num: $num) {
      ...PostsListWithVotes
    }
  }
  ${fragmentTextForQuery('PostsListWithVotes')}
`

const EADigestPage = ({ classes }: { classes: ClassesType<typeof styles> }) => {
  const currentUser = useCurrentUser()
  const updateCurrentUser = useUpdateCurrentUser()
  const { params } = useLocation()
  const { flash } = useMessages()
  const digestNum = parseInt(params.num)
  
  // get the digest based on the num from the URL
  const {results, loading: digestLoading} = useMulti({
    terms: {
      view: "findByNum",
      num: digestNum
    },
    collectionName: "Digests",
    fragmentName: 'DigestsMinimumInfo',
    limit: 1,
    skip: !digestNum
  })
  const digest = results?.[0]
  
  // get the list of posts in this digest
  const { data, loading } = useQuery(digestPostsQuery, {
      ssr: true,
      skip: !digestNum || !digest,
      variables: {num: digestNum},
    }
  )
  
  const onSubscribeClick = async () => {
    if (currentUser) {
      try {
        await updateCurrentUser({
          subscribedToDigest: true
        })
        flash({messageString: (
          <div className={classes.success}>
            <ForumIcon icon="CheckCircle" className={classes.successCheckIcon} />
            <div>
              Thanks for signing up! You can edit your subscription via
              your <Link to={'/account?highlightField=subscribedToDigest'} className={classes.successLink}>
                account settings
              </Link>.
            </div>
          </div>
        )})
      } catch(e) {
        flash('There was a problem subscribing you to the digest. Please try again later.')
      }
    }
  }
  
  const {
    Error404, HeadTags, PostsLoading, EAPostsItem, CloudinaryImage2, ForumIcon, LWTooltip
  } = Components;
  
  // TODO: Probably we'll want to check the publishedDate instead of the endDate, but we haven't been using it.
  // If we do start using it, we'll need to backfill the publishedDate values and update this condition.
  const isPublished = digest && digest.endDate
  
  // 404 if there is no matching digest, or if the matching one is still in progress and the user is not an admin
  if ((!digest && !digestLoading) || (!isPublished && !currentUser?.isAdmin)) {
    return <Error404 />
  }

  const posts: PostsListWithVotes[] = data?.DigestPosts
  
  const postsList = loading ? (
    <PostsLoading placeholderCount={20} viewType="card" />
  ) : posts?.map((post) => (
    <EAPostsItem
      key={post._id}
      viewType="card"
      post={post}
      showKarma={false}
    />
  ))
  
  // Define background color with a CSS variable to be accessed in the styles
  const style = {
    "--digest-background": digest?.onsitePrimaryColor,
  } as CSSProperties;
  
  // Hide the icon if this is a logged in user who is already subscribed to the digest
  let subscribeNode = null
  if (!currentUser || !currentUser.subscribedToDigest) {
    subscribeNode = <LWTooltip
      title="Click to subscribe to the weekly email version of this digest"
      className={classes.subscribeTooltip}
    >
      {currentUser ? <ForumIcon
          icon="Envelope"
          className={classes.subscribeIcon}
          onClick={onSubscribeClick}
        /> : <Link to={digestLink} target="_blank" rel="noopener noreferrer">
          <ForumIcon icon="Envelope" className={classes.subscribeIcon} />
        </Link>
      }
    </LWTooltip>
  }

  return (
    <>
      <HeadTags title={`EA Forum Digest #${params.num}`} />
      <AnalyticsContext pageContext="DigestPage">
        <div className={classes.root} style={style}>
          <div className={classes.content}>
            <section className={classes.topSection}>
              <h1 className={classes.pageTitle}>
                <span>
                  EA Forum Digest #{params.num}
                  {!isPublished && <span className={classes.previewLabel}>[Preview]</span>}
                </span>
                {subscribeNode}
              </h1>
              {digest?.startDate && <div className={classes.pageDescription}>
                Highlights from the week of {moment(digest.startDate).format('MMMM D, YYYY')}
              </div>}
              <div className={classes.feedback}>
                This is an experiment - help us out by{" "}
                <Link
                  to="https://docs.google.com/forms/d/e/1FAIpQLSeiSgHs_a-dYt6XHFokRSxbU1uKW99V6gCD3w7eNOT27_HsMw/viewform"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  sharing your thoughts
                </Link>
              </div>
            </section>
            {postsList}
          </div>
          <div className={classes.imageFade}></div>
          {digest?.onsiteImageId && <CloudinaryImage2
            publicId={digest.onsiteImageId}
            className={classes.image}
          />}
        </div>
      </AnalyticsContext>
    </>
  );
};

const EADigestPageComponent = registerComponent(
  "EADigestPage",
  EADigestPage,
  {styles},
);

declare global {
  interface ComponentTypes {
    EADigestPage: typeof EADigestPageComponent;
  }
}

1	import React, { CSSProperties } from "react";	1✔
2	import { Components, fragmentTextForQuery, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import { AnalyticsContext } from "../../lib/analyticsEvents";	1✔
4	import { useMulti } from "../../lib/crud/withMulti";	1✔
5	import moment from "moment";	1✔
6	import { useLocation } from "@/lib/routeUtil";	1✔
7	import { gql, useQuery } from "@apollo/client";	1✔
8	import { useCurrentUser } from "../common/withUser";	1✔
9	import { Link } from "@/lib/reactRouterWrapper";	1✔
10	import { useMessages } from "../common/withMessages";	1✔
11	import { useUpdateCurrentUser } from "../hooks/useUpdateCurrentUser";	1✔
12	import { digestLink } from "./EABestOfPage";	1✔
13
14	const styles = (theme: ThemeType): JssStyles => ({	1✔
15	root: {
16	display: 'grid',
17	gridTemplateColumns: '1fr 1fr',
18	justifyItems: 'end',
19	fontFamily: theme.palette.fonts.sansSerifStack,
20	color: theme.palette.text.alwaysWhite,
21	padding: '30px 30px 60px',
22	marginTop: -30,
23	marginBottom: -165,
24	[theme.breakpoints.down("sm")]: {
25	display: 'block',
26	paddingTop: 50,
27	paddingLeft: 20,
28	paddingRight: 20,
29	marginLeft: -8,
30	marginRight: -8,
31	}
32	},
33	topSection: {
34	maxWidth: 765,
35	padding: '10px 3px 26px'
36	},
37	pageTitle: {
38	display: 'flex',
39	columnGap: '20px',
40	fontFamily: theme.palette.fonts.sansSerifStack,
41	fontSize: 32,
42	fontWeight: 700,
43	marginTop: 0,
44	marginBottom: 6,
45	},
46	previewLabel: {
47	color: theme.palette.grey[300],
48	fontSize: 20,
49	fontWeight: 500,
50	marginLeft: 16,
51	},
52	subscribeTooltip: {
53	},
54	subscribeIcon: {
55	opacity: 0.7,
56	cursor: 'pointer'
57	},
58	success: {
59	display: 'flex',
60	alignItems: 'center',
61	columnGap: 10,
62	fontSize: 13,
63	lineHeight: '19px',
64	color: theme.palette.grey[800],
65	textWrap: 'pretty',
66	},
67	successCheckIcon: {
68	color: theme.palette.icon.greenCheckmark
69	},
70	successLink: {
71	color: theme.palette.primary.main
72	},
73	pageDescription: {
74	fontFamily: theme.palette.fonts.sansSerifStack,
75	fontSize: 16,
76	fontWeight: 500,
77	lineHeight: "150%",
78	},
79	feedback: {
80	fontWeight: 500,
81	fontStyle: "italic",
82	fontSize: 14,
83	marginTop: 10,
84	opacity: 0.8,
85	"& a": {
86	textDecoration: 'underline',
87	'&:hover': {
88	textDecoration: 'underline',
89	}
90	},
91	},
92	heading: {
93	fontFamily: theme.palette.fonts.sansSerifStack,
94	fontSize: 20,
95	fontWeight: 700,
96	marginTop: 0,
97	marginBottom: 20,
98	},
99	imageFade: {
100	background: `
101	linear-gradient(
102	90deg,
103	var(--digest-background) 0%,
104	var(--digest-background) 50%,
105	${theme.palette.greyAlpha(0)} 80%
106	);
107	`,
108	position: "fixed",
109	top: 0,
110	left: 0,
111	width: '100%',
112	height: '100%',
113	zIndex: -1,
114	[theme.breakpoints.down("xs")]: {
115	background: `
116	linear-gradient(
117	135deg,
118	var(--digest-background) 0%,
119	var(--digest-background) 50%,
120	${theme.palette.greyAlpha(0)} 80%
121	);
122	`,
123	}
124	},
125	image: {
126	position: "fixed",
127	top: 0,
128	right: 0,
129	width: '50%',
130	height: '100%',
131	objectFit: 'cover',
132	zIndex: -2,
133	},
134	});
135
136	const digestPostsQuery = gql`	1✔
137	query getDigestPosts($num: Int) {
138	DigestPosts(num: $num) {
139	...PostsListWithVotes
140	}
141	}
142	${fragmentTextForQuery('PostsListWithVotes')}
143	`
144
145	const EADigestPage = ({ classes }: { classes: ClassesType<typeof styles> }) => {	1✔
NEW 146	const currentUser = useCurrentUser()	×
NEW 147	const updateCurrentUser = useUpdateCurrentUser()	×
NEW 148	const { params } = useLocation()	×
NEW 149	const { flash } = useMessages()	×
NEW 150	const digestNum = parseInt(params.num)	×
151
152	// get the digest based on the num from the URL
NEW 153	const {results, loading: digestLoading} = useMulti({	×
154	terms: {
155	view: "findByNum",
156	num: digestNum
157	},
158	collectionName: "Digests",
159	fragmentName: 'DigestsMinimumInfo',
160	limit: 1,
161	skip: !digestNum
162	})
NEW 163	const digest = results?.[0]	×
164
165	// get the list of posts in this digest
NEW 166	const { data, loading } = useQuery(digestPostsQuery, {	×
167	ssr: true,
168	skip: !digestNum \|\| !digest,	×
169	variables: {num: digestNum},
170	}
171	)
172
NEW 173	const onSubscribeClick = async () => {	×
NEW 174	if (currentUser) {	×
NEW 175	try {	×
NEW 176	await updateCurrentUser({	×
177	subscribedToDigest: true
178	})
NEW 179	flash({messageString: (	×
180	<div className={classes.success}>
181	<ForumIcon icon="CheckCircle" className={classes.successCheckIcon} />
182	<div>
183	Thanks for signing up! You can edit your subscription via
184	your <Link to={'/account?highlightField=subscribedToDigest'} className={classes.successLink}>
185	account settings
186	</Link>.
187	</div>
188	</div>
189	)})
190	} catch(e) {
NEW 191	flash('There was a problem subscribing you to the digest. Please try again later.')	×
192	}
193	}
194	}
195
196	const {
197	Error404, HeadTags, PostsLoading, EAPostsItem, CloudinaryImage2, ForumIcon, LWTooltip
NEW 198	} = Components;	×
199
200	// TODO: Probably we'll want to check the publishedDate instead of the endDate, but we haven't been using it.
201	// If we do start using it, we'll need to backfill the publishedDate values and update this condition.
NEW 202	const isPublished = digest && digest.endDate	×
203
204	// 404 if there is no matching digest, or if the matching one is still in progress and the user is not an admin
NEW 205	if ((!digest && !digestLoading) \|\| (!isPublished && !currentUser?.isAdmin)) {	×
NEW 206	return <Error404 />	×
207	}
208
NEW 209	const posts: PostsListWithVotes[] = data?.DigestPosts	×
210
NEW 211	const postsList = loading ? (	×
212	<PostsLoading placeholderCount={20} viewType="card" />	×
213	) : posts?.map((post) => (	×
NEW 214	<EAPostsItem	×
215	key={post._id}
216	viewType="card"
217	post={post}
218	showKarma={false}
219	/>
220	))
221
222	// Define background color with a CSS variable to be accessed in the styles
NEW 223	const style = {	×
224	"--digest-background": digest?.onsitePrimaryColor,	×
225	} as CSSProperties;
226
227	// Hide the icon if this is a logged in user who is already subscribed to the digest
NEW 228	let subscribeNode = null	×
NEW 229	if (!currentUser \|\| !currentUser.subscribedToDigest) {	×
NEW 230	subscribeNode = <LWTooltip	×
231	title="Click to subscribe to the weekly email version of this digest"
232	className={classes.subscribeTooltip}
233	>
234	{currentUser ? <ForumIcon	×
235	icon="Envelope"
236	className={classes.subscribeIcon}
237	onClick={onSubscribeClick}
238	/> : <Link to={digestLink} target="_blank" rel="noopener noreferrer">
239	<ForumIcon icon="Envelope" className={classes.subscribeIcon} />
240	</Link>
241	}
242	</LWTooltip>
243	}
244
NEW 245	return (	×
246	<>
247	<HeadTags title={`EA Forum Digest #${params.num}`} />
248	<AnalyticsContext pageContext="DigestPage">
249	<div className={classes.root} style={style}>
250	<div className={classes.content}>
251	<section className={classes.topSection}>
252	<h1 className={classes.pageTitle}>
253	<span>
254	EA Forum Digest #{params.num}
255	{!isPublished && <span className={classes.previewLabel}>[Preview]</span>}	×
256	</span>
257	{subscribeNode}
258	</h1>
259	{digest?.startDate && <div className={classes.pageDescription}>	×
260	Highlights from the week of {moment(digest.startDate).format('MMMM D, YYYY')}
261	</div>}
262	<div className={classes.feedback}>
263	This is an experiment - help us out by{" "}
264	<Link
265	to="https://docs.google.com/forms/d/e/1FAIpQLSeiSgHs_a-dYt6XHFokRSxbU1uKW99V6gCD3w7eNOT27_HsMw/viewform"
266	target="_blank"
267	rel="noopener noreferrer"
268	>
269	sharing your thoughts
270	</Link>
271	</div>
272	</section>
273	{postsList}
274	</div>
275	<div className={classes.imageFade}></div>
276	{digest?.onsiteImageId && <CloudinaryImage2	×
277	publicId={digest.onsiteImageId}
278	className={classes.image}
279	/>}
280	</div>
281	</AnalyticsContext>
282	</>
283	);
284	};
285
286	const EADigestPageComponent = registerComponent(	1✔
287	"EADigestPage",
288	EADigestPage,
289	{styles},
290	);
291
292	declare global {
293	interface ComponentTypes {
294	EADigestPage: typeof EADigestPageComponent;
295	}
296	}

ForumMagnum / ForumMagnum / 9486851544

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