Flux Developer

Appearance

On this page

Data ​

With your Subjects defined, writing and reading data can be done by writing and subscribing to the AD4M perspective.

This logic has been bundled into two hooks: useSubject and useSubjects, for working with a single item and lists of items respectively.

A Flux Plugin will always recieve two things.

  • perspective which is a PerspectiveProxy.
  • channelSource which is the id of the channel your plugin is installed in.
  • agent which is a AgentClient, that allows you to interact with the Agent/User.

Getting a list of items ​

Now, let's get a list of Todo's, which is also part of the boilerplate. This assumes we've created a Subject Class called Todo with a given set of fields.

jsx
import { useSubject, useSubjects } from "@fluxapp/react";
import { Community } from "@coasys/flux-api";
import Todo from "../subjects/Todo";  

export default function TodoView({ perspective, channelSource })
  const { entry: community } = useSubject({
    perspective,
    subject: Community,
  });

  const { entries: todos, repo } = useSubjects({  
    perspective,  
    source: channelSource,  
    subject: Todo,  
  });  

  return (
    <h1>{community?.name}</h1>

    <ul> 
      {todos?.map(todo => <li>{todo.name}</li>)} 
    </ul>  
  )
};

Getting a single item ​

If we want to fetch a single entry based on it's id. We can use the useSubject hook and just pass in an id.

tsx
import { useSubject } from "@fluxapp/react";
import { Todo } from "@coasys/flux-api";

export default function Todo({ perspective, id }) {
  const { entry: todo } = useSubject({
    perspective,
    id:
    subject: Todo,
  });

  return (
    <h1>{todo?.title}</h1>
  )
};

Creating data ​

To create data, all we need to do is use repo.create() on the repo we want to add the data to. Let's create a new Todo item.

TIP

Since we're subscribed to all changes, the list of Todos will automatically update when we create a new item!

jsx
import { useSubject, useSubjects } from "@fluxapp/react";
import { Community } from "@coasys/flux-api";
import Todo from "../subjects/Todo";

export default function TodoView({ perspective, channelSource }) {
  const [title, setTitle] = useState(""); 

  const { entry: community } = useSubject({
    perspective,
    subject: Community,
  });

  const { entries: todos, repo } = useSubjects({
    perspective,
    source: channelSource,
    subject: Todo,
  });

  function createTodo(e) { 
    if (e.key !== "Enter") return; 
    repo.create({ title: title }) 
  } 

  return (
    <h1>{community?.name}</h1>

    <input 
      placeholder="Name of Todo" 
      onKeyDown={createTodo} 
      onChange={(e) => setTitle(e.target.value)} 
    /> 

    <ul>
      {todos?.map(todo => <li>{todo.name}</li>)}
    </ul>
  )
};

Updating data ​

Next, let's add functionality to toggle a Todo's state using the repo.update() function.

In this example we use the j-checkbox web-component from Flux UI:

jsx
import { useSubject, useSubjects } from "@fluxapp/react";
import { Community } from "@coasys/flux-api";
import Todo from "../subjects/Todo";

export default function TodoView({ perspective, channelSource }) {
  const [title, setTitle] = useState("");

  const { entry: community } = useSubject({
    perspective,
    subject: Community,
  });

  const { entries: todos, repo } = useSubjects({
    perspective,
    source: channelSource,
    subject: Todo,
  });

  function createTodo(e) {
    if (e.key !== "Enter") return;
    repo.create({ title: title })
  }

  function toggleTodo({ id, done }) { 
    repo.update(id, { done }); 
  } 

  return (
    <h1>{community?.name}</h1>

    <input
      placeholder="Name of Todo"
      onKeyDown={createTodo}
      onChange={(e) => setTitle(e.target.value)}
    />

    <ul>
      {todos?.map(todo => (
        <li>
          <j-checkbox 
            onChange={(e) => 
              toggleTodo({ id: todo.id, done: e.target.checked }) 
            } 
            checked={todo.done} 
            > 
            {todo.name}
          </j-checkbox>  
        </li>
      )}
    </ul>
  )
};

Deleting data ​

Deleting data, as you might guess, is done with repo.remove(). Let's add a button for deleting Todo-items:

jsx
import { useSubject, useSubjects } from "@fluxapp/react";
import { Community } from "@coasys/flux-api";
import Todo from "../subjects/Todo";

export default function TodoView({ perspective, channelSource }) {
  const [title, setTitle] = useState("");

  const { entry: community } = useSubject({
    perspective,
    subject: Community,
  });

  const { entries: todos, repo } = useSubjects({
    perspective,
    source: channelSource,
    subject: Todo,
  });

  function createTodo(e) {
    if (e.key !== "Enter") return;
    repo.create({ title: title })
  }

  function toggleTodo({ id, done }) {
    repo.update(id, { done });
  }

  function deleteTodo(id: string) { 
    repo.remove(id); 
  } 

  return (
    <h1>{community?.name}</h1>

    <input
      placeholder="Name of Todo"
      onKeyDown={createTodo}
      onChange={(e) => setTitle(e.target.value)}
    />

    <ul>
      {todos?.map(todo => (
        <li>
          <j-checkbox
            onChange={(e) =>
              toggleTodo({ id: todo.id, done: e.target.checked })
            }
            checked={todo.done}
            >
            {todo.name}
          </j-checkbox>
          <j-button onClick={() => deleteTodo(todo.id)}>Delete</j-button> 
        </li>
      )}
    </ul>
  )
};