Moved to #30

I would like to propose a decoupled authentication module for Redux.

The idea is that this module should be generic, you should be able to use it with oAuth, Passport, Auth0, your custom backend, etc.

In the future we'll also build an authorization module.

The first step is create a common API, here is the first draft:

function login() {}

function logout() {}

function signup() {}

function resetPassword() {}

function changePassword() {}

Probably it'll need to be placed under a separated repository as it'll need to important Auth0 JavaScript library.

I think that would be best to split all modules (smalldots) into separated repositories, each repository being a smalldot :D

First of all, very nice project...

I was wondering how (and if) I could use the Pagination component to achieve the result I have with very long page-lists:

When I have 1st page selected, I get:

When I have one "middle" page selected, I get this:

I can use range(1,3) to render the 3-first and range(numberOfPages -3, numberOfPages ) to the 3-last pages I always show... But that would make me repeat the rendering code 3-times...

For the "longer-step" intervals, I'm no sure how to deal with it...

Maybe I should extends (sub-class) from your Component, re-writing only the getPageRange function??
In the result list, I could return non-integer (null) for non-pages ... rendering....

Hello @hnordt, I've seen you have dirtyValues control in FormService.

Do you have any plans on adding touchedValues on it too? It might be very handy.

• <Container />
• <Container fluid />
• <Row />
• <Col xs sm md lg />

Useful for React Native 👍

We can read initialValues directly instead resolving values.

I am trying to implement an AsyncStorage driver in React Native which only provides async getItem & setItem (see https://facebook.github.io/react-native/releases/next/docs/asyncstorage.html#getitem)

Any plan on making the driver interface more generic, given that the current sync driver could be implemented synchronously.

Currently, on Fetch's componentWillReceiveProps, it does the following:

componentWillReceiveProps(nextProps) {
    if (!this.props.lazy && !isEqual(this.props, nextProps)) {
      this.fetch()
    }
  }

I have a use case that depending on the parent's props, the Fetch's lazy prop should change between true and false.
In that case, if the initial prop was true, it will never fetch again.

My solution was the following:

componentWillReceiveProps(nextProps) {
    if (!nextProps.lazy) {
      this.fetch()
    }
  }

What do you think?

import { Form, Validator } from 'smalldots';

I think it is common to be able to import component from the same global name instead of having to use different paths for different components

this works, but it is not so simple as the version above

import Form from 'smalldots/lib/Form';
import Validator from 'smalldots/lib/Validator';

I guess that webpack or webpack 2 are smart enough to remove files that are not used

State/props passed to children() shouldn't be mutated.

  render() {
    return this.props.children({ data: this.state.data, error: this.state.error })
  }

In this example data and error shouldn't mutated by the consumer.

To prevent mutation, I think that we can do something like this:

  render() {
    const frozenState = deepFreeze({ ...this.state })
    return this.props.children(frozenState)
  }

Proposed API:

const searchQuery = {
  name: 'h',
  age: { $gt: 17, $lt: 66 },
  likes: { $in: ['react', 'jsx'] }
}

const App = () => (
  <Fetch path="/users">
    {({ data: users }) => (
      <Search dataSource={users} query={searchQuery}>
        {({ results: filteredUsers }) => (
          <UserList users={filteredUsers}  />
        )}
      </Search>
    )}
  </Fetch>
)

Feedback: https://twitter.com/hnordt/status/773241068548685824

Hi I'm wondering about appropriate use for Toggler with onMouseOver/onMouseOut.

I'm getting content that flashes in and out when I use it this way:

https://www.webpackbin.com/bins/-Kenr9lKWS5XvNaf31dc

Is there a way to prevent the <Icon/> from flashing? does the Icon need shouldComponentUpdate?

  componentDidMount() {
    if (!this.props.lazy) {
      this.fetch()
    }
  }

If user didn't defined lazy prop then it's gonna be undefined, but !undefined converts to true.
So Fetch is not lazy by default.

Vi a gravação video da BrazilJS e ficou um pouco dificil acompanhar os exemplos.
Acho que perdi alguma coisa e meu teste não funcionou.
Só consigo fazer o get, mas o valor não é atualizado no render.
Minha intenção aqui é usar a store só para armazenar temporariamente.

import React from 'react';
import {SyncStorage} from 'smalldots'

const defaultValue = {
  number: 222
}

const MemStore = props => (
  <SyncStorage
    {...props}
    driver={{
      getItem: key => defaultValue[key],
      setItem: (key, value) => {
        defaultValue[key] = value
        return value
      }
    }}
  />
)

export default class App extends React.Component {
  render(){
    return (
      <MemStore subscribeTo="number">
        {({setItem, getItem, number}) => {
          return (
            <div>
              <p>my number: {number}</p>
              <p>getItem: {getItem('number')}</p>
              <button onClick={() => setItem('number', 1000)}>setItem</button>
            </div>
          )
        }}
      </MemStore>
    )
  }
} 

Hi,
Which theme is that in the smalldot page?

Thanks

Currently, on Form's componentWillReceiveProps, it does the following:

componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
        this.setState(prevState => ({
            values: { ...nextProps.initialValues, ...prevState.values }
        }))
    }
}

When I update initialValues prop, the values ​​are not updated.
My solution was to change the merge order of the props, like this:

componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
        this.setState(prevState => ({
            values: { ...prevState.values, ...nextProps.initialValues }
        }))
    }
}

What do you think?

(I'm sorry for the English, it's not my native language.)

Should we rename params to query?

I wanted to make a form that validates each field only after it's been edited (onChage or onBlur has fired), or alternatively validates all the fields after the user has tried to submit the form.

Can this be done using the Form component? The isDirty field is currently only available for the whole form, not single fields.

I don't know if getRangePage() is a good name for the method that returns the page range (it accepts an offset).

The current API is getPageRange(offset), if the current page is 10 and you pass an offset 3, it would return [7, 8, 9, 10, 11, 12, 13].

I would like to hear thoughts on this. getPages() is an option, but as Paginator passes down page, I think it would be confusing to have page and getPages(), in that case getPageRange(), is more clear in my opinion.

Storage components should resubscribe when subscribe property changes.

From where should I import Fetch, Form, Validator and so on?

what params or fields Form can use?

• Responsive helpers
• Basic grid
• Responsive grids
• Tiles
• Boxes
• Basic buttons
• Block buttons
• Button groups
• Button addons
• Content
• Forms
• Icons
• Images
• Notifications
• Progress bars
• Tables
• Tags
• Titles
• Cards
• Levels
• Media objects
• Menus
• Messages
• Modals
• Navs
• Pagination
• Panels
• Tabs
• Containers
• Heroes
• Sections
• Footer

Is there a better name for numberOfPages? Maybe pageCount, totalPageCount or totalPages?

This is crucial for CORS requests.

Is the subscribe property a good API name? Do we need to find a better name to make clear it's intent?

Current status: https://smalldots.now.sh

I have a use case where I am using Fetch, and I am changing the url parameter.
This calls the internal componentWillReceiveProps method in Fetch, which again calls this.dispatch(nextProps.body).

My problem is that the dispatch is called again with the previous url, not the url i updated to. I suspect this is because dispatch is not passed the new props, and is hence using the old ones.