8830732283

Committed 25 Apr 2024 10:07AM UTC coverage: 32.041% (-0.01%) from 32.053%

Build # 8830732283

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9174 from ForumMagnum/master

[EA] Deploy upgrade to React 18

Run Details

4699 of 38101 branches covered (12.33%)

Branch coverage included in aggregate %.

9 of 47 new or added lines in 13 files covered. (19.15%)

5 existing lines in 4 files now uncovered.

27202 of 61461 relevant lines covered (44.26%)

181.93 hits per line

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

28.26

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

import React, { CSSProperties, useRef, useState } from 'react'
import { registerComponent, Components } from '../../../lib/vulcan-lib';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { useCurrentUser } from '../../common/withUser';
import { useTracking } from '../../../lib/analyticsEvents';
import { PopperPlacementType } from '@material-ui/core/Popper';
import { useIsAboveBreakpoint } from '../../hooks/useScreenWidth';
import { isFriendlyUI } from '../../../themes/forumTheme';
import classNames from 'classnames';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    cursor: "pointer"
  },
  icon: {
    verticalAlign: 'middle',
    color: isFriendlyUI ? theme.palette.grey[400] : undefined,
    cursor: "pointer",
  },
  popper: {
    position: "relative",
    zIndex: theme.zIndexes.postItemMenu
  },
})

const PostActionsButton = ({post, vertical, popperGap, autoPlace, flip, includeBookmark=true, className, classes}: {
  post: PostsList|SunshinePostsList,
  vertical?: boolean,
  popperGap?: number,
  autoPlace?: boolean,
  flip?: boolean,
  includeBookmark?: boolean,
  className?: string,
  classes: ClassesType,
}) => {
  const anchorEl = useRef<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const {captureEvent} = useTracking();
  const currentUser = useCurrentUser();

  // This is fine with SSR because the popper will only be rendered after use
  // interaction
  const isDesktopWatched = useIsAboveBreakpoint('xl');

  const popperPlacement: PopperPlacementType = isDesktopWatched || !autoPlace
    ? 'right-start'
    : 'left-start';
  let gapStyle: CSSProperties | undefined
  if (popperGap) {
    switch (popperPlacement) {
      case 'right-start':
        gapStyle = {marginLeft: popperGap}
        break;
      case 'left-start':
        gapStyle = {marginRight: popperGap}
        break;
    }
  }

  const handleSetOpen = (open: boolean) => {
    captureEvent("tripleDotClick", {open, itemType: "post", postId: post._id})
    setIsOpen(open);
  }

  const Icon = vertical ? MoreVertIcon : MoreHorizIcon
  const { PopperCard, PostActions, LWClickAwayListener } = Components

  return <div className={classNames(classes.root, className)}>
    <div ref={anchorEl}>
      <Icon className={classes.icon} onClick={(ev) => handleSetOpen(!isOpen)}/>
    </div>
    <PopperCard
      open={isOpen}
      anchorEl={anchorEl.current}
      placement={popperPlacement}
      allowOverflow
      flip={flip}
      style={gapStyle}
    >
      {/*FIXME: ClickAwayListener doesn't handle portals correctly, which winds up making submenus inoperable. But we do still need clickaway to close.*/}
      <LWClickAwayListener onClickAway={() => handleSetOpen(false)}>
        <PostActions post={post} closeMenu={() => handleSetOpen(false)} includeBookmark={includeBookmark} />
      </LWClickAwayListener>
    </PopperCard>
  </div>
}


const PostActionsButtonComponent = registerComponent('PostActionsButton', PostActionsButton, {styles});

declare global {
  interface ComponentTypes {
    PostActionsButton: typeof PostActionsButtonComponent
  }
}

