harrybanda

<Button
  appearance="danger"
  icon="trash"
  onClick={async () => {
    await storage.delete(book.key);
    await storage
      .query()
      .where("key", startsWith("book_"))
      .getMany()
      .then((res) => setBooks(res.results));

harrybanda

import ForgeUI, { ModalDialog, Form, TextField } from "@forge/ui";
import { storage } from "@forge/api";
import uuid from "uuid-random";

export const BookDialog = ({
  isOpenModal,
  setOpenModal,
  isUpdating,
  selectedBook,
}) => {

harrybanda

import ForgeUI, {
  Fragment,
  Text,
  Table,
  Head,
  Row,
  Cell,
  Button,
  ButtonSet,
  useState,

harrybanda

<BooksTable
  isOpenModal={isOpenModal}
  setOpenModal={setOpenModal}
  setUpdating={setUpdating}
  setSelectedBook={setSelectedBook}
/>
<BookDialog
  isOpenModal={isOpenModal}
  setOpenModal={setOpenModal}
  isUpdating={isUpdating}

harrybanda

const [isUpdating, setUpdating] = useState(false);
const [selectedBook, setSelectedBook] = useState(undefined);

harrybanda

import ForgeUI, { render, Fragment, Macro, useState } from "@forge/ui";
import { BooksTable } from "./BooksTable";
import { BookDialog } from "./BookDialog";

const App = () => {
  const [isOpenModal, setOpenModal] = useState(false);
  return (
    <Fragment>
      <BooksTable isOpenModal={isOpenModal} setOpenModal={setOpenModal} />
      <BookDialog isOpenModal={isOpenModal} setOpenModal={setOpenModal} />

harrybanda

import ForgeUI, {
  Fragment,
  Text,
  Table,
  Head,
  Row,
  Cell,
  Button,
  ButtonSet,
  useState,

harrybanda

import ForgeUI, { ModalDialog, Form, TextField } from "@forge/ui";
import { storage } from "@forge/api";
import uuid from "uuid-random";

export const BookDialog = ({ isOpenModal, setOpenModal }) => {
  const onSubmit = async (formData) => {
    const bookId = "book_" + uuid();
    await storage.set(bookId, formData);
    setOpenModal(false);
  };

harrybanda

permissions:
  scopes:
    - "storage:app"

harrybanda

import ForgeUI, { render, Fragment, Macro, useState } from "@forge/ui";
import { BooksTable } from "./BooksTable";
import { BookDialog } from "./BookDialog";

const App = () => {
  const [isOpenModal, setOpenModal] = useState(false);
  const [books, setBooks] = useState([]);

  return (
    <Fragment>