8896178024

Committed 30 Apr 2024 02:04PM UTC coverage: 32.039% (+0.09%) from 31.952%

Build # 8896178024

Build Type

Pull #9197

github

Committed by

Will-Howard

Commit Message

useCurrentTime in a few more places that might be cached

Pull Request Pull Request #9197: [Draft] Gracefully handle dates and times when using an old SSR

Run Details

4746 of 38491 branches covered (12.33%)

Branch coverage included in aggregate %.

60 of 106 new or added lines in 27 files covered. (56.6%)

23 existing lines in 8 files now uncovered.

27538 of 62274 relevant lines covered (44.22%)

179.57 hits per line

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

28.85

/packages/lesswrong/components/posts/PostsItemDate.tsx

import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { ExpandedDate } from '../common/FormatDate';
import moment from '../../lib/moment-timezone';
import { isFriendlyUI } from '../../themes/forumTheme';
import { useCurrentTime } from '../../lib/utils/timeUtil';

export const POSTED_AT_WIDTH = 38
export const START_TIME_WIDTH = 72

const customStyles = (theme: ThemeType) => isFriendlyUI
  ? {}
  : {
    fontWeight: 300,
    color: theme.palette.text.slightlyIntense2,
  };

const styles = (theme: ThemeType): JssStyles => ({
  postedAt: {
    ...(isFriendlyUI && {display: "flex"}),
    '&&': {
      cursor: "pointer",
      width: POSTED_AT_WIDTH,
      fontSize: "1rem",
      ...customStyles(theme),
      [theme.breakpoints.down('xs')]: {
        width: "auto",
      }
    }
  },
  startTime: {
    '&&': {
      cursor: "pointer",
      width: START_TIME_WIDTH,
      fontSize: "1rem",
      ...customStyles(theme),
      [theme.breakpoints.down('xs')]: {
        width: "auto",
      }
    }
  },
  tooltipSmallText: {
    ...theme.typography.tinyText,
    ...theme.typography.italic,
  },
  xsHide: {
    [theme.breakpoints.down('xs')]: {
      display: "none",
    },
  },
});

const PostsItemDate = ({post, noStyles, includeAgo, useCuratedDate, classes}: {
  post: PostsBase,
  noStyles?: boolean,
  includeAgo?: boolean,
  useCuratedDate?: boolean,
  classes: ClassesType,
}) => {
  const now = useCurrentTime();

  if (noStyles) {
    classes = {
      tooltipSmallText: classes.tooltipSmallText,
      xsHide: classes.xsHide,
    };
  }

  const { PostsItem2MetaInfo, FormatDate, LWTooltip } = Components;

  if (post.isEvent && post.startTime) {
    return <LWTooltip
      placement="right"
      title={<span>
        <div className={classes.tooltipSmallText}>Event starts at</div>
        <Components.EventTime post={post} />
      </span>}
    >
      <PostsItem2MetaInfo className={classes.startTime}>
        {moment(post.startTime).format("YYYY")===moment(now).format("YYYY")
          ? <FormatDate date={post.startTime} format={"MMM Do"} tooltip={false}/>
          : <FormatDate date={post.startTime} format={"YYYY MMM Do"} tooltip={false}/>
        }
      </PostsItem2MetaInfo>
    </LWTooltip>
  }

  if (post.isEvent && !post.startTime) {
    return <LWTooltip
      placement="right"
      title={<span>To Be Determined</span>}
    >
      <PostsItem2MetaInfo className={classes.startTime}>
        TBD
      </PostsItem2MetaInfo>
    </LWTooltip>
  }

  const dateToDisplay = useCuratedDate
    ? post.curatedDate || post.postedAt
    : post.postedAt;
  const timeFromNow = moment(new Date(dateToDisplay)).fromNow();
  const ago = includeAgo && timeFromNow !== "now"
    ? <span className={classes.xsHide}>&nbsp;ago</span>
    : null;

  if (post.curatedDate) {
    return <LWTooltip
      placement="right"
      title={<div>
        <div>Curated on <ExpandedDate date={post.curatedDate}/></div>
        <div>Posted on <ExpandedDate date={post.postedAt}/></div>
      </div>}
    >
      <PostsItem2MetaInfo className={classes.postedAt}>
        {timeFromNow}
        {ago}
      </PostsItem2MetaInfo>
    </LWTooltip>
  }

  return <LWTooltip
    placement="right"
    title={<ExpandedDate date={post.postedAt}/>}
  >
    <PostsItem2MetaInfo className={classes.postedAt}>
      {timeFromNow}
      {ago}
    </PostsItem2MetaInfo>
  </LWTooltip>
}

const PostsItemDateComponent = registerComponent("PostsItemDate", PostsItemDate, {styles});

