10670107228

Committed 02 Sep 2024 03:50PM UTC coverage: 31.897% (-0.02%) from 31.912%

Build # 10670107228

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9695 from ForumMagnum/master

[EA] deploy relevance tooltip, various performance optimisations, fetchFragment code resolvers, lots of LW stuff

Run Details

5071 of 41224 branches covered (12.3%)

Branch coverage included in aggregate %.

87 of 378 new or added lines in 32 files covered. (23.02%)

61 existing lines in 44 files now uncovered.

29369 of 66749 relevant lines covered (44.0%)

185.64 hits per line

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

28.81

/packages/lesswrong/components/dropdowns/posts/SetSideItemVisibility.tsx

import React, { createContext, useContext, useState, useMemo } from 'react';
import { registerComponent, Components } from '../../../lib/vulcan-lib';
import { sideCommentFilterMinKarma } from '../../../lib/collections/posts/constants';
import Paper from '@material-ui/core/Paper';
import ChatBubbleOutline from '@material-ui/icons/ChatBubbleOutline';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Check from '@material-ui/icons/Check';
import classNames from 'classnames';
import { hasSideComments } from '../../../lib/betas';

const styles = (theme: ThemeType): JssStyles => ({
  check: {
    width: 20,
    marginRight: 8,
  },
  notChecked: {
    width: 20,
    marginRight: 8,
  },
  currentSelectionPreview: {
    position: "absolute",
    right: 12,
    top: 12,
    color: theme.palette.text.dim40,
    
    [theme.breakpoints.down('xs')]: {
      display: "none",
    }
  },
  showOnlyIfMobile: {
    display: "none",
    [theme.breakpoints.down('xs')]: {
      display: "block",
    },
  },
  largerScreenNeededNotice: {
    padding: 8,
    ...theme.typography.commentStyle,
  },
});

export type SideCommentMode = "hidden"|"highKarma"|"all";
const sideCommentModes: {name: SideCommentMode, label: string, detailedLabel?: string}[] = [
  {name: "hidden", label: "Hide All"},
  {name: "highKarma", label: "Show Upvoted", detailedLabel: `Show Upvoted (${sideCommentFilterMinKarma}+ karma)`},
  {name: "all", label: "Show All"},
];

export type InlineReactsMode = "hidden"|"netPositive"|"all";
const inlineReactModes: {name: InlineReactsMode, label: string, detailedLabel?: string}[] = [
  {name: "hidden", label: "Hide All"},
  {name: "netPositive", label: "Hide Downvoted"},
  {name: "all", label: "Show All"},
];
export const defaultInlineReactsMode: InlineReactsMode = "netPositive";

export type SideItemVisibilityContextType = {
  sideCommentMode: SideCommentMode,
  setSideCommentMode: (mode: SideCommentMode) => void,
  inlineReactsMode: InlineReactsMode,
  setInlineReactsMode: (mode: InlineReactsMode) => void,
}

export const SideItemVisibilityContext = createContext<SideItemVisibilityContextType|null>(null);

const SetSideItemVisibility = ({classes}: {
  classes: ClassesType
}) => {
  const sideItemVisibility = useContext(SideItemVisibilityContext);
  const { LWTooltip, MenuItem } = Components;
  
  // If in a context that isn't a post page (eg, the triple-dot menu on posts in
  // a post list), this context won't be there and this option doesn't apply, so
  // hide it.
  if (!sideItemVisibility || !hasSideComments)
    return null;
  
  const {sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode} = sideItemVisibility;
  const sideCommentsSubmenu = <Paper>
    <span className={classNames(classes.showOnlyIfMobile, classes.largerScreenNeededNotice)}>
      Side-comments require a larger screen
    </span>
    {sideCommentModes.map(mode =>
      <MenuItem
        key={mode.name}
        onClick={() => {
          setSideCommentMode(mode.name)
        }}
      >
        {sideCommentMode === mode.name
          ? <Check className={classes.check}/>
          : <div className={classes.notChecked}/>
        }
        {mode.detailedLabel || mode.label}
      </MenuItem>
    )}
  </Paper>
  const inlineReactsSubmenu = <Paper>
    {inlineReactModes.map(mode =>
      <MenuItem
        key={mode.name}
        onClick={() => {
          setInlineReactsMode(mode.name)
        }}
      >
        {inlineReactsMode === mode.name
          ? <Check className={classes.check}/>
          : <div className={classes.notChecked}/>
        }
        {mode.detailedLabel || mode.label}
      </MenuItem>
    )}
  </Paper>
  
  return <>
    <LWTooltip
      title={sideCommentsSubmenu}
      tooltip={false} clickable={true}
      inlineBlock={false}
      placement="left-start"
    >
      <MenuItem>
        <ListItemIcon>
          <ChatBubbleOutline/>
        </ListItemIcon>
        <span className={classes.sideItemLabel}>
          Side-comments
        </span>
        <span className={classNames(classes.showOnlyIfMobile, classes.currentSelectionPreview)}>
          Hidden
        </span>
        <span className={classes.currentSelectionPreview}>
          {sideCommentModes.find(mode=>mode.name===sideCommentMode)?.label}
        </span>
      </MenuItem>
    </LWTooltip>
    <LWTooltip
      title={inlineReactsSubmenu}
      tooltip={false} clickable={true}
      inlineBlock={false}
      placement="left-start"
    >
      <MenuItem>
        <ListItemIcon>
          <ChatBubbleOutline/>
        </ListItemIcon>
        <span className={classes.sideItemLabel}>
          Inline Reactions
        </span>
        <span className={classes.currentSelectionPreview}>
          {inlineReactModes.find(mode=>mode.name===inlineReactsMode)?.label}
        </span>
        
      </MenuItem>
    </LWTooltip>
  </>
}

