From b15638957acfd112088d66c0d094b039dfda214e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hl=C3=B6=C3=B0ver=20Sigur=C3=B0sson?= Date: Sat, 4 Jan 2025 10:33:01 +0200 Subject: [PATCH] feat(router): adjusting for rr7 --- package.json | 1 - src/components/console/context.tsx | 4 +- src/components/cs-logo/cs-logo.tsx | 2 +- src/components/file-tree/index.tsx | 2 +- src/components/header/header.tsx | 11 +- .../header/project-profile-meta.tsx | 2 +- src/components/home/home-ui.tsx | 32 +----- src/components/hot-keys/hot-keys.tsx | 2 +- src/components/main/main.tsx | 14 ++- src/components/manual/manual.tsx | 2 +- src/components/profile/profile-lists.tsx | 2 +- src/components/profile/profile.tsx | 44 ++------ src/components/projects/project-context.tsx | 8 +- src/components/router/router.tsx | 103 +++--------------- src/components/router/selectors.tsx | 19 ---- src/store/store.ts | 18 ++- yarn.lock | 9 +- 17 files changed, 57 insertions(+), 218 deletions(-) delete mode 100644 src/components/router/selectors.tsx diff --git a/package.json b/package.json index a3725ebc..9aff0943 100644 --- a/package.json +++ b/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", diff --git a/src/components/console/context.tsx b/src/components/console/context.tsx index 37f0d075..41c831ec 100644 --- a/src/components/console/context.tsx +++ b/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; diff --git a/src/components/cs-logo/cs-logo.tsx b/src/components/cs-logo/cs-logo.tsx index 3c9d13e1..d52919b7 100644 --- a/src/components/cs-logo/cs-logo.tsx +++ b/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; diff --git a/src/components/file-tree/index.tsx b/src/components/file-tree/index.tsx index ca47c935..645d27d5 100644 --- a/src/components/file-tree/index.tsx +++ b/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 ( {stateDnD && project && currentTabDocumentUid && ( diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 4afe3111..70554d21 100644 --- a/src/components/header/header.tsx +++ b/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); diff --git a/src/components/header/project-profile-meta.tsx b/src/components/header/project-profile-meta.tsx index d22357ed..2ab31d7e 100644 --- a/src/components/header/project-profile-meta.tsx +++ b/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"; diff --git a/src/components/home/home-ui.tsx b/src/components/home/home-ui.tsx index 73208250..e9aa0eab 100644 --- a/src/components/home/home-ui.tsx +++ b/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)` -// 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; diff --git a/src/components/hot-keys/hot-keys.tsx b/src/components/hot-keys/hot-keys.tsx index 013c4b64..db4712d5 100644 --- a/src/components/hot-keys/hot-keys.tsx +++ b/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; diff --git a/src/components/main/main.tsx b/src/components/main/main.tsx index 63bd8f1f..43098ee9 100644 --- a/src/components/main/main.tsx +++ b/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 ( - - <> + + - - + + + ); }; diff --git a/src/components/manual/manual.tsx b/src/components/manual/manual.tsx index dc4d01cf..0ca0bb66 100644 --- a/src/components/manual/manual.tsx +++ b/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"; diff --git a/src/components/profile/profile-lists.tsx b/src/components/profile/profile-lists.tsx index 86f82a06..34272a81 100644 --- a/src/components/profile/profile-lists.tsx +++ b/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"; diff --git a/src/components/profile/profile.tsx b/src/components/profile/profile.tsx index be8a32c3..4ea967a0 100644 --- a/src/components/profile/profile.tsx +++ b/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) { diff --git a/src/components/projects/project-context.tsx b/src/components/projects/project-context.tsx index a4585cae..a52db9af 100644 --- a/src/components/projects/project-context.tsx +++ b/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 }) => ( ); -export const ProjectContext = (properties: IProjectContextProperties) => { +export const ProjectContext = () => { const dispatch = useDispatch(); const theme = useTheme(); const routeParams: { id?: string } = useParams(); diff --git a/src/components/router/router.tsx b/src/components/router/router.tsx index 4c40c45e..09fb36b9 100644 --- a/src/components/router/router.tsx +++ b/src/components/router/router.tsx @@ -1,95 +1,28 @@ -import { useEffect } from "react"; -import { useDispatch, store } from "@root/store"; -import { Provider } from "react-redux"; import Home from "../home/home"; import CsoundManual from "@comp/manual/manual"; import { Profile } from "../profile/profile"; import { Page404 } from "../page-404/page-404"; import { ProjectContext } from "../projects/project-context"; -import { closeTabDock } from "@comp/project-editor/actions"; -import { closeProject } from "@comp/projects/actions"; -// import { HistoryRouter as Router } from "redux-first-history/rr6"; -import { BrowserRouter, Route, Routes } from "react-router-dom"; -import { stopCsound } from "../csound/actions"; +import { BrowserRouter, Route, Routes } from "react-router"; import { SiteDocuments } from "../site-documents/site-documents"; -import { ConsoleProvider } from "@comp/console/context"; -const EditorLayout = (properties: any) => { - const dispatch = useDispatch(); - - useEffect(() => { - return () => { - dispatch(stopCsound()); - dispatch(closeProject()); - dispatch(closeTabDock()); - }; - }, [dispatch]); - - return ( - - - - - - ); -}; - -// const CsoundManualWithStyleOverrides = ({ -// theme, -// ...routerProperties -// }: any) => { -// const [isMounted, setIsMounted] = useState(false); -// const [{ fetched, Csound }, setFetchState]: [ -// { fetched: boolean; Csound: any }, -// any -// ] = useState({ fetched: false, Csound: undefined }); - -// useEffect(() => { -// if (!isMounted) { -// setIsMounted(true); -// import("@csound/browser").then(({ Csound }) => { -// setFetchState({ fetched: true, Csound }); -// }); -// } -// }, [isMounted, setIsMounted, fetched, Csound, setFetchState]); - -// return !fetched ? ( -// <> -// ) : ( -// -// ); -// }; - -// const RouterAny = Router as any; - -const RouterComponent = ({ children }: { children: React.ReactNode }) => { +export const WebIdeRouter = () => { return ( - <> - - - } /> - } /> - } /> - }> - } /> - - }> - } /> - - - } /> - } /> - } /> - - - {children} - + + + } /> + } /> + }> + } /> + + }> + } /> + + + } /> + } /> + } /> + + ); }; - -export default RouterComponent; diff --git a/src/components/router/selectors.tsx b/src/components/router/selectors.tsx deleted file mode 100644 index afca9c2a..00000000 --- a/src/components/router/selectors.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { RootState } from "@root/store"; -import { notEmpty } from "@root/utils"; -import { always, cond, equals, match, T } from "ramda"; - -export const selectCurrentRoute = ({ router }: RootState): string => { - return cond([ - [equals("/"), always("home")], - [(x) => notEmpty(match(/^\/editor\/+/g, x)), always("editor")], - [(x) => notEmpty(match(/^\/profile/g, x)), always("profile")], - [T, always("404")] - ])(router.location.pathname); -}; - -export const selectCurrentProfileRoute = ({ - router -}: RootState): Array => { - // console.log("router", router); - return router.location; -}; diff --git a/src/store/store.ts b/src/store/store.ts index 9c5123df..cb8b76c4 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -4,6 +4,7 @@ import { ThunkDispatch, configureStore } from "@reduxjs/toolkit"; +// import { combineReducers } from "redux"; import { TypedUseSelectorHook, useDispatch as useDispatchOriginal, @@ -18,22 +19,19 @@ import { createBrowserHistory } from "history"; // we don't include the devtools const insideIframe = !!window.frameElement; -const { createReduxHistory, routerMiddleware, routerReducer } = - createReduxHistoryContext({ - history: createBrowserHistory() - }); +// const { createReduxHistory, routerMiddleware, routerReducer } = +// createReduxHistoryContext({ +// history: createBrowserHistory() +// }); -const rootReducer = { ...reducer, router: routerReducer }; +// const rootReducer = { ...reducer, router: routerReducer }; export const store = configureStore({ - reducer: rootReducer, + reducer, devTools: !insideIframe, - middleware: (getDefaultMiddleware) => - getDefaultMiddleware().concat(routerMiddleware) + middleware: (getDefaultMiddleware) => getDefaultMiddleware() }); -export const history = createReduxHistory(store); - export type AppDispatch = typeof store.dispatch; export { createAsyncThunk } from "@reduxjs/toolkit"; diff --git a/yarn.lock b/yarn.lock index aae5ae81..c5034893 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10409,14 +10409,7 @@ react-refresh@^0.16.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.16.0.tgz#e7d45625f05c9709466d09348a25d22f79b2ad23" integrity sha512-FPvF2XxTSikpJxcr+bHut2H4gJ17+18Uy20D5/F+SKzFap62R3cM5wH6b8WN3LyGSYeQilLEcJcR1fjBSI2S1A== -react-router-dom@^7.0.2: - version "7.0.2" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.0.2.tgz#cbd7ce2db7112f1bc3e9eee3657ad32d7515a913" - integrity sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw== - dependencies: - react-router "7.0.2" - -react-router@7.0.2, react-router@^7.0.2: +react-router@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.2.tgz#2820e107cb8cec8acc5db15a17470c056ea86022" integrity sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==