declare global {
  interface ComponentTypes {
    PostsItemDate: typeof PostsItemDateComponent
  }
}


1	import React from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { ExpandedDate } from '../common/FormatDate';	1✔
4	import moment from '../../lib/moment-timezone';	1✔
5	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
6	import { useCurrentTime } from '../../lib/utils/timeUtil';	1✔
7
8	export const POSTED_AT_WIDTH = 38	1✔
9	export const START_TIME_WIDTH = 72	1✔
10
11	const customStyles = (theme: ThemeType) => isFriendlyUI	2✔
12	? {}	2!
13	: {
14	fontWeight: 300,
15	color: theme.palette.text.slightlyIntense2,
16	};
17
18	const styles = (theme: ThemeType): JssStyles => ({	1✔
19	postedAt: {
20	...(isFriendlyUI && {display: "flex"}),	2✔
21	'&&': {
22	cursor: "pointer",
23	width: POSTED_AT_WIDTH,
24	fontSize: "1rem",
25	...customStyles(theme),
26	[theme.breakpoints.down('xs')]: {
27	width: "auto",
28	}
29	}
30	},
31	startTime: {
32	'&&': {
33	cursor: "pointer",
34	width: START_TIME_WIDTH,
35	fontSize: "1rem",
36	...customStyles(theme),
37	[theme.breakpoints.down('xs')]: {
38	width: "auto",
39	}
40	}
41	},
42	tooltipSmallText: {
43	...theme.typography.tinyText,
44	...theme.typography.italic,
45	},
46	xsHide: {
47	[theme.breakpoints.down('xs')]: {
48	display: "none",
49	},
50	},
51	});
52
53	const PostsItemDate = ({post, noStyles, includeAgo, useCuratedDate, classes}: {	1✔
54	post: PostsBase,
55	noStyles?: boolean,
56	includeAgo?: boolean,
57	useCuratedDate?: boolean,
58	classes: ClassesType,
59	}) => {
NEW 60	const now = useCurrentTime();	×
61
62	if (noStyles) {	×
63	classes = {	×
64	tooltipSmallText: classes.tooltipSmallText,
65	xsHide: classes.xsHide,
66	};
67	}
68
69	const { PostsItem2MetaInfo, FormatDate, LWTooltip } = Components;	×
70
71	if (post.isEvent && post.startTime) {	×
72	return <LWTooltip	×
73	placement="right"
74	title={<span>
75	<div className={classes.tooltipSmallText}>Event starts at</div>
76	<Components.EventTime post={post} />
77	</span>}
78	>
79	<PostsItem2MetaInfo className={classes.startTime}>
80	{moment(post.startTime).format("YYYY")===moment(now).format("YYYY")
81	? <FormatDate date={post.startTime} format={"MMM Do"} tooltip={false}/>	×
82	: <FormatDate date={post.startTime} format={"YYYY MMM Do"} tooltip={false}/>
83	}
84	</PostsItem2MetaInfo>
85	</LWTooltip>
86	}
87
88	if (post.isEvent && !post.startTime) {	×
89	return <LWTooltip	×
90	placement="right"
91	title={<span>To Be Determined</span>}
92	>
93	<PostsItem2MetaInfo className={classes.startTime}>
94	TBD
95	</PostsItem2MetaInfo>
96	</LWTooltip>
97	}
98
99	const dateToDisplay = useCuratedDate	×
100	? post.curatedDate \|\| post.postedAt	×
101	: post.postedAt;
102	const timeFromNow = moment(new Date(dateToDisplay)).fromNow();	×
103	const ago = includeAgo && timeFromNow !== "now"	×
104	? <span className={classes.xsHide}> ago</span>	×
105	: null;
106
107	if (post.curatedDate) {	×
108	return <LWTooltip	×
109	placement="right"
110	title={<div>
111	<div>Curated on <ExpandedDate date={post.curatedDate}/></div>
112	<div>Posted on <ExpandedDate date={post.postedAt}/></div>
113	</div>}
114	>
115	<PostsItem2MetaInfo className={classes.postedAt}>
116	{timeFromNow}
117	{ago}
118	</PostsItem2MetaInfo>
119	</LWTooltip>
120	}
121
122	return <LWTooltip	×
123	placement="right"
124	title={<ExpandedDate date={post.postedAt}/>}
125	>
126	<PostsItem2MetaInfo className={classes.postedAt}>
127	{timeFromNow}
128	{ago}
129	</PostsItem2MetaInfo>
130	</LWTooltip>
131	}
132
133	const PostsItemDateComponent = registerComponent("PostsItemDate", PostsItemDate, {styles});	1✔
134
135	declare global {
136	interface ComponentTypes {
137	PostsItemDate: typeof PostsItemDateComponent
138	}
139	}
140

ForumMagnum / ForumMagnum / 8896178024

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