feat(controls): add pagination controls #12

eddier · 2017-02-18T21:38:56Z

feature description

Adding pagination controls to the the set of available components

content

Includes the PaginationControl element as well as the necessary CSS. Also includes testable storybook component. No new dependencies.

usage

Handle the navigateToPage call:

navigateToPage(page) { this.setState({ currentNotes: this.getNotes(page) }); }

In this example you can fetch the appropriate notes from the API or if they are all loaded in a parent array just set them...

getNotes(pageNum) { return this.state.allNotes.slice( pageNum * this.state.perPage - this.state.perPage, pageNum * this.state.perPage); }

cdaringe · 2017-02-18T21:38:57Z

Storybook Hub is building storybooks for every commit in this PR.

Latest Storybook: https://38dfe732-fe93-4b01-8e82-343b109a5f83.sbook.io/
_{( Visit here for more info )}

This comment is automatically added by Storybook Hub

cdaringe · 2017-02-21T18:15:05Z

src/components/PaginationControl.jsx

+    super(props)
+    this.state = {
+      isPrevPageValid: false,
+      isNextPageValid: true,


i think this is fine, just brainstorming. both of these ^^ are derived state. hence, something akin to get isPrevPageValid () { this.state.currentPage > 1 } and the like could feasibly 🔥 down some code! no action requested. just talkin :)

cdaringe · 2017-02-21T18:16:39Z

stories/Welcome.js

+      </div>
+    );
+  }
+}


this should be removed, i think. we already have a Welcome component

cdaringe · 2017-02-21T18:26:02Z

hey @eddier, looks good.

i had a few remarks. will you 👀 at those?
can you see the build error messages? will want to 💚 that little guy pre merge!
on the Pagination component,
- i was clicking the page buttons and the text kept selecting/highlighting (because of my aggressivf clicking!). maybe we can drop these on?? what do you think?
- were things like "jump to end/start" or "select items per page" requirements? just askin!

thanks! this is cool stuff! @antoinejuhel, 👀 storybook

cdaringe · 2017-02-21T18:28:13Z

oh, and, https://github.com/semantic-release/semantic-release#default-commit-message-format . dont worry about rebasing. were still learning it too!

eddier · 2017-02-21T20:37:55Z

Can you give me account on your Codeship instance so I can see the build issues?

I'll check out the triple click issue that is causing the highlighting, good catch. The "jump to end" state was not part of the initial scope but it makes sense to include those as optional controls. I'll bring it up to the design team. I assume you guys will handle the required API support necessary for those components?

This resolves the text selecting from rapidly triple clicking

cdaringe · 2017-02-21T23:57:55Z

cool. hmm. the project should be open. i just double checked. do you have an acct? looks like the linter isnt happy atm

cdaringe · 2017-02-21T23:58:53Z

& yep, we'll wire in the API calls. thx!

eddier · 2017-02-21T23:59:38Z

eraffaele at g mail - it currently throws an error about access being denied to CS.

jhegg · 2017-02-22T00:11:48Z

@eddier yarn run lint should show the errors, until you get access to CS. I'm able to repro locally.

