@@ -35,9 +32,9 @@ const Sidebar = () => {
📅 {t("sidebar.daily-review")}
-
+
diff --git a/web/src/helpers/utils.ts b/web/src/helpers/utils.ts
index 005f4cc3..b28a8b1d 100644
--- a/web/src/helpers/utils.ts
+++ b/web/src/helpers/utils.ts
@@ -1,4 +1,8 @@
-import { assign } from "lodash-es";
+import { assign, isNull, isUndefined } from "lodash-es";
+
+export const isNullorUndefined = (value: any) => {
+ return isNull(value) || isUndefined(value);
+};
export function getNowTimeStamp(): number {
return Date.now();
diff --git a/web/src/less/explore.less b/web/src/less/explore.less
index 2c1c1b95..8a2346ba 100644
--- a/web/src/less/explore.less
+++ b/web/src/less/explore.less
@@ -25,7 +25,7 @@
> .action-button-container {
> .btn {
- @apply text-gray-600 font-mono text-base py-1 border px-3 rounded-xl hover:opacity-80 hover:underline;
+ @apply block text-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
> .icon {
@apply text-lg;
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 2c32b128..bcdf9af8 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,6 +1,5 @@
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";
@@ -11,11 +10,9 @@ import "./css/index.css";
const container = document.getElementById("root");
const root = createRoot(container as HTMLElement);
root.render(
-
-
-
-
-
-
-
+
+
+
+
+
);
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index dfbcd0a0..b9bfca67 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -1,9 +1,10 @@
import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
import * as api from "../helpers/api";
import { validate, ValidatorConfig } from "../helpers/validator";
import useI18n from "../hooks/useI18n";
import useLoading from "../hooks/useLoading";
-import { globalService, locationService, userService } from "../services";
+import { globalService, userService } from "../services";
import Icon from "../components/Icon";
import Only from "../components/common/OnlyWhen";
import toastHelper from "../components/Toast";
@@ -18,6 +19,7 @@ const validateConfig: ValidatorConfig = {
const Auth = () => {
const { t, locale } = useI18n();
+ const navigate = useNavigate();
const pageLoadingState = useLoading(true);
const [siteHost, setSiteHost] = useState();
const [email, setEmail] = useState("");
@@ -68,7 +70,7 @@ const Auth = () => {
await api.signin(email, password);
const user = await userService.doSignIn();
if (user) {
- locationService.replaceHistory("/");
+ navigate("/");
} else {
toastHelper.error(t("message.login-failed"));
}
@@ -101,7 +103,7 @@ const Auth = () => {
await api.signup(email, password, "HOST");
const user = await userService.doSignIn();
if (user) {
- locationService.replaceHistory("/");
+ navigate("/");
} else {
toastHelper.error(t("common.singup-failed"));
}
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 3a598775..45ac8137 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,6 +1,8 @@
import dayjs from "dayjs";
import { useEffect, useState } from "react";
-import { locationService, memoService, userService } from "../services";
+import { Link, useNavigate } from "react-router-dom";
+import { memoService, userService } from "../services";
+import { isNullorUndefined } from "../helpers/utils";
import { useAppSelector } from "../store";
import useI18n from "../hooks/useI18n";
import useQuery from "../hooks/useQuery";
@@ -16,6 +18,7 @@ interface State {
const Explore = () => {
const { t, locale } = useI18n();
+ const navigate = useNavigate();
const query = useQuery();
const user = useAppSelector((state) => state.user.user);
const location = useAppSelector((state) => state.location);
@@ -25,33 +28,28 @@ const Explore = () => {
const loadingState = useLoading();
useEffect(() => {
- userService
- .initialState()
- .catch()
- .finally(async () => {
- const { host } = userService.getState();
- if (!host) {
- locationService.replaceHistory("/auth");
- return;
- }
+ const { host } = userService.getState();
+ if (isNullorUndefined(host)) {
+ navigate("/auth");
+ return;
+ }
- memoService.fetchAllMemos().then((memos) => {
- let filteredMemos = memos;
+ 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: filteredMemos,
- });
+ const memoId = Number(query.get("memoId"));
+ if (memoId && !isNaN(memoId)) {
+ filteredMemos = filteredMemos.filter((memo) => {
+ return memo.id === memoId;
});
- loadingState.setFinish();
+ }
+
+ setState({
+ ...state,
+ memos: filteredMemos,
});
+ loadingState.setFinish();
+ });
}, [location]);
return (
@@ -65,13 +63,13 @@ const Explore = () => {
{user ? (
-
+
) : (
-
+
)}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 0f93ff2a..01415ac0 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,77 +1,77 @@
import { useEffect } from "react";
-import { locationService, userService } from "../services";
+import { useLocation, useNavigate } from "react-router-dom";
+import { globalService, userService } from "../services";
import { useAppSelector } from "../store";
import useI18n from "../hooks/useI18n";
-import useLoading from "../hooks/useLoading";
+import { isNullorUndefined } from "../helpers/utils";
import Only from "../components/common/OnlyWhen";
+import toastHelper from "../components/Toast";
import Sidebar from "../components/Sidebar";
import MemosHeader from "../components/MemosHeader";
import MemoEditor from "../components/MemoEditor";
import MemoFilter from "../components/MemoFilter";
import MemoList from "../components/MemoList";
-import toastHelper from "../components/Toast";
import "../less/home.less";
function Home() {
const { t } = useI18n();
+ const location = useLocation();
+ const navigate = useNavigate();
const user = useAppSelector((state) => state.user.user);
- const location = useAppSelector((state) => state.location);
- const loadingState = useLoading();
useEffect(() => {
- userService
- .initialState()
- .catch()
- .finally(async () => {
- const { host, owner, user } = userService.getState();
- if (!host) {
- locationService.replaceHistory("/auth");
- return;
- }
+ const { host, owner, user } = userService.getState();
- if (userService.isVisitorMode()) {
- if (!owner) {
- toastHelper.error(t("message.user-not-found"));
- }
- } else {
- if (!user) {
- locationService.replaceHistory(`/explore`);
- }
- }
- loadingState.setFinish();
- });
+ if (isNullorUndefined(host)) {
+ navigate("/auth");
+ return;
+ }
+
+ if (userService.isVisitorMode()) {
+ if (!owner) {
+ toastHelper.error(t("message.user-not-found"));
+ }
+ } else {
+ if (isNullorUndefined(user)) {
+ navigate("/explore");
+ }
+ }
}, [location]);
+ useEffect(() => {
+ if (user?.setting.locale) {
+ globalService.setLocale(user.setting.locale);
+ }
+ }, [user?.setting.locale]);
+
return (
- {loadingState.isLoading ? null : (
-
-
-
-
-
-
-
-
-
-
-
-
-
- {user ? (
-
- ) : (
-
- )}
-
+
+
+
+
+ {user ? (
+
+ ) : (
+
+ )}
+
+
+
+
);
}
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
new file mode 100644
index 00000000..469142cc
--- /dev/null
+++ b/web/src/router/index.tsx
@@ -0,0 +1,47 @@
+import { createBrowserRouter } from "react-router-dom";
+import { userService } from "../services";
+import Auth from "../pages/Auth";
+import Explore from "../pages/Explore";
+import Home from "../pages/Home";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: ,
+ loader: async () => {
+ try {
+ await userService.initialState();
+ } catch (error) {
+ // do nth
+ }
+ },
+ },
+ {
+ path: "/auth",
+ element: ,
+ },
+ {
+ path: "/u/:userId",
+ element: ,
+ loader: async () => {
+ try {
+ await userService.initialState();
+ } catch (error) {
+ // do nth
+ }
+ },
+ },
+ {
+ path: "/explore",
+ element: ,
+ loader: async () => {
+ try {
+ await userService.initialState();
+ } catch (error) {
+ // do nth
+ }
+ },
+ },
+]);
+
+export default router;
diff --git a/web/src/routers/appRouter.tsx b/web/src/routers/appRouter.tsx
deleted file mode 100644
index 1c96235a..00000000
--- a/web/src/routers/appRouter.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Home from "../pages/Home";
-import Auth from "../pages/Auth";
-import Explore from "../pages/Explore";
-
-const appRouter = {
- "/auth": ,
- "/explore": ,
- "*": ,
-};
-
-export default appRouter;
diff --git a/web/src/routers/index.ts b/web/src/routers/index.ts
deleted file mode 100644
index 6c1a9417..00000000
--- a/web/src/routers/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import appRouter from "./appRouter";
-
-// just like React-Router
-interface Router {
- [key: string]: JSX.Element | null;
- "*": JSX.Element | null;
-}
-
-const routerSwitch = (router: Router) => {
- return (pathname: string) => {
- for (const key of Object.keys(router)) {
- if (key === pathname) {
- return router[key];
- }
- }
- return router["*"];
- };
-};
-
-export const appRouterSwitch = routerSwitch(appRouter);