This how-to guide follows on from building a basic notes app. We advise you to read this guide before continuing.

Storing Notes in State

Let's expand on the previous how-to guide by storing our notes in state, or in otherwords, storing in Deskpro's database so they can be persisted for all users.

Open up Main.tsx and make the following changes:

import { FC, useState } from "react";
import {
  Button,
  GetStateResponse, SetStateResponse,
  Stack,
  TextArea, useDeskproAppClient,
  useInitialisedDeskproAppClient
} from "@deskpro/app-sdk";

const storageKey = "deskpro/my-app/notes";

export const Main: FC = () => {
  const { client } = useDeskproAppClient();

  const [notes, setNotes] = useState<string>("");

  useInitialisedDeskproAppClient((client) => {

    // When getting state, an array is always returned as the state getter is capable of returning 
    // lists of items
    client.getState<string>(storageKey)
      .then((res: GetStateResponse<string>[]) => setNotes(res[0]?.data ?? ""))
    ;

  });

  const save = () => {

    // The state setter response returns information about the status of the update - including 
    // any encountered errors
    client?.setState<string>(storageKey, notes)
      .then((res: SetStateResponse) => console.info(res.isSuccess))
    ;

  };

  return (
    <Stack gap={4} vertical>
      <label>
        Notes
        <TextArea
          rows={4}
          onChange={(e) => setNotes(e.target.value)}
          value={notes}
        />
      </label>
      <Button text="Save" onClick={() => save()} />
    </Stack>
  );
};
 copy

The two main changes are as getting and setting state using the Deskpro apps client *State() methods.

Setting state:

client.setState<string>("my-key", notes)
  .then((res: SetStateResponse) => console.info(res.isSuccess))
;
 copy

Getting state:

client.getState<string>("my-key")
  .then((res: GetStateResponse<string>[]) => setNotes(res[0]?.data ?? ""))
;
 copy

One important thing to note is that the state getters return an array of values as state getters can use path wildcard notation to return multiple items if required.

Storing Notes in User State

OK, it's great that our notes are properly persisted now - however, what if we wanted to store notes for each Deskpro user? We can do this with "user state". This requires a small modification to our existing code; instead of using getState() and setState, you can use getUserState() and setUserState(). Now we can store state values using the same name, but hold different values per Deskpro user.

import { FC, useState } from "react";
import {
  Button,
  GetStateResponse, SetStateResponse,
  Stack,
  TextArea, useDeskproAppClient,
  useInitialisedDeskproAppClient
} from "@deskpro/app-sdk";

const storageKey = "deskpro/my-app/notes";

export const Main: FC = () => {
  const { client } = useDeskproAppClient();

  const [notes, setNotes] = useState<string>("");

  useInitialisedDeskproAppClient((client) => {

    // When getting state, an array is always returned as the state getter is capable of returning
    // lists of items
    client.getUserState<string>(storageKey)
      .then((res: GetStateResponse<string>[]) => setNotes(res[0]?.data ?? ""))
    ;

  });

  const save = () => {

    // The state setter response returns information about the status of the update - including
    // any encountered errors
    client?.setUserState<string>(storageKey, notes)
      .then((res: SetStateResponse) => console.info(res.isSuccess))
    ;

  };

  return (
    <Stack gap={4} vertical>
      <label>
        Notes
        <TextArea
          rows={4}
          onChange={(e) => setNotes(e.target.value)}
          value={notes}
        />
      </label>
      <Button text="Save" onClick={() => save()} />
    </Stack>
  );
};
 copy

Setting user state:

client.setUserState<string>("my-key", notes)
  .then((res: SetStateResponse) => console.info(res.isSuccess))
;
 copy

Getting user state:

client.getUserState<string>("my-key")
  .then((res: GetStateResponse<string>[]) => setNotes(res[0]?.data ?? ""))
;
 copy

App Elements

Now that our app is getting more complex, let's decorate the app header with the "refresh_button" element, allowing the user to refresh our app without reloading Deskpro itself.

Near the top of your component, add the following code:

useInitialisedDeskproAppClient((client) => {

  // Register the "refresh button" element
  client.registerElement("myRefreshButton", {
    type: "refresh_button",
  });
  
});
 copy

Then, take a look at your app in Deskpro - you should see the refresh button appear in the header: