Skip to content

Clean up react bad pratices [SYNTH-224] #1399

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

Open
0xda157 wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Clean up react bad pratices [SYNTH-224] #1399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
671d00c
remove empty jsx fragments
0xda157 Jul 10, 2026
456467e
simplify jsx ternary
0xda157 Jul 10, 2026
376c493
remove unneeded jsx curly braces for attribute values
0xda157 Jul 10, 2026
5da8800
Merge branch 'dev' of github.com:autodesk/synthesis into dionkud/224/…
0xda157 Jul 14, 2026
4e7c1c1
remove npmrc
0xda157 Jul 14, 2026
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
6 changes: 3 additions & 3 deletions fission/src/Synthesis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function Synthesis() {
}, [])

return (
<AnimatePresence key={"animate-presence"}>
<AnimatePresence key="animate-presence">
<ThemeProvider>
<SnackbarProvider
maxSnack={5}
Expand All @@ -107,10 +107,10 @@ function Synthesis() {
<SceneOverlay />
<ContextMenu />
<MultiplayerHUD />
<MainHUD key={"main-hud"} />
<MainHUD key="main-hud" />
<UIRenderer />
<CommandPalette />
<ProgressNotifications key={"progress-notifications"} />
<ProgressNotifications key="progress-notifications" />
<WPILibConnectionStatus />
<DragModeIndicator />

Expand Down
8 changes: 4 additions & 4 deletions fission/src/ui/components/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ const ContextMenu: React.FC = () => {
})
}, [])

