9003973611

Committed 08 May 2024 02:55PM UTC coverage: 31.824% (-0.1%) from 31.93%

Build # 9003973611

Build Type

Pull #9244

github

Committed by

oetherington

Commit Message

Better analytics event names

Pull Request Pull Request #9244: [EA] Emoji Banner May '24

Run Details

4768 of 39019 branches covered (12.22%)

Branch coverage included in aggregate %.

52 of 219 new or added lines in 11 files covered. (23.74%)

2 existing lines in 2 files now uncovered.

27688 of 62967 relevant lines covered (43.97%)

176.94 hits per line

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

11.07

/packages/lesswrong/components/ea-forum/EAEmojisHeader.tsx

import React, { FC, MouseEvent, ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
import { Components, registerComponent, validateUrl } from "../../lib/vulcan-lib";
import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { isClient } from "../../lib/executionEnvironment";
import { userIsAdminOrMod } from "../../lib/vulcan-users";
import { EMOJIS_HEADER_HEIGHT } from "../common/Header";
import { useCurrentUser } from "../common/withUser";
import { Link } from "../../lib/reactRouterWrapper";
import { gql, useMutation, useQuery } from "@apollo/client";
import ForumNoSSR from "../common/ForumNoSSR";
import classNames from "classnames";

if (isClient) {
  require("emoji-picker-element");
}

const styles = (theme: ThemeType) => ({
  root: {
    zIndex: 1,
    position: "absolute",
    left: 0,
    right: 0,
    width: "100%",
    height: "100%",
    overflow: "hidden",
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
  emojiTooltip: {
    width: 320,
    maxWidth: "100vw",
    padding: 12,
    borderRadius: theme.borderRadius.default,
    backgroundColor: theme.palette.dropdown.background,
    border: `1px solid ${theme.palette.dropdown.border}`,
    boxShadow: theme.palette.emojiHeader.tooltipShadow,
    "& .SectionTitle-root": {
      marginTop: -1,
      paddingBottom: 4,
    },
    "& .SectionTitle-title": {
      fontSize: 12,
    },
    display: "flex",
    flexDirection: "column",
    gap: "12px",
  },
  emojiCursor: {
    pointerEvents: "none",
    "& .ForumIcon-root": {
      color: `${theme.palette.emojiHeader.placeholder} !important`,
    },
  },
  pickerButton: {
    width: 40,
    height: 40,
    borderRadius: theme.borderRadius.default,
    background: theme.palette.panelBackground.loginInput,
    fontSize: 24,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    userSelect: "none",
  },
  linkToSection: {
    flexGrow: 1,
  },
  input: {
    minHeight: 40,
    padding: 8,
  },
  textArea: {
    minHeight: 92,
    width: "100%",
    resize: "none",
  },
  button: {
    flexGrow: 1,
  },
  row: {
    display: "flex",
    gap: "12px",
    width: "100%",
  },
  emoji: {
    padding: 6,
    userSelect: "none",
    position: "absolute",
    zIndex: 3,
    marginLeft: -28,
    marginTop: -32,
    fontSize: 24,
    "&:hover $removeButton": {
      display: "block",
    },
  },
  goodNews: {
    padding: 12,
    borderRadius: theme.borderRadius.default,
    backgroundColor: theme.palette.dropdown.background,
    border: `1px solid ${theme.palette.dropdown.border}`,
    boxShadow: theme.palette.emojiHeader.tooltipShadow,
    color: theme.palette.grey[1000],
  },
  emojiLink: {
    display: "block",
    "&:hover": {
      opacity: 1,
      transform: "scale(1.1)",
      textShadow: theme.palette.emojiHeader.emojiShadow,
    },
  },
  removeButton: {
    display: "none",
    color: `${theme.palette.text.alwaysWhite} !important`,
    background: theme.palette.emojiHeader.removeButton,
    padding: 2,
    borderRadius: "50%",
    fontSize: 18,
    cursor: "pointer",
    position: "absolute",
    top: 0,
    right: -10,
    "&:hover": {
      transform: "scale(1.2)",
    },
  },
});

export const MAX_THETA = 25;

const isValidTarget = (
  e: EventTarget | null,
  clientX: number,
  clientY: number,
): e is HTMLDivElement => {
  if (!e) {
    return false;
  }
  if (!("tagName" in e)) {
    return false;
  }
  if (e.tagName !== "DIV" && e.tagName !== "HEADER") {
    return false;
  }

  clientX += window.scrollX;
  clientY += window.scrollY;

  const startPadding = 25;
  if (clientX < startPadding || clientY < startPadding) {
    return false;
  }

  const endPadding = 6;
  if (
    clientX + endPadding >= window.innerWidth ||
    clientY + endPadding >= EMOJIS_HEADER_HEIGHT
  ) {
    return false;
  }

  return !!(e as HTMLElement).closest?.(".EAEmojisHeader-root");
}

const emojisQuery = gql`
  query BannerEmojis {
    BannerEmojis {
      userId
      displayName
      emoji
      link
      description
      x
      y
      theta
    }
  }
`;

const addEmojiMutation = gql`
  mutation AddBannerEmoji(
    $emoji: String!,
    $link: String!,
    $description: String!,
    $x: Float!,
    $y: Float!,
    $theta: Float!
  ) {
    AddBannerEmoji(
      emoji: $emoji,
      link: $link,
      description: $description,
      x: $x,
      y: $y,
      theta: $theta
    ) {
      userId
      displayName
      emoji
      x
      y
      theta
    }
  }
`;

const removeEmojiMutation = gql`
  mutation RemoveBannerEmoji($userId: String!) {
    RemoveBannerEmoji(userId: $userId) {
      userId
      displayName
      emoji
      link
      description
      x
      y
      theta
    }
  }
`;

export type BannerEmoji = {
  userId: string,
  displayName: string,
  emoji: string,
  x: number,
  y: number,
  theta: number,
  link: string,
  description: string,
}

const emojiContext = createContext<{
  currentUser: UsersCurrent | null,
  setEmojis: (emojis: BannerEmoji[]) => void,
  addEmoji: (
    emoji: string,
    link: string,
    description: string,
    x: number,
    y: number,
    theta: number,
  ) => Promise<{data?: {AddBannerEmoji: BannerEmoji[]}}>,
  removeEmoji: (userId: string) => Promise<void>,
  insertEmoji: string,
  setInsertEmoji: (value: string) => void,
  onCancelInsert: () => void,
  classes: ClassesType<typeof styles>,
} | null>(null);

const useEmojiContext = () => {
  const value = useContext(emojiContext);
  if (!value) {
    throw new Error("No emoji context provider");
  }
  return value;
}

const pickerStyles = `
  input.search {
    font-family: "Inter";
    border-radius: 4px;
    padding: 3px 5px;
    border-color: #ddd;
  }
  @media (prefers-color-scheme: dark) {
    input.search {
      border-color: #444;
    }
  }
`;

const EmojiPicker = ({onChange}: {onChange?: (value: string) => void}) => {
  const ref = useRef<HTMLElement | null>(null);
  useEffect(() => {
    const picker = ref.current;
    if (picker) {
      const styleId = "fm-emoji-style";
      const styleElem = picker.shadowRoot?.getElementById(styleId);
      if (!styleElem) {
        const style = document.createElement("style");
        style.id = styleId;
        style.textContent = pickerStyles;
        picker.shadowRoot?.appendChild(style);
      }

      const onChangeHandler = (ev: AnyBecauseTodo) => {
        const emoji = ev?.detail?.unicode;
        if (emoji && typeof emoji === "string") {
          onChange?.(emoji);
        }
      }
      picker.addEventListener("emoji-click", onChangeHandler);
      return () => picker?.removeEventListener("emoji-click", onChangeHandler);
    }
  }, [ref, onChange]);
  return (
    // @ts-ignore
    <emoji-picker ref={ref} />
  );
}

const Emoji: FC<{
  emoji: BannerEmoji,
  children?: ReactNode,
}> = ({
  emoji: {userId, displayName, link, description, x, y, theta, emoji},
  children,
}) => {
  const {currentUser, removeEmoji, classes} = useEmojiContext();
  const isCurrentUser = userId === currentUser?._id;
  const canModerate = isCurrentUser || userIsAdminOrMod(currentUser);
  const isPlaceholder = !displayName;
  const canRemove = canModerate && !isPlaceholder;

  const onRemove = useCallback(() => {
    if (canRemove) {
      void removeEmoji?.(userId);
    }
  }, [canRemove, userId, removeEmoji]);

  const {LWTooltip, ForumIcon} = Components;
  return (
    <figure
      className={classNames(classes.emoji, !emoji && classes.emojiCursor)}
      style={{left: `${x * 100}%`, top: `${y * 100}%`}}
    >
      <LWTooltip
        title={description}
        placement="bottom"
        popperClassName={classes.goodNews}
      >
        <div style={{transform: `rotate(${theta}deg)`}}>
          {emoji
            ? (
              link
                ? (
                  <Link
                    to={link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={classes.emojiLink}
                  >
                    {emoji}
                  </Link>
                )
                : emoji
            )
            : <ForumIcon icon="AddEmoji" />
          }
        </div>
      </LWTooltip>
      {canRemove &&
        <ForumIcon
          icon="Close"
          onClick={onRemove}
          className={classes.removeButton}
        />
      }
      {children}
    </figure>
  );
}

type Point = {x: number, y: number};

const EmojiPlaceholder: FC<{hoverPos: Point}> = ({hoverPos}) => {
  return (
    <Emoji emoji={{
      displayName: "",
      userId: "",
      theta: 0,
      emoji: "",
      link: "",
      description: "",
      ...hoverPos
    }} />
  );
}

const AddEmoji: FC<{insertPos: Point}> = ({insertPos}) => {
  const {
    setEmojis,
    addEmoji,
    insertEmoji,
    setInsertEmoji,
    onCancelInsert,
    classes,
  } = useEmojiContext();
  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
  const [link, setLink] = useState("");
  const [description, setDescription] = useState("");

  const onInsert = useCallback(async () => {
    const {x, y} = insertPos;
    const theta = Math.round((Math.random() * MAX_THETA * 2) - MAX_THETA);
    const result = await addEmoji(insertEmoji, link, description, x, y, theta);
    const newEmojis = result.data?.AddBannerEmoji;
    if (Array.isArray(newEmojis)) {
      setEmojis(newEmojis);
    }
    onCancelInsert();
  }, [insertPos, link, description, addEmoji, insertEmoji, setEmojis, onCancelInsert]);

  const onClickAway = useCallback(() => {
    if (!link && !description) {
      onCancelInsert();
    }
  }, [onCancelInsert, link, description]);

  const canAdd = !!(insertEmoji && link && description);

  const {
    LWPopper, LWTooltip, SectionTitle, EAButton, EAOnboardingInput,
    LWClickAwayListener,
  } = Components;
  return (
    <>
      <LWPopper
        open
        clickable
        placement="bottom-start"
        anchorEl={anchorElement}
        key={`${insertPos.x},${insertPos.y}`}
      >
        <LWClickAwayListener onClickAway={onClickAway}>
          <div className={classes.emojiTooltip}>
            <div className={classes.row}>
              <div>
                <SectionTitle title="Emoji" />
                <LWTooltip
                  title={<EmojiPicker onChange={setInsertEmoji} />}
                  tooltip={false}
                  clickable
                >
                  <div className={classes.pickerButton}>{insertEmoji}</div>
                </LWTooltip>
              </div>
              <div className={classes.linkToSection}>
                <SectionTitle title="Link to" />
                <EAOnboardingInput
                  value={link}
                  setValue={setLink}
                  placeholder="https://example.com"
                  className={classes.input}
                />
              </div>
            </div>
            <div>
              <SectionTitle title="The good news" />
              <EAOnboardingInput
                value={description}
                setValue={setDescription}
                placeholder="Shows when you hover the emoji"
                As="textarea"
                rows={3}
                className={classNames(classes.input, classes.textArea)}
              />
            </div>
            <div className={classes.row}>
              <EAButton
                onClick={onCancelInsert}
                style="grey"
                className={classes.button}
              >
                Cancel
              </EAButton>
              <EAButton
                onClick={onInsert}
                disabled={!canAdd}
                className={classes.button}
              >
                Add good news
              </EAButton>
            </div>
          </div>
        </LWClickAwayListener>
      </LWPopper>
      <Emoji emoji={{
        displayName: "",
        userId: "",
        theta: 0,
        emoji: insertEmoji,
        link: "",
        description: "",
        ...insertPos
      }} >
        <div ref={setAnchorElement} />
      </Emoji>
    </>
  );
}

export const EAEmojisHeader = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const {onLogin} = useLoginPopoverContext();
  const [insertEmoji, setInsertEmoji] = useState("👍");
  const [hoverPos, setHoverPos] = useState<Point | null>(null);
  const [insertPos, setInsertPos] = useState<Point | null>(null);
  const {captureEvent} = useTracking();
  const ref = useRef<HTMLDivElement>(null);

  const {data, refetch} = useQuery(emojisQuery);
  const [emojis, setEmojis] = useState<BannerEmoji[]>(data?.BannerEmojis ?? []);

  useEffect(() => {
    setEmojis(data?.BannerEmojis ?? []);
  }, [data?.BannerEmojis]);

  const [rawAddEmoji, {loading: isAddingEmoji}] = useMutation(
    addEmojiMutation,
    {errorPolicy: "all"},
  );

  const [rawRemoveEmoji] = useMutation(
    removeEmojiMutation,
    {errorPolicy: "all"},
  );

  const normalizeCoords = useCallback((clientX: number, clientY: number) => {
    if (ref.current) {
      clientX += window.scrollX;
      clientY += window.scrollY;
      const bounds = ref.current.getBoundingClientRect();
      if (
        clientX > bounds.left &&
        clientX < bounds.right &&
        clientY > bounds.top &&
        clientY < bounds.bottom
      ) {
        return {
          x: clientX / bounds.width,
          y: clientY / bounds.height,
        };
      }
    }
    return null;
  }, [ref]);

  const addEmoji = useCallback(async (
    emoji: string,
    link: string,
    description: string,
    x: number,
    y: number,
    theta: number,
  ) => {
    link = validateUrl(link);
    captureEvent("emojiBannerAdd", {emoji, link, description, x, y, theta});
    const result = await rawAddEmoji({
      variables: {emoji, link, description, x, y, theta},
    });
    void refetch();
    return result;
  }, [captureEvent, rawAddEmoji, refetch]);

  const removeEmoji = useCallback(async (userId: string) => {
    captureEvent("emojiBannerRemove", {userId});
    const result = await rawRemoveEmoji({variables: {userId}});
    const newEmojis = result.data?.RemoveBannerEmoji;
    if (Array.isArray(newEmojis)) {
      setEmojis(newEmojis);
    }
    await refetch();
  }, [captureEvent, rawRemoveEmoji, refetch]);

  const onMouseMove = useCallback(({target, clientX, clientY}: MouseEvent) => {
    if (isValidTarget(target, clientX, clientY)) {
      setHoverPos(normalizeCoords(clientX, clientY));
    } else {
      setHoverPos(null);
    }
  }, [normalizeCoords]);

  const onMouseOut = useCallback(() => {
    setHoverPos(null);
  }, []);

  const onClick = useCallback(async ({target, clientX, clientY}: MouseEvent) => {
    captureEvent("emojiBannerClick", {clientX, clientY});
    if ("tagName" in target && target.tagName === "A") {
      return;
    }
    if (!currentUser) {
      onLogin();
      return;
    }
    if (isValidTarget(target, clientX, clientY)) {
      const coords = normalizeCoords(clientX, clientY);
      if (coords) {
        setInsertPos(coords);
        setHoverPos(null);
      }
    }
  }, [captureEvent, currentUser, onLogin, normalizeCoords]);

  const onCancelInsert = useCallback(() => setInsertPos(null), []);

  const canAddEmoji = !isAddingEmoji;

  return (
    <ForumNoSSR>
      <AnalyticsContext pageSectionContext="ea-emoji-banner">
        <emojiContext.Provider value={{
          currentUser,
          setEmojis,
          addEmoji,
          removeEmoji,
          insertEmoji,
          setInsertEmoji,
          onCancelInsert,
          classes,
        }}>
          <div
            {...(canAddEmoji ? {onMouseMove, onMouseOut, onClick} : {})}
            className={classes.root}
            ref={ref}
          >
            {emojis.map((emoji) => <Emoji key={emoji.userId} emoji={emoji} />)}
            {hoverPos && <EmojiPlaceholder hoverPos={hoverPos} />}
            {insertPos && <AddEmoji insertPos={insertPos} />}
          </div>
        </emojiContext.Provider>
      </AnalyticsContext>
    </ForumNoSSR>
  );
}

const EAEmojisHeaderComponent = registerComponent(
  "EAEmojisHeader",
  EAEmojisHeader,
  {styles, stylePriority: 2},
);

declare global {
  interface ComponentTypes {
    EAEmojisHeader: typeof EAEmojisHeaderComponent
  }
}

1	import React, { FC, MouseEvent, ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";	54✔
2	import { Components, registerComponent, validateUrl } from "../../lib/vulcan-lib";	18✔
3	import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";	18✔
4	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	18✔
5	import { isClient } from "../../lib/executionEnvironment";	18✔
6	import { userIsAdminOrMod } from "../../lib/vulcan-users";	18✔
7	import { EMOJIS_HEADER_HEIGHT } from "../common/Header";	18✔
8	import { useCurrentUser } from "../common/withUser";	18✔
9	import { Link } from "../../lib/reactRouterWrapper";	18✔
10	import { gql, useMutation, useQuery } from "@apollo/client";	18✔
11	import ForumNoSSR from "../common/ForumNoSSR";	18✔
12	import classNames from "classnames";	18✔
13
14	if (isClient) {	18!
NEW 15	require("emoji-picker-element");	×
16	}
17
18	const styles = (theme: ThemeType) => ({	18✔
19	root: {
20	zIndex: 1,
21	position: "absolute",
22	left: 0,
23	right: 0,
24	width: "100%",
25	height: "100%",
26	overflow: "hidden",
27	[theme.breakpoints.down("sm")]: {
28	display: "none",
29	},
30	},
31	emojiTooltip: {
32	width: 320,
33	maxWidth: "100vw",
34	padding: 12,
35	borderRadius: theme.borderRadius.default,
36	backgroundColor: theme.palette.dropdown.background,
37	border: `1px solid ${theme.palette.dropdown.border}`,
38	boxShadow: theme.palette.emojiHeader.tooltipShadow,
39	"& .SectionTitle-root": {
40	marginTop: -1,
41	paddingBottom: 4,
42	},
43	"& .SectionTitle-title": {
44	fontSize: 12,
45	},
46	display: "flex",
47	flexDirection: "column",
48	gap: "12px",
49	},
50	emojiCursor: {
51	pointerEvents: "none",
52	"& .ForumIcon-root": {
53	color: `${theme.palette.emojiHeader.placeholder} !important`,
54	},
55	},
56	pickerButton: {
57	width: 40,
58	height: 40,
59	borderRadius: theme.borderRadius.default,
60	background: theme.palette.panelBackground.loginInput,
61	fontSize: 24,
62	display: "flex",
63	alignItems: "center",
64	justifyContent: "center",
65	cursor: "pointer",
66	userSelect: "none",
67	},
68	linkToSection: {
69	flexGrow: 1,
70	},
71	input: {
72	minHeight: 40,
73	padding: 8,
74	},
75	textArea: {
76	minHeight: 92,
77	width: "100%",
78	resize: "none",
79	},
80	button: {
81	flexGrow: 1,
82	},
83	row: {
84	display: "flex",
85	gap: "12px",
86	width: "100%",
87	},
88	emoji: {
89	padding: 6,
90	userSelect: "none",
91	position: "absolute",
92	zIndex: 3,
93	marginLeft: -28,
94	marginTop: -32,
95	fontSize: 24,
96	"&:hover $removeButton": {
97	display: "block",
98	},
99	},
100	goodNews: {
101	padding: 12,
102	borderRadius: theme.borderRadius.default,
103	backgroundColor: theme.palette.dropdown.background,
104	border: `1px solid ${theme.palette.dropdown.border}`,
105	boxShadow: theme.palette.emojiHeader.tooltipShadow,
106	color: theme.palette.grey[1000],
107	},
108	emojiLink: {
109	display: "block",
110	"&:hover": {
111	opacity: 1,
112	transform: "scale(1.1)",
113	textShadow: theme.palette.emojiHeader.emojiShadow,
114	},
115	},
116	removeButton: {
117	display: "none",
118	color: `${theme.palette.text.alwaysWhite} !important`,
119	background: theme.palette.emojiHeader.removeButton,
120	padding: 2,
121	borderRadius: "50%",
122	fontSize: 18,
123	cursor: "pointer",
124	position: "absolute",
125	top: 0,
126	right: -10,
127	"&:hover": {
128	transform: "scale(1.2)",
129	},
130	},
131	});
132
133	export const MAX_THETA = 25;	18✔
134
135	const isValidTarget = (	18✔
136	e: EventTarget \| null,
137	clientX: number,
138	clientY: number,
139	): e is HTMLDivElement => {
NEW 140	if (!e) {	×
NEW 141	return false;	×
142	}
NEW 143	if (!("tagName" in e)) {	×
NEW 144	return false;	×
145	}
NEW 146	if (e.tagName !== "DIV" && e.tagName !== "HEADER") {	×
NEW 147	return false;	×
148	}
149
NEW 150	clientX += window.scrollX;	×
NEW 151	clientY += window.scrollY;	×
152
NEW 153	const startPadding = 25;	×
NEW 154	if (clientX < startPadding \|\| clientY < startPadding) {	×
NEW 155	return false;	×
156	}
157
NEW 158	const endPadding = 6;	×
NEW 159	if (	×
160	clientX + endPadding >= window.innerWidth \|\|	×
161	clientY + endPadding >= EMOJIS_HEADER_HEIGHT
162	) {
NEW 163	return false;	×
164	}
165
NEW 166	return !!(e as HTMLElement).closest?.(".EAEmojisHeader-root");	×
167	}
168
169	const emojisQuery = gql`	18✔
170	query BannerEmojis {
171	BannerEmojis {
172	userId
173	displayName
174	emoji
175	link
176	description
177	x
178	y
179	theta
180	}
181	}
182	`;
183
184	const addEmojiMutation = gql`	18✔
185	mutation AddBannerEmoji(
186	$emoji: String!,
187	$link: String!,
188	$description: String!,
189	$x: Float!,
190	$y: Float!,
191	$theta: Float!
192	) {
193	AddBannerEmoji(
194	emoji: $emoji,
195	link: $link,
196	description: $description,
197	x: $x,
198	y: $y,
199	theta: $theta
200	) {
201	userId
202	displayName
203	emoji
204	x
205	y
206	theta
207	}
208	}
209	`;
210
211	const removeEmojiMutation = gql`	18✔
212	mutation RemoveBannerEmoji($userId: String!) {
213	RemoveBannerEmoji(userId: $userId) {
214	userId
215	displayName
216	emoji
217	link
218	description
219	x
220	y
221	theta
222	}
223	}
224	`;
225
226	export type BannerEmoji = {
227	userId: string,
228	displayName: string,
229	emoji: string,
230	x: number,
231	y: number,
232	theta: number,
233	link: string,
234	description: string,
235	}
236
237	const emojiContext = createContext<{	18✔
238	currentUser: UsersCurrent \| null,
239	setEmojis: (emojis: BannerEmoji[]) => void,
240	addEmoji: (
241	emoji: string,
242	link: string,
243	description: string,
244	x: number,
245	y: number,
246	theta: number,
247	) => Promise<{data?: {AddBannerEmoji: BannerEmoji[]}}>,
248	removeEmoji: (userId: string) => Promise<void>,
249	insertEmoji: string,
250	setInsertEmoji: (value: string) => void,
251	onCancelInsert: () => void,
252	classes: ClassesType<typeof styles>,
253	} \| null>(null);
254
255	const useEmojiContext = () => {	18✔
NEW 256	const value = useContext(emojiContext);	×
NEW 257	if (!value) {	×
NEW 258	throw new Error("No emoji context provider");	×
259	}
NEW 260	return value;	×
261	}
262
263	const pickerStyles = `	18✔
264	input.search {
265	font-family: "Inter";
266	border-radius: 4px;
267	padding: 3px 5px;
268	border-color: #ddd;
269	}
270	@media (prefers-color-scheme: dark) {
271	input.search {
272	border-color: #444;
273	}
274	}
275	`;
276
277	const EmojiPicker = ({onChange}: {onChange?: (value: string) => void}) => {	18✔
NEW 278	const ref = useRef<HTMLElement \| null>(null);	×
NEW 279	useEffect(() => {	×
NEW 280	const picker = ref.current;	×
NEW 281	if (picker) {	×
NEW 282	const styleId = "fm-emoji-style";	×
NEW 283	const styleElem = picker.shadowRoot?.getElementById(styleId);	×
NEW 284	if (!styleElem) {	×
NEW 285	const style = document.createElement("style");	×
NEW 286	style.id = styleId;	×
NEW 287	style.textContent = pickerStyles;	×
NEW 288	picker.shadowRoot?.appendChild(style);	×
289	}
290
NEW 291	const onChangeHandler = (ev: AnyBecauseTodo) => {	×
NEW 292	const emoji = ev?.detail?.unicode;	×
NEW 293	if (emoji && typeof emoji === "string") {	×
NEW 294	onChange?.(emoji);	×
295	}
296	}
NEW 297	picker.addEventListener("emoji-click", onChangeHandler);	×
NEW 298	return () => picker?.removeEventListener("emoji-click", onChangeHandler);	×
299	}
300	}, [ref, onChange]);
NEW 301	return (	×
302	// @ts-ignore
303	<emoji-picker ref={ref} />
304	);
305	}
306
307	const Emoji: FC<{
308	emoji: BannerEmoji,
309	children?: ReactNode,
310	}> = ({	18✔
311	emoji: {userId, displayName, link, description, x, y, theta, emoji},
312	children,
313	}) => {
NEW 314	const {currentUser, removeEmoji, classes} = useEmojiContext();	×
NEW 315	const isCurrentUser = userId === currentUser?._id;	×
NEW 316	const canModerate = isCurrentUser \|\| userIsAdminOrMod(currentUser);	×
NEW 317	const isPlaceholder = !displayName;	×
NEW 318	const canRemove = canModerate && !isPlaceholder;	×
319
NEW 320	const onRemove = useCallback(() => {	×
NEW 321	if (canRemove) {	×
NEW 322	void removeEmoji?.(userId);	×
323	}
324	}, [canRemove, userId, removeEmoji]);
325
NEW 326	const {LWTooltip, ForumIcon} = Components;	×
NEW 327	return (	×
328	<figure
329	className={classNames(classes.emoji, !emoji && classes.emojiCursor)}	×
330	style={{left: `${x * 100}%`, top: `${y * 100}%`}}
331	>
332	<LWTooltip
333	title={description}
334	placement="bottom"
335	popperClassName={classes.goodNews}
336	>
337	<div style={{transform: `rotate(${theta}deg)`}}>
338	{emoji
339	? (
340	link	×
341	? (
342	<Link	×
343	to={link}
344	target="_blank"
345	rel="noopener noreferrer"
346	className={classes.emojiLink}
347	>
348	{emoji}
349	</Link>
350	)
351	: emoji
352	)
353	: <ForumIcon icon="AddEmoji" />
354	}
355	</div>
356	</LWTooltip>
357	{canRemove &&	×
358	<ForumIcon
359	icon="Close"
360	onClick={onRemove}
361	className={classes.removeButton}
362	/>
363	}
364	{children}
365	</figure>
366	);
367	}
368
369	type Point = {x: number, y: number};
370
371	const EmojiPlaceholder: FC<{hoverPos: Point}> = ({hoverPos}) => {	18✔
NEW 372	return (	×
373	<Emoji emoji={{
374	displayName: "",
375	userId: "",
376	theta: 0,
377	emoji: "",
378	link: "",
379	description: "",
380	...hoverPos
381	}} />
382	);
383	}
384
385	const AddEmoji: FC<{insertPos: Point}> = ({insertPos}) => {	18✔
386	const {
387	setEmojis,
388	addEmoji,
389	insertEmoji,
390	setInsertEmoji,
391	onCancelInsert,
392	classes,
NEW 393	} = useEmojiContext();	×
NEW 394	const [anchorElement, setAnchorElement] = useState<HTMLElement \| null>(null);	×
NEW 395	const [link, setLink] = useState("");	×
NEW 396	const [description, setDescription] = useState("");	×
397
NEW 398	const onInsert = useCallback(async () => {	×
NEW 399	const {x, y} = insertPos;	×
NEW 400	const theta = Math.round((Math.random() * MAX_THETA * 2) - MAX_THETA);	×
NEW 401	const result = await addEmoji(insertEmoji, link, description, x, y, theta);	×
NEW 402	const newEmojis = result.data?.AddBannerEmoji;	×
NEW 403	if (Array.isArray(newEmojis)) {	×
NEW 404	setEmojis(newEmojis);	×
405	}
NEW 406	onCancelInsert();	×
407	}, [insertPos, link, description, addEmoji, insertEmoji, setEmojis, onCancelInsert]);
408
NEW 409	const onClickAway = useCallback(() => {	×
NEW 410	if (!link && !description) {	×
NEW 411	onCancelInsert();	×
412	}
413	}, [onCancelInsert, link, description]);
414
NEW 415	const canAdd = !!(insertEmoji && link && description);	×
416
417	const {
418	LWPopper, LWTooltip, SectionTitle, EAButton, EAOnboardingInput,
419	LWClickAwayListener,
NEW 420	} = Components;	×
NEW 421	return (	×
422	<>
423	<LWPopper
424	open
425	clickable
426	placement="bottom-start"
427	anchorEl={anchorElement}
428	key={`${insertPos.x},${insertPos.y}`}
429	>
430	<LWClickAwayListener onClickAway={onClickAway}>
431	<div className={classes.emojiTooltip}>
432	<div className={classes.row}>
433	<div>
434	<SectionTitle title="Emoji" />
435	<LWTooltip
436	title={<EmojiPicker onChange={setInsertEmoji} />}
437	tooltip={false}
438	clickable
439	>
440	<div className={classes.pickerButton}>{insertEmoji}</div>
441	</LWTooltip>
442	</div>
443	<div className={classes.linkToSection}>
444	<SectionTitle title="Link to" />
445	<EAOnboardingInput
446	value={link}
447	setValue={setLink}
448	placeholder="https://example.com"
449	className={classes.input}
450	/>
451	</div>
452	</div>
453	<div>
454	<SectionTitle title="The good news" />
455	<EAOnboardingInput
456	value={description}
457	setValue={setDescription}
458	placeholder="Shows when you hover the emoji"
459	As="textarea"
460	rows={3}
461	className={classNames(classes.input, classes.textArea)}
462	/>
463	</div>
464	<div className={classes.row}>
465	<EAButton
466	onClick={onCancelInsert}
467	style="grey"
468	className={classes.button}
469	>
470	Cancel
471	</EAButton>
472	<EAButton
473	onClick={onInsert}
474	disabled={!canAdd}
475	className={classes.button}
476	>
477	Add good news
478	</EAButton>
479	</div>
480	</div>
481	</LWClickAwayListener>
482	</LWPopper>
483	<Emoji emoji={{
484	displayName: "",
485	userId: "",
486	theta: 0,
487	emoji: insertEmoji,
488	link: "",
489	description: "",
490	...insertPos
491	}} >
492	<div ref={setAnchorElement} />
493	</Emoji>
494	</>
495	);
496	}
497
498	export const EAEmojisHeader = ({classes}: {	18✔
499	classes: ClassesType<typeof styles>,
500	}) => {
NEW 501	const currentUser = useCurrentUser();	×
NEW 502	const {onLogin} = useLoginPopoverContext();	×
NEW 503	const [insertEmoji, setInsertEmoji] = useState("👍");	×
NEW 504	const [hoverPos, setHoverPos] = useState<Point \| null>(null);	×
NEW 505	const [insertPos, setInsertPos] = useState<Point \| null>(null);	×
NEW 506	const {captureEvent} = useTracking();	×
NEW 507	const ref = useRef<HTMLDivElement>(null);	×
508
NEW 509	const {data, refetch} = useQuery(emojisQuery);	×
NEW 510	const [emojis, setEmojis] = useState<BannerEmoji[]>(data?.BannerEmojis ?? []);	×
511
NEW 512	useEffect(() => {	×
NEW 513	setEmojis(data?.BannerEmojis ?? []);	×
514	}, [data?.BannerEmojis]);	×
515
NEW 516	const [rawAddEmoji, {loading: isAddingEmoji}] = useMutation(	×
517	addEmojiMutation,
518	{errorPolicy: "all"},
519	);
520
NEW 521	const [rawRemoveEmoji] = useMutation(	×
522	removeEmojiMutation,
523	{errorPolicy: "all"},
524	);
525
NEW 526	const normalizeCoords = useCallback((clientX: number, clientY: number) => {	×
NEW 527	if (ref.current) {	×
NEW 528	clientX += window.scrollX;	×
NEW 529	clientY += window.scrollY;	×
NEW 530	const bounds = ref.current.getBoundingClientRect();	×
NEW 531	if (	×
532	clientX > bounds.left &&	×
533	clientX < bounds.right &&
534	clientY > bounds.top &&
535	clientY < bounds.bottom
536	) {
NEW 537	return {	×
538	x: clientX / bounds.width,
539	y: clientY / bounds.height,
540	};
541	}
542	}
NEW 543	return null;	×
544	}, [ref]);
545
NEW 546	const addEmoji = useCallback(async (	×
547	emoji: string,
548	link: string,
549	description: string,
550	x: number,
551	y: number,
552	theta: number,
553	) => {
NEW 554	link = validateUrl(link);	×
NEW 555	captureEvent("emojiBannerAdd", {emoji, link, description, x, y, theta});	×
NEW 556	const result = await rawAddEmoji({	×
557	variables: {emoji, link, description, x, y, theta},
558	});
NEW 559	void refetch();	×
NEW 560	return result;	×
561	}, [captureEvent, rawAddEmoji, refetch]);
562
NEW 563	const removeEmoji = useCallback(async (userId: string) => {	×
NEW 564	captureEvent("emojiBannerRemove", {userId});	×
NEW 565	const result = await rawRemoveEmoji({variables: {userId}});	×
NEW 566	const newEmojis = result.data?.RemoveBannerEmoji;	×
NEW 567	if (Array.isArray(newEmojis)) {	×
NEW 568	setEmojis(newEmojis);	×
569	}
NEW 570	await refetch();	×
571	}, [captureEvent, rawRemoveEmoji, refetch]);
572
NEW 573	const onMouseMove = useCallback(({target, clientX, clientY}: MouseEvent) => {	×
NEW 574	if (isValidTarget(target, clientX, clientY)) {	×
NEW 575	setHoverPos(normalizeCoords(clientX, clientY));	×
576	} else {
NEW 577	setHoverPos(null);	×
578	}
579	}, [normalizeCoords]);
580
NEW 581	const onMouseOut = useCallback(() => {	×
NEW 582	setHoverPos(null);	×
583	}, []);
584
NEW 585	const onClick = useCallback(async ({target, clientX, clientY}: MouseEvent) => {	×
NEW 586	captureEvent("emojiBannerClick", {clientX, clientY});	×
NEW 587	if ("tagName" in target && target.tagName === "A") {	×
NEW 588	return;	×
589	}
NEW 590	if (!currentUser) {	×
NEW 591	onLogin();	×
NEW 592	return;	×
593	}
NEW 594	if (isValidTarget(target, clientX, clientY)) {	×
NEW 595	const coords = normalizeCoords(clientX, clientY);	×
NEW 596	if (coords) {	×
NEW 597	setInsertPos(coords);	×
NEW 598	setHoverPos(null);	×
599	}
600	}
601	}, [captureEvent, currentUser, onLogin, normalizeCoords]);
602
NEW 603	const onCancelInsert = useCallback(() => setInsertPos(null), []);	×
604
NEW 605	const canAddEmoji = !isAddingEmoji;	×
606
NEW 607	return (	×
608	<ForumNoSSR>
609	<AnalyticsContext pageSectionContext="ea-emoji-banner">
610	<emojiContext.Provider value={{
611	currentUser,
612	setEmojis,
613	addEmoji,
614	removeEmoji,
615	insertEmoji,
616	setInsertEmoji,
617	onCancelInsert,
618	classes,
619	}}>
620	<div
621	{...(canAddEmoji ? {onMouseMove, onMouseOut, onClick} : {})}	×
622	className={classes.root}
623	ref={ref}
624	>
NEW 625	{emojis.map((emoji) => <Emoji key={emoji.userId} emoji={emoji} />)}	×
626	{hoverPos && <EmojiPlaceholder hoverPos={hoverPos} />}	×
627	{insertPos && <AddEmoji insertPos={insertPos} />}	×
628	</div>
629	</emojiContext.Provider>
630	</AnalyticsContext>
631	</ForumNoSSR>
632	);
633	}
634
635	const EAEmojisHeaderComponent = registerComponent(	18✔
636	"EAEmojisHeader",
637	EAEmojisHeader,
638	{styles, stylePriority: 2},
639	);
640
641	declare global {
642	interface ComponentTypes {
643	EAEmojisHeader: typeof EAEmojisHeaderComponent
644	}
645	}

ForumMagnum / ForumMagnum / 9003973611

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