9425144174

Committed 08 Jun 2024 01:30AM UTC coverage: 31.943% (+0.06%) from 31.88%

Build # 9425144174

Build Type

push

github

Committed by

s-cheng

Commit Message

[EA Forum only] on-site digest page

Run Details

4821 of 39308 branches covered (12.26%)

Branch coverage included in aggregate %.

15 of 41 new or added lines in 7 files covered. (36.59%)

1 existing line in 1 file now uncovered.

28006 of 63458 relevant lines covered (44.13%)

180.43 hits per line

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

22.92

/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";

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: 480,
    padding: '10px 3px 20px'
  },
  pageTitle: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 32,
    fontWeight: 700,
    marginTop: 0,
    marginBottom: 12,
  },
  pageDescription: {
    fontFamily: theme.palette.fonts.sansSerifStack,
    fontSize: 16,
    fontWeight: 500,
    lineHeight: "150%",
  },
  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,
  },
  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 { params } = useLocation()
  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 {
    Error404, HeadTags, PostsLoading, EAPostsItem, CloudinaryImage2
  } = Components;
  
  if (!digest && !digestLoading) {
    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;

  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}>EA Forum Digest #{params.num}</h1>
              {digest?.startDate && <div className={classes.pageDescription}>
                Highlights from the week of {moment(digest.startDate).format('MMMM DD, YYYY')}
              </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
9	const styles = (theme: ThemeType): JssStyles => ({	1✔
10	root: {
11	display: 'grid',
12	gridTemplateColumns: '1fr 1fr',
13	justifyItems: 'end',
14	fontFamily: theme.palette.fonts.sansSerifStack,
15	color: theme.palette.text.alwaysWhite,
16	padding: '30px 30px 60px',
17	marginTop: -30,
18	marginBottom: -165,
19	[theme.breakpoints.down("sm")]: {
20	display: 'block',
21	paddingTop: 50,
22	paddingLeft: 20,
23	paddingRight: 20,
24	marginLeft: -8,
25	marginRight: -8,
26	}
27	},
28	topSection: {
29	maxWidth: 480,
30	padding: '10px 3px 20px'
31	},
32	pageTitle: {
33	fontFamily: theme.palette.fonts.sansSerifStack,
34	fontSize: 32,
35	fontWeight: 700,
36	marginTop: 0,
37	marginBottom: 12,
38	},
39	pageDescription: {
40	fontFamily: theme.palette.fonts.sansSerifStack,
41	fontSize: 16,
42	fontWeight: 500,
43	lineHeight: "150%",
44	},
45	heading: {
46	fontFamily: theme.palette.fonts.sansSerifStack,
47	fontSize: 20,
48	fontWeight: 700,
49	marginTop: 0,
50	marginBottom: 20,
51	},
52	imageFade: {
53	background: `
54	linear-gradient(
55	90deg,
56	var(--digest-background) 0%,
57	var(--digest-background) 50%,
58	${theme.palette.greyAlpha(0)} 80%
59	);
60	`,
61	position: "fixed",
62	top: 0,
63	left: 0,
64	width: '100%',
65	height: '100%',
66	zIndex: -1,
67	},
68	image: {
69	position: "fixed",
70	top: 0,
71	right: 0,
72	width: '50%',
73	height: '100%',
74	objectFit: 'cover',
75	zIndex: -2,
76	},
77	});
78
79	const digestPostsQuery = gql`	1✔
80	query getDigestPosts($num: Int) {
81	DigestPosts(num: $num) {
82	...PostsListWithVotes
83	}
84	}
85	${fragmentTextForQuery('PostsListWithVotes')}
86	`
87
88	const EADigestPage = ({ classes }: { classes: ClassesType<typeof styles> }) => {	1✔
NEW 89	const { params } = useLocation()	×
NEW 90	const digestNum = parseInt(params.num)	×
91
92	// get the digest based on the num from the URL
NEW 93	const {results, loading: digestLoading} = useMulti({	×
94	terms: {
95	view: "findByNum",
96	num: digestNum
97	},
98	collectionName: "Digests",
99	fragmentName: 'DigestsMinimumInfo',
100	limit: 1,
101	skip: !digestNum
102	})
NEW 103	const digest = results?.[0]	×
104
105	// get the list of posts in this digest
NEW 106	const { data, loading } = useQuery(digestPostsQuery, {	×
107	ssr: true,
108	skip: !digestNum \|\| !digest,	×
109	variables: {num: digestNum},
110	}
111	)
112
113	const {
114	Error404, HeadTags, PostsLoading, EAPostsItem, CloudinaryImage2
NEW 115	} = Components;	×
116
NEW 117	if (!digest && !digestLoading) {	×
NEW 118	return <Error404 />	×
119	}
120
NEW 121	const posts: PostsListWithVotes[] = data?.DigestPosts	×
122
NEW 123	const postsList = loading ? (	×
124	<PostsLoading placeholderCount={20} viewType="card" />	×
125	) : posts?.map((post) => (	×
NEW 126	<EAPostsItem	×
127	key={post._id}
128	viewType="card"
129	post={post}
130	showKarma={false}
131	/>
132	))
133
134	// Define background color with a CSS variable to be accessed in the styles
NEW 135	const style = {	×
136	"--digest-background": digest?.onsitePrimaryColor,	×
137	} as CSSProperties;
138
NEW 139	return (	×
140	<>
141	<HeadTags title={`EA Forum Digest #${params.num}`} />
142	<AnalyticsContext pageContext="DigestPage">
143	<div className={classes.root} style={style}>
144	<div className={classes.content}>
145	<section className={classes.topSection}>
146	<h1 className={classes.pageTitle}>EA Forum Digest #{params.num}</h1>
147	{digest?.startDate && <div className={classes.pageDescription}>	×
148	Highlights from the week of {moment(digest.startDate).format('MMMM DD, YYYY')}
149	</div>}
150	</section>
151	{postsList}
152	</div>
153	<div className={classes.imageFade}></div>
154	{digest?.onsiteImageId && <CloudinaryImage2	×
155	publicId={digest.onsiteImageId}
156	className={classes.image}
157	/>}
158	</div>
159	</AnalyticsContext>
160	</>
161	);
162	};
163
164	const EADigestPageComponent = registerComponent(	1✔
165	"EADigestPage",
166	EADigestPage,
167	{styles},
168	);
169
170	declare global {
171	interface ComponentTypes {
172	EADigestPage: typeof EADigestPageComponent;
173	}
174	}

ForumMagnum / ForumMagnum / 9425144174

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