9000975581

Committed 08 May 2024 11:22AM UTC coverage: 31.82% (-0.06%) from 31.881%

Build # 9000975581

Build Type

Pull #9244

github

Committed by

oetherington

Commit Message

Softer emoji text shadow

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

Run Details

4731 of 38918 branches covered (12.16%)

Branch coverage included in aggregate %.

49 of 192 new or added lines in 11 files covered. (25.52%)

98 existing lines in 8 files now uncovered.

27641 of 62816 relevant lines covered (44.0%)

177.85 hits per line

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

11.97

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

import React, { FC, MouseEvent, ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { isClient } from "../../lib/executionEnvironment";
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 { userIsAdminOrMod } from "../../lib/vulcan-users";
import { useLoginPopoverContext } from "../hooks/useLoginPopoverContext";

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: 0,
      paddingBottom: 4,
    },
    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): e is HTMLDivElement => {
  if (!e) {
    return false;
  }
  if (!("tagName" in e)) {
    return false;
  }
  if (e.tagName !== "DIV" && e.tagName !== "HEADER") {
    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 * window.innerWidth}px`,
        top: `${y * EMOJIS_HEADER_HEIGHT}px`,
      }}
    >
      <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,
  ) => {
    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)) {
      setHoverPos(normalizeCoords(clientX, clientY));
    } else {
      setHoverPos(null);
    }
  }, [normalizeCoords]);

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

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

ForumMagnum / ForumMagnum / 9000975581

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