610 lines
16 KiB
JavaScript
610 lines
16 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Router, Switch, Route, Redirect } from "react-router-dom";
|
|
import { inject, observer } from "mobx-react";
|
|
import NavMenu from "./components/NavMenu";
|
|
import Main from "./components/Main";
|
|
import PrivateRoute from "@docspace/common/components/PrivateRoute";
|
|
import PublicRoute from "@docspace/common/components/PublicRoute";
|
|
import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
|
|
import Layout from "./components/Layout";
|
|
import ScrollToTop from "./components/Layout/ScrollToTop";
|
|
import history from "@docspace/common/history";
|
|
import Toast from "@docspace/components/toast";
|
|
import toastr from "client/toastr";
|
|
import { combineUrl, updateTempContent } from "@docspace/common/utils";
|
|
import { Provider as MobxProvider } from "mobx-react";
|
|
import ThemeProvider from "@docspace/components/theme-provider";
|
|
|
|
import store from "SRC_DIR/store";
|
|
|
|
import config from "PACKAGE_FILE";
|
|
import { I18nextProvider, useTranslation } from "react-i18next";
|
|
import i18n from "./i18n";
|
|
import AppLoader from "@docspace/common/components/AppLoader";
|
|
import System from "./components/System";
|
|
import { AppServerConfig } from "@docspace/common/constants";
|
|
import Snackbar from "@docspace/components/snackbar";
|
|
import moment from "moment";
|
|
import ReactSmartBanner from "./components/SmartBanner";
|
|
import { useThemeDetector } from "SRC_DIR/helpers/utils";
|
|
import { isMobileOnly } from "react-device-detect";
|
|
import IndicatorLoader from "./components/IndicatorLoader";
|
|
import DialogsWrapper from "./components/dialogs/DialogsWrapper";
|
|
|
|
// const { proxyURL } = AppServerConfig;
|
|
// const homepage = config.homepage;
|
|
|
|
// const PROXY_HOMEPAGE_URL = combineUrl(proxyURL, homepage);
|
|
// const HOME_URLS = [
|
|
// combineUrl(PROXY_HOMEPAGE_URL),
|
|
// combineUrl(PROXY_HOMEPAGE_URL, "/"),
|
|
// combineUrl(PROXY_HOMEPAGE_URL, "/error=:error"),
|
|
// ];
|
|
// const WIZARD_URL = combineUrl(PROXY_HOMEPAGE_URL, "/wizard");
|
|
// const ABOUT_URL = combineUrl(PROXY_HOMEPAGE_URL, "/about");
|
|
// const LOGIN_URLS = [
|
|
// combineUrl(PROXY_HOMEPAGE_URL, "/login"),
|
|
// combineUrl(PROXY_HOMEPAGE_URL, "/login/confirmed-email=:confirmedEmail"),
|
|
// ];
|
|
// const CONFIRM_URL = combineUrl(PROXY_HOMEPAGE_URL, "/confirm");
|
|
|
|
// const PAYMENTS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/payments");
|
|
// const SETTINGS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/portal-settings");
|
|
// const ERROR_401_URL = combineUrl(PROXY_HOMEPAGE_URL, "/error401");
|
|
// const PROFILE_MY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/my");
|
|
// const ENTER_CODE_URL = combineUrl(PROXY_HOMEPAGE_URL, "/code");
|
|
// const INVALID_URL = combineUrl(PROXY_HOMEPAGE_URL, "/login/error=:error");
|
|
// const PREPARATION_PORTAL = combineUrl(
|
|
// PROXY_HOMEPAGE_URL,
|
|
// "/preparation-portal"
|
|
// );
|
|
|
|
const Payments = React.lazy(() => import("./pages/Payments"));
|
|
const Error404 = React.lazy(() => import("client/Error404"));
|
|
const Error401 = React.lazy(() => import("client/Error401"));
|
|
const Files = React.lazy(() => import("./pages/Files")); //import("./components/pages/Home"));
|
|
|
|
const About = React.lazy(() => import("./pages/About"));
|
|
const Wizard = React.lazy(() => import("./pages/Wizard"));
|
|
const PortalSettings = React.lazy(() => import("./pages/PortalSettings"));
|
|
|
|
const Confirm = !IS_PERSONAL && React.lazy(() => import("./pages/Confirm"));
|
|
// const MyProfile = React.lazy(() => import("./pages/My"));
|
|
const EnterCode = !IS_PERSONAL && React.lazy(() => import("login/codeLogin"));
|
|
const InvalidError = React.lazy(() => import("./pages/Errors/Invalid"));
|
|
const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal"));
|
|
|
|
const FormGallery = React.lazy(() => import("./pages/FormGallery"));
|
|
|
|
const PortalSettingsRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<PortalSettings {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
const PaymentsRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Payments {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const Error404Route = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Error404 {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const Error401Route = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Error401 {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
const FilesRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Files {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const ConfirmRoute =
|
|
!IS_PERSONAL &&
|
|
((props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Confirm {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
));
|
|
|
|
const PreparationPortalRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<PreparationPortal {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const AboutRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<About {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const WizardRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<Wizard {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
// const MyProfileRoute = (props) => (
|
|
// <React.Suspense fallback={<AppLoader />}>
|
|
// <ErrorBoundary>
|
|
// <MyProfile {...props} />
|
|
// </ErrorBoundary>
|
|
// </React.Suspense>
|
|
// );
|
|
|
|
const EnterCodeRoute =
|
|
!IS_PERSONAL &&
|
|
((props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<EnterCode {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
));
|
|
|
|
const InvalidRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<InvalidError {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
const FormGalleryRoute = (props) => (
|
|
<React.Suspense fallback={<AppLoader />}>
|
|
<ErrorBoundary>
|
|
<FormGallery {...props} />
|
|
</ErrorBoundary>
|
|
</React.Suspense>
|
|
);
|
|
|
|
// const RedirectToHome = () => <Redirect to={PROXY_HOMEPAGE_URL} />;
|
|
|
|
const Shell = ({ items = [], page = "home", ...rest }) => {
|
|
const {
|
|
isLoaded,
|
|
loadBaseInfo,
|
|
|
|
isDesktop,
|
|
language,
|
|
FirebaseHelper,
|
|
// personal,
|
|
setCheckedMaintenance,
|
|
socketHelper,
|
|
setPreparationPortalDialogVisible,
|
|
isBase,
|
|
setTheme,
|
|
setMaintenanceExist,
|
|
roomsMode,
|
|
setSnackbarExist,
|
|
userTheme,
|
|
//user,
|
|
} = rest;
|
|
|
|
useEffect(() => {
|
|
try {
|
|
loadBaseInfo();
|
|
} catch (err) {
|
|
toastr.error(err);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
socketHelper.emit({
|
|
command: "subscribe",
|
|
data: "backup-restore",
|
|
});
|
|
socketHelper.on("restore-backup", () => {
|
|
setPreparationPortalDialogVisible(true);
|
|
});
|
|
}, [socketHelper]);
|
|
|
|
const { t, ready } = useTranslation(["Common", "SmartBanner"]);
|
|
|
|
let snackTimer = null;
|
|
let fbInterval = null;
|
|
let lastCampaignStr = null;
|
|
const LS_CAMPAIGN_DATE = "maintenance_to_date";
|
|
const DATE_FORMAT = "YYYY-MM-DD";
|
|
const SNACKBAR_TIMEOUT = 10000;
|
|
|
|
const setSnackBarTimer = (campaign) => {
|
|
snackTimer = setTimeout(() => showSnackBar(campaign), SNACKBAR_TIMEOUT);
|
|
};
|
|
|
|
const clearSnackBarTimer = () => {
|
|
if (!snackTimer) return;
|
|
|
|
clearTimeout(snackTimer);
|
|
snackTimer = null;
|
|
};
|
|
|
|
const showSnackBar = (campaign) => {
|
|
clearSnackBarTimer();
|
|
|
|
let skipMaintenance;
|
|
|
|
const { fromDate, toDate, desktop } = campaign;
|
|
|
|
console.log(
|
|
`FB: 'bar/maintenance' desktop=${desktop} fromDate=${fromDate} toDate=${toDate}`
|
|
);
|
|
|
|
if (!campaign || !fromDate || !toDate) {
|
|
console.log("Skip snackBar by empty campaign params");
|
|
skipMaintenance = true;
|
|
}
|
|
|
|
const to = moment(toDate).local();
|
|
|
|
const watchedCampaignDateStr = localStorage.getItem(LS_CAMPAIGN_DATE);
|
|
|
|
const campaignDateStr = to.format(DATE_FORMAT);
|
|
if (campaignDateStr == watchedCampaignDateStr) {
|
|
console.log("Skip snackBar by already watched");
|
|
skipMaintenance = true;
|
|
}
|
|
|
|
const from = moment(fromDate).local();
|
|
const now = moment();
|
|
|
|
if (now.isBefore(from)) {
|
|
setSnackBarTimer(campaign);
|
|
|
|
Snackbar.close();
|
|
console.log(`Show snackBar has been delayed for 1 minute`, now);
|
|
skipMaintenance = true;
|
|
}
|
|
|
|
if (now.isAfter(to)) {
|
|
console.log("Skip snackBar by current date", now);
|
|
Snackbar.close();
|
|
skipMaintenance = true;
|
|
}
|
|
|
|
if (isDesktop && !desktop) {
|
|
console.log("Skip snackBar by desktop", desktop);
|
|
Snackbar.close();
|
|
skipMaintenance = true;
|
|
}
|
|
|
|
if (skipMaintenance) {
|
|
setCheckedMaintenance(true);
|
|
return;
|
|
}
|
|
|
|
setSnackBarTimer(campaign);
|
|
|
|
if (!document.getElementById("main-bar")) return;
|
|
|
|
const campaignStr = JSON.stringify(campaign);
|
|
// let skipRender = lastCampaignStr === campaignStr;
|
|
|
|
const hasChild = document.getElementById("main-bar").hasChildNodes();
|
|
|
|
if (hasChild) return;
|
|
|
|
lastCampaignStr = campaignStr;
|
|
|
|
const targetDate = to.locale(language).format("LL");
|
|
|
|
const barConfig = {
|
|
parentElementId: "main-bar",
|
|
headerText: t("Attention"),
|
|
text: `${t("BarMaintenanceDescription", {
|
|
targetDate: targetDate,
|
|
productName: "ONLYOFFICE Personal",
|
|
})} ${t("BarMaintenanceDisclaimer")}`,
|
|
isMaintenance: true,
|
|
clickAction: () => {
|
|
setMaintenanceExist(false);
|
|
setSnackbarExist(false);
|
|
Snackbar.close();
|
|
localStorage.setItem(LS_CAMPAIGN_DATE, to.format(DATE_FORMAT));
|
|
},
|
|
opacity: 1,
|
|
onLoad: () => {
|
|
setCheckedMaintenance(true);
|
|
setSnackbarExist(true);
|
|
setMaintenanceExist(true);
|
|
},
|
|
};
|
|
|
|
Snackbar.show(barConfig);
|
|
};
|
|
|
|
const fetchMaintenance = () => {
|
|
try {
|
|
if (!FirebaseHelper.isEnabled) return;
|
|
|
|
FirebaseHelper.checkMaintenance()
|
|
.then((campaign) => {
|
|
console.log("checkMaintenance", campaign);
|
|
if (!campaign) {
|
|
setCheckedMaintenance(true);
|
|
clearSnackBarTimer();
|
|
Snackbar.close();
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => showSnackBar(campaign), 1000);
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
const fetchBanners = () => {
|
|
if (!FirebaseHelper.isEnabled) return;
|
|
|
|
FirebaseHelper.checkBar()
|
|
.then((bar) => {
|
|
localStorage.setItem("bar", bar);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
|
|
FirebaseHelper.checkCampaigns()
|
|
.then((campaigns) => {
|
|
localStorage.setItem("campaigns", campaigns);
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!isLoaded) return;
|
|
|
|
updateTempContent();
|
|
|
|
if (!FirebaseHelper.isEnabled) {
|
|
setCheckedMaintenance(true);
|
|
localStorage.setItem("campaigns", "");
|
|
return;
|
|
}
|
|
|
|
fetchMaintenance();
|
|
fetchBanners();
|
|
fbInterval = setInterval(fetchMaintenance, 60000);
|
|
const bannerInterval = setInterval(fetchBanners, 60000 * 720); // get every 12 hours
|
|
|
|
return () => {
|
|
if (fbInterval) {
|
|
clearInterval(fbInterval);
|
|
}
|
|
clearInterval(bannerInterval);
|
|
clearSnackBarTimer();
|
|
};
|
|
}, [isLoaded]);
|
|
|
|
useEffect(() => {
|
|
console.log("Current page ", page);
|
|
}, [page]);
|
|
|
|
useEffect(() => {
|
|
if (userTheme) setTheme(userTheme);
|
|
}, [userTheme]);
|
|
|
|
const pathname = window.location.pathname.toLowerCase();
|
|
const isEditor = pathname.indexOf("doceditor") !== -1;
|
|
const isLogin = pathname.indexOf("login") !== -1;
|
|
|
|
const loginRoutes = [];
|
|
|
|
if (isLoaded && !IS_PERSONAL) {
|
|
let module;
|
|
if (roomsMode) {
|
|
module = "./roomsLogin";
|
|
} else {
|
|
module = "./login";
|
|
}
|
|
|
|
const loginSystem = {
|
|
url: combineUrl(AppServerConfig.proxyURL, "/login/remoteEntry.js"),
|
|
scope: "login",
|
|
module: module,
|
|
};
|
|
loginRoutes.push(
|
|
<PublicRoute
|
|
key={loginSystem.scope}
|
|
exact
|
|
path={["/login", "/login/confirmed-email=:confirmedEmail"]}
|
|
component={System}
|
|
system={loginSystem}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const roomsRoutes = [];
|
|
|
|
if (!IS_PERSONAL && roomsMode) {
|
|
roomsRoutes.push();
|
|
}
|
|
|
|
const currentTheme = isBase ? "Base" : "Dark";
|
|
const systemTheme = useThemeDetector();
|
|
useEffect(() => {
|
|
if (userTheme === "System" && currentTheme !== systemTheme)
|
|
setTheme(systemTheme);
|
|
}, [systemTheme]);
|
|
|
|
return (
|
|
<Layout>
|
|
<Router history={history}>
|
|
<Toast />
|
|
<ReactSmartBanner t={t} ready={ready} />
|
|
{isEditor || isLogin || !isMobileOnly ? <></> : <NavMenu />}
|
|
<IndicatorLoader />
|
|
<ScrollToTop />
|
|
<DialogsWrapper t={t} />
|
|
<Main isDesktop={isDesktop}>
|
|
<Switch>
|
|
<PrivateRoute
|
|
exact
|
|
path={[
|
|
"/",
|
|
|
|
"/rooms/personal",
|
|
"/rooms/personal/filter",
|
|
|
|
"/rooms/shared",
|
|
"/rooms/shared/filter",
|
|
"/rooms/shared/:room",
|
|
"/rooms/shared/:room/filter",
|
|
|
|
"/rooms/archived",
|
|
"/rooms/archived/filter",
|
|
"/rooms/archived/:room",
|
|
"/rooms/archived/:room/filter",
|
|
|
|
"/files/favorite",
|
|
"/files/favorite/filter",
|
|
|
|
"/files/recent",
|
|
"/files/recent/filter",
|
|
|
|
"/files/trash",
|
|
"/files/trash/filter",
|
|
|
|
"/accounts",
|
|
"/accounts/filter",
|
|
|
|
"/accounts/create/:type",
|
|
"/accounts/edit/:userId",
|
|
"/accounts/view/:userId",
|
|
"/accounts/view/@self",
|
|
|
|
"/settings",
|
|
"/settings/common",
|
|
"/settings/admin",
|
|
"/settings/connected-clouds",
|
|
]}
|
|
component={FilesRoute}
|
|
/>
|
|
|
|
<PrivateRoute
|
|
path={"/form-gallery/:folderId"}
|
|
component={FormGalleryRoute}
|
|
/>
|
|
|
|
<PublicRoute exact path={"/wizard"} component={WizardRoute} />
|
|
<PrivateRoute path={"/about"} component={AboutRoute} />
|
|
{loginRoutes}
|
|
<Route path={"/code"} component={EnterCodeRoute} />
|
|
<Route path={"/confirm"} component={ConfirmRoute} />
|
|
<Route path={"/login/error=:error"} component={InvalidRoute} />
|
|
<PrivateRoute path={"/payments"} component={PaymentsRoute} />
|
|
<PrivateRoute
|
|
restricted
|
|
path={"/portal-settings"}
|
|
component={PortalSettingsRoute}
|
|
/>
|
|
<PrivateRoute
|
|
path={"/preparation-portal"}
|
|
component={PreparationPortalRoute}
|
|
/>
|
|
<PrivateRoute path={"/error401"} component={Error401Route} />
|
|
<PrivateRoute component={Error404Route} />
|
|
</Switch>
|
|
</Main>
|
|
</Router>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
const ShellWrapper = inject(({ auth, backup }) => {
|
|
const { init, isLoaded, settingsStore, setProductVersion, language } = auth;
|
|
|
|
const {
|
|
personal,
|
|
roomsMode,
|
|
isDesktopClient,
|
|
firebaseHelper,
|
|
setModuleInfo,
|
|
setCheckedMaintenance,
|
|
setMaintenanceExist,
|
|
setSnackbarExist,
|
|
socketHelper,
|
|
setTheme,
|
|
} = settingsStore;
|
|
const isBase = settingsStore.theme.isBase;
|
|
const { setPreparationPortalDialogVisible } = backup;
|
|
|
|
return {
|
|
loadBaseInfo: async () => {
|
|
await init();
|
|
|
|
setModuleInfo(config.homepage, "home");
|
|
setProductVersion(config.version);
|
|
|
|
if (isDesktopClient) {
|
|
document.body.classList.add("desktop");
|
|
}
|
|
},
|
|
language,
|
|
isLoaded,
|
|
|
|
isDesktop: isDesktopClient,
|
|
FirebaseHelper: firebaseHelper,
|
|
personal,
|
|
setCheckedMaintenance,
|
|
setMaintenanceExist,
|
|
socketHelper,
|
|
setPreparationPortalDialogVisible,
|
|
isBase,
|
|
setTheme,
|
|
roomsMode,
|
|
setSnackbarExist,
|
|
userTheme: isDesktopClient
|
|
? window.RendererProcessVariable?.theme?.type === "dark"
|
|
? "Dark"
|
|
: "Base"
|
|
: auth?.userStore?.user?.theme,
|
|
};
|
|
})(observer(Shell));
|
|
|
|
const ThemeProviderWrapper = inject(({ auth }) => {
|
|
const { settingsStore } = auth;
|
|
|
|
return { theme: settingsStore.theme };
|
|
})(observer(ThemeProvider));
|
|
|
|
export default () => (
|
|
<MobxProvider {...store}>
|
|
<I18nextProvider i18n={i18n}>
|
|
<ThemeProviderWrapper>
|
|
<ShellWrapper />
|
|
</ThemeProviderWrapper>
|
|
</I18nextProvider>
|
|
</MobxProvider>
|
|
);
|