IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Doceditor: refactoring, restoring error message display

Browse Source
This commit is contained in:
Artem Tarasov 2022-07-20 13:25:09 +03:00
parent 37dbf5e38f
commit 20d31cb0c2
6 changed files with 29 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/ASC.Web.Editor/src/client/App.js
View File

@ -1,6 +0,0 @@
import React from "react";
import Editor from "./Editor.js";
export const App = (props) => {
return <Editor {...props} />;
};

10
web/ASC.Web.Editor/src/client/Editor.js
View File

@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
import withDialogs from "../helpers/withDialogs";
import { canConvert, convertDocumentUrl } from "../helpers/utils";
import { assign } from "@appserver/common/utils";
import { homepage } from "../../package.json";
const LoaderComponent = (
<Loader
@ -93,6 +94,7 @@ function Editor({
initDesktop,
view,
preparationPortalDialog,
mfReady,
...rest
}) {
const [isLoaded, setIsLoaded] = useState(false);
@ -104,13 +106,15 @@ function Editor({
const { t } = useTranslation(["Editor", "Common"]);
useEffect(() => {
if (error) {
if (error && mfReady) {
if (error?.unAuthorized && error?.redirectPath) {
localStorage.setItem("redirectPath", window.location.href);
window.location.href = error?.redirectPath;
}
const errorText = typeof error === "string" ? error : error.errorMessage;
window.toastr.error(errorText);
}
}, []);
}, [mfReady, error]);
useEffect(() => {
if (config) {
@ -578,7 +582,7 @@ function Editor({
return (
<EditorWrapper isVisibleSharingDialog={isVisible}>
<div id="editor"></div>
{/* {(!isLoaded || needLoader) && LoaderComponent} */}
{(!isLoaded || needLoader) && LoaderComponent}
{sharingDialog}
{selectFileDialog}
{selectFolderDialog}

12
web/ASC.Web.Editor/src/client/bootstrap.js vendored
View File

@ -1,7 +1,7 @@
import React from "react";
import { hydrate } from "react-dom";
import { registerSW } from "@appserver/common/sw/helper";
import { App } from "./App.js";
import App from "./Editor.js";
import { useSSR } from "react-i18next";
import useMfScripts from "../helpers/useMfScripts";
import initDesktop from "../helpers/initDesktop";
@ -69,16 +69,13 @@ const AppWrapper = () => {
useSSR(initialI18nStoreASC, initialLanguage);
React.useEffect(() => {
const tempElm = document.getElementById("loader");
if (tempElm) {
tempElm.outerHTML = "";
}
if (isRetina() && getCookie("is_retina") == null) {
setCookie("is_retina", true, { path: "/" });
}
}, []);
const onError = () =>
const onError = () => {
console.log("Error");
window.open(
combineUrl(
AppServerConfig.proxyURL,
@ -86,6 +83,7 @@ const AppWrapper = () => {
),
"_self"
);
};
return (
<ErrorBoundary onError={onError}>

18
web/ASC.Web.Editor/src/helpers/utils.js
View File

@ -66,11 +66,7 @@ export const initDocEditor = async (req) => {
personal ? "/sign-in" : "/login"
),
};
return {
props: {
error,
},
};
return { error };
}
let [config, docApiUrl, fileInfo] = await Promise.all([
@ -105,11 +101,7 @@ export const initDocEditor = async (req) => {
};
} catch (err) {
error = { errorMessage: typeof err === "string" ? err : err.message };
return {
props: {
error,
},
};
return { error };
}
};
@ -118,13 +110,13 @@ export const getFavicon = (documentType) => {
let icon = null;
switch (documentType) {
case "text":
case "word":
icon = "text.ico";
break;
case "presentation":
case "slide":
icon = "presentation.ico";
break;
case "spreadsheet":
case "cell":
icon = "spreadsheet.ico";
break;
default:

6
web/ASC.Web.Editor/src/server/index.js
View File

@ -57,10 +57,10 @@ i18next.use(Backend).init({
app.use(i18nextMiddleware.handle(i18next));
app.use(compression());
app.use(
"/products/files/doceditor/static/",
express.static(path.resolve(process.cwd(), "dist/client/static"))
"/products/files/doceditor/",
express.static(path.resolve(process.cwd(), "dist/client"))
);
app.use(express.static(path.resolve(process.cwd(), "dist/client")));
//app.use(express.static(path.resolve(process.cwd(), "dist/client")));
app.use(initMiddleware);
app.use(logger("dev", { stream: winston.stream }));
app.get("/products/files/doceditor", async (req, res) => {

325
web/ASC.Web.Editor/src/server/render.js
View File

@ -10,9 +10,12 @@ export default function template(
assets
) {
const { title } = pkg;
const { docApiUrl } = initialEditorState;
const faviconHref = getFavicon(initialEditorState?.config?.documentType);
const { docApiUrl, error } = initialEditorState;
const faviconHref = getFavicon(initialEditorState?.config?.documentType);
const docApi = error
? ""
: `<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>`;
const scripts = `
<script id="__ASC_INITIAL_EDITOR_STATE__">
window.__ASC_INITIAL_EDITOR_STATE__ = ${JSON.stringify(
@ -23,15 +26,9 @@ export default function template(
window.initialI18nStoreASC = ${JSON.stringify(initialI18nStoreASC)}
window.initialLanguage = '${initialLanguage}'
</script>
<script>
const tempElm = document.getElementById("loader");
tempElm.style.backgroundColor =
localStorage.theme === "Dark" ? "#333333" : "#f4f4f4";
console.log("It's Editor INIT");
</script>
<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>
<script defer="defer" src='${assets["client.js"]}'></script>
${docApi}
`;
// <script defer="defer" src='${assets["runtime.js"]}'></script>
@ -48,322 +45,18 @@ export default function template(
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/>
<meta name="theme-color" content="#000000" />
<link id="favicon" rel="shortcut icon" href=${faviconHref} />
<link id="favicon" rel="shortcut icon" href=${faviconHref} type="image/x-icon"/>
<link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/appIcon.png" />
${styleTags}
<style type="text/css">
.loadmask {
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
z-index: 1001;
}
.loader-page {
width: 100%;
height: 170px;
bottom: 42%;
position: absolute;
text-align: center;
line-height: 10px;
margin-bottom: 20px;
}
.loader-page-romb {
width: 40px;
display: inline-block;
}
.romb {
width: 40px;
height: 40px;
position: absolute;
background: red;
border-radius: 6px;
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
-moz-transform: rotate(135deg) skew(20deg, 20deg);
-ms-transform: rotate(135deg) skew(20deg, 20deg);
-o-transform: rotate(135deg) skew(20deg, 20deg);
-webkit-animation: movedown 3s infinite ease;
-moz-animation: movedown 3s infinite ease;
-ms-animation: movedown 3s infinite ease;
-o-animation: movedown 3s infinite ease;
animation: movedown 3s infinite ease;
}
#blue {
z-index: 3;
background: #55bce6;
-webkit-animation-name: blue;
-moz-animation-name: blue;
-ms-animation-name: blue;
-o-animation-name: blue;
animation-name: blue;
}
#red {
z-index: 1;
background: #de7a59;
-webkit-animation-name: red;
-moz-animation-name: red;
-ms-animation-name: red;
-o-animation-name: red;
animation-name: red;
}
#green {
z-index: 2;
background: #a1cb5c;
-webkit-animation-name: green;
-moz-animation-name: green;
-ms-animation-name: green;
-o-animation-name: green;
animation-name: green;
}
@-webkit-keyframes red {
0% {
top: 120px;
background: #de7a59;
}
10% {
top: 120px;
background: #f2cbbf;
}
14% {
background: #f4f4f4;
top: 120px;
}
15% {
background: #f4f4f4;
top: 0;
}
20% {
background: #e6e4e4;
}
30% {
background: #d2d2d2;
}
40% {
top: 120px;
}
100% {
top: 120px;
background: #de7a59;
}
}
@keyframesred {
0% {
top: 120px;
background: #de7a59;
}
10% {
top: 120px;
background: #f2cbbf;
}
14% {
background: #f4f4f4;
top: 120px;
}
15% {
background: #f4f4f4;
top: 0;
}
20% {
background: #e6e4e4;
}
30% {
background: #d2d2d2;
}
40% {
top: 120px;
}
100% {
top: 120px;
background: #de7a59;
}
}
@-webkit-keyframes green {
0% {
top: 110px;
background: #a1cb5c;
opacity: 1;
}
10% {
top: 110px;
background: #cbe0ac;
opacity: 1;
}
14% {
background: #f4f4f4;
top: 110px;
opacity: 1;
}
15% {
background: #f4f4f4;
top: 0;
opacity: 1;
}
20% {
background: #f4f4f4;
top: 0;
opacity: 0;
}
25% {
background: #efefef;
top: 0;
opacity: 1;
}
30% {
background: #e6e4e4;
}
70% {
top: 110px;
}
100% {
top: 110px;
background: #a1cb5c;
}
}
@keyframes green {
0% {
top: 110px;
background: #a1cb5c;
opacity: 1;
}
10% {
top: 110px;
background: #cbe0ac;
opacity: 1;
}
14% {
background: #f4f4f4;
top: 110px;
opacity: 1;
}
15% {
background: #f4f4f4;
top: 0;
opacity: 1;
}
20% {
background: #f4f4f4;
top: 0;
opacity: 0;
}
25% {
background: #efefef;
top: 0;
opacity: 1;
}
30% {
background: #e6e4e4;
}
70% {
top: 110px;
}
100% {
top: 110px;
background: #a1cb5c;
}
}
@-webkit-keyframes blue {
0% {
top: 100px;
background: #55bce6;
opacity: 1;
}
10% {
top: 100px;
background: #bfe8f8;
opacity: 1;
}
14% {
background: #f4f4f4;
top: 100px;
opacity: 1;
}
15% {
background: #f4f4f4;
top: 0;
opacity: 1;
}
20% {
background: #f4f4f4;
top: 0;
opacity: 0;
}
25% {
background: #f4f4f4;
top: 0;
opacity: 0;
}
45% {
background: #efefef;
top: 0;
opacity: 0.2;
}
100% {
top: 100px;
background: #55bce6;
}
}
@keyframes blue {
0% {
top: 100px;
background: #55bce6;
opacity: 1;
}
10% {
top: 100px;
background: #bfe8f8;
opacity: 1;
}
14% {
background: #f4f4f4;
top: 100px;
opacity: 1;
}
15% {
background: #f4f4f4;
top: 0;
opacity: 1;
}
20% {
background: #f4f4f4;
top: 0;
opacity: 0;
}
25% {
background: #fff;
top: 0;
opacity: 0;
}
45% {
background: #efefef;
top: 0;
opacity: 0.2;
}
100% {
top: 100px;
background: #55bce6;
}
}
</style>
</head>
<body>
<div id="root">${appComponent}</div>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="loader" class="loadmask">
<div class="loader-page">
<div class="loader-page-romb">
<div class="romb" id="blue"></div>
<div class="romb" id="green"></div>
<div class="romb" id="red"></div>
</div>
</div>
</div>
${scripts}
</body>