9087759435

Committed 14 May 2024 11:57PM UTC coverage: 31.933% (-0.003%) from 31.936%

Build # 9087759435

Build Type

Pull #9288

github

Committed by

jimrandomh

Commit Message

Fix SSR mismatch/rerender if 90-days-ago crosses a DST boundary

Question: It is May 14, 16:50, Pacific time. What time was it 90 days
ago? Answer: It depends what timezone you do the computation in! If it
crosses a DST boundary, this will be 90*24+1 hours ago instead of 90*24
hours ago.

This causes the `after` filter in `LWHomePosts` to be different when the
client computes it (in the client timezone) than when the server computes
it (in the server timezone), which causes the post list to display, then
turn blank and refresh.

This is closely related to the bug that
f549fdd77 tried to fix.

Co-Authored-By: Robert M <bobert.mushky@gmail.com>

Pull Request Pull Request #9288: Fix SSR mismatch/rerender if 90-days-ago crosses a DST boundary

Run Details

4782 of 39046 branches covered (12.25%)

Branch coverage included in aggregate %.

2 of 13 new or added lines in 9 files covered. (15.38%)

6 existing lines in 3 files now uncovered.

27820 of 63049 relevant lines covered (44.12%)

179.95 hits per line

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

31.43

/packages/lesswrong/components/posts/PostsTimeframeListExponential.tsx

import React, { useState } from 'react';
import { useCurrentTime } from '../../lib/utils/timeUtil';
import { Components, registerComponent } from "../../lib/vulcan-lib";
import moment from 'moment';
import type { Moment } from 'moment';
import { getTimeBlockTitle } from './PostsTimeframeList';
import { preferredHeadingCase } from '../../themes/forumTheme';
import { loadMoreTimeframeMessages, TimeframeType } from './timeframeUtils';

const styles = (theme: ThemeType): JssStyles => ({
})

interface TimeBlockRange {
  before: Moment
  after: Moment
  // Approximate size of the timeframe (used for things like the empty-list message)
  timeframe: TimeframeType
  // Title on the block, with variants for different screen sizes
  getTitle: (size: 'xsDown' | 'smUp' | null) => string
}

const PostsTimeframeListExponential = ({postListParameters, classes}: {
  postListParameters: PostsViewTerms,
  classes: ClassesType,
}) => {
  const { PostsTimeBlock, Typography } = Components;
  const now = useCurrentTime();
  const [moreMonthsCount,setMoreMonthsCount] = useState(0);
  
  const loadMoreMonths = () => {
    setMoreMonthsCount(moreMonthsCount + 12);
  }

  const timeframes: TimeBlockRange[] = [
    // Today and Yesterday
    {
      after: moment(now).add(-24,'hours').startOf('day'),
      before: moment(now).endOf('day'),
      timeframe: "daily",
      getTitle: (size) => preferredHeadingCase("Today and Yesterday"),
    },
    // Past week
    {
      after: moment(now).add(-7*24,'hours').startOf('day'),
      before: moment(now).add(-24,'hours').startOf('day'),
      timeframe: "weekly",
      getTitle: (size) => preferredHeadingCase("Past week"),
    },
    // Past two weeks
    {
      after: moment(now).add(-14*24,'hours').startOf('day'),
      before: moment(now).add(-7*24,'hours').startOf('day'),
      timeframe: "weekly",
      getTitle: (size) => preferredHeadingCase("Past 14 days"),
    },
    // Past month
    {
      after: moment(now).add(-31*24,'hours').startOf('day'),
      before: moment(now).add(-14*24,'hours').startOf('day'),
      timeframe: "monthly",
      getTitle: (size) => preferredHeadingCase("Past 31 days"),
    }
  ];
  
  // Past two months, round to earlier month boundary
  const roundedMonthStart = moment(now).add(-31*24,'hours').startOf('month').add(-1,'M');
  timeframes.push({
    after: roundedMonthStart,
    before: moment(now).add(-31*24,'hours').startOf('day'),
    timeframe: "monthly",
    // Not calling preferredHeadingCase because month names are always capitalized
    getTitle: (size) => `Since ${roundedMonthStart.format("MMMM Do")}`,
  });

  // Month-blocks created by clicking Load More
  for (let i=0; i<moreMonthsCount; i++) {
    const monthStart = moment(roundedMonthStart).add(-(i+1),'M');
    const monthEnd = moment(roundedMonthStart).add(-i,'M');
    timeframes.push({
      after: monthStart,
      before: monthEnd,
      timeframe: "monthly",
      getTitle: (size) => getTimeBlockTitle(monthStart, 'monthly', size),
    });
  }

  return <div>
    {timeframes.map((timeframe,i) => <div key={i}>
      <PostsTimeBlock
        dateForTitle={timeframe.after}
        getTitle={timeframe.getTitle}
        before={timeframe.before}
        after={timeframe.after}
        timeframe={timeframe.timeframe}
        terms={{
          ...postListParameters,
          limit: 16
        }}
        timeBlockLoadComplete={()=>{}}
        hideIfEmpty={true}
        shortform="frontpage"
        includeTags={true}
      />
    </div>)}
    <Typography
      variant="body1"
      className={classes.loadMore}
      onClick={loadMoreMonths}
    >
      <a>{preferredHeadingCase(loadMoreTimeframeMessages["monthly"])}</a>
    </Typography>
  </div>
}

const getMultiDayTitle = (
  startDate: moment.Moment,
  endDate: moment.Moment,
  size: 'xsDown' | 'smUp' | null
) => {
  const dayOfWeekFormat = (size==='smUp') ? "dddd" : "ddd";
  return `${startDate.format(dayOfWeekFormat)}-${endDate.format(dayOfWeekFormat)}, ${startDate.format("MMM Do YYYY")}`
}

