Casl: React and Redux Saga with casl

[devt3000]

Hello, thanks for the amazing package. I have been facing some challenges though, I have an app with a React, Redux, Redux-Saga, Koajs and Mongodb stack. So every-time I add the component as a wrapper for a "project delete key" in the component that is supposed to render data from my database i'm getting a blank screen in the browser/client and no error message is produced in the browser console. Contrary to that, i'm getting this output in the server-side console(The VS Code Intergrated terminal):

<-- GET /casl/react/dist/es5m/index.js
[1]   --> GET /casl/react/dist/es5m/index.js 404 2ms -
[1]   <-- GET /%3Canonymous%3E
[1]   <-- GET /redux-saga/core/dist/redux-saga-core.esm.js
[1]   --> GET /%3Canonymous%3E 404 3ms -
[1]   --> GET /redux-saga/core/dist/redux-saga-core.esm.js 404 3ms -
[1]   <-- GET /redux-saga/core/dist/chunk-e922c950.js
[1]   --> GET /redux-saga/core/dist/chunk-e922c950.js 404 4ms -
[1]   <-- GET /casl/react/dist/es5m/index.js
[1]   --> GET /casl/react/dist/es5m/index.js 404 4ms -
[1]   <-- GET /%3Canonymous%3E
[1]   --> GET /%3Canonymous%3E 404 2ms -
[1]   <-- GET /redux-saga/core/dist/redux-saga-core.esm.js
[1]   --> GET /redux-saga/core/dist/redux-saga-core.esm.js 404 3ms -
[1]   <-- GET /redux-saga/core/dist/chunk-e922c950.js
[1]   --> GET /redux-saga/core/dist/chunk-e922c950.js 404 2ms -

I tried to track down where the code breaks using a the chrome debugger in VS Code and it's somewhere in the redux-saga-core.esm.js next function.

Please help.

[stalniy]

Hello,

You need to provide some code, currently I don’t understand what is going on, whether you use CASL on both sides or you use it only on UI, also I don’t know how you setup permissions and whether they are correct

[devt3000]

Okay, thanks for the heads up! I'm only using CASL on the UI.

// ability.js

// Get access to variable saved it the client localstorage
import User from "../../modules/User";

// Check if subject name is "Project"
function subjectName(item) {
  if (!item || typeof item === "string") {
    return item;
  }

  return item.__type;
}

// Building the Abilities

export default AbilityBuilder.define({ subjectName }, can => {
  // Creating a variable, name that is a string with the artist's name/username
  var name = User.getUser();
  can(["read", "delete", "update"], "Project", { artist: name });
});

// Can.js

import { createCanBoundTo } from "@casl/react";
var ability = require("../../../casl/config/ability");

export default createCanBoundTo(ability);

// Project.jsx

import React, { Component } from "react";
import moment from "moment";
import { Link } from "react-router-dom";
import { PortalWithState } from "react-portal";
import UpdateBox from "../updateProjectFiles/UpdateBox";
import Can from "../caslFiles/Can";

//...

// The here is the delete button
var deleteButton = (
      <Can do="delete" on={project}>
        <button
          type="destroy"
          className="destroy btn btn-primary"
          onClick={onDelete}
        >
          Delete
        </button>
      </Can>
    );

//...

[stalniy]

Can you please try to create a small reproduction of the issue and send a link here?

Check if your app renders ok, without CASL. If it works without CASL, check that your project object has the right shape and values. Check that subjectName returns the correct type for project

[devt3000]

Sorry but I don't understand what reproduction means?

The app works well without CASL. The project object just has a couple of keys that reference data from the database.
subjectName returns a string "Project".

[stalniy]

Sorry but I don't understand what reproduction means?

just a small example of code which I can run locally on my laptop and understand where the issue is :)

As I understood <Can> component is only in one place currently, right?
What is the result of ability.can('delete', project)?

[devt3000]

Well, if you could, add Redux Saga to any of your example apps. I think that would be a good representation of my stack.

Okay let me try that out and I'll get back to you asap. And yes, the Can component is in one place.

[devt3000]

So I tried to change the parameters of the can function and I'm still getting the same error. I'm stuck hey.

[stalniy]

Sorry, but currently I can't understand whether the issue is in CASL, in your code or in your setup.
That's why I requested a small example to reproduce your issue. If you can provide it, I can try to help you.

[devt3000]

Okay let me try to piece up an example app.

[devt3000]

• @stalniy Hello again, when I checked for the value of ability.can("delete", project) I got a Reference error, project is not defined. ability.can("delete", "project") returns false. ability.can("delete", "Project") returns true.

[devt3000]

Sorry, but currently I can't understand whether the issue is in CASL, in your code or in your setup.
That's why I requested a small example to reproduce your issue. If you can provide it, I can try to help you.

Hello again, I managed to come up with an example project and the code is broken there as well, here is a link to the repository https://github.com/devt3000/redux-sagas-koa-mongo

[stalniy]

The provided app had errors in browser console. I created a PR which fix all things and allow to see how CASL works: https://github.com/devt3000/redux-sagas-koa-mongo/pull/1/files

Please check if you have similar issues in your app and if so, I will close the issue

[devt3000]

Thanks, I will check asap.

[devt3000]

Hey, thank you for the help everything works now!

[stalniy]

No problem