// RxJS

const observable = from([
  'Pierwszy', 
  'Drugi', 
  'Trzeci'
]);

observable.subscribe(it => {
  console.log(it)
})

// output:

Pierwszy
Drugi
Trzeci

const taskSchemaLiteral = {
    title: 'task schema',
    version: 0,
    description: 'describes task from todo list',
    primaryKey: 'id',
    type: 'object',
    properties: {
        id: {
            type: 'string',
            maxLength: 32
        },
        timestamp: {
            type: 'number'
        },
        text: {
            type: 'string'
        }
    },
    required: ['id', 'timestamp', 'text']
} as const; // <- It is important to set 'as const'
            //    to preserve the literal type

const schemaTyped = toTypedRxJsonSchema(taskSchemaLiteral);

// aggregate the document type from the schema
export type TaskType = 
  ExtractDocumentTypeFromTypedRxJsonSchema<typeof schemaTyped>;

// create the typed RxJsonSchema from the literal typed object.
export const taskSchema: RxJsonSchema<TaskType> = taskSchemaLiteral;

type ToDoDatabase = RxDatabase<{
    tasks: RxCollection<TaskType>
}>

// ...

const db: ToDoDatabase = await createRxDatabase({
  name: 'todo_db',
  storage: getRxStorageMemory() // adapter bazy w pamięci
});

await db.addCollections({
  tasks: {
    schema: taskSchema
  }
});

await db.tasks.bulkInsert([
  {
    id: `${Math.random()}`,
    timestamp: Date.now(),
    text: 'Example task #1'
  },
  {
    id: `${Math.random()}`,
    timestamp: Date.now(),
    text: 'Example task #2'
  }
]);

// ...

function addTask(text: string): void {
  db.tasks.insert({
    text,
    timestamp: Date.now(),
    id: `${Math.random()}`
  });
}

// index.ts

const tasks$ = db.tasks.find({
  sort: [{timestamp: 'asc'}]
}).$;

root.render(<App addTask={addTask} tasks$={tasks$}/>);

// App.tsx

type AppProps = {
    tasks$: Observable<TaskType[]>,
    addTask: (text: string) => void
}

export default function App(props: AppProps) {
    const tasks: TaskType[] | undefined = useObservableState(props.tasks$);
    // ...
    return (
        <div className="App">
            <input id={'new-task'} defaultValue={''}/>
            <input type={'button'} value={'Add task'} onClick={handler}/>
            <ul>
                {tasks?.map(it => <li key={it.id}>
                    {it.text} at {new Date(it.timestamp).toISOString()}
                </li>)}
            </ul>
        </div>
    );
}