Refactor frontend

Add express server for desktop backend

Desktop/DesktopApp.js

@@ -53,23 +53,23 @@ exports.newDesktopApp = function newDesktopApp() {
             /*
             This is where we will process all the messages comming from our web app.
             */
-            thisObject.webAppInterface = DK.projects.socialTrading.modules.webAppInterface.newSocialTradingModulesWebAppInterface()
+            thisObject.webAppInterface = DK.projects.socialTrading.modules.webAppInterface.newSocialTradingModulesWebAppInterface() // this sends events to the p2p network
             /*
             This is where we will process all the events comming from the p2p network.
             */
-            thisObject.p2pNetworkInterface = DK.projects.socialTrading.modules.p2pNetworkInterface.newSocialTradingModulesP2PNetworkInterface()
+            thisObject.p2pNetworkInterface = DK.projects.socialTrading.modules.p2pNetworkInterface.newSocialTradingModulesP2PNetworkInterface() // this receives events from p2p network
             /*
             This is the Personal Social Graph for the user running this App.
             */
-            thisObject.socialGraph = DK.projects.socialTrading.modules.socialGraph.newSocialTradingModulesSocialGraph()
+            thisObject.socialGraph = DK.projects.socialTrading.modules.socialGraph.newSocialTradingModulesSocialGraph() //
             await thisObject.socialGraph.initialize()
-            /* 
+   /*         /!*
             These are the Network Interfaces by which the Web App interacts with this Desktop Client.
-            */
+            *!/
             thisObject.webSocketsInterface = DK.projects.socialTrading.modules.webSocketsInterface.newDesktopModulesWebSocketsInterface()
             thisObject.webSocketsInterface.initialize()
             console.log('Desktop Client Web Sockets Interface ......................................... Listening at port ' + JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webSocketsPort)
-
+*/
 
             /* TODO refactor this into something better */
 
@@ -77,13 +77,21 @@ exports.newDesktopApp = function newDesktopApp() {
                         require('./src/UI/WebAppPreLoader').loadSuperalgos();
             */
 
- /*           let react = require('./scripts/start');
-            react.start(JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webPort);
+
+
+/*
+
+            thisObject.httpInterface = DK.projects.socialTrading.modules.httpInterface.newDesktopModulesHttpInterface()
+            thisObject.httpInterface.initialize()
+
+            let react = require('./frontend/scripts/start');
+            react.start(JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webPort+1);
 */
 
-            /*            thisObject.httpInterface = DK.projects.socialTrading.modules.httpInterface.newDesktopModulesHttpInterface()
-                        thisObject.httpInterface.initialize()*/
-            console.log('Desktop Client Http Interface ................................................ Listening at port ' + JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webPort)
+            let express = require("./UI/WebAppPreLoader")
+            express.loadSuperalgos(+JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webPort + +2);
+
+           console.log('Desktop Client Http Interface ................................................ Listening at port ' + JSON.parse(DK.desktopApp.p2pNetworkClient.node.config).webPort)
         }
     }
 }

Desktop/UI/Globals.js

@@ -1,6 +1,6 @@
 /* Root object*/
 /* Root objects*/
