fix: code form in user menu causing dom issues

it was a form encapsulated in a form and that is not safe
project-slippi · Jan 22, 2022 · a8269c6 · a8269c6
1 parent 281afe9
commit a8269c6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 14 deletions.
diff --git a/src/renderer/containers/ActivateOnlineForm.tsx b/src/renderer/containers/ActivateOnlineForm.tsx
@@ -17,13 +17,13 @@ import { validateConnectCodeStart } from "@/lib/validate";
 
 const log = electronLog.scope("ActivateOnlineForm");
 
-export const ActivateOnlineForm: React.FC = () => {
+export const ActivateOnlineForm: React.FC<{ onSubmit?: () => void }> = ({ onSubmit }) => {
   const user = useAccount((store) => store.user);
   const refreshActivation = useAccount((store) => store.refreshPlayKey);
   return (
     <div>
       <div>Your connect code is used for players to connect with you directly.</div>
-      <ConnectCodeSetter displayName={user ? user.displayName : null} onSuccess={refreshActivation} />
+      <ConnectCodeSetter displayName={user ? user.displayName : null} onSuccess={onSubmit || refreshActivation} />
     </div>
   );
 };

diff --git a/src/renderer/containers/Header/ActivateOnlineDialog.tsx b/src/renderer/containers/Header/ActivateOnlineDialog.tsx
@@ -23,8 +23,7 @@ export const ActivateOnlineDialog: React.FC<ActivateOnlineDialogProps> = ({ open
   const refreshPlayKey = useAccount((store) => store.refreshPlayKey);
   const { addToast } = useToasts();
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const handleSubmit = () => {
     refreshPlayKey()
       .then(() => {
         onClose();
@@ -37,12 +36,10 @@ export const ActivateOnlineDialog: React.FC<ActivateOnlineDialogProps> = ({ open
 
   return (
     <Dialog open={open} onClose={onClose} fullWidth={true} fullScreen={fullScreen} disableBackdropClick={false}>
-      <form onSubmit={handleSubmit}>
-        <StyledDialogTitle>Choose a connect code</StyledDialogTitle>
-        <DialogContent style={{ display: "flex", paddingBottom: 30 }}>
-          <ActivateOnlineForm />
-        </DialogContent>
-      </form>
+      <StyledDialogTitle>Choose a connect code</StyledDialogTitle>
+      <DialogContent style={{ display: "flex", paddingBottom: 30 }}>
+        <ActivateOnlineForm onSubmit={handleSubmit} />
+      </DialogContent>
     </Dialog>
   );
 };

diff --git a/src/renderer/containers/Header/UserMenu.tsx b/src/renderer/containers/Header/UserMenu.tsx
@@ -5,7 +5,6 @@ import EjectIcon from "@material-ui/icons/Eject";
 import LanguageIcon from "@material-ui/icons/Language";
 import firebase from "firebase";
 import React from "react";
-import { useToasts } from "react-toast-notifications";
 
 import { ConfirmationModal } from "@/components/ConfirmationModal";
 import { IconMenu, IconMenuItem } from "@/components/IconMenu";
@@ -22,12 +21,10 @@ export const UserMenu: React.FC<{
 }> = ({ user, handleError }) => {
   const playKey = useAccount((store) => store.playKey);
   const displayName = useAccount((store) => store.displayName);
-  const refreshPlayKey = useAccount((store) => store.refreshPlayKey);
   const loading = useAccount((store) => store.loading);
   const [openLogoutPrompt, setOpenLogoutPrompt] = React.useState(false);
   const [openNameChangePrompt, setOpenNameChangePrompt] = React.useState(false);
   const [openActivationDialog, setOpenActivationDialog] = React.useState(false);
-  const { addToast } = useToasts();
   const onLogout = async () => {
     try {
       await logout();
@@ -107,7 +104,6 @@ export const UserMenu: React.FC<{
         open={openActivationDialog}
         onClose={() => setOpenActivationDialog(false)}
         onSubmit={() => {
-          refreshPlayKey().catch((err) => addToast(err.message, { appearance: "error" }));
           setOpenActivationDialog(false);
         }}
       />