@personio/drafts

A helper library used in Personio to work with Drafts API. Written in TypeScript.

Installation

Run

yarn add @personio/drafts

Usage

How to save data into localStorage

import * as React from 'react';
import { useDrafts } from '@personio/drafts';

type Props = {
  companyId: number;
  employeeId: number;
}

const MyComponent = ({ companyId, employeeId }: Props) => {
  const LOCAL_STORAGE_KEY = 'myAwesomeKey';
  const [description, setDescription] = React.useState('');
  const [{ publicKey }, { setData }] = useDrafts({ companyId, employeeId });

  const onSave = () => {
    // Public key should be fetched on mount
    // since we need it in order to encrypt the content stored in the localStorage
    if (publicKey) {
      setData({ localStorageKey: LOCAL_STORAGE_KEY, value: description });
    }
  }
  
  return (
    <>
      <textarea value={description} onChange={({ target: { value } }) = setDescription(value)} />
      <button onClick={onSave}>Save</button>
    </>
  );
}

How to get decrypted value from key

import * as React from 'react';
import { useDrafts } from '@personio/drafts';

type Props = {
  companyId: number;
  employeeId: number;
}

const MyComponent = ({ companyId, employeeId }: Props) => {
  const LOCAL_STORAGE_KEY = 'myAwesomeKey';
  const [description, setDescription] = React.useState('');
  const [{ data }, { getData }] = useDrafts({ companyId, employeeId });

  React.useEffect(() => {
    getData({ localStorageKey: LOCAL_STORAGE_KEY })
  }, [getData]);

  React.useEffect(() => {
    if (data) {
      setDescription(data);
    }
  }, [data]);
  
  return (
    <>
      <textarea value={description} onChange={({ target: { value } }) = setDescription(value)} />
    </>
  );
}