feat: loading indicator is working for wiki server now

public/libs/views.js

@@ -281,9 +281,10 @@ const addView = (browserWindow, workspace) => {
     // are destroyed. See https://github.com/atomery/webcatalog/issues/836
     if (!workspaceObj) return;
 
-    setWorkspaceMeta(workspace.id, {
-      isLoading: false,
-    });
+    // isLoading is now controlled by wiki-worker-manager.js
+    // setWorkspaceMeta(workspace.id, {
+    //   isLoading: false,
+    // });
 
     if (workspaceObj.active) {
       sendToAllWindows('update-address', view.webContents.getURL(), false);
@@ -316,7 +317,7 @@ const addView = (browserWindow, workspace) => {
     if (isMainFrame && errorCode < 0 && errorCode !== -3) {
       setWorkspaceMeta(workspace.id, {
         didFailLoad: errorDesc,
-        isLoading: false,
+        // isLoading: false, // isLoading is now controlled by wiki-worker-manager.js
       });
       if (workspaceObj.active) {
         if (browserWindow && !browserWindow.isDestroyed()) { // fix https://github.com/atomery/singlebox/issues/228

public/libs/wiki/wiki-worker-mamager.js

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 /* eslint-disable no-console */
 const { Worker } = require('worker_threads');
 const isDev = require('electron-is-dev');
@@ -34,11 +35,36 @@ const WIKI_WATCHER_WORKER_PATH = isDev
   : path.resolve(process.resourcesPath, '..', 'watch-wiki-worker.js');
 
 module.exports.startWiki = function startWiki(homePath, tiddlyWikiPort, userName) {
+  // require here to prevent circular dependence, which will cause "TypeError: getWorkspaceByName is not a function"
+  console.log('startWiki', homePath, Date.now());
+  const { getWorkspaceByName } = require('../workspaces');
+  const { getView, reloadViewsWebContentsIfDidFailLoad } = require('../views');
+  const { setWorkspaceMeta } = require('../workspace-metas');
+  const workspace = getWorkspaceByName(homePath);
+  const workspaceID = workspace?.id;
+  const view = getView(workspaceID);
+  if (!workspace || !workspaceID) {
+    logger.error('Try to start wiki, but workspace not found', { homePath, workspace, workspaceID });
+    return;
+  }
+  console.log('setWorkspaceMeta', workspaceID, Date.now());
+  setWorkspaceMeta(workspaceID, { isLoading: true });
   const workerData = { homePath, userName, tiddlyWikiPort };
   const worker = new Worker(WIKI_WORKER_PATH, { workerData });
   wikiWorkers[homePath] = worker;
   const loggerMeta = { worker: 'NodeJSWiki', homePath };
-  worker.on('message', logMessage(loggerMeta));
+  const loggerForWorker = logMessage(loggerMeta);
+  let started = false;
+  worker.on('message', message => {
+    loggerForWorker(message);
+    if (!started) {
+      started = true;
+      setTimeout(() => {
+        reloadViewsWebContentsIfDidFailLoad();
+        setWorkspaceMeta(workspaceID, { isLoading: false });
+      }, 10);
+    }
+  });
   worker.on('error', error => logger.error(error), loggerMeta);
   worker.on('exit', code => {
     if (code !== 0)

public/libs/wiki/wiki-worker.js

@@ -4,21 +4,24 @@ const $tw = require('tiddlywiki').TiddlyWiki();
 
 function startNodeJSWiki() {
   const { homePath, userName, tiddlyWikiPort = 5112 } = workerData;
-  process.env.TIDDLYWIKI_PLUGIN_PATH = path.resolve(homePath, 'plugins');
-  process.env.TIDDLYWIKI_THEME_PATH = path.resolve(homePath, 'themes');
-  // add tiddly filesystem back https://github.com/Jermolene/TiddlyWiki5/issues/4484#issuecomment-596779416
-  $tw.boot.argv = [
-    '+plugins/tiddlywiki/filesystem',
-    '+plugins/tiddlywiki/tiddlyweb',
-    homePath,
-    '--listen',
-    `anon-username=${userName}`,
-    `port=${tiddlyWikiPort}`,
-    'host=0.0.0.0',
-    'root-tiddler=$:/core/save/lazy-images',
-  ];
-  $tw.boot.boot();
-  parentPort.postMessage(`Tiddlywiki booted at http://localhost:${tiddlyWikiPort}`);
+  try {
+    process.env.TIDDLYWIKI_PLUGIN_PATH = path.resolve(homePath, 'plugins');
+    process.env.TIDDLYWIKI_THEME_PATH = path.resolve(homePath, 'themes');
+    // add tiddly filesystem back https://github.com/Jermolene/TiddlyWiki5/issues/4484#issuecomment-596779416
+    $tw.boot.argv = [
+      '+plugins/tiddlywiki/filesystem',
+      '+plugins/tiddlywiki/tiddlyweb',
+      homePath,
+      '--listen',
+      `anon-username=${userName}`,
+      `port=${tiddlyWikiPort}`,
+      'host=0.0.0.0',
+      'root-tiddler=$:/core/save/lazy-images',
+    ];
+    $tw.boot.boot(() => parentPort.postMessage(`Tiddlywiki booted at http://localhost:${tiddlyWikiPort}`));
+  } catch (error) {
+    parentPort.postMessage(`Tiddlywiki booted failed with error ${error.message} ${error.trace}`);
+  }
 }
 module.exports = startNodeJSWiki;
 

public/libs/workspace-metas.js

@@ -9,11 +9,11 @@ const getWorkspaceMeta = (id) => workspaceMetas[id] || {};
 
 const getWorkspaceMetas = () => workspaceMetas;
 
-const setWorkspaceMeta = (id, opts) => {
+const setWorkspaceMeta = (id, options) => {
   // init
   workspaceMetas[id] = {
     ...workspaceMetas[id],
-    ...opts,
+    ...options,
   };
   sendToAllWindows('set-workspace-meta', id, getWorkspaceMeta(id));
 };

public/libs/workspaces.js

@@ -36,6 +36,7 @@ const getWorkspacesAsList = () => {
 };
 
 const getWorkspace = (id) => workspaces[id];
+const getWorkspaceByName = (name) => getWorkspacesAsList().find(workspace => workspace.name === name);
 
 const getPreviousWorkspace = (id) => {
   const workspaceLst = getWorkspacesAsList();
@@ -216,6 +217,7 @@ module.exports = {
   getNextWorkspace,
   getPreviousWorkspace,
   getWorkspace,
+  getWorkspaceByName,
   getWorkspaces,
   getWorkspacesAsList,
   removeWorkspace,

src/components/main/index.js

@@ -51,7 +51,7 @@ const arrayMove = (array, from, to) => {
   return newArray;
 };
 
-const styles = (theme) => ({
+const styles = theme => ({
   outerRoot: {
     display: 'flex',
     flexDirection: 'column',
@@ -118,7 +118,9 @@ const styles = (theme) => ({
     width: 32,
     background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
     borderRadius: 4,
-    color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black),
+    color: theme.palette.getContrastText(
+      theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
+    ),
     lineHeight: '32px',
     textAlign: 'center',
     fontWeight: 500,
@@ -159,9 +161,7 @@ const styles = (theme) => ({
 
 const SortableItem = sortableElement(({ value }) => {
   const { index, workspace } = value;
-  const {
-    active, id, name, picturePath, hibernated, transparentBackground,
-  } = workspace;
+  const { active, id, name, picturePath, hibernated, transparentBackground } = workspace;
   return (
     <WorkspaceSelector
       active={active}
@@ -173,7 +173,7 @@ const SortableItem = sortableElement(({ value }) => {
       order={index}
       hibernated={hibernated}
       onClick={() => requestSetActiveWorkspace(id)}
-      onContextMenu={(e) => {
+      onContextMenu={e => {
         e.preventDefault();
 
         const template = [
@@ -235,16 +235,26 @@ const Main = ({
 }) => {
   const workspacesList = getWorkspacesAsList(workspaces);
   const showTitleBar = window.process.platform === 'darwin' && titleBar && !isFullScreen;
+  console.log('renderer', Date.now());
+  console.warn(`didFailLoad`, JSON.stringify(didFailLoad, null, '  '));
+  console.warn(`isLoading`, JSON.stringify(isLoading, null, '  '));
+  console.warn(
+    `Object.keys(workspaces).length > 0 && didFailLoad && !isLoading`,
+    JSON.stringify(Object.keys(workspaces).length > 0 && didFailLoad && !isLoading, null, '  '),
+  );
 
   return (
     <div className={classes.outerRoot}>
       {workspacesList.length > 0 && <DraggableRegion />}
-      {showTitleBar && (<FakeTitleBar />)}
+      {showTitleBar && <FakeTitleBar />}
       <div className={classes.root}>
         {sidebar && (
           <SidebarContainer className={classes.sidebarRoot}>
-            <div className={classNames(classes.sidebarTop,
-              (isFullScreen || showTitleBar || window.mode === 'menubar') && classes.sidebarTopFullScreen)}
+            <div
+              className={classNames(
+                classes.sidebarTop,
+                (isFullScreen || showTitleBar || window.mode === 'menubar') && classes.sidebarTopFullScreen,
+              )}
             >
               <SortableContainer
                 distance={10}
@@ -277,16 +287,24 @@ const Main = ({
               />
             </div>
             {!navigationBar && (
-            <div className={classes.end}>
-              <IconButton aria-label="Notifications" onClick={requestShowNotificationsWindow} className={classes.iconButton}>
-                {shouldPauseNotifications ? <NotificationsPausedIcon /> : <NotificationsIcon />}
-              </IconButton>
-              {window.mode === 'menubar' && (
-                <IconButton aria-label="Preferences" onClick={() => requestShowPreferencesWindow()} className={classes.iconButton}>
-                  <SettingsIcon />
+              <div className={classes.end}>
+                <IconButton
+                  aria-label="Notifications"
+                  onClick={requestShowNotificationsWindow}
+                  className={classes.iconButton}
+                >
+                  {shouldPauseNotifications ? <NotificationsPausedIcon /> : <NotificationsIcon />}
                 </IconButton>
-              )}
-            </div>
+                {window.mode === 'menubar' && (
+                  <IconButton
+                    aria-label="Preferences"
+                    onClick={() => requestShowPreferencesWindow()}
+                    className={classes.iconButton}
+                  >
+                    <SettingsIcon />
+                  </IconButton>
+                )}
+              </div>
             )}
           </SidebarContainer>
         )}
@@ -297,7 +315,7 @@ const Main = ({
             {Object.keys(workspaces).length > 0 && didFailLoad && !isLoading && (
               <div>
                 <Typography align="left" variant="h5">
-                  This site can’t be reached.
+                  Wiki is not started or not loaded
                 </Typography>
                 <Typography align="left" variant="body2">
                   {didFailLoad}
@@ -308,9 +326,9 @@ const Main = ({
                   <>
                     Try:
                     <ul className={classes.ul}>
-                      <li>Checking the network cables, modem, and router.</li>
-                      <li>Checking the proxy and the firewall.</li>
-                      <li>Reconnecting to Wi-Fi.</li>
+                      <li>Click <b>Reload</b> button below or press <b>CMD_or_Ctrl + R</b> to reload the page.</li>
+                      <li>Check the log to see what happened.</li>
+                      <li>Backup your file, remove workspace and recreate one.</li>
                     </ul>
                   </>
                 </Typography>
@@ -320,11 +338,7 @@ const Main = ({
                 </Button>
               </div>
             )}
-            {Object.keys(workspaces).length > 0 && isLoading && (
-              <CircularProgress
-                size={24}
-              />
-            )}
+            {Object.keys(workspaces).length > 0 && isLoading && <CircularProgress size={24} />}
             {Object.keys(workspaces).length < 1 && (
               <div>
                 {sidebar ? (
@@ -332,9 +346,7 @@ const Main = ({
                     <div alt="Arrow" className={classes.arrow} />
                     <div className={classes.tip}>
                       <span className={classes.inlineBlock}>Click</span>
-                      <div className={classes.avatar}>
-                        +
-                      </div>
+                      <div className={classes.avatar}>+</div>
                       <span className={classes.inlineBlock}>to get started!</span>
                     </div>
                   </>
@@ -374,22 +386,22 @@ Main.propTypes = {
   workspaces: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = (state) => {
-  const activeWorkspace = Object.values(state.workspaces)
-    .find((workspace) => workspace.active);
+const mapStateToProps = state => {
+  const activeWorkspace = Object.values(state.workspaces).find(workspace => workspace.active);
 
   return {
-    didFailLoad: activeWorkspace && state.workspaceMetas[activeWorkspace.id]
-      ? state.workspaceMetas[activeWorkspace.id].didFailLoad
-      : null,
+    didFailLoad:
+      activeWorkspace && state.workspaceMetas[activeWorkspace.id]
+        ? state.workspaceMetas[activeWorkspace.id].didFailLoad
+        : null,
     isFullScreen: state.general.isFullScreen,
-    isLoading: activeWorkspace && state.workspaceMetas[activeWorkspace.id]
-      ? Boolean(state.workspaceMetas[activeWorkspace.id].isLoading)
-      : false,
-    navigationBar: (window.process.platform === 'linux'
-      && state.preferences.attachToMenubar
-      && !state.preferences.sidebar)
-      || state.preferences.navigationBar,
+    isLoading:
+      activeWorkspace && state.workspaceMetas[activeWorkspace.id]
+        ? Boolean(state.workspaceMetas[activeWorkspace.id].isLoading)
+        : false,
+    navigationBar:
+      (window.process.platform === 'linux' && state.preferences.attachToMenubar && !state.preferences.sidebar) ||
+      state.preferences.navigationBar,
     registered: state.preferences.registered,
     shouldPauseNotifications: state.notifications.pauseNotificationsInfo !== null,
     sidebar: state.preferences.sidebar,
@@ -398,9 +410,4 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connectComponent(
-  Main,
-  mapStateToProps,
-  null,
-  styles,
-);
+export default connectComponent(Main, mapStateToProps, null, styles);

src/listeners/index.js

@@ -53,6 +53,7 @@ const loadListeners = (store) => {
   });
 
   ipcRenderer.on('set-workspace-meta', (e, id, value) => {
+    console.log('set-workspace-meta', Date.now());
     store.dispatch(setWorkspaceMeta(id, value));
   });
 

src/state/workspace-metas/reducers.js

@@ -14,6 +14,7 @@ const workspaceMetas = (state = initialState, action) => {
 
       if (action.value) newState[action.id] = { ...newState[action.id], ...action.value };
       else delete newState[action.id];
+      console.log('reducer', Date.now());
 
       return newState;
     }