cozy-client v.1.0

import CozyClient from 'cozy-client'

const client = new CozyClient({
  uri: 'http://cozy.tools:8080',
  token: '...'
})

client
  .find('io.cozy.todos', { checked: false })
  .then(
    ({ data }) => console.log(data)
  )

client
  .create('io.cozy.todos', { label: 'Buy bread' })
  .then(
    ({ data }) => client.save({ ...data, checked: true })
  )

client.destroy(document)

client.upload(file, dirPath)

client.download(files, 'my-archive')

import React from 'react'
import { Query } from 'cozy-client'

const query = cozy => cozy.find('io.cozy.todos').where({ checked: false })

const TodoList = () => (
  <Query query={query}>
    {({ data, fetchStatus }) =>
      fetchStatus !== 'loaded'
        ? <h1>Loading...</h1>
        : <ul>{data.map(todo => <li>{todo.label}</li>)}</ul>
    }
  </Query>

• fetchStatus

• data

• hasMore

• fetchMore()

• refetch()

Mutations

import React from 'react'
import { Query } from 'cozy-client'
import TodoList from './TodoList'

const query = cozy => cozy.find('io.cozy.todos').where({ checked: false })

const TodoApp = () => (
  <Query query={query}>
    {({ data, fetchStatus }, { createDocument, deleteDocument }) =>
      fetchStatus !== 'loaded'
        ? <h1>Loading...</h1>
        : <TodoList 
            todos={data}
            onSubmit={createDocument} 
            onDelete={deleteDocument} />
    }
  </Query>

import React from 'react'
import { Query } from 'cozy-client'
import TodoList from './TodoList'

const query = cozy => cozy.find('io.cozy.todos').where({ checked: false })

const mutations = client => ({
  checkTodo: todo => client.save({ ...todo, checked: true })
})

const TodoApp = () => (
  <Query query={query} mutations={mutations}>
    {({ data, fetchStatus }, { createDocument, checkTodo }) =>
      fetchStatus !== 'loaded'
        ? <h1>Loading...</h1>
        : <TodoList 
            todos={data}
            onSubmit={createDocument} 
            onCheck={checkTodo} />
    }
  </Query>

Schémas

import CozyClient from 'cozy-client'

const TODO_SCHEMA = {
  todos: {
    doctype: 'io.cozy.todos',
    relationships: {
      attachments: {
        type: 'has-many',
        doctype: 'io.cozy.files'
      }
    }
  }
}

const client = new CozyClient({
  uri: '...',
  token: '...',
  schema: TODO_SCHEMA
})

import React from 'react'
import { Query } from 'cozy-client'
import TodoList from './TodoList'

const query = cozy => 
  cozy
    .find('io.cozy.todos')
    .where({ checked: false })
    .include(['attachments'])

const mutations = client => ({
  addAttachment: (todo, file) => 
    client
      .getAssociation(todo, 'attachments')
      .add(file)
})

const TodoApp = () => (
  <Query query={query} mutations={mutations}>
    {({ data, fetchStatus }, { createDocument, addAttachment }) =>
      fetchStatus !== 'loaded'
        ? <h1>Loading...</h1>
        : <TodoList 
            todos={data}
            onSubmit={createDocument} 
            addAttachment={addAttachment}
            hasAttachments={todo => todo.attachments.count !== 0} />
    }
  </Query>

Links

La nouvelle API de Contexte

Nouveauté React 16.3

Provider / Consumer

import React, { createContext } from 'react'

const { Provider, Consumer } = createContext({ firstName: 'John', lastName: 'Doe' })

// Render Provider with some value
<Provider value={{ firstName: 'Neil', lastName: 'Armstrong' }}>
  <App />
</Provider>
    
// Now anywhere inside <App /> you can consume this data
<Consumer>
  {({ firstName, lastName }) => <span>{`${firstName} ${lastName}`</span>}
</Consumer>

Applications

Sélection

import React from 'react'
import Selection from 'selection'

export const TodoApp = props => (
  <Selection>
    {selected => <TodoList selected={selected} />
  </Selection>
)

import React from 'react'
import createSelectionContext from 'selection'

const { Selection, Selected } = createSelectionContext()

export const TodoApp = props => (
  <Selection>
    <TodoList />
  </Selection>
)

// Quelque part dans l'arbre des composants
const TodoItem = todo => (
  <Selected item={todo}>
    {selected => <TodoRow todo={todo} selected={selected} />
  </Selected>
)

Partage

import React from 'react'
import { createQueryContext } from 'cozy-client'

const { QueryProvider, QueryConsumer } = createQueryContext(
  cozy => cozy.findSharings('io.cozy.photos.albums')
)

export const AlbumList = albums => (
  <QueryProvider>
    {albums.map(album => <AlbumRow album={album} />)}
  </QueryProvider>
)

// Qqe part...
export const AlbumItem = album => (
  <QueryConsumer>
    {shared => 
      <AlbumTitle title={album.title} withBadge={shared.indexOf(album.id) !== -1} />
    }
  </QueryConsumer>
)