Skip to content

feat: select group avatars with the emoji picker #11395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 3, 2024
Merged

feat: select group avatars with the emoji picker #11395

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1b6fe0c
feat: select group avatars with the emoji picker
aslilac Jan 3, 2024
eb3bc93
🧹
aslilac Jan 3, 2024
f3019e9
add a suspense boundary
aslilac Jan 3, 2024
8d2c0a5
:^)
aslilac Jan 3, 2024
746eac9
🧹
aslilac Jan 3, 2024
126c47a
?:(
aslilac Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
:^)
  • Loading branch information
@aslilac
aslilac committed Jan 3, 2024
commit 8d2c0a5a38b9e312a6529b4b930bf5a4b15131a5
15 changes: 10 additions & 5 deletions site/src/components/ErrorBoundary/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { Component, ReactNode, PropsWithChildren } from "react";
import { Component, type ReactNode } from "react";
import { RuntimeErrorState } from "./RuntimeErrorState";

type ErrorBoundaryProps = PropsWithChildren<unknown>;
interface ErrorBoundaryProps {
fallback?: ReactNode;
children: ReactNode;
}

interface ErrorBoundaryState {
error: Error | null;
}

/**
* Our app's Error Boundary
* Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html
* Read more about React Error Boundaries: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
*/
export class ErrorBoundary extends Component<
ErrorBoundaryProps,
Expand All @@ -20,13 +23,15 @@ export class ErrorBoundary extends Component<
this.state = { error: null };
}

static getDerivedStateFromError(error: Error): { error: Error } {
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { error };
}

render(): ReactNode {
if (this.state.error) {
return <RuntimeErrorState error={this.state.error} />;
return (
this.props.fallback ?? <RuntimeErrorState error={this.state.error} />
);
}

return this.props.children;
Expand Down
12 changes: 8 additions & 4 deletions site/src/components/IconField/IconField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import { css, Global, useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import InputAdornment from "@mui/material/InputAdornment";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import { visuallyHidden } from "@mui/utils";
import { type FC, lazy, Suspense } from "react";
import { ErrorBoundary } from "components/ErrorBoundary/ErrorBoundary";
import { Loader } from "components/Loader/Loader";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
Expand All @@ -11,7 +13,6 @@ import {
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import { visuallyHidden } from "@mui/utils";

// See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
const urlFromUnifiedCode = (unified: string) =>
Expand Down Expand Up @@ -118,9 +119,12 @@ export const IconField: FC<IconFieldProps> = ({
so we just have to sneak it into the DOM, which is kind of annoying, but means
that users shouldn't ever spend time waiting for it to load. */}
<div css={{ ...visuallyHidden }}>
<Suspense>
<EmojiPicker onEmojiSelect={() => {}} />
</Suspense>
{/* `ErrorBoundary` is for tests, this component requires `IntersectionObserver` */}
<ErrorBoundary fallback={null}>
<Suspense>
<EmojiPicker onEmojiSelect={() => {}} />
</Suspense>
</ErrorBoundary>
</div>
</Stack>
);
Expand Down