App.js

const electron = window.require('electron');
const ipcRenderer = electron.ipcRenderer;

import React, {useState} from 'react';
import OcsManagerApi from '../api/OcsManagerApi.js';
import {Context} from '../context-provider';

import appConfig from '../configs/application.json';
import MenuBar from './MenuBar';
import WebView from './WebView';
import AppDialogs from './AppDialogs';
import '../styles/App.css';

function App(){

    const { appDispatch, browserDispatch, ocsApiState, ocsApiDispatch } = React.useContext(Context);
    const [ isSubscribed, setIsSubscribed ] = useState(false);
    const [ loading, setLoading ] = useState(true);
    const [ webviewEl, setWebviewEl ] = useState();
    const packageJson = ipcRenderer.sendSync('app','package');

    React.useEffect(() => { initApp(); },[])

    React.useEffect(() => {
        console.log("trying to call connectOcsApi", ocsApiState.loading )
      if (ocsApiState.loading === false) connectOcsApi(); 
    },[ocsApiState.loading])

    React.useEffect(() => {
      if (typeof webviewEl !== undefined && isSubscribed){
        if (ocsApiState.ocsManagerApi && ocsApiState.ocsManagerApi.callback){
          setIsSubscribed(true);
          subscribeToOcsApiCallback();
        }
      }
    },[ocsApiState.ocsManagerApi, webviewEl])

    function initApp(){
      let homepageUrl = localStorage.getItem('homePageUrl'), homepageTitle = localStorage.getItem('homePageTitle');
      if (homepageUrl === null) homepageUrl = packageJson.repoHomepage, homepageTitle = packageJson.productName;
      browserDispatch({type:'SET_PAGE',url:homepageUrl,title:homepageTitle});
      const ocsManagerApi = new OcsManagerApi(ipcRenderer.sendSync('ocs-manager', 'url'));
      ocsApiDispatch({type:'SET_API',ocsManagerApi:ocsManagerApi});   
    }

    function connectOcsApi(){
      console.log("Connecting to OCS API");
      const connectToOcsApi = ocsApiState.ocsManagerApi.connect();
      const getAppConfigInstallTypes = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getAppConfigInstallTypes', [])
      const getUserConfigInstalledItems = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigInstalledItems', []);
      const getUserConfigUpdateAvailableItems = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigUpdateAvailableItems', []);
      const getUserConfigApplication = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigApplication', []);

      connectToOcsApi.then(function(value){
        return getAppConfigInstallTypes;
      }).then(function(res){
        ocsApiDispatch({type:'SET_INSTALL_TYPES',installTypes:res.data[0]});
        return getUserConfigInstalledItems;
      }).then(function(res){
        ocsApiDispatch({type:'SET_INSTALLED_ITEMS',installedItems:res.data[0]});
        return getUserConfigUpdateAvailableItems;
      }).then(function(res){
        if (res.data.length > 0){
          /*const combinedUpdateAvailableItems = {};
          for (const value of Object.values(updateAvailableItems)) {
              const itemKey = value.installed_item;
              combinedUpdateAvailableItems[itemKey] = installedItems[itemKey];
          }*/
        }
        return getUserConfigApplication;
      }).then(function(res){
        const updateCheckedAt = res.data[0].update_checked_at;
        const updateCheckAfter = ipcRenderer.sendSync('app', 'config').updateCheckAfter;
        ocsApiDispatch({type:'SET_UPDATE_CHECK',updateCheckedAt:updateCheckedAt,updateCheckAfter:updateCheckAfter});
        const shouldCheckForUpdates = !updateCheckedAt || (updateCheckedAt + updateCheckAfter) < new Date().getTime();
        if (shouldCheckForUpdates) ocsApiState.ocsManagerApi.send('UpdateHandler::checkAll', []);
        setAppInfo();
      }).then(() => {
          subscribeToOcsApiCallback();
      });
    }

    function setAppInfo(){
      console.log(ocsApiState);
      appDispatch({type:'SET_PACKAGE_JSON',packageJson:packageJson})
      appDispatch({type:'SET_DOMAINS',domains:appConfig.domains});
      setLoading(false);
    }

    function subscribeToOcsApiCallback(){
      ocsApiState.ocsManagerApi.callback
      .set('ItemHandler::metadataSetChanged', () => {
        ocsApiState.ocsManagerApi.sendSync('ItemHandler::metadataSet', [])
      })
      .set('ItemHandler::downloadStarted', (message) => {
        console.log('download started')
        console.log(message);
        ocsApiDispatch({type:'SET_DOWNLOAD_ITEM',item:message.data[0].metadata});
        // Download preview picture
        const selector = 'meta[property="og:image"]';
        webviewEl.getWebContents().executeJavaScript(`document.querySelector('${selector}').content`, false, (result) => {
            let previewpicUrl = result || '';
            // FIXME: previewpic API maybe deprecated
            /*if (!previewpicUrl
                && message.data[0].metadata.command === 'install'
                && message.data[0].metadata.provider
                && message.data[0].metadata.content_id
            ) {
                previewpicUrl = `${message.data[0].metadata.provider}content/previewpic/${message.data[0].metadata.content_id}`;
            }*/
            console.log(result);
            if (previewpicUrl) ipcRenderer.sendSync('previewpic', 'download', message.data[0].metadata.url, previewpicUrl);        
        });
      })
      .set('ItemHandler::downloadProgress', (message) => {
        console.log('download progress');
        ocsApiDispatch({
          type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
          itemUrl:message.data[0],
          bytesRecieved:message.data[1],
          bytesTotal:message.data[2]
        })
      })      
      .set('ItemHandler::downloadFinished', (message) => {
        console.log('download started');
        if (message.data[0].status !== 'success_download') console.error(new Error(message.data[0].message));
        console.log(message.data[0].message)
        ocsApiDispatch({
          type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
          itemUrl:message.data[0].metadata.url,
          status:message.data[0].message
        })
      })
      .set('ItemHandler::saveStarted', (message) => {
        if (message.data[0].status !== 'success_savestart') console.error(new Error(message.data[0].message));
        console.log(message.data[0].message)
        ocsApiDispatch({
          type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
          itemUrl:message.data[0].metadata.url,
          status:message.data[0].message
        })
      })
      .set('ItemHandler::saveFinished', (message) => {
          if (message.data[0].status !== 'success_save') console.error(new Error(message.data[0].message));
          console.log(message.data[0].message)
          ocsApiDispatch({
            type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
            itemUrl:message.data[0].metadata.url,
            status:message.data[0].message
          })
      })
      .set('ItemHandler::installStarted', (message) => {
          if (message.data[0].status !== 'success_installstart') console.error(new Error(message.data[0].message));
          console.log(message.data[0].message)
          ocsApiDispatch({
            type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
            itemUrl:message.data[0].metadata.url,
            status:message.data[0].message
          })
      })
      .set('ItemHandler::installFinished', (message) => {
          if (message.data[0].status !== 'success_install') console.error(new Error(message.data[0].message));
          console.log(message.data[0].message)
          ocsApiDispatch({
            type:'UPDATE_ITEM_DOWNLOAD_PROGRESS',
            itemUrl:message.data[0].metadata.url,
            status:message.data[0].message
          })
          const getAppConfigInstallTypes = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getAppConfigInstallTypes', [])
          const getUserConfigInstalledItems = ocsApiState.ocsManagerApi.sendSync('ConfigHandler::getUsrConfigInstalledItems', []);
          getAppConfigInstallTypes.then(function(res){
              ocsApiDispatch({type:'SET_INSTALL_TYPES',installTypes:res.data[0]});
              return getUserConfigInstalledItems;
          }).then(function(res){
              ocsApiDispatch({type:'SET_INSTALLED_ITEMS',installedItems:res.data[0]});
          });
      });
      /*.set('ItemHandler::uninstallStarted', (message) => {
          if (message.data[0].status !== 'success_uninstallstart') {
              console.error(new Error(message.data[0].message));
          }
      })
      .set('ItemHandler::uninstallFinished', (message) => {
          if (message.data[0].status !== 'success_uninstall') {
              console.error(new Error(message.data[0].message));
          }
          this._stateManager.dispatch('ocsManager_installedItems', {});
          this._stateManager.dispatch('ocsManager_updateAvailableItems', {});
      })
      .set('UpdateHandler::checkAllStarted', (message) => {
          if (!message.data[0]) {
              console.error(new Error('Item update check failed'));
          }
      })
      .set('UpdateHandler::checkAllFinished', (message) => {
          if (!message.data[0]) {
              console.error(new Error('Item update check failed'));
          }
          this._stateManager.dispatch('ocsManager_updateAvailableItems', {});
      })
      .set('UpdateHandler::updateStarted', (message) => {
          if (!message.data[1]) {
              console.error(new Error('Item update failed'));
          }
      })
      .set('UpdateHandler::updateFinished', (message) => {
          if (!message.data[1]) {
              console.error(new Error('Item update failed'));
          }
          this._stateManager.dispatch('ocsManager_installedItems', {});
          this._stateManager.dispatch('ocsManager_updateAvailableItems', {});
      })
      .set('UpdateHandler::updateProgress', (message) => {
          this._stateManager.dispatch('ocsManager_updateProgress', {
              itemKey: message.data[0],
              progress: message.data[1]
          });
      });*/

    }

    let menuBarDisplay, webViewDisplay, appDialogsDisplay;
    if (!loading){
      menuBarDisplay = <MenuBar/>
      webViewDisplay = <WebView onSetWebviewEl={(webviewEl) => setWebviewEl(webviewEl)}/>
      appDialogsDisplay = <AppDialogs/>
    }

    return (
      <div id="main">
        {menuBarDisplay}
        {webViewDisplay}
        {appDialogsDisplay}
      </div>
    );
}

export default App;