The main issue I am having is I don't know how to hide the IonSplitPane when I am not logged into the application. If anyone knows a solution to this issue it would be appreciated as the only answers online are done through Ionic Angular and not React with TypeScript.
Below is the app.tsx where the is placed.
const RoutingSystem: React.FC = () => { return (<IonReactRouter><IonSplitPane className="n" contentId="main"><SideMenu /><IonRouterOutlet id="main"><Route path="/" component={Home} exact /><Route path="/login" component={Login} exact /><Route path="/register" component={Register} exact /><Route path="/filter" exact><Filter /></Route><Route path="/tabs" exact><TabsMenu /></Route><Redirect to="/tabs" /></IonRouterOutlet></IonSplitPane></IonReactRouter> );};const App: React.FC = () => { const [busy, setBusy] = useState(true); const dispatch = useDispatch(); useEffect(() => { getCurrentUser().then((user: any) => { console.log(user); if (user) { dispatch(setUserState(user.email)); window.history.replaceState({}, "/", "/tabs/newsfeed"); } else { window.history.replaceState({}, "", "/"); } setBusy(false); }); }, []); return (<IonApp> {busy ? (<IonSpinner className="spinnerCenter" name="bubbles" color="primary" /> ) : (<RoutingSystem /> )}</IonApp> );};export default App;Here is the sideMenu component for the applcation.
import React from "react";import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonIcon, IonLabel, IonToggle,} from "@ionic/react";import { moon, logoGithub } from "ionicons/icons";const SideMenu: React.FC = () => { return (<IonMenu contentId="main"><IonHeader><IonToolbar><IonTitle>Opportunity</IonTitle></IonToolbar></IonHeader><IonContent><IonItem><IonIcon slot="start" icon={moon} /><IonLabel>Dark Mode</IonLabel><IonToggle color="primary" slot="end" name="darkMode" onIonChange={toggleDarkModeHandler} /></IonItem><IonItem button href="https://github.com/ionic-team/ionic" routerDirection="none"><IonIcon slot="start" icon={logoGithub} /><IonLabel>Github Repo</IonLabel></IonItem></IonContent></IonMenu> );};const toggleDarkModeHandler = () => { document.body.classList.toggle("dark");};export default SideMenu;Here is the login.tsx page I also have a home.tsx and registrationpage which are similar which I can show if needed.
import { Link, useHistory } from "react-router-dom";import { loginUser } from "../firebaseSetup";import { toast } from "../toast";import { setUserState } from "../redux/actions";import { useDispatch } from "react-redux";const Login: React.FC = () => { const [busy, setBusy] = useState<boolean>(false); const history = useHistory(); const dispatch = useDispatch(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); async function login() { setBusy(true); const res: any = await loginUser(username, password); if (res) { console.log(res); dispatch(setUserState(res.user.email)); history.replace("/tabs/newsfeed"); toast("You have logged in!"); } setBusy(false); } return (<IonPage><IonHeader><IonToolbar><IonButtons slot="start"><IonBackButton defaultHref="/" /></IonButtons><IonTitle>Login</IonTitle></IonToolbar></IonHeader><IonLoading message="Please wait.." duration={0} isOpen={busy} /><IonContent className="ion-padding"><IonInput placeholder="Email?" onIonChange={(e: any) => setUsername(e.target.value)} /><IonInput type="password" placeholder="Password?" onIonChange={(e: any) => setPassword(e.target.value)} /><IonButton onClick={login}>Login</IonButton><p> New to Opportunity? <Link to="/register">Register</Link></p></IonContent></IonPage> );};export default Login;