@personio/drafts

DEPRECATED -- DO NOT TAKE A DEPENDENCY ON THIS LIBRARY

This library no longer connects to the Drafts API service, which is decommissioned. It now provides a static implementation to facilitate decommission of the service. The static implementation allows for continued operation of the existing usage in Recruiting UI until that will be refactored and usage of this library permanently decommissioned.

Development

yarn install
yarn test
yarn lint:fix

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)} />
    </>
  );
}