diff --git a/web/package.json b/web/package.json index 71937e1f..4d033c44 100644 --- a/web/package.json +++ b/web/package.json @@ -17,7 +17,8 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-feather": "^2.0.10", - "react-redux": "^8.0.1" + "react-redux": "^8.0.1", + "react-router-dom": "^6.4.0" }, "devDependencies": { "@types/lodash-es": "^4.17.5", diff --git a/web/src/hooks/useQuery.ts b/web/src/hooks/useQuery.ts new file mode 100644 index 00000000..70d0eda9 --- /dev/null +++ b/web/src/hooks/useQuery.ts @@ -0,0 +1,13 @@ +// A custom hook that builds on useLocation to parse + +import React from "react"; +import { useLocation } from "react-router-dom"; + +// the query string for you. +const useQuery = () => { + const { search } = useLocation(); + + return React.useMemo(() => new URLSearchParams(search), [search]); +}; + +export default useQuery; diff --git a/web/src/main.tsx b/web/src/main.tsx index bcdf9af8..2c32b128 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,5 +1,6 @@ import { createRoot } from "react-dom/client"; import { Provider } from "react-redux"; +import { BrowserRouter } from "react-router-dom"; import I18nProvider from "./labs/i18n/I18nProvider"; import store from "./store"; import App from "./App"; @@ -10,9 +11,11 @@ import "./css/index.css"; const container = document.getElementById("root"); const root = createRoot(container as HTMLElement); root.render( - - - - - + + + + + + + ); diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index e9db1959..74745064 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { locationService, memoService, userService } from "../services"; import { useAppSelector } from "../store"; import useI18n from "../hooks/useI18n"; +import useQuery from "../hooks/useQuery"; import useLoading from "../hooks/useLoading"; import Only from "../components/common/OnlyWhen"; import MemoContent from "../components/MemoContent"; @@ -15,6 +16,7 @@ interface State { const Explore = () => { const { t, locale } = useI18n(); + const query = useQuery(); const user = useAppSelector((state) => state.user.user); const location = useAppSelector((state) => state.location); const [state, setState] = useState({ @@ -34,9 +36,18 @@ const Explore = () => { } memoService.fetchAllMemos().then((memos) => { + let filteredMemos = memos; + + const memoId = Number(query.get("memoId")); + if (memoId && !isNaN(memoId)) { + filteredMemos = filteredMemos.filter((memo) => { + return memo.id === memoId; + }); + } + setState({ ...state, - memos, + memos: filteredMemos, }); }); loadingState.setFinish(); diff --git a/web/yarn.lock b/web/yarn.lock index 7d0dc45d..4576281f 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -341,6 +341,11 @@ redux-thunk "^2.4.1" reselect "^4.1.5" +"@remix-run/router@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.0.tgz#a2189335a5f6428aa904ccc291988567018b6e01" + integrity sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A== + "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" @@ -2113,6 +2118,20 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +react-router-dom@^6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0.tgz#a7d7c394c9e730b045cdd4f5d6c2d1ccb9e26947" + integrity sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg== + dependencies: + react-router "6.4.0" + +react-router@6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0.tgz#68449c23dc893fc7a57db068c19987be1de72edb" + integrity sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg== + dependencies: + "@remix-run/router" "1.0.0" + react@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"