Replaced history.go(0) with reload()

client/src/components/forms/MemberForm/index.tsx

 
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router';
 
+import { reload } from 'index';
 import { addTeamMember, Team, TeamRole } from 'adapters/team';
 
 import UsernameForm from 'components/forms/MemberForm/UsernameForm';
@@ -19,14 +19,13 @@ export default function MemberForm({ roles, team, setRoles }: Props) {
     const [role, setRole] = useState<string>();
     const [user, setUser] = useState('');
 
-    const history = useHistory();
     useEffect(() => {
         if (role && user) {
             addTeamMember(team.id, { user: user, role: role }).then(() => {
-                history.go(0);
+                reload()
             });
         }
-    }, [role, user, team, history])
+    }, [role, user, team])
 
     return (
         <div className="member-form">

client/src/components/forms/RoleForm/RoleChangeForm.tsx

 
 import { FormEvent, useCallback, useState } from 'react';
-import { useHistory } from 'react-router';
 
+import { reload } from 'index';
 import { deleteTeamRole, Team, TeamMember, TeamRole, updateTeamMember } from 'adapters/team';
 
 import Button from 'components/ui/Button';
@@ -19,7 +19,6 @@ interface Props {
 export default function RoleForm({ roles, setEdit, member, team, setResult, setAllRoles }: Props) {
     const [currentRole, setRole] = useState(member?.role.id);
     const [error, setError] = useState('');
-    const history = useHistory();
 
     const onSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
@@ -29,10 +28,10 @@ export default function RoleForm({ roles, setEdit, member, team, setResult, setA
             }
             if (member) {
                 await updateTeamMember(team.id, { user: member.id, role: currentRole });
-                history.go(0);
+                reload();
             }
         }
-    }, [currentRole, member, team, setResult, history]);
+    }, [currentRole, member, team, setResult]);
 
     const onDelete = useCallback(async (id: string) => {
         try {

client/src/index.tsx

@@ -8,12 +8,24 @@ import reportWebVitals from './reportWebVitals';
 
 import 'index.scss';
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById('root')
-);
+function render() {
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('root')
+    );
+}
+
+export function reload() {
+    const root = document.getElementById('root');
+    if (root) {
+        ReactDOM.unmountComponentAtNode(root);
+        render();
+    }
+}
+
+render();
 
 serviceWorkerRegistration.register();
 reportWebVitals();