// todo.store.ts

import {ClientStore} from "client-web-storage";

interface ToDo {
    name: string;
    description: string;
    complete: boolean;
}

// create a store providing the name and schema object
// with default values or javasctipt types
const todoStore = new ClientStore<ToDo>("todo", {
    $name: String,
    description: "No Description",
    complete: false
});

// app.tsx

import {useClientStore} from "client-web-storage";
import {todoStore} from "./stores/todo.store";

const App = () => {
    const {items, processing, error} = useClientStore<Todo>(todoStore);
    
    const handleCreatItem = async () => {
        await todoStore.createItem({
            name: "Go to Gym" // only name is required (marked with $)
        });
        
        /*  Creates item in the store
        {
          _id: "123e4567-e89b-12d3-a456-426614174000", // generated id
          _createdDate: "January, 4th 2022",
          _lastUpdatedDate: "January, 4th 2022",
          name: "Go to Gym",
          description: "No Description",
          complete: false,
        }
        */
    }
        
    if(processing) {
        return <Spinner />
    }
    
    if(error) {
        return <p className="error">{error.message}</p>
    }
    
    return (
        <>
            <button type="button" onClick={handleCreatItem}>create todo</button>
            <FlatList list={items} renderItem={renderTodo}/>
        </>
    )
}