const PostsTimeframeListExponentialComponent = registerComponent('PostsTimeframeListExponential', PostsTimeframeListExponential, {styles});

declare global {
  interface ComponentTypes {
    PostsTimeframeListExponential: typeof PostsTimeframeListExponentialComponent
  }
}


1	import React, { useState } from 'react';	1✔
2	import { useCurrentTime } from '../../lib/utils/timeUtil';	1✔
3	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
4	import moment from 'moment';	1✔
5	import type { Moment } from 'moment';
6	import { getTimeBlockTitle } from './PostsTimeframeList';	1✔
7	import { preferredHeadingCase } from '../../themes/forumTheme';	1✔
8	import { loadMoreTimeframeMessages, TimeframeType } from './timeframeUtils';	1✔
9
10	const styles = (theme: ThemeType): JssStyles => ({	1✔
11	})
12
13	interface TimeBlockRange {
14	before: Moment
15	after: Moment
16	// Approximate size of the timeframe (used for things like the empty-list message)
17	timeframe: TimeframeType
18	// Title on the block, with variants for different screen sizes
19	getTitle: (size: 'xsDown' \| 'smUp' \| null) => string
20	}
21
22	const PostsTimeframeListExponential = ({postListParameters, classes}: {	1✔
23	postListParameters: PostsViewTerms,
24	classes: ClassesType,
25	}) => {
26	const { PostsTimeBlock, Typography } = Components;	×
27	const now = useCurrentTime();	×
28	const [moreMonthsCount,setMoreMonthsCount] = useState(0);	×
29
30	const loadMoreMonths = () => {	×
31	setMoreMonthsCount(moreMonthsCount + 12);	×
32	}
33
34	const timeframes: TimeBlockRange[] = [	×
35	// Today and Yesterday
36	{
37	after: moment(now).add(-24,'hours').startOf('day'),
38	before: moment(now).endOf('day'),
39	timeframe: "daily",
40	getTitle: (size) => preferredHeadingCase("Today and Yesterday"),	×
41	},
42	// Past week
43	{
44	after: moment(now).add(-7*24,'hours').startOf('day'),
45	before: moment(now).add(-24,'hours').startOf('day'),
46	timeframe: "weekly",
47	getTitle: (size) => preferredHeadingCase("Past week"),	×
48	},
49	// Past two weeks
50	{
51	after: moment(now).add(-14*24,'hours').startOf('day'),
52	before: moment(now).add(-7*24,'hours').startOf('day'),
53	timeframe: "weekly",
54	getTitle: (size) => preferredHeadingCase("Past 14 days"),	×
55	},
56	// Past month
57	{
58	after: moment(now).add(-31*24,'hours').startOf('day'),
59	before: moment(now).add(-14*24,'hours').startOf('day'),
60	timeframe: "monthly",
61	getTitle: (size) => preferredHeadingCase("Past 31 days"),	×
62	}
63	];
64
65	// Past two months, round to earlier month boundary
NEW 66	const roundedMonthStart = moment(now).add(-31*24,'hours').startOf('month').add(-1,'M');	×
67	timeframes.push({	×
68	after: roundedMonthStart,
69	before: moment(now).add(-31*24,'hours').startOf('day'),
70	timeframe: "monthly",
71	// Not calling preferredHeadingCase because month names are always capitalized
72	getTitle: (size) => `Since ${roundedMonthStart.format("MMMM Do")}`,	×
73	});
74
75	// Month-blocks created by clicking Load More
76	for (let i=0; i<moreMonthsCount; i++) {	×
77	const monthStart = moment(roundedMonthStart).add(-(i+1),'M');	×
78	const monthEnd = moment(roundedMonthStart).add(-i,'M');	×
79	timeframes.push({	×
80	after: monthStart,
81	before: monthEnd,
82	timeframe: "monthly",
83	getTitle: (size) => getTimeBlockTitle(monthStart, 'monthly', size),	×
84	});
85	}
86
87	return <div>	×
88	{timeframes.map((timeframe,i) => <div key={i}>	×
89	<PostsTimeBlock
90	dateForTitle={timeframe.after}
91	getTitle={timeframe.getTitle}
92	before={timeframe.before}
93	after={timeframe.after}
94	timeframe={timeframe.timeframe}
95	terms={{
96	...postListParameters,
97	limit: 16
98	}}
99	timeBlockLoadComplete={()=>{}}
100	hideIfEmpty={true}
101	shortform="frontpage"
102	includeTags={true}
103	/>
104	</div>)}
105	<Typography
106	variant="body1"
107	className={classes.loadMore}
108	onClick={loadMoreMonths}
109	>
110	<a>{preferredHeadingCase(loadMoreTimeframeMessages["monthly"])}</a>
111	</Typography>
112	</div>
113	}
114
115	const getMultiDayTitle = (	1✔
116	startDate: moment.Moment,
117	endDate: moment.Moment,
118	size: 'xsDown' \| 'smUp' \| null
119	) => {
120	const dayOfWeekFormat = (size==='smUp') ? "dddd" : "ddd";	×
121	return `${startDate.format(dayOfWeekFormat)}-${endDate.format(dayOfWeekFormat)}, ${startDate.format("MMM Do YYYY")}`	×
122	}
123
124	const PostsTimeframeListExponentialComponent = registerComponent('PostsTimeframeListExponential', PostsTimeframeListExponential, {styles});	1✔
125
126	declare global {
127	interface ComponentTypes {
128	PostsTimeframeListExponential: typeof PostsTimeframeListExponentialComponent
129	}
130	}
131

ForumMagnum / ForumMagnum / 9087759435

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