Merge branch 'master' into gitpages

.env.development

@@ -1,3 +1,5 @@
-REACT_APP_URL = "http://localhost:3000"
-REACT_APP_MEMOREC = "http://memorec:8080"
+REACT_APP_URL="http://localhost:3000"
+REACT_APP_MEMOREC="http://memorec:8080"
+REACT_APP_COLLABORATIVE_REST="http://collaborative:5002"
+REACT_APP_COLLABORATIVE_SOCKET="ws://collaborative:5001"
 

.env.production

@@ -1,2 +1,4 @@
 REACT_APP_URL = "https://app.jjodel.io"
 REACT_APP_MEMOREC = "https://app.jjodel.io/memorec"
+REACT_APP_COLLABORATIVE_REST = "http://localhost:5002"
+

README.md

@@ -1,5 +1,25 @@
-Instructions (docker is required):
-
+## Full Deploy Instructions (docker is required):
   - Clone the repository: https://github.com/DamianoNaraku/jodel-react.git
   - Run: docker compose up -d
   - Go to: http://localhost:3000
+
+This version includes memorec model suggestions and collaborative live editing rooms.
+
+
+# Core functionalities version
+The application is publicly accessible at [this link.](https://damianonaraku.github.io/jodel-react/build/)
+
+If you want to run it locally, clone this repository, [install node.js and npm](https://nodejs.org/it/download), then run the following commands with a terminal opened at project's root folder
+
+`npm install`
+
+`npm run start`
+
+or
+
+`npm install`
+
+`npm run build`
+
+# Links
+[MDEGroup jodel repository](https://github.com/MDEGroup/jjodel): This is where stable, production-ready versions are released.

package.json

@@ -49,6 +49,7 @@
     "react-xarrows": "^2.0.2",
     "sass": "^1.49.9",
     "smart-webcomponents-react": "^9.3.53",
+    "socket.io-client": "^4.7.2",
     "sweetalert2": "^11.7.3",
     "sweetalert2-react-content": "^4.1.1",
     "tree-model": "^1.0.7",

src/components/collaborative/Collaborative.tsx

@@ -0,0 +1,14 @@
+import {io} from 'socket.io-client';
+import axios from 'axios';
+
+export default class Collaborative {
+    static client = io('/', {path: '/collaborative', autoConnect: false});
+    static async init(code: string) {
+        const actions = await axios.get(`/collaborative/rooms/${code}`);
+        return actions.data;
+    }
+    static async createRoom() {
+        const code = await axios.post(`/collaborative/rooms`);
+        return code.data;
+    }
+}

src/components/collaborative/CollaborativeAttacher.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Collaborative from './Collaborative';
+import App from '../../App';
+import {Action, SetRootFieldAction} from '../../joiner';
+import {useParams} from 'react-router-dom';
+import {useEffectOnce} from 'usehooks-ts';
+
+interface Props{}
+function CollaborativeAttacher(props: Props) {
+    const {id} = useParams();
+    const code = id ? id : '';
+
+    useEffectOnce(() => {
+        Collaborative.init(code).then(async(actions) => {
+            for(let action of actions) {
+                if(action.type === 'COMPOSITE_ACTION') for(let subAction of action.actions) delete subAction['_id'];
+                delete action['_id'];
+                const receivedAction = Action.fromJson(action);
+                receivedAction.hasFired = receivedAction.hasFired - 1;
+                receivedAction.fire();
+            }
+            Collaborative.client.io.opts.query = {code};
+            Collaborative.client.connect();
+            SetRootFieldAction.new('room', code, '', false);
+        })
+    });
+
+    Collaborative.client.on('pullAction', (action) => {
+        if(action.type === 'COMPOSITE_ACTION') for(let subAction of action.actions) delete subAction['_id'];
+        delete action['_id'];
+        const receivedAction = Action.fromJson(action);
+        receivedAction.hasFired = receivedAction.hasFired - 1;
+        receivedAction.fire();
+    });
+
+    return(<App />);
+}
+
+export default CollaborativeAttacher;

src/components/navbar/tabs/Share.tsx

@@ -1,42 +1,27 @@
 import React, {Dispatch, ReactElement} from 'react';
 import {DState} from '../../../redux/store';
 import {connect} from 'react-redux';
-import {Firebase} from '../../../firebase';
-import {SetRootFieldAction} from '../../../redux/action/action';
-import {DUser, U} from '../../../joiner';
+import Collaborative from "../../collaborative/Collaborative";
 
 function ShareComponent(props: AllProps) {
     const room = props.room;
     const debug = props.debug;
     const root = process.env['REACT_APP_URL'] || '';
 
-    const create = async(iot: boolean = false) => {
-        const code = U.getRandomString(5);
-        await Firebase.add('rooms', code, {
-            code: code,
-            actions: [],
-            createdBy: DUser.current,
-            iot: iot
-        });
-        window.open(root + '/room/' + code, '_blank');
+    const create = async() => {
+        const code = await Collaborative.createRoom();
+        window.location.replace(`${root}/rooms/${code}`);
     }
 
     const quit = async() => {
         window.location.replace(root);
     }
 
-    const deleteAllRoms = async() => {
-        SetRootFieldAction.new('isLoading', true);
-        await Firebase.removeAllRooms();
-        SetRootFieldAction.new('isLoading', false);
-    }
-
     return(<li className={'nav-item dropdown'}>
         <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>Share</div>
         <ul className={'dropdown-menu'}>
-            {!room && <li tabIndex={-1} onClick={e => create()} className={'dropdown-item'}>Collaborative</li>}
+            {!room && <li tabIndex={-1} onClick={create} className={'dropdown-item'}>Collaborative</li>}
             {room && <li tabIndex={-1} onClick={quit} className={'dropdown-item'}>Quit</li>}
-            {debug && <li tabIndex={-1} onClick={deleteAllRoms} className={'dropdown-item'}>Delete all roms</li>}
         </ul>
     </li>);
 }

src/redux/action/action.ts

@@ -147,6 +147,7 @@ export class Action extends RuntimeAccessibleClass {
         vertexSize: 'vertexSize'
     };
     id: Pointer;
+    timestamp: number = Date.now();
     sender: Pointer<DUser>;
     token: Pointer<DUser>;
     hasFired: number = 0;