9002401008

Committed 08 May 2024 01:08PM UTC coverage: 31.829% (-0.1%) from 31.93%

Build # 9002401008

Build Type

Pull #9244

github

Committed by

agnesstenlund

Commit Message

smaller text again–sorry

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

Run Details

4768 of 39010 branches covered (12.22%)

Branch coverage included in aggregate %.

49 of 203 new or added lines in 11 files covered. (24.14%)

2 existing lines in 2 files now uncovered.

27685 of 62951 relevant lines covered (43.98%)

176.98 hits per line

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

10.89

/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 } 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}`,
    "& .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}`,
    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 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 = `input{font-family:"Inter";}`;
        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 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);
    const result = await rawAddEmoji({
      variables: {emoji, link, description, x, y, theta},
    });
    void refetch();
    return result;
  }, [rawAddEmoji, refetch]);

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

ForumMagnum / ForumMagnum / 9002401008

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