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/common/component/Loading.js
+59
View File
@@ -0,0 +1,59 @@
// import { useState, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { Ring } from "@uiball/loaders";
import Button from "./styled/Button";
import useLogout from "../hook/useLogout";
const DelayVisible = keyframes`
from{
opacity: 0;
}
to{
opacity: 1;
}
`;
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 {
opacity: 0;
&.visible {
animation: ${DelayVisible} 1s forwards;
animation-delay: 30s;
}
}
`;
export default function Loading({ reload = false }) {
const { clearLocalData } = useLogout();
const handleReload = () => {
clearLocalData();
location.reload(true);
};
return (
<StyledWrapper>
<Ring
className="loading"
size={40}
lineWeight={5}
speed={2}
color="black"
/>
<Button
className={`reload danger ${reload ? "visible" : ""}`}
onClick={handleReload}
>
Reload
</Button>
</StyledWrapper>
);
}
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 StyledWrapper from "./styled";
import User from "./User"; import User from "./User";
// import Tools from "./Tools"; // import Tools from "./Tools";
import Loading from "./Loading"; import Loading from "../../common/component/Loading";
import Menu from "./Menu"; import Menu from "./Menu";
import usePreload from "./usePreload"; import usePreload from "./usePreload";
import usePWABadge from "../../common/hook/usePWABadge"; import usePWABadge from "../../common/hook/usePWABadge";
@@ -38,7 +38,7 @@ export default function HomePage() {
const { loading } = usePreload(); const { loading } = usePreload();
// console.log("index loading", loading, ready); // console.log("index loading", loading, ready);
if (loading || !ready) { if (loading || !ready) {
return <Loading />; return <Loading reload={true} />;
} }
const isSettingPage = pathname.startsWith("/setting"); const isSettingPage = pathname.startsWith("/setting");
if (isSettingPage) { 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 { Route, Routes, HashRouter } from "react-router-dom";
import { Provider, useSelector } from "react-redux"; import { Provider, useSelector } from "react-redux";
import toast from "react-hot-toast";
// import Welcome from './Welcome' // import Welcome from './Welcome'
import NotFoundPage from "./404"; import NotFoundPage from "./404";
import OAuthPage from "./oauth"; const HomePage = lazy(() => import("./home"));
import LoginPage from "./login"; const RegBasePage = lazy(() => import("./reg"));
import SendMagicLinkPage from "./sendMagicLink"; const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
import RegBasePage from "./reg"; const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
import RegPage from "./reg/Register"; const RegPage = lazy(() => import("./reg/Register"));
import RegWithUsernamePage from "./reg/RegWithUsername"; const LoginPage = lazy(() => import("./login"));
import HomePage from "./home"; const OAuthPage = lazy(() => import("./oauth"));
import ChatPage from "./chat"; const ChatPage = lazy(() => import("./chat"));
import FavoritesPage from "./favs"; const ContactsPage = lazy(() => import("./contacts"));
import ContactsPage from "./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 RequireAuth from "../common/component/RequireAuth";
import RequireNoAuth from "../common/component/RequireNoAuth"; import RequireNoAuth from "../common/component/RequireNoAuth";
import Meta from "../common/component/Meta"; import Meta from "../common/component/Meta";
import Loading from "../common/component/Loading";
import store from "../app/store"; 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 PageRoutes = () => {
const { const {
ui: { online }, ui: { online },
fileMessages fileMessages,
} = useSelector((store) => { } = useSelector((store) => {
return { ui: store.ui, fileMessages: store.fileMessage }; return { ui: store.ui, fileMessages: store.fileMessage };
}); });
// 掉线检测 // 掉线检测
useEffect(() => { useEffect(() => {
let toastId = 0; let toastId = 0;
if (!online) { if (!online) {
toast.error("Network Offline!", { duration: Infinity }); toast.error("Network Offline!", { duration: Infinity });
} else { } else {
toast.dismiss(toastId); toast.dismiss(toastId);
} }
}, [online]); }, [online]);
return ( return (
<HashRouter> <HashRouter>
<Routes> <Suspense fallback={<Loading />}>
<Route path="/oauth/:token" element={<OAuthPage />} /> <Routes>
<Route <Route path="/oauth/:token" element={<OAuthPage />} />
path="/login" <Route
element={ path="/login"
<RequireNoAuth> element={
<LoginPage /> <RequireNoAuth>
</RequireNoAuth> <LoginPage />
} </RequireNoAuth>
/> }
<Route />
path="/send_magic_link" <Route
element={ path="/send_magic_link"
<RequireNoAuth> element={
<SendMagicLinkPage /> <RequireNoAuth>
</RequireNoAuth> <SendMagicLinkPage />
} </RequireNoAuth>
/> }
<Route />
path="/reg" <Route
element={ path="/reg"
<RequireNoAuth> element={
<RegBasePage /> <RequireNoAuth>
</RequireNoAuth> <RegBasePage />
} </RequireNoAuth>
> }
<Route index element={<RegPage />} /> >
<Route path="magiclink"> <Route index element={<RegPage />} />
<Route index element={<RegWithUsernamePage />} /> <Route path="magiclink">
<Route path=":token" element={<RegWithUsernamePage />} /> <Route index element={<RegWithUsernamePage />} />
</Route> <Route path=":token" element={<RegWithUsernamePage />} />
</Route> </Route>
<Route </Route>
path="/email_login" <Route
element={ path="/email_login"
<RequireNoAuth> element={
<SendMagicLinkPage /> <RequireNoAuth>
</RequireNoAuth> <SendMagicLinkPage />
} </RequireNoAuth>
/> }
<Route path="/invite" element={<InvitePage />} /> />
<Route path="/onboarding" element={<OnboardingPage />} /> <Route path="/invite" element={<InvitePage />} />
<Route <Route path="/onboarding" element={<OnboardingPage />} />
path="/" <Route
element={ path="/"
<RequireAuth> element={
<HomePage /> <RequireAuth>
</RequireAuth> <HomePage />
} </RequireAuth>
> }
<Route path="setting"> >
<Route index element={<SettingPage />} /> <Route path="setting">
<Route path="channel/:cid" element={<SettingChannelPage />} /> <Route index element={<SettingPage />} />
</Route> <Route path="channel/:cid" element={<SettingChannelPage />} />
<Route index element={<ChatPage />} /> </Route>
<Route path="chat"> <Route index element={<ChatPage />} />
<Route index element={<ChatPage />} /> <Route path="chat">
<Route path="channel/:channel_id" element={<ChatPage />} /> <Route index element={<ChatPage />} />
<Route path="dm/:user_id" element={<ChatPage />} /> <Route path="channel/:channel_id" element={<ChatPage />} />
</Route> <Route path="dm/:user_id" element={<ChatPage />} />
<Route path="contacts"> </Route>
<Route index element={<ContactsPage />} /> <Route path="contacts">
<Route path=":user_id" element={<ContactsPage />} /> <Route index element={<ContactsPage />} />
</Route> <Route path=":user_id" element={<ContactsPage />} />
<Route path="favs" element={<FavoritesPage />}></Route> </Route>
<Route path="files" element={<ResourceManagement fileMessages={fileMessages} />}></Route> <Route path="favs" element={<FavoritesPage />}></Route>
</Route> <Route
<Route path="*" element={<NotFoundPage />} /> path="files"
</Routes> element={<ResourceManagement fileMessages={fileMessages} />}
</HashRouter> ></Route>
); </Route>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Suspense>
</HashRouter>
);
}; };
// const local_key = "AUTH_DATA"; // const local_key = "AUTH_DATA";
export default function ReduxRoutes() { export default function ReduxRoutes() {
// const [authData, setAuthData] = useState( // const [authData, setAuthData] = useState(
// JSON.parse(localStorage.getItem(local_key)) // JSON.parse(localStorage.getItem(local_key))
// ); // );
// const updateAuthData = (data) => { // const updateAuthData = (data) => {
// localStorage.setItem(local_key, JSON.stringify(data)); // localStorage.setItem(local_key, JSON.stringify(data));
// setAuthData(data); // setAuthData(data);
// }; // };
return ( return (
<Provider store={store}> <Provider store={store}>
<Meta /> <Meta />
<PageRoutes /> <PageRoutes />
</Provider> </Provider>
); );
} }