export const SideItemVisibilityContextProvider = ({post, children}: {
  post:  PostsDetails|undefined
  children: React.ReactNode
}) => {
  const defaultSideCommentVisibility = hasSideComments
    ? (post?.sideCommentVisibility ?? "highKarma")
    : "hidden";
  const [sideCommentMode,setSideCommentMode] = useState<SideCommentMode>(defaultSideCommentVisibility as SideCommentMode);
  const [inlineReactsMode,setInlineReactsMode] = useState<InlineReactsMode>(defaultInlineReactsMode);
  const context: SideItemVisibilityContextType = useMemo(
    () => ({ sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode }),
    [sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode]
  );

  return <SideItemVisibilityContext.Provider value={context}>
    {children}
  </SideItemVisibilityContext.Provider>
}

const SetSideItemVisibilityComponent = registerComponent('SetSideItemVisibility', SetSideItemVisibility, {styles});

declare global {
  interface ComponentTypes {
    SetSideItemVisibility: typeof SetSideItemVisibilityComponent
  }
}

1	import React, { createContext, useContext, useState, useMemo } from 'react';	57✔
2	import { registerComponent, Components } from '../../../lib/vulcan-lib';	19✔
3	import { sideCommentFilterMinKarma } from '../../../lib/collections/posts/constants';	19✔
4	import Paper from '@material-ui/core/Paper';	19✔
5	import ChatBubbleOutline from '@material-ui/icons/ChatBubbleOutline';	19✔
6	import ListItemIcon from '@material-ui/core/ListItemIcon';	19✔
7	import Check from '@material-ui/icons/Check';	19✔
8	import classNames from 'classnames';	19✔
9	import { hasSideComments } from '../../../lib/betas';	19✔
10
11	const styles = (theme: ThemeType): JssStyles => ({	19✔
12	check: {
13	width: 20,
14	marginRight: 8,
15	},
16	notChecked: {
17	width: 20,
18	marginRight: 8,
19	},
20	currentSelectionPreview: {
21	position: "absolute",
22	right: 12,
23	top: 12,
24	color: theme.palette.text.dim40,
25
26	[theme.breakpoints.down('xs')]: {
27	display: "none",
28	}
29	},
30	showOnlyIfMobile: {
31	display: "none",
32	[theme.breakpoints.down('xs')]: {
33	display: "block",
34	},
35	},
36	largerScreenNeededNotice: {
37	padding: 8,
38	...theme.typography.commentStyle,
39	},
40	});
41
42	export type SideCommentMode = "hidden"\|"highKarma"\|"all";
43	const sideCommentModes: {name: SideCommentMode, label: string, detailedLabel?: string}[] = [	19✔
44	{name: "hidden", label: "Hide All"},
45	{name: "highKarma", label: "Show Upvoted", detailedLabel: `Show Upvoted (${sideCommentFilterMinKarma}+ karma)`},
46	{name: "all", label: "Show All"},
47	];
48
49	export type InlineReactsMode = "hidden"\|"netPositive"\|"all";
50	const inlineReactModes: {name: InlineReactsMode, label: string, detailedLabel?: string}[] = [	19✔
51	{name: "hidden", label: "Hide All"},
52	{name: "netPositive", label: "Hide Downvoted"},
53	{name: "all", label: "Show All"},
54	];
55	export const defaultInlineReactsMode: InlineReactsMode = "netPositive";	19✔
56
57	export type SideItemVisibilityContextType = {
58	sideCommentMode: SideCommentMode,
59	setSideCommentMode: (mode: SideCommentMode) => void,
60	inlineReactsMode: InlineReactsMode,
61	setInlineReactsMode: (mode: InlineReactsMode) => void,
62	}
63
64	export const SideItemVisibilityContext = createContext<SideItemVisibilityContextType\|null>(null);	19✔
65
66	const SetSideItemVisibility = ({classes}: {	19✔
67	classes: ClassesType
68	}) => {
NEW 69	const sideItemVisibility = useContext(SideItemVisibilityContext);	×
NEW 70	const { LWTooltip, MenuItem } = Components;	×
71
72	// If in a context that isn't a post page (eg, the triple-dot menu on posts in
73	// a post list), this context won't be there and this option doesn't apply, so
74	// hide it.
NEW 75	if (!sideItemVisibility \|\| !hasSideComments)	×
NEW 76	return null;	×
77
NEW 78	const {sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode} = sideItemVisibility;	×
NEW 79	const sideCommentsSubmenu = <Paper>	×
80	<span className={classNames(classes.showOnlyIfMobile, classes.largerScreenNeededNotice)}>
81	Side-comments require a larger screen
82	</span>
83	{sideCommentModes.map(mode =>
NEW 84	<MenuItem	×
85	key={mode.name}
86	onClick={() => {
NEW 87	setSideCommentMode(mode.name)	×
88	}}
89	>
90	{sideCommentMode === mode.name
91	? <Check className={classes.check}/>	×
92	: <div className={classes.notChecked}/>
93	}
94	{mode.detailedLabel \|\| mode.label}	×
95	</MenuItem>
96	)}
97	</Paper>
NEW 98	const inlineReactsSubmenu = <Paper>	×
99	{inlineReactModes.map(mode =>
NEW 100	<MenuItem	×
101	key={mode.name}
102	onClick={() => {
NEW 103	setInlineReactsMode(mode.name)	×
104	}}
105	>
106	{inlineReactsMode === mode.name
107	? <Check className={classes.check}/>	×
108	: <div className={classes.notChecked}/>
109	}
110	{mode.detailedLabel \|\| mode.label}	×
111	</MenuItem>
112	)}
113	</Paper>
114
NEW 115	return <>	×
116	<LWTooltip
117	title={sideCommentsSubmenu}
118	tooltip={false} clickable={true}
119	inlineBlock={false}
120	placement="left-start"
121	>
122	<MenuItem>
123	<ListItemIcon>
124	<ChatBubbleOutline/>
125	</ListItemIcon>
126	<span className={classes.sideItemLabel}>
127	Side-comments
128	</span>
129	<span className={classNames(classes.showOnlyIfMobile, classes.currentSelectionPreview)}>
130	Hidden
131	</span>
132	<span className={classes.currentSelectionPreview}>
NEW 133	{sideCommentModes.find(mode=>mode.name===sideCommentMode)?.label}	×
134	</span>
135	</MenuItem>
136	</LWTooltip>
137	<LWTooltip
138	title={inlineReactsSubmenu}
139	tooltip={false} clickable={true}
140	inlineBlock={false}
141	placement="left-start"
142	>
143	<MenuItem>
144	<ListItemIcon>
145	<ChatBubbleOutline/>
146	</ListItemIcon>
147	<span className={classes.sideItemLabel}>
148	Inline Reactions
149	</span>
150	<span className={classes.currentSelectionPreview}>
NEW 151	{inlineReactModes.find(mode=>mode.name===inlineReactsMode)?.label}	×
152	</span>
153
154	</MenuItem>
155	</LWTooltip>
156	</>
157	}
158
159	export const SideItemVisibilityContextProvider = ({post, children}: {	19✔
160	post: PostsDetails\|undefined
161	children: React.ReactNode
162	}) => {
NEW 163	const defaultSideCommentVisibility = hasSideComments	×
164	? (post?.sideCommentVisibility ?? "highKarma")	×
165	: "hidden";
NEW 166	const [sideCommentMode,setSideCommentMode] = useState<SideCommentMode>(defaultSideCommentVisibility as SideCommentMode);	×
NEW 167	const [inlineReactsMode,setInlineReactsMode] = useState<InlineReactsMode>(defaultInlineReactsMode);	×
NEW 168	const context: SideItemVisibilityContextType = useMemo(	×
NEW 169	() => ({ sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode }),	×
170	[sideCommentMode, setSideCommentMode, inlineReactsMode, setInlineReactsMode]
171	);
172
NEW 173	return <SideItemVisibilityContext.Provider value={context}>	×
174	{children}
175	</SideItemVisibilityContext.Provider>
176	}
177
178	const SetSideItemVisibilityComponent = registerComponent('SetSideItemVisibility', SetSideItemVisibility, {styles});	19✔
179
180	declare global {
181	interface ComponentTypes {
182	SetSideItemVisibility: typeof SetSideItemVisibilityComponent
183	}
184	}

ForumMagnum / ForumMagnum / 10670107228

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