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"