return !state ? (
<></>
) : (
if (!state) return null

return (
<Stack
key="CANCEL"
component="div"
Expand Down Expand Up @@ -67,7 +67,7 @@ const ContextMenu: React.FC = () => {
{state.data.items.map(x => (
<Button
key={x.name}
className={"w-full text-sm"}
className="w-full text-sm"
onClick={() => {
setState(undefined)
if (x.screen) {
Expand Down
6 changes: 3 additions & 3 deletions fission/src/ui/components/DragModeIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const DragModeIndicator: React.FC = () => {
globalAddToast("info", "Drag Mode", "Drag mode has been disabled")
}

return enabled ? (
if (!enabled) return null

return (
<Stack
className="select-none absolute left-1 bottom-1 py-2 px-4 rounded-lg gap-2 cursor-pointer hover:opacity-80 transition-opacity"
direction="row"
Expand All @@ -32,8 +34,6 @@ const DragModeIndicator: React.FC = () => {
Drag Mode
</Label>
</Stack>
) : (
<></>
)
}

Expand Down
10 changes: 5 additions & 5 deletions fission/src/ui/components/MainHUD.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,16 @@ const MainHUD: React.FC = () => {
{!isOpen && (
<Stack
direction="row"
alignItems={"center"}
alignItems="center"
height="100%"
position={"absolute"}
position="absolute"
sx={{ top: "0", left: "0" }}
>
<Box
position="absolute"
width={"5vw"}
minWidth={"50px"}
maxWidth={"60px"}
width="5vw"
minWidth="50px"
maxWidth="60px"
style={{ aspectRatio: " 1 / 1.5" }}
className="transform transition-transform hover:scale-[1.02] active:scale-[1.04]"
bgcolor="secondary.dark"
Expand Down
4 changes: 2 additions & 2 deletions fission/src/ui/components/MultiplayerHUD.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ const MultiplayerHUD: React.FC = () => {
pr: "0.7rem",
})}
>
<Label fontWeight={"700"} size={"sm"}>
<Label fontWeight="700" size="sm">
Room {roomCode}
</Label>
{peers.map(peer => (
<Tooltip placement="right" key={peer.clientId} title={peer.clientId.split("-")[0]}>
<Typography variant={"body1"} key={peer.clientId}>
<Typography variant="body1" key={peer.clientId}>
{peer.displayName}
{peer.clientId == World.multiplayerSystem?.clientId && " (you)"}
</Typography>
Expand Down
2 changes: 1 addition & 1 deletion fission/src/ui/components/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const Panel = <T, P>({ children, panel, parent }: PanelElementProps<T, P>
return (
<Draggable
handle=".panel-drag-handle"
cancel={"input, textarea, select, .MuiSlider-root, .MuiMenuItem-root, .no-drag"}
cancel="input, textarea, select, .MuiSlider-root, .MuiMenuItem-root, .no-drag"
positionOffset={getPositionOffset(props.position)}
nodeRef={nodeRef}
>
Expand Down
28 changes: 14 additions & 14 deletions fission/src/ui/components/ProgressNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const ProgressNotification: React.FC<NotificationProps> = ({ handle }) => {
return (
<Box
key={handle.handleId}
component={"div"}
display={"flex"}
flexDirection={"column"}
component="div"
display="flex"
flexDirection="column"
sx={{
backgroundColor: "#000000",
borderWidth: "0rem",
Expand All @@ -80,22 +80,22 @@ const ProgressNotification: React.FC<NotificationProps> = ({ handle }) => {
}}
>
<Box
component={"div"}
display={"flex"}
flexDirection={"column"}
component="div"
display="flex"
flexDirection="column"
sx={{
paddingY: "0.75rem",
paddingX: "1.5rem",
}}
>
<TypoStyled fontWeight={"700"} fontSize={"1rem"}>
<TypoStyled fontWeight="700" fontSize="1rem">
{handle.title}
</TypoStyled>
{handle.message.length > 0 && <TypoStyled fontSize={"0.75rem"}>{handle.message}</TypoStyled>}
{handle.message.length > 0 && <TypoStyled fontSize="0.75rem">{handle.message}</TypoStyled>}
</Box>
<Box
key={"bar"}
component={"div"}
key="bar"
component="div"
sx={{
backgroundColor:
handle.status == ProgressHandleStatus.IN_PROGRESS
Expand Down Expand Up @@ -134,9 +134,9 @@ const ProgressNotifications: React.FC = () => {

return (
<Box
component={"div"}
display={"flex"}
position={"fixed"}
component="div"
display="flex"
position="fixed"
sx={{
bottom: "0.5rem",
left: "50vw",
Expand All @@ -146,7 +146,7 @@ const ProgressNotifications: React.FC = () => {
gap: "0.5rem",
}}
>
{progressElements ?? <></>}
{progressElements}
</Box>
)
}
Expand Down
2 changes: 1 addition & 1 deletion fission/src/ui/components/SceneOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const SceneOverlay: React.FC = () => {

/* h1 text for each tagMap tag */
const [components, updateComponents] = useReducer(() => {
if (isDisabled) return <></> // if the overlay is disabled, return nothing
if (isDisabled) return null

return [...tagMap.values()].map(x => (
<div
Expand Down
42 changes: 18 additions & 24 deletions fission/src/ui/components/SelectMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,28 +159,22 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
<>
{/** List of options */}
<Stack gap={2}>
{options.length > 0 ? (
options.map((option, i) => {
return (
<OptionCard
value={option}
index={i}
onSelected={val => {
setSelectedOption(val)
onOptionSelected(val)
}}
key={option.name + i}
onDelete={onDelete ? () => onDelete(option) : undefined}
includeDelete={deleteCondition === undefined || deleteCondition(option)}
/>
)
})
) : (
<>
{/** No options available text */}
<Label size="sm">{noOptionsText ?? "No options available!"}</Label>
</>
)}
{options.length <= 0 && <Label size="sm">{noOptionsText ?? "No options available!"}</Label>}

@Dhruv-0-Arora Dhruv-0-Arora Jul 20, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{options.length <= 0 && <Label size="sm">{noOptionsText ?? "No options available!"}</Label>}
{options.length === 0 && <Label size="sm">{noOptionsText ?? "No options available!"}</Label>}

{options.map((option, i) => {
return (
<OptionCard
value={option}
index={i}
onSelected={val => {
setSelectedOption(val)
onOptionSelected(val)
}}
key={option.name + i}
onDelete={onDelete ? () => onDelete(option) : undefined}
includeDelete={deleteCondition === undefined || deleteCondition(option)}
/>
)
})}
{/** Add button */}
{onAddClicked && (
<Button
Expand Down Expand Up @@ -211,7 +205,7 @@ export const SelectMenuHeader = ({
label,
}: SelectMenuHeaderProps): React.ReactElement => {
return (
<Stack direction="row" textAlign={"center"} minHeight={"30px"} key="selected-item" gap={1}>
<Stack direction="row" textAlign="center" minHeight="30px" key="selected-item" gap={1}>
{/** Back arrow button when an option is selected */}
{showBackButton && (
<IconButton onClick={onBackButton} id="select-menu-back-button" sx={{ mr: 1 }}>
Expand All @@ -220,7 +214,7 @@ export const SelectMenuHeader = ({
)}

{/** Label with either the header text, or the name of the selected option if an option is selected */}
<Stack alignSelf={"center"}>
<Stack alignSelf="center">
<Label size="sm" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
{label}
</Label>
Expand Down
2 changes: 1 addition & 1 deletion fission/src/ui/components/StyledComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ interface LabelWithTooltipProps {

export const LabelWithTooltip: React.FC<LabelWithTooltipProps> = ({ labelText, tooltipText }) => {
return (
<Stack direction="row" alignItems={"center"} textAlign={"center"}>
<Stack direction="row" alignItems="center" textAlign="center">
<Label size="sm">{labelText}</Label>
<CustomTooltip text={tooltipText} />
</Stack>
Expand Down
6 changes: 3 additions & 3 deletions fission/src/ui/components/TransformGizmoControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,19 @@ const TransformGizmoControl: React.FC<TransformGizmoControlProps> = ({
const buttons = []
if (!translateDisabled)
buttons.push(
<ToggleButton key="translate-button" value={"translate"}>
<ToggleButton key="translate-button" value="translate">
Move
</ToggleButton>
)
if (!rotateDisabled)
buttons.push(
<ToggleButton key="rotate-button" value={"rotate"}>
<ToggleButton key="rotate-button" value="rotate">
Rotate
</ToggleButton>
)
if (!scaleDisabled)
buttons.push(
<ToggleButton key="scale-button" value={"scale"}>
<ToggleButton key="scale-button" value="scale">
Scale
</ToggleButton>
)
Expand Down
6 changes: 3 additions & 3 deletions fission/src/ui/components/WPILibConnectionStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const WPILibConnectionStatus: React.FC = () => {
return () => clearInterval(handle)
}, [])

return enabled ? (
if (!enabled) return null

return (
<Stack
direction="row"
sx={{ bgcolor: "background.default" }}
Expand All @@ -30,8 +32,6 @@ const WPILibConnectionStatus: React.FC = () => {
)}
<Label size="sm">Code Connection</Label>
</Stack>
) : (
<></>
)
}

Expand Down
12 changes: 6 additions & 6 deletions fission/src/ui/modals/MatchResultsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
<Divider sx={{ my: "1rem" }} />
<Stack>
{entries.map(e => (
<Stack key={e.name} direction="row" justifyContent={"space-between"}>
<Stack key={e.name} direction="row" justifyContent="space-between">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
Expand All @@ -84,27 +84,27 @@ const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
<LabelStyled winnerColor={primaryColor} fontSize="1.25rem">
Robot Score Contributions
</LabelStyled>
<Stack direction={"row"} justifyContent={"space-between"} gap={"1rem"}>
<Stack direction={"column"}>
<Stack direction="row" justifyContent="space-between" gap="1rem">
<Stack direction="column">
<LabelStyled winnerColor={redAllianceColor} fontSize="1rem">
Red Alliance
</LabelStyled>
<div className="flex flex-col">
{redRobotScores.map(e => (
<Stack key={e.name} direction="row" justifyContent={"space-between"}>
<Stack key={e.name} direction="row" justifyContent="space-between">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
))}
</div>
</Stack>
<Stack direction={"column"}>
<Stack direction="column">
<LabelStyled winnerColor={blueAllianceColor} fontSize="1rem">
Blue Alliance
</LabelStyled>
<div className="flex flex-col">
{blueRobotScores.map(e => (
<Stack key={e.name} direction="row" justifyContent={"space-between"}>
<Stack key={e.name} direction="row" justifyContent="space-between">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
Expand Down
6 changes: 3 additions & 3 deletions fission/src/ui/modals/MultiplayerStartModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
return (
<Stack direction="column">
<TextField
type={"text"}
type="text"
value={name}
sx={{ input: { color: "#ffffff" } }}
placeholder="Name"
Expand All @@ -42,7 +42,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
}}
/>
<Button
value={"Create Game"}
value="Create Game"
onClick={async () => {
if (!isValidName) {
globalAddToast("warning", "Invalid Name", "Must be at least 3 characters")
Expand All @@ -60,7 +60,7 @@ const MultiplayerStartModal: React.FC<ModalImplProps<void, MultiplayerStartMenuC
</Button>
<Divider />
<TextField
type={"text"}
type="text"
value={room}
sx={{ input: { color: "#ffffff" } }}
placeholder="000000"
Expand Down
Loading
Loading