-let UI = {
+exports.UI = {
     projects: {},
     schemas: { projectSchema: undefined },
     environment: undefined,
@@ -8,10 +8,9 @@ let UI = {
     webApp: undefined
 }
 
-let SA = { projects: {} }
+exports.SA = { projects: {} }
 /*
 We will use this to load functions originally intended for Nodejs
 */
-let exports = {}
 
 

Desktop/UI/WebApp.js

@@ -117,7 +117,7 @@ function newWebApp() {
         await UI.projects.socialTrading.modules.webSocketsWebAppClient.sendMessage(
             JSON.stringify(query)
         )
-            .then(addToContentDiv)
+            .then(console.log)
             .catch(onError)
 
         function onError(errorMessage) {

Desktop/UI/WebAppLoader.js

@@ -1,5 +1,5 @@
 
-function newWebAppLoader() {
+exports.newWebAppLoader = ({port, SA, UI}) => {
 
     let thisObject = {
         loadModules: loadModules
@@ -89,7 +89,7 @@ function newWebAppLoader() {
                 for (let i = 0; i < modulesArray.length; i++) {
                     let path = modulesArray[i]
 
-                    REQUIREJS([path], onRequired)
+                    UI.projects = require(path);
 
                     function onRequired(pModule) {
                         try {
@@ -98,8 +98,8 @@ function newWebAppLoader() {
 
                             if (downloadedCounter === modulesArray.length) {
                                 setTimeout(() => {
-                                    UI.webApp = newWebApp()
-                                    UI.webApp.initialize()
+                                    UI.webApp = require("../backend/src/index");
+                                    UI.webApp.startExpress();
                                 }, 500)
 
                             }

Desktop/UI/WebAppPreLoader.js

@@ -1,111 +1,30 @@
-
-function loadSuperalgos() {
-
-    let browser = checkBrowserVersion()
-    if ((browser.name !== "Chrome" && browser.name !== "Safari") || (browser.name === "Chrome" && parseInt(browser.version) < 85) || (browser.name === "Safari" && parseInt(browser.version) < 13)) {
-        alert("Superalgos is officially supported on Google Chrome 85 or Safari 13.1 and above. Your browser version has been detected as potentially beneath this. If you continue you may experience some functionaility issues.\n\nDetected Browser: " + browser.name + "\nVersion: " + browser.version)
-    }
+exports.loadSuperalgos = (port) => {
 
     loadGlobals()
 
     function loadGlobals() {
-        let path = "Globals.js"
-        REQUIREJS([path], onRequired)
-
-        function onRequired(pModule) {
-            setupEnvironment()
-        }
+        let {UI} = require('./Globals');
+        setupEnvironment(UI);
     }
 
-    function setupEnvironment() {
-        httpRequest(undefined, 'Environment', onResponse)
-
-        function onResponse(err, file) {
-            UI.environment = JSON.parse(file)
-            setupClientNode()
-        }
+    function setupEnvironment(UI) {
+        let ENVIRONMENT = require('../../Environment');
+        UI.environment = ENVIRONMENT.newEnvironment();
+        setupClientNode(UI);
     }
 
-    function setupClientNode() {
-        httpRequest(undefined, 'ClientNode', onResponse)
-
-        function onResponse(err, file) {
-            UI.clientNode = JSON.parse(file)
-            setupProjectsSchema()
-        }
+    function setupClientNode(UI) {
+        UI.clientNode = DK.desktopApp.p2pNetworkClient.node;
+        setupProjectsSchema(UI);
     }
 
-    function setupProjectsSchema() {
-        httpRequest(undefined, 'ProjectsSchema', onResponse)
-
-        function onResponse(err, file) {
-            UI.schemas.projectSchema = JSON.parse(file)
-            loadModules()
-        }
+    function setupProjectsSchema(UI) {
+        UI.schemas.projectSchema = require('../../Projects/ProjectsSchema.json');
+        loadModules(UI)
     }
 
-    function loadModules() {
-        let path = "WebAppLoader.js"
-        REQUIREJS([path], onRequired)
-
-        function onRequired(pModule) {
-            let APP_LOADER_MODULE = newWebAppLoader()
-            APP_LOADER_MODULE.loadModules()
-        }
+    function loadModules(UI) {
+        let APP_LOADER_MODULE = require('./WebAppLoader');
+        APP_LOADER_MODULE.newWebAppLoader({port, SA, UI}).loadModules();
     }
-}
-
-function httpRequest(pContentToSend, pPath, callBackFunction) {
-    let xmlHttpRequest = new XMLHttpRequest()
-    xmlHttpRequest.onreadystatechange = function () {
-        if (this.readyState === 4 && this.status === 200) {
-            try {
-                callBackFunction(undefined, xmlHttpRequest.responseText)
-            } catch (err) {
-                console.log('[ERROR] httpRequest -> httpRequest -> err.stack = ' + err.stack)
-                console.log('[ERROR] httpRequest -> httpRequest -> pContentToSend = ' + pContentToSend)
-                console.log('[ERROR] httpRequest -> httpRequest -> pPath = ' + pPath)
-                console.log('[ERROR] httpRequest -> httpRequest -> xmlHttpRequest.responseText = ' + xmlHttpRequest.responseText)
-                console.log('[ERROR] httpRequest -> httpRequest -> callBackFunction = ' + callBackFunction)
-
-            }
-            return
-        } else if (this.readyState === 4 && this.status === 404) {
-            callBackFunction({ result: "Fail", message: xmlHttpRequest.responseText.trim(), code: xmlHttpRequest.responseText.trim() })
-            return
-        }
-    }
-
-    if (pContentToSend === undefined) {
-        xmlHttpRequest.open("GET", pPath, true)
-        xmlHttpRequest.send()
-    } else {
-        try {
-            let blob = new Blob([pContentToSend], { type: 'text/plain' })
-            xmlHttpRequest.open("POST", pPath, true)
-            xmlHttpRequest.send(blob)
-        } catch (err) {
-            if (ERROR_LOG === true) { console.log("[ERROR] callServer -> err.message = " + err.message) }
-            callBackFunction({ result: "Fail", message: err.message })
-        }
-    }
-}
-
-function checkBrowserVersion() {
-
-    let ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
-    if (/trident/i.test(M[1])) {
-        tem = /\brv[ :]+(\d+)/g.exec(ua) || []
-        return { name: 'IE', version: (tem[1] || '') }
-    }
-    if (M[1] === 'Chrome') {
-        tem = ua.match(/\bOPR|Edge\/(\d+)/)
-        if (tem != null) { return { name: 'Opera', version: tem[1] } }
-    }
-    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']
-    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]) }
-    return {
-        name: M[0],
-        version: M[1]
-    }
-}
+}

Desktop/WebServer/css/main.css

@@ -1,5 +1,3 @@
-/* TODO migrate to react components*/
-
 /* latin */
 @font-face {
     font-family: 'Saira';
@@ -23,6 +21,11 @@
     font-weight: normal;
     font-style: normal;
   }
+  
+  .body{
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
 
   .scroll-div {
     position:absolute; 

Desktop/WebServer/index.html

@@ -0,0 +1,10 @@
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title></title>
+</head>
+<body >
+</body>
+
+</html>

Desktop/backend/src/index.js

@@ -0,0 +1,42 @@
+exports.startExpress = (port, SA, UI) => {
+    const express = require("express");
+    const app = express();
+    const newSocialTradingModulesWebAppInterface = DK.projects.socialTrading.modules.webAppInterface.newSocialTradingModulesWebAppInterface();
+
+// define a route handler for the default home page
+    app.get("/health-check", (req, res) => {
+        res.send("all good");
+    });
+
+    app.get("/profiles", async (req, res) => {
+        let userProfileTimeLine = loadUserProfileTimeline(SA, UI);
+        res.send(userProfileTimeLine);
+    })
+
+// start the Express server
+    app.listen(port, () => {
+        console.log(`server started at http://localhost:${port} `);
+    });
+
+
+    async function loadUserProfileTimeline(SA, UI) {
+
+        let queryMessage = {
+            queryType: SA.projects.socialTrading.globals.queryTypes.UNFOLLOWED_USER_PROFILES,
+            emitterUserProfileId: undefined,
+            initialIndex: SA.projects.socialTrading.globals.queryConstants.INITIAL_INDEX_FIRST,
+            amountRequested: 3,
+            direction: SA.projects.socialTrading.globals.queryConstants.DIRECTION_UP
+        }
+
+        let query = {
+            requestType: 'Query',
+            queryMessage: JSON.stringify(queryMessage)
+        }
+
+        let profiles = await newSocialTradingModulesWebAppInterface.messageReceived(
+            JSON.stringify(query)
+        );
+        return profiles;
+    }
+}

Desktop/frontend/api/service.js

@@ -0,0 +1,28 @@
+const baseURL = 'http://localhost:33249'
+const GET = 'GET'
+const POST = 'POST'
+const DELETE = 'DELETE'
+const UPDATE = 'UPDATE'
+
+function getProfiles(){
+    return call('/profiles', GET);
+}
+
+function getClientNode(){
+    return call('/ClientNode', GET);
+}
+
+function call(endpoint, method, body){
+    return new Promise(async(resolve, reject) => {
+        fetch(baseURL + endpoint, { method:method, body:body })
+            .then(response => resolve(response))
+            .catch(error => reject(error))
+    })
+    
+}
+
+export {
+    getProfiles,
+    getClientNode
+}
+

Desktop/frontend/src/components/User/UserCard.js

@@ -1,7 +1,7 @@
 import "./UserCard.css"
 import React, {useEffect} from 'react';
 import {Button, Card, CardContent, CardMedia, Typography} from "@mui/material";
-import pic from "./../../images/superalgos.png"
+import pic from "../../images/superalgos.png"
 
 const UserCard = ({name, id,followCallback}) => {
 

Desktop/frontend/src/components/home/App.js

@@ -3,8 +3,12 @@ import Sidebar from "../sidebar/Sidebar";
 import UsersSidebar from "../UsersSidebar/UsersSidebar";
 import {Stack} from "@mui/material";
 import {Outlet} from "react-router-dom";
+import {getProfiles} from '../../../api/service'
 
 function App() {
+    getProfiles().then( response => {
+        console.log(response)
+    });
     return (
         <div className="app">
 

Desktop/frontend/src/components/logo/Logo.js

@@ -1,7 +1,7 @@
 import './Logo.css';
 import React from 'react';
 import {Avatar, Stack} from "@mui/material";
-import pic from "./../../images/superalgos.png"
+import pic from "../../images/superalgos.png"
 
 
 const Logo = props => {

Desktop/frontend/src/components/post/Post.js

@@ -2,7 +2,7 @@ import "./Post.css"
 import React, {useState} from 'react';
 import {Avatar, Card, IconButton, Stack, Typography} from "@mui/material";
 import {Autorenew, ThumbDown, ThumbUp} from "@mui/icons-material";
-import pic from "./../../images/superalgos.png"
+import pic from "../../images/superalgos.png"
 
 const Post = () => {
 

Desktop/frontend/src/components/postPlaceholder/PostPlaceholder.js

@@ -1,7 +1,7 @@
 import "./PostPlaceholder.css"
 import React from 'react';
 import {Avatar, Button, Card, Stack, TextField, Typography} from "@mui/material";
-import pic from "./../../images/superalgos.png"
+import pic from "../../images/superalgos.png"
 
 const PostPlaceholder = () => {
 

Desktop/frontend/src/index.js

@@ -5,17 +5,7 @@ import {Provider} from "react-redux";
 import reducers from "./store";
 import Root from "./components/Root";
 
-/*
- TODO save
-exports.UI = {
-    projects: {},
-    schemas: { projectSchema: undefined },
-    environment: undefined,
-    clientNode: undefined,
-    webApp: undefined
-}
-exports.SA = { projects: {} }
-*/
+
 
 ReactDOM.render(
     <React.StrictMode>

Projects/Social-Trading/DK/modules/httpInterface.js

@@ -24,7 +24,8 @@ exports.newDesktopModulesHttpInterface = function newDesktopModulesHttpInterface
         if (process.argv.includes("noBrowser")) {
             //Running Client only with no UI.
         } else {
-            SA.nodeModules.open('http://localhost:' + port)
+            // no ui needed
+            // SA.nodeModules.open('http://localhost:' + port)
         }
     }