$ yarn run lint
yarn run v0.20.3
$ standard 'src/**/*.js' '.storybook/**/*.js' 'scripts/**/*.js' 'test/**/*.js' 'stories/**/*.js' 
standard: Use JavaScript Standard Style (http://standardjs.com)
standard: Run `standard --fix` to automatically fix some problems.
  /data/src/octagon/stories/controls.stories.js:36:30: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:39:18: Missing space before function parentheses.
  /data/src/octagon/stories/controls.stories.js:39:20: Missing space before opening brace.
  /data/src/octagon/stories/controls.stories.js:40:59: Extra semicolon.
  /data/src/octagon/stories/controls.stories.js:45:17: Expected consistent spacing
  /data/src/octagon/stories/controls.stories.js:144:25: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:145:49: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:146:20: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:147:34: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:148:33: Trailing spaces not allowed.
  /data/src/octagon/stories/controls.stories.js:153:1: Trailing spaces not allowed.
error Command failed with exit code 1.

This resolves the linting issues which may be causing CI to fail

eddier · 2017-02-22T00:51:37Z

Thanks Josh! Didn't realize the .stories.js files were in scope of the linter for your ci.

cdaringe · 2017-02-22T03:42:59Z

Access granted. Sorry for the delay

…

On Tue, Feb 21, 2017 at 4:51 PM, Edward Raffaele ***@***.***> wrote: Thanks Josh! Didn't realize the .stories.js files were in scope of the linter. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#12 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9O_Q1EkXQV5U5AUPT4uKy6L1SnwyRgks5re4aagaJpZM4MFRAZ> .

jhegg · 2017-02-22T17:50:45Z

I noticed that the "5 of 15" page number text has the text selection cursor when mousing over; should that just have the normal pointing mouse cursor instead? (I'm really not sure)

keep the cursor as default when hovering over the page count

eddier · 2017-02-22T17:55:14Z

That makes sense to me, updated to reflect that change.

antoinejuhel · 2017-02-22T19:36:12Z

Because of the sorting functions we have for consoles, I don't see a need for jump to end/beginning in this use case. That said if these are the pagination controls we want to use throughout our products, then yes, a jump to end/beginning would be required (a good example of this would be for reporting).

feat(controls): add pagination controls

1580076

cdaringe deployed to sbook.io February 18, 2017 21:38 View deployment

small behavior change in pagination

202013e

cdaringe deployed to sbook.io February 20, 2017 16:41 View deployment

cdaringe reviewed Feb 21, 2017

View reviewed changes

stories/Welcome.js Outdated

</div>

);

}

}

Copy link

Contributor

cdaringe Feb 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be removed, i think. we already have a Welcome component

remove welcome

967849b

cdaringe deployed to sbook.io February 21, 2017 18:22 View deployment

fix(pagination): stop text from selecting

1155f38

This resolves the text selecting from rapidly triple clicking

cdaringe deployed to sbook.io February 21, 2017 21:23 View deployment

fix(controls): linting issues

524029f

This resolves the linting issues which may be causing CI to fail

cdaringe deployed to sbook.io February 22, 2017 00:48 View deployment

fix(controls): cursor

92b06c7

keep the cursor as default when hovering over the page count

cdaringe deployed to sbook.io February 22, 2017 17:54 View deployment

cdaringe merged commit 4caa0a3 into master Feb 22, 2017

cdaringe deleted the pagination branch February 22, 2017 18:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(controls): add pagination controls #12

feat(controls): add pagination controls #12

eddier commented Feb 18, 2017 •

edited

Loading

cdaringe commented Feb 18, 2017

cdaringe Feb 21, 2017

cdaringe Feb 21, 2017

cdaringe commented Feb 21, 2017

cdaringe commented Feb 21, 2017

eddier commented Feb 21, 2017

cdaringe commented Feb 21, 2017 •

edited

Loading

cdaringe commented Feb 21, 2017

eddier commented Feb 21, 2017

jhegg commented Feb 22, 2017

eddier commented Feb 22, 2017 •

edited

Loading

cdaringe commented Feb 22, 2017 via email

jhegg commented Feb 22, 2017

eddier commented Feb 22, 2017

antoinejuhel commented Feb 22, 2017

feat(controls): add pagination controls #12

feat(controls): add pagination controls #12

Conversation

eddier commented Feb 18, 2017 • edited Loading

feature description

content

usage

cdaringe commented Feb 18, 2017

cdaringe Feb 21, 2017

Choose a reason for hiding this comment

cdaringe Feb 21, 2017

Choose a reason for hiding this comment

cdaringe commented Feb 21, 2017

cdaringe commented Feb 21, 2017

eddier commented Feb 21, 2017

cdaringe commented Feb 21, 2017 • edited Loading

cdaringe commented Feb 21, 2017

eddier commented Feb 21, 2017

jhegg commented Feb 22, 2017

eddier commented Feb 22, 2017 • edited Loading

cdaringe commented Feb 22, 2017 via email

jhegg commented Feb 22, 2017

eddier commented Feb 22, 2017

antoinejuhel commented Feb 22, 2017

eddier commented Feb 18, 2017 •

edited

Loading

cdaringe commented Feb 21, 2017 •

edited

Loading

eddier commented Feb 22, 2017 •

edited

Loading