9008192749

Committed 08 May 2024 08:33PM UTC coverage: 34.753% (+2.8%) from 31.911%

Build # 9008192749

Build Type

Pull #9251

github

Committed by

oetherington

Commit Message

Fix onsite links in the emoji banner

Pull Request Pull Request #9251: Emoji banner quick fixes

Run Details

1097 of 7182 branches covered (15.27%)

Branch coverage included in aggregate %.

3 of 4 new or added lines in 1 file covered. (75.0%)

81 existing lines in 5 files now uncovered.

5309 of 11251 relevant lines covered (47.19%)

993.39 hits per line

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

11.85

/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";
import { siteUrlSetting } from "../../lib/instanceSettings";

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 {
      id
      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
    ) {
      id
      userId
      displayName
      emoji
      x
      y
      theta
    }
  }
`;

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

export type BannerEmoji = {
  id: string,
  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: (id: 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} />
  );
}

/**
 * The `Link` component in `react-router-dom` insists on prepending the site
 * URL to onsite links, even if they already include it. Remove it explicitely
 * here to avoid this.
 */
const onsiteLinkRegex = new RegExp(`^(http(s)?://)?${siteUrlSetting.get()}(.*)`);
const formatOnsiteLink = (link: string) =>
  link.match(onsiteLinkRegex)?.[3] ?? link;

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

ForumMagnum / ForumMagnum / 9008192749

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