10194445735

Committed 01 Aug 2024 08:03AM UTC coverage: 32.042% (+0.2%) from 31.865%

Build # 10194445735

Build Type

push

github

Committed by

jimrandomh

Commit Message

Column-sizing for sidenotes

Run Details

4938 of 40130 branches covered (12.31%)

Branch coverage included in aggregate %.

2 of 4 new or added lines in 2 files covered. (50.0%)

1432 existing lines in 50 files now uncovered.

28749 of 65004 relevant lines covered (44.23%)

180.69 hits per line

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

20.0

/packages/lesswrong/components/dialogues/DialoguesList.tsx

import React, { useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import withErrorBoundary from '../common/withErrorBoundary';
import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';
import { usePaginatedResolver } from '../hooks/usePaginatedResolver';
import { Link } from '../../lib/reactRouterWrapper';

const styles = (theme: ThemeType) => ({
  content: {
    paddingTop: 0,
    paddingRight: 35,
    paddingLeft: 16,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    marginRight: 75,
    position: "relative",
    zIndex: theme.zIndexes.spotlightItem,
    [theme.breakpoints.down('xs')]: {
      marginRight: 10,
      paddingRight: 20,
    },
    "& p": {
      marginBottom: 0,
      marginTop: 5,
    }
  },
  subsection: {
    marginBottom: theme.spacing.unit,
  },
  prompt: {
    color: theme.palette.lwTertiary.main,
    fontWeight: 645,
  },
  subheading: {
    marginTop: '10px',
  },

  dialogueUserRow: { 
    display: 'flex',
    alignItems: 'center',
    background: theme.palette.panelBackground.default,
    padding: 8,
    marginBottom: 3,
    borderRadius: 2,
  },
  dialogueLeftContainer: {
    display: 'flex',
    maxWidth: '135px',
    minWidth: '135px',
    alignItems: 'center',
  },
  dialogueRightContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingRight: 10,
    marginRight: 3,
    marginLeft: 'auto',
  },
  dialogueSectionSettings: {
    display: "flex",
    alignItems: "end",
  },
  settingsButton: {
    cursor: "pointer",
    marginLeft: "5px",
  },
  link: {
    color: theme.palette.primary.main,
    cursor: 'pointer',
    '&:hover': {
      color: theme.palette.primary.light,
    }
  },
  closeIcon: { 
    color: theme.palette.grey[500],
    opacity: 0.5,
    padding: 2,
  },
});
 
const DialoguesList = ({ currentUser, classes }: { currentUser: UsersCurrent, classes: ClassesType<typeof styles> }) => {
  const { PostsItem, SectionButton, SettingsButton, LWTooltip, SingleColumnSection, SectionTitle, SectionSubtitle, DialoguesSectionFrontpageSettings, Typography } = Components
  const [showSettings, setShowSettings] = useState(false);
  const { captureEvent } = useTracking();
  const currentDate = new Date();
  const isEvenDay = currentDate.getUTCDate() % 2 === 0;
  const showReciprocityRecommendations = (currentUser.karma > 100) && isEvenDay; // hide reciprocity recommendations if user has less than 100 karma, or if the current day is not an even number (just a hack to avoid spamming folks)

  const { results: dialoguePosts } = usePaginatedResolver({
    fragmentName: "PostsListWithVotes",
    resolverName: "RecentlyActiveDialogues",
    limit: 3,
  }); 

  const { results: myDialogues } = usePaginatedResolver({
    fragmentName: "PostsListWithVotes",
    resolverName: "MyDialogues",
    limit: 3,
  });

  const renderMyDialogues = myDialogues?.length && currentUser.showMyDialogues;

  const dialoguesTooltip = (<div>
    <p>Dialogues between a small group of users. Click to see more.</p>
  </div>);

  const myDialoguesTooltip = (<div>
    <div>These are the dialogues you are involved in (both drafts and published)</div>
  </div>);

  const dialogueSettingsTooltip = (<div>
    <p> Adjust which items are shown or hidden in the Dialogues section.</p>
  </div>);

  const dialogueSettingsSectionTitle = (
      <LWTooltip placement="top-start" title={dialogueSettingsTooltip}>
        <SettingsButton label={``} onClick={() => setShowSettings(!showSettings)} />
      </LWTooltip>
  );

  const dialogueSectionSettings = showSettings && (
    <DialoguesSectionFrontpageSettings
      hidden={false}
      currentShowDialogues={currentUser.showDialoguesList}
      currentShowMyDialogues={currentUser.showMyDialogues}
    />
  );

  const dialoguesList = currentUser.showDialoguesList && dialoguePosts?.map((post, i: number) => (
    <PostsItem
      key={post._id} post={post}
      showBottomBorder={i < dialoguePosts.length - 1}
    />
  ));

  const myDialoguesList = renderMyDialogues && (
    <div className={classes.subsection}>
      <AnalyticsContext pageSubSectionContext="myDialogues">
        <LWTooltip placement="top-start" title={myDialoguesTooltip}>
          <Link to={"/dialogues"}>
            <SectionSubtitle className={classes.subheading}>
              My Dialogues (only visible to you)
            </SectionSubtitle>
          </Link>
        </LWTooltip>
        {myDialogues?.map((post, i: number) => <PostsItem
          key={post._id} post={post}
          showBottomBorder={i < myDialogues.length - 1} />
        )}
      </AnalyticsContext>
    </div>
  );

  return <AnalyticsContext pageSubSectionContext="dialoguesList">
    <SingleColumnSection>
      <SectionTitle href="/dialogues"
        title={<LWTooltip placement="top-start" title={dialoguesTooltip}>
          Dialogues
        </LWTooltip>}
      >
        {dialogueSettingsSectionTitle}
      </SectionTitle>

      {dialogueSectionSettings}
      
      {dialoguesList}
      {myDialoguesList}

   </SingleColumnSection>
  </AnalyticsContext>
}

