# Record Brainstorm

**Declaration**:

type Book = QRecord<
  {library: number, id: number},
  {description: string, isArchived: boolean}>
  
export const Book_read = qrlHook(async (props: QProps<Book>): StateOf<Book> => {
  const data = await fetch('/some/api/' props.org + '/' + props.id);
  return {
    description: data.text
  };
})

export const Book_destroy = qrlHook<[QProps<Book>], StateOf<Book>>(async (props)=> {
  const data = await fetch('/some/api/' props.org + '/' + props.id);
  return {
    description: data.text
  };
})

const Book = qRecord<Book>({
  maxCount: 100,
  type: 'Book',
  props: ['org', 'id'],
  onCreate: Book_create,
  onDestroy: Book_destroy,
  /*
  onMaterialize: Book_create,
  onRead: Book_read,
  onUpdate: Book_update,
  onDelete: Book_delete,
  */
})

async function Book_archive(book: Book) {
  book.state.archived = true;
  await book.writeQueue();
  return;
}

serialization:

<div ::book="{onCreate: 'chunk_abc#Book', ... }"
     ::book:123:456="{description: 'Some Title', isArchived: false}"
     ::book:234:567="{description: 'Other Title', isArchived: true}"

**Usage**:

standalone:

// Creating a new Book
const book:Book = await Book.create(
     element, 
     {library: 123, id:456}, // Maybe this can be omitted?
     {description: 'some text'});

// Retrieving existing book
cost otherBookProp:QProps<Book> = qProps(element, {library: 234, id:567});
const book2:Book = await Book.read(otherBookProp);

// update state
book2.state.description = book.state.description;
// State is proxy which will autodetect changes and:
// 1. Notify all components of change.
// 2. Fire Book_onChange message.

// Wait until pending changes have been propagated.
await book2.pendingChanges;


console.log(book.props);
console.log(book.state);
console.log(book.transient);

as component:

<my-component q:view="chunk_abc#View"
             on:q-init="chunk_abc#state"
             on:q-destroy="chunk_abc#destroy"
             bind:book:123:456="book">

type BookDetails = QComponent<{book: QProp<Book>}>
const BookDetails_view = qrlView<BookDetails>((props, state) => (
  <div>
    {state.description}
  </div>
));
const MyComponent_init = qrlMessage((props:QProps<MyComponent>) => ({}));
const MyComponent_destroy = qrlMessage(() => {console.log('destroy'); });
const MyComponent = qComponent<MyComponent>({
  tag: 'book-details',
  onInit: MyComponent_init,
  onDestroy: MyComponent_destroy
})