feat(router): adjusting for rr7

package.json

@@ -55,7 +55,6 @@
         "react-redux": "^9.2.0",
         "react-refresh": "^0.16.0",
         "react-router": "^7.0.2",
-        "react-router-dom": "^7.0.2",
         "react-select": "^5.9.0",
         "react-share": "^5.1.1",
         "react-split-pane": "^0.1.92",

src/components/console/context.tsx

@@ -10,7 +10,7 @@ export const ConsoleWriteContext = createContext(undefined);
 export const ConsoleProvider = ({
     children
 }: {
-    children: React.ReactElement;
+    children: React.ReactElement | React.ReactNode;
 }) => {
     const [logs, setLogs]: [string[], any] = useState([""]);
 
@@ -46,5 +46,3 @@ export const useSetConsole = (): string[] | undefined => {
     }
     return context;
 };
-
-export default useConsole;

src/components/cs-logo/cs-logo.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import Tooltip from "@mui/material/Tooltip";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 interface ILogoContainer {
     size: number;

src/components/file-tree/index.tsx

@@ -683,7 +683,7 @@ export const FileTree = ({
     const currentTabDocumentUid = useSelector(selectCurrentTabDocumentUid);
 
     const filelist = values(documents || {});
-    console.log(stateDnD, project, currentTabDocumentUid);
+
     return (
         <React.Fragment>
             {stateDnD && project && currentTabDocumentUid && (

src/components/header/header.tsx

@@ -1,6 +1,5 @@
 import React, { RefObject, useState, useRef } from "react";
 import { RootState, useDispatch, useSelector } from "@root/store";
-import { selectCurrentRoute } from "@comp/router/selectors";
 import { selectIsOwner } from "@comp/project-editor/selectors";
 import {
     selectUserImageURL,
@@ -11,7 +10,7 @@ import AppBar from "@mui/material/AppBar";
 import Login from "@comp/login/login";
 import * as loginActions from "@comp/login/actions";
 import CSLogo from "@comp/cs-logo/cs-logo";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 import {
     Toolbar,
     IconButton,
@@ -49,13 +48,13 @@ export const Header = () => {
         (store: RootState) => store.ProjectsReducer.activeProjectUid
     );
 
-    const currentRoute = useSelector(selectCurrentRoute);
+    const currentRoute = useLocation();
 
-    const routeIsHome = currentRoute === "home";
+    const routeIsHome = currentRoute.pathname === "/";
 
-    const routeIsEditor = currentRoute === "editor";
+    const routeIsEditor = currentRoute.pathname.startsWith("/editor");
 
-    const routeIsProfile = currentRoute === "profile";
+    const routeIsProfile = currentRoute.pathname.startsWith("/profile");
 
     const isOwner = useSelector(selectIsOwner);
 

src/components/header/project-profile-meta.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { formatDistance } from "date-fns";
 import { selectActiveProject } from "@comp/projects/selectors";
 import { selectProjectLastModified } from "@comp/project-last-modified/selectors";

src/components/home/home-ui.tsx

@@ -1,16 +1,7 @@
-// import { TextField, IconButton, Grid } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled from "@emotion/styled";
-// import styled, { createGlobalStyle } from "styled-components";
-// import { Gradient } from "./gradient";
 import { headerHeight } from "@styles/constants";
 
-// export const GlobalStyle = createGlobalStyle`
-//   body {
-//     ${Gradient}
-//   }
-// `;
-
 export const StyledGrid = styled.div`
     && {
         background-color: black;
@@ -37,27 +28,6 @@ export const StyledTextField = styled.div`
     }
 `;
 
-// interface IAnimatedGridContainer {
-//     duration: number;
-// }
-
-// export const AnimatedGridContainer = styled(Grid)<IAnimatedGridContainer>`
-//     position: relative;
-//     transition: all ${(properties) => properties.duration}ms;
-
-//     &.entering {
-//         opacity: 0;
-//         transform: translate(30px);
-//     }
-//     &.entered {
-//         opacity: 1;
-//     }
-//     &.exiting {
-//         opacity: 0;
-//         transform: translate(30px);
-//     }
-// `;
-
 interface IProjectCard {
     duration: number;
     projectIndex: number;

src/components/hot-keys/hot-keys.tsx

@@ -25,7 +25,7 @@ type CommandKey = keyof IHotKeysCallbacks;
 const HotKeys = ({
     children
 }: {
-    children: React.ReactElement;
+    children: React.ReactElement | React.ReactElement[];
 }): React.ReactElement => {
     // prevent leak into the manual iframe
     const insideIframe = !!window.frameElement;

src/components/main/main.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch } from "@root/store";
 import { isMobile } from "@root/utils";
-import Router from "@comp/router/router";
+import { WebIdeRouter } from "@comp/router/router";
 import ThemeProvider from "@styles/theme-provider";
 import Modal from "@comp/modal";
 import IosWarning from "./ios-warning";
@@ -12,6 +12,7 @@ import {
     thirdPartyAuthSuccess
 } from "@comp/login/actions";
 import { getAuth } from "firebase/auth";
+import { ConsoleProvider } from "@comp/console/context";
 import HotKeys from "@comp/hot-keys/hot-keys";
 
 const Main = () => {
@@ -59,13 +60,14 @@ const Main = () => {
 
     return (
         <ThemeProvider>
-            <Router>
-                <>
+            <ConsoleProvider>
+                <HotKeys>
                     <Modal />
                     <IosWarning />
                     <Snackbar />
-                </>
-            </Router>
+                    <WebIdeRouter />
+                </HotKeys>
+            </ConsoleProvider>
         </ThemeProvider>
     );
 };

src/components/manual/manual.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import { DebounceInput } from "react-debounce-input";
 import { css } from "@emotion/react";
 import { doc, getDoc } from "firebase/firestore";

src/components/profile/profile-lists.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useDispatch, useSelector } from "@root/store";
 import { List, ListItem, ListItemText } from "@mui/material";
 import { FollowingList } from "./tabs/following-list";

src/components/profile/profile.tsx

@@ -7,6 +7,7 @@ import { isMobile, updateBodyScroller } from "@root/utils";
 import { gradient } from "./gradient";
 import { usernames } from "@config/firestore";
 import { push } from "connected-react-router";
+import { useLocation, useParams } from "react-router";
 import { createButtonAddIcon } from "./styles";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
@@ -30,7 +31,6 @@ import {
     selectLoginRequesting,
     selectLoggedInUid
 } from "@comp/login/selectors";
-import { selectCurrentProfileRoute } from "@comp/router/selectors";
 import {
     uploadProfileImage,
     addProject,
@@ -80,37 +80,13 @@ const UserLink = ({ link }: { link: string | undefined }) => {
         <></>
     );
 };
-const routerLocationToProfileUriPath = (
-    location: Location | undefined
-): [string | undefined, string | undefined] => {
-    if (!location) {
-        return [undefined, undefined];
-    }
-    const { pathname } = location;
-
-    if (pathname.startsWith("/profile/")) {
-        const woPrefix = pathname.slice(9); // Remove "/profile/"
-        const [woPostfix, nested] = woPrefix.split("/", 2);
-
-        if (nested) {
-            return [woPostfix, nested];
-        } else {
-            return [woPostfix, undefined];
-        }
-    }
-
-    return [undefined, undefined];
-};
 
 export const Profile = () => {
     const [profileUid, setProfileUid]: [string | undefined, any] = useState();
     const theme = useTheme();
     const dispatch = useDispatch();
-    const location: Location | undefined = useSelector(
-        selectCurrentProfileRoute
-    ) as any;
-    const [username, profileUriPath] = routerLocationToProfileUriPath(location);
 
+    const { username, tab } = useParams();
     const profile = useSelector(selectUserProfile(profileUid));
     const imageUrl = useSelector(selectUserImageURL(profileUid));
     const loggedInUserUid = useSelector(selectLoggedInUid);
@@ -139,23 +115,17 @@ export const Profile = () => {
 
     useEffect(() => {
         if (username) {
-            if (!profileUriPath && selectedSection !== 0) {
+            if (!tab && selectedSection !== 0) {
                 setSelectedSection(0);
-            } else if (
-                profileUriPath === "following" &&
-                selectedSection !== 1
-            ) {
+            } else if (tab === "following" && selectedSection !== 1) {
                 setSelectedSection(1);
-            } else if (
-                profileUriPath === "followers" &&
-                selectedSection !== 2
-            ) {
+            } else if (tab === "followers" && selectedSection !== 2) {
                 setSelectedSection(2);
-            } else if (profileUriPath === "stars" && selectedSection !== 3) {
+            } else if (tab === "stars" && selectedSection !== 3) {
                 setSelectedSection(3);
             }
         }
-    }, [profileUriPath, selectedSection, username]);
+    }, [tab, selectedSection, username]);
 
     useEffect(() => {
         if (!isRequestingLogin) {

src/components/projects/project-context.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Audio as AudioSpinner } from "react-loader-spinner";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { push } from "connected-react-router";
 import { Theme, useTheme } from "@emotion/react";
 // import { IStore } from "@store/types";
@@ -15,15 +15,11 @@ import { UnknownAction } from "redux";
 import { RootState } from "@root/store";
 import * as SS from "./styles";
 
-interface IProjectContextProperties {
-    match: any;
-}
-
 const ForceBackgroundColor = ({ theme }: { theme: Theme }) => (
     <style>{`body {background-color: ${theme.background}}`}</style>
 );
 
-export const ProjectContext = (properties: IProjectContextProperties) => {
+export const ProjectContext = () => {
     const dispatch = useDispatch();
     const theme = useTheme();
     const routeParams: { id?: string } = useParams();