ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: split code with React.lazy

Browse Source
This commit is contained in:
zerosoul
2022-06-07 17:53:11 +08:00
parent 82d538dc76
commit bceec5f238
4 changed files with 185 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/home/Loading.js
-64
View File
@@ -1,64 +0,0 @@
import { useState, useEffect } from "react";
import styled from "styled-components";
import { Ring } from "@uiball/loaders";
import Button from "../../common/component/styled/Button";
import useLogout from "../../common/hook/useLogout";
const StyledWrapper = styled.div`
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
.loading {
display: flex;
align-items: center;
justify-content: center;
}
.reload {
visibility: hidden;
&.visible {
visibility: visible;
}
}
`;
export default function Loading() {
const [reloadVisible, setReloadVisible] = useState(false);
const { clearLocalData } = useLogout();
const handleReload = () => {
clearLocalData();
location.reload(true);
};
useEffect(() => {
const inter = setTimeout(() => {
setReloadVisible(true);
}, 30000);
return () => {
clearTimeout(inter);
};
}, []);
return (
<StyledWrapper>
<Ring
className="loading"
size={40}
lineWeight={5}
speed={2}
color="black"
/>
{reloadVisible && (
<Button
className={`reload danger ${reloadVisible ? "visible" : ""}`}
onClick={handleReload}
>
Reload
</Button>
)}
</StyledWrapper>
);
}
src/routes/home/index.js
+2 -2
View File
@@ -5,7 +5,7 @@ import { useSelector } from "react-redux";
import StyledWrapper from "./styled";
import User from "./User";
// import Tools from "./Tools";
import Loading from "./Loading";
import Loading from "../../common/component/Loading";
import Menu from "./Menu";
import usePreload from "./usePreload";
import usePWABadge from "../../common/hook/usePWABadge";
@@ -38,7 +38,7 @@ export default function HomePage() {
const { loading } = usePreload();
// console.log("index loading", loading, ready);
if (loading || !ready) {
return <Loading />;
return <Loading reload={true} />;
}
const isSettingPage = pathname.startsWith("/setting");
if (isSettingPage) {
src/routes/index.js
+124 -118
View File
@@ -1,134 +1,140 @@
import { useEffect } from "react";
import { Suspense, useEffect, lazy } from "react";
import { Route, Routes, HashRouter } from "react-router-dom";
import { Provider, useSelector } from "react-redux";
import toast from "react-hot-toast";
// import Welcome from './Welcome'
import NotFoundPage from "./404";
import OAuthPage from "./oauth";
import LoginPage from "./login";
import SendMagicLinkPage from "./sendMagicLink";
import RegBasePage from "./reg";
import RegPage from "./reg/Register";
import RegWithUsernamePage from "./reg/RegWithUsername";
import HomePage from "./home";
import ChatPage from "./chat";
import FavoritesPage from "./favs";
import ContactsPage from "./contacts";
const HomePage = lazy(() => import("./home"));
const RegBasePage = lazy(() => import("./reg"));
const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
const RegPage = lazy(() => import("./reg/Register"));
const LoginPage = lazy(() => import("./login"));
const OAuthPage = lazy(() => import("./oauth"));
const ChatPage = lazy(() => import("./chat"));
const ContactsPage = lazy(() => import("./contacts"));
const FavoritesPage = lazy(() => import("./favs"));
const OnboardingPage = lazy(() => import("./onboarding"));
const InvitePage = lazy(() => import("./invite"));
const SettingChannelPage = lazy(() => import("./settingChannel"));
const SettingPage = lazy(() => import("./setting"));
const ResourceManagement = lazy(() => import("./resources"));
import RequireAuth from "../common/component/RequireAuth";
import RequireNoAuth from "../common/component/RequireNoAuth";
import Meta from "../common/component/Meta";
import Loading from "../common/component/Loading";
import store from "../app/store";
import InvitePage from "./invite";
import SettingPage from "./setting";
import SettingChannelPage from "./settingChannel";
import OnboardingPage from "./onboarding";
import toast from "react-hot-toast";
import ResourceManagement from "./resources";
const PageRoutes = () => {
const {
ui: { online },
fileMessages
} = useSelector((store) => {
return { ui: store.ui, fileMessages: store.fileMessage };
});
// 掉线检测
useEffect(() => {
let toastId = 0;
if (!online) {
toast.error("Network Offline!", { duration: Infinity });
} else {
toast.dismiss(toastId);
}
}, [online]);
const {
ui: { online },
fileMessages,
} = useSelector((store) => {
return { ui: store.ui, fileMessages: store.fileMessage };
});
// 掉线检测
useEffect(() => {
let toastId = 0;
if (!online) {
toast.error("Network Offline!", { duration: Infinity });
} else {
toast.dismiss(toastId);
}
}, [online]);
return (
<HashRouter>
<Routes>
<Route path="/oauth/:token" element={<OAuthPage />} />
<Route
path="/login"
element={
<RequireNoAuth>
<LoginPage />
</RequireNoAuth>
}
/>
<Route
path="/send_magic_link"
element={
<RequireNoAuth>
<SendMagicLinkPage />
</RequireNoAuth>
}
/>
<Route
path="/reg"
element={
<RequireNoAuth>
<RegBasePage />
</RequireNoAuth>
}
>
<Route index element={<RegPage />} />
<Route path="magiclink">
<Route index element={<RegWithUsernamePage />} />
<Route path=":token" element={<RegWithUsernamePage />} />
</Route>
</Route>
<Route
path="/email_login"
element={
<RequireNoAuth>
<SendMagicLinkPage />
</RequireNoAuth>
}
/>
<Route path="/invite" element={<InvitePage />} />
<Route path="/onboarding" element={<OnboardingPage />} />
<Route
path="/"
element={
<RequireAuth>
<HomePage />
</RequireAuth>
}
>
<Route path="setting">
<Route index element={<SettingPage />} />
<Route path="channel/:cid" element={<SettingChannelPage />} />
</Route>
<Route index element={<ChatPage />} />
<Route path="chat">
<Route index element={<ChatPage />} />
<Route path="channel/:channel_id" element={<ChatPage />} />
<Route path="dm/:user_id" element={<ChatPage />} />
</Route>
<Route path="contacts">
<Route index element={<ContactsPage />} />
<Route path=":user_id" element={<ContactsPage />} />
</Route>
<Route path="favs" element={<FavoritesPage />}></Route>
<Route path="files" element={<ResourceManagement fileMessages={fileMessages} />}></Route>
</Route>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</HashRouter>
);
return (
<HashRouter>
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/oauth/:token" element={<OAuthPage />} />
<Route
path="/login"
element={
<RequireNoAuth>
<LoginPage />
</RequireNoAuth>
}
/>
<Route
path="/send_magic_link"
element={
<RequireNoAuth>
<SendMagicLinkPage />
</RequireNoAuth>
}
/>
<Route
path="/reg"
element={
<RequireNoAuth>
<RegBasePage />
</RequireNoAuth>
}
>
<Route index element={<RegPage />} />
<Route path="magiclink">
<Route index element={<RegWithUsernamePage />} />
<Route path=":token" element={<RegWithUsernamePage />} />
</Route>
</Route>
<Route
path="/email_login"
element={
<RequireNoAuth>
<SendMagicLinkPage />
</RequireNoAuth>
}
/>
<Route path="/invite" element={<InvitePage />} />
<Route path="/onboarding" element={<OnboardingPage />} />
<Route
path="/"
element={
<RequireAuth>
<HomePage />
</RequireAuth>
}
>
<Route path="setting">
<Route index element={<SettingPage />} />
<Route path="channel/:cid" element={<SettingChannelPage />} />
</Route>
<Route index element={<ChatPage />} />
<Route path="chat">
<Route index element={<ChatPage />} />
<Route path="channel/:channel_id" element={<ChatPage />} />
<Route path="dm/:user_id" element={<ChatPage />} />
</Route>
<Route path="contacts">
<Route index element={<ContactsPage />} />
<Route path=":user_id" element={<ContactsPage />} />
</Route>
<Route path="favs" element={<FavoritesPage />}></Route>
<Route
path="files"
element={<ResourceManagement fileMessages={fileMessages} />}
></Route>
</Route>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Suspense>
</HashRouter>
);
};
// const local_key = "AUTH_DATA";
export default function ReduxRoutes() {
// const [authData, setAuthData] = useState(
// JSON.parse(localStorage.getItem(local_key))
// );
// const updateAuthData = (data) => {
// localStorage.setItem(local_key, JSON.stringify(data));
// setAuthData(data);
// };
return (
<Provider store={store}>
<Meta />
<PageRoutes />
</Provider>
);
// const [authData, setAuthData] = useState(
// JSON.parse(localStorage.getItem(local_key))
// );
// const updateAuthData = (data) => {
// localStorage.setItem(local_key, JSON.stringify(data));
// setAuthData(data);
// };
return (
<Provider store={store}>
<Meta />
<PageRoutes />
</Provider>
);
}