1	import React, { CSSProperties, useRef, useState } from 'react'	1✔
2	import { registerComponent, Components } from '../../../lib/vulcan-lib';	1✔
3	import MoreHorizIcon from '@material-ui/icons/MoreHoriz';	1✔
4	import MoreVertIcon from '@material-ui/icons/MoreVert';	1✔
5	import { useCurrentUser } from '../../common/withUser';	1✔
6	import { useTracking } from '../../../lib/analyticsEvents';	1✔
7	import { PopperPlacementType } from '@material-ui/core/Popper';
8	import { useIsAboveBreakpoint } from '../../hooks/useScreenWidth';	1✔
9	import { isFriendlyUI } from '../../../themes/forumTheme';	1✔
10	import classNames from 'classnames';	1✔
11
12	const styles = (theme: ThemeType): JssStyles => ({	1✔
13	root: {
14	cursor: "pointer"
15	},
16	icon: {
17	verticalAlign: 'middle',
18	color: isFriendlyUI ? theme.palette.grey[400] : undefined,	1!
19	cursor: "pointer",
20	},
21	popper: {
22	position: "relative",
23	zIndex: theme.zIndexes.postItemMenu
24	},
25	})
26
27	const PostActionsButton = ({post, vertical, popperGap, autoPlace, flip, includeBookmark=true, className, classes}: {	1!
28	post: PostsList\|SunshinePostsList,
29	vertical?: boolean,
30	popperGap?: number,
31	autoPlace?: boolean,
32	flip?: boolean,
33	includeBookmark?: boolean,
34	className?: string,
35	classes: ClassesType,
36	}) => {
37	const anchorEl = useRef<HTMLDivElement \| null>(null);	×
38	const [isOpen, setIsOpen] = useState(false);	×
39	const {captureEvent} = useTracking();	×
40	const currentUser = useCurrentUser();	×
41
42	// This is fine with SSR because the popper will only be rendered after use
43	// interaction
44	const isDesktopWatched = useIsAboveBreakpoint('xl');	×
45
46	const popperPlacement: PopperPlacementType = isDesktopWatched \|\| !autoPlace	×
47	? 'right-start'	×
48	: 'left-start';
49	let gapStyle: CSSProperties \| undefined
50	if (popperGap) {	×
51	switch (popperPlacement) {	×
52	case 'right-start':
53	gapStyle = {marginLeft: popperGap}	×
54	break;	×
55	case 'left-start':
56	gapStyle = {marginRight: popperGap}	×
57	break;	×
58	}
59	}
60
61	const handleSetOpen = (open: boolean) => {	×
62	captureEvent("tripleDotClick", {open, itemType: "post", postId: post._id})	×
63	setIsOpen(open);	×
64	}
65
66	const Icon = vertical ? MoreVertIcon : MoreHorizIcon	×
67	const { PopperCard, PostActions, LWClickAwayListener } = Components	×
68
69	return <div className={classNames(classes.root, className)}>	×
70	<div ref={anchorEl}>
NEW 71	<Icon className={classes.icon} onClick={(ev) => handleSetOpen(!isOpen)}/>	×
72	</div>
73	<PopperCard
74	open={isOpen}
75	anchorEl={anchorEl.current}
76	placement={popperPlacement}
77	allowOverflow
78	flip={flip}
79	style={gapStyle}
80	>
81	{/FIXME: ClickAwayListener doesn't handle portals correctly, which winds up making submenus inoperable. But we do still need clickaway to close./}
82	<LWClickAwayListener onClickAway={() => handleSetOpen(false)}>	×
83	<PostActions post={post} closeMenu={() => handleSetOpen(false)} includeBookmark={includeBookmark} />	×
84	</LWClickAwayListener>
85	</PopperCard>
86	</div>
87	}
88
89
90	const PostActionsButtonComponent = registerComponent('PostActionsButton', PostActionsButton, {styles});	1✔
91
92	declare global {
93	interface ComponentTypes {
94	PostActionsButton: typeof PostActionsButtonComponent
95	}
96	}

ForumMagnum / ForumMagnum / 8830732283

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