marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.84k stars 5.23k forks source link

React-Admin / Custom sagas : unable to import ra-realtime #1478

Closed vdieulesaint closed 6 years ago

vdieulesaint commented 6 years ago

The ra-realtime import from app does not work in v2.0.0-beta1.

Please, find below the error : ./src/app/sagas/realtimeSaga.js Module not found: Can't resolve 'ra-realtime' in '...\src\app\sagas'

import realtimeSaga from './app/sagas/realtimeSaga';

Environment

djhi commented 6 years ago

Can you post the content of your ./app/sagas/realtimeSaga file and your package.json ?

vdieulesaint commented 6 years ago

Hi,

Here my package.json

{
  "name": "ticatag-front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jwt-decode": "^2.2.0",
    "material-ui": "^1.0.0-beta.31",
    "material-ui-icons": "^1.0.0-beta.17",
    "ra-language-french": "^2.0.0-alpha1",
    "ra-realtime": "^2.0.0-beta1",
    "react": "^16.2.0",
    "react-admin": "^2.0.0-beta1",
    "react-dom": "^16.2.0",
    "react-fontawesome": "^1.6.1",
    "react-google-maps": "^9.4.5",
    "react-scripts": "1.1.0",
    "webstomp-client": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

And the realtimeSaga :

import realtimeSaga  from 'ra-realtime';
import webstomp from 'webstomp-client'
import SockJS from 'sockjs-client';

const onConnect = (client, observer) => {
    client.subscribe('/topic/users/'+ localStorage.getItem('userId') +'/locations', onMessage.bind(this, client, observer));
}

const onError = (client, error) => {
    console.log(error);
}

const onMessage = (client, observer, msg) => {
    const message = JSON.parse(msg.body);
    let resource = JSON.parse(localStorage.getItem('lastResource'));
    if(resource) {
        const recordIndex = resource.findIndex(r => (r.id === message.device_id));

        if(resource[recordIndex]) {
            resource[recordIndex].last_location.latitude = message.latitude;
            resource[recordIndex].last_location.longitude = message.longitude;
            resource[recordIndex].last_location.timestamp = message.timestamp;
            observer.next({ data: resource, total: resource.length});
        }
    }
}

const observeRequest = (restClient) => (type, resource, params) => {
    const token = localStorage.getItem('token');
    let endpoint;
    if (resource === 'map') {
        endpoint = process.env.REACT_APP_WS_URL + '?access_token=';
    } else {
        return;
    }
    const url = endpoint + token;
    const headers = {
        Authorization: 'Bearer: ' + token
    };

    return {
        subscribe(observer) {
            const client = webstomp.over(new SockJS(url, {heartbeat: false}));
            client.connect(headers, onConnect.bind(this, client, observer), onError);

            const subscription = {
                unsubscribe() {
                    if(client.connected){
                        client.disconnect();
                        observer.complete();
                    }
                }
            };

            return subscription;
        },
    };
};

export default (restClient, resources) => realtimeSaga(observeRequest(restClient, resources));
djhi commented 6 years ago

I can confirm it's a bug in our build.

fzaninotto commented 6 years ago

Fixed by #1485 (to be released)

djhi commented 6 years ago

Released with v2.0.0-beta2