const DialoguesListComponent = registerComponent('DialoguesList', DialoguesList, {
  hocs: [withErrorBoundary],
  styles
});

declare global {
  interface ComponentTypes {
    DialoguesList: typeof DialoguesListComponent
  }
}

1	import React, { useState } from 'react';	1✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import withErrorBoundary from '../common/withErrorBoundary';	1✔
4	import { AnalyticsContext, useTracking } from '../../lib/analyticsEvents';	1✔
5	import { usePaginatedResolver } from '../hooks/usePaginatedResolver';	1✔
6	import { Link } from '../../lib/reactRouterWrapper';	1✔
7
8	const styles = (theme: ThemeType) => ({	1✔
9	content: {
10	paddingTop: 0,
11	paddingRight: 35,
12	paddingLeft: 16,
13	display: "flex",
14	flexDirection: "column",
15	justifyContent: "space-between",
16	marginRight: 75,
17	position: "relative",
18	zIndex: theme.zIndexes.spotlightItem,
19	[theme.breakpoints.down('xs')]: {
20	marginRight: 10,
21	paddingRight: 20,
22	},
23	"& p": {
24	marginBottom: 0,
25	marginTop: 5,
26	}
27	},
28	subsection: {
29	marginBottom: theme.spacing.unit,
30	},
31	prompt: {
32	color: theme.palette.lwTertiary.main,
33	fontWeight: 645,
34	},
35	subheading: {
36	marginTop: '10px',
37	},
38
39	dialogueUserRow: {
40	display: 'flex',
41	alignItems: 'center',
42	background: theme.palette.panelBackground.default,
43	padding: 8,
44	marginBottom: 3,
45	borderRadius: 2,
46	},
47	dialogueLeftContainer: {
48	display: 'flex',
49	maxWidth: '135px',
50	minWidth: '135px',
51	alignItems: 'center',
52	},
53	dialogueRightContainer: {
54	display: 'flex',
55	justifyContent: 'space-between',
56	paddingRight: 10,
57	marginRight: 3,
58	marginLeft: 'auto',
59	},
60	dialogueSectionSettings: {
61	display: "flex",
62	alignItems: "end",
63	},
64	settingsButton: {
65	cursor: "pointer",
66	marginLeft: "5px",
67	},
68	link: {
69	color: theme.palette.primary.main,
70	cursor: 'pointer',
71	'&:hover': {
72	color: theme.palette.primary.light,
73	}
74	},
75	closeIcon: {
76	color: theme.palette.grey[500],
77	opacity: 0.5,
78	padding: 2,
79	},
80	});
81
82	const DialoguesList = ({ currentUser, classes }: { currentUser: UsersCurrent, classes: ClassesType<typeof styles> }) => {	1✔
UNCOV 83	const { PostsItem, SectionButton, SettingsButton, LWTooltip, SingleColumnSection, SectionTitle, SectionSubtitle, DialoguesSectionFrontpageSettings, Typography } = Components	×
UNCOV 84	const [showSettings, setShowSettings] = useState(false);	×
UNCOV 85	const { captureEvent } = useTracking();	×
UNCOV 86	const currentDate = new Date();	×
UNCOV 87	const isEvenDay = currentDate.getUTCDate() % 2 === 0;	×
UNCOV 88	const showReciprocityRecommendations = (currentUser.karma > 100) && isEvenDay; // hide reciprocity recommendations if user has less than 100 karma, or if the current day is not an even number (just a hack to avoid spamming folks)	×
89
UNCOV 90	const { results: dialoguePosts } = usePaginatedResolver({	×
91	fragmentName: "PostsListWithVotes",
92	resolverName: "RecentlyActiveDialogues",
93	limit: 3,
94	});
95
UNCOV 96	const { results: myDialogues } = usePaginatedResolver({	×
97	fragmentName: "PostsListWithVotes",
98	resolverName: "MyDialogues",
99	limit: 3,
100	});
101
UNCOV 102	const renderMyDialogues = myDialogues?.length && currentUser.showMyDialogues;	×
103
UNCOV 104	const dialoguesTooltip = (<div>	×
105	<p>Dialogues between a small group of users. Click to see more.</p>
106	</div>);
107
UNCOV 108	const myDialoguesTooltip = (<div>	×
109	<div>These are the dialogues you are involved in (both drafts and published)</div>
110	</div>);
111
UNCOV 112	const dialogueSettingsTooltip = (<div>	×
113	<p> Adjust which items are shown or hidden in the Dialogues section.</p>
114	</div>);
115
116	const dialogueSettingsSectionTitle = (
UNCOV 117	<LWTooltip placement="top-start" title={dialogueSettingsTooltip}>	×
UNCOV 118	<SettingsButton label={``} onClick={() => setShowSettings(!showSettings)} />	×
119	</LWTooltip>
120	);
121
UNCOV 122	const dialogueSectionSettings = showSettings && (	×
123	<DialoguesSectionFrontpageSettings
124	hidden={false}
125	currentShowDialogues={currentUser.showDialoguesList}
126	currentShowMyDialogues={currentUser.showMyDialogues}
127	/>
128	);
129
UNCOV 130	const dialoguesList = currentUser.showDialoguesList && dialoguePosts?.map((post, i: number) => (	×
UNCOV 131	<PostsItem	×
132	key={post._id} post={post}
133	showBottomBorder={i < dialoguePosts.length - 1}
134	/>
135	));
136
UNCOV 137	const myDialoguesList = renderMyDialogues && (	×
138	<div className={classes.subsection}>
139	<AnalyticsContext pageSubSectionContext="myDialogues">
140	<LWTooltip placement="top-start" title={myDialoguesTooltip}>
141	<Link to={"/dialogues"}>
142	<SectionSubtitle className={classes.subheading}>
143	My Dialogues (only visible to you)
144	</SectionSubtitle>
145	</Link>
146	</LWTooltip>
UNCOV 147	{myDialogues?.map((post, i: number) => <PostsItem	×
148	key={post._id} post={post}
149	showBottomBorder={i < myDialogues.length - 1} />
150	)}
151	</AnalyticsContext>
152	</div>
153	);
154
UNCOV 155	return <AnalyticsContext pageSubSectionContext="dialoguesList">	×
156	<SingleColumnSection>
157	<SectionTitle href="/dialogues"
158	title={<LWTooltip placement="top-start" title={dialoguesTooltip}>
159	Dialogues
160	</LWTooltip>}
161	>
162	{dialogueSettingsSectionTitle}
163	</SectionTitle>
164
165	{dialogueSectionSettings}
166
167	{dialoguesList}
168	{myDialoguesList}
169
170	</SingleColumnSection>
171	</AnalyticsContext>
172	}
173
174	const DialoguesListComponent = registerComponent('DialoguesList', DialoguesList, {	1✔
175	hocs: [withErrorBoundary],
176	styles
177	});
178
179	declare global {
180	interface ComponentTypes {
181	DialoguesList: typeof DialoguesListComponent
182	}
183	}

ForumMagnum / ForumMagnum / 10194445735

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