-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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.
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
Add React eslint & update depencenies #3090
base: dev
Are you sure you want to change the base?
Conversation
my changes made TypingTweaks cause crashes, honestly so incredible anyway should be fixed now and everything else seems to work fine |
@@ -105,7 +107,7 @@ const ErrorBoundary = LazyComponent(() => { | |||
}; | |||
}) as | |||
React.ComponentType<React.PropsWithChildren<Props>> & { | |||
wrap<T extends object = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): React.FunctionComponent<T>; | |||
wrap<T extends object = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): (props: T) => ReactElement<any>; | |||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we are sure this is a FunctionalComponent, we should use the proper type for it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no because react updated FunctionComponent type, it can now also return Promise<ReactElement>
and that causes type errors and is not desired
const color = p.added ? "lime" : p.removed ? "red" : "grey"; | ||
return <div style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldnt this use something like p.value for the key instead of the index?
@@ -61,7 +61,7 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean> | |||
title: "Oops!", | |||
body: ( | |||
<ErrorCard> | |||
{err.split("\n").map(line => <div>{Parser.parse(line)}</div>)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same argument as the other, use line for key instead?
const { width, height } = computeWidthAndHeight(a.width, a.height); | ||
return ( | ||
<div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use url for key?
@@ -69,6 +69,7 @@ export function HistoryModal({ modalProps, message }: { modalProps: ModalProps; | |||
|
|||
{timestamps.map((timestamp, index) => ( | |||
<TabBar.Item | |||
key={index} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since there are a lot of index usage for keys i'll leave a warning in each to be sure they get changed, if we go that way
@@ -113,6 +113,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea | |||
|
|||
return ( | |||
<div | |||
key={index} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key warning
@@ -159,7 +159,7 @@ export default LazyComponent(() => { | |||
onClick={() => openBlockModal()} | |||
/> | |||
)} | |||
{review.sender.badges.map(badge => <ReviewBadge {...badge} />)} | |||
{review.sender.badges.map((badge, idx) => <ReviewBadge key={idx} {...badge} />)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key warning
lines = hljsHtml | ||
.split("\n") | ||
.map((line, i) => <span key={i} dangerouslySetInnerHTML={{ __html: line }} />); | ||
} catch { | ||
lines = content.split("\n").map(line => <span>{line}</span>); | ||
lines = content.split("\n").map((line, idx) => <span key={idx}>{line}</span>); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key warning
// [Cynthia] this makes it so when you highlight the codeblock | ||
// empty lines are also selected and copied when you Ctrl+C. | ||
if (line.length === 0) { | ||
return <span>{"\n"}</span>; | ||
return <span key={idx}>{"\n"}</span>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key warning
{lines.map(line => ( | ||
<span>{line}</span> | ||
{lines.map((line, idx) => ( | ||
<span key={idx}>{line}</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
key warning
@@ -47,7 +47,7 @@ export interface ModalOptions { | |||
onCloseCallback?: (() => void); | |||
} | |||
|
|||
type RenderFunction = (props: ModalProps) => ReactNode; | |||
type RenderFunction = (props: ModalProps) => ReactElement<any>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why does it need to be ReactElement exactly?
what it says in the title
I also was in the process of adding eslint-react-hooks but I realised it sucks ass for a multitude of reasons so I aborted adding that. there are a few hook changes from that nevertheless
Before merging, everywhere where a component key was added or a hook usage was changed needs testing