chore: add `react-router`

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",

web/src/hooks/useQuery.ts

+// 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;

web/src/main.tsx

 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(
+  <BrowserRouter>
     <I18nProvider>
       <Provider store={store}>
         <App />
       </Provider>
     </I18nProvider>
+  </BrowserRouter>
 );

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<State>({
@@ -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();

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"