GithubHelp home page GithubHelp logo

web-pal / react-trello-board Goto Github PK

View Code? Open in Web Editor NEW
1.6K 1.6K 332.0 84 KB

Trello like board based on React, Redux, React-dnd

Home Page: http://react-trello-board.web-pal.com

HTML 2.29% JavaScript 90.31% CSS 7.39%

react-trello-board's People

Contributors

ilya-lopukhin avatar jimrhead avatar oogxdd avatar velikiinehochuha avatar vladimirpal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-trello-board's Issues

Split into component library and sample app

Hey guys. Pretty cool work! :)

I just have one suggestion: Right now it shows quite nicely how a trello-like board can easily be implemented using react/redux. But unfortunately it is really just the whole sample app right now.

It would be really cool to split it into a library exporting the board components and this sample app based on the lib. This way one could easily use the board in a real-world application.

Help with writing README

Need any help fleshing out the README for running the app and contributions?

Would be happy to help!

Drop a card to the bottom of a long list

Dropping a card doesn't trigger vertical scroll when the list is long, so you tend to drag/drop multiple times to reach the end.

The board is well done, thanks for sharing.

app isn't displaying anything

So I tried to do npm run build and got this:

0 info it worked if it ends with ok
1 verbose cli [ '/Users/tbrown/.nvm/versions/node/v6.9.0/bin/node',
1 verbose cli   '/Users/tbrown/.nvm/versions/node/v6.9.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/tbrown/Desktop/react-trello-board-master/node_modules/.bin:/Users/tbrown/.rvm/gems/ruby-2.3.0/bin:/Users/tbrown/.rvm/gems/ruby-2.3.0@global/bin:/Users/tbrown/.rvm/rubies/ruby-2.3.0/bin:/Users/tbrown/.nvm/versions/node/v6.9.0/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin:/usr/X11/bin:/Users/tbrown/.rvm/bin
10 verbose lifecycle [email protected]~build: CWD: /Users/tbrown/Desktop/react-trello-board-master
11 silly lifecycle [email protected]~build: Args: [ '-c',
11 silly lifecycle   'cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors' ]
12 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/Users/tbrown/.nvm/versions/node/v6.9.0/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/tbrown/Desktop/react-trello-board-master
17 error Darwin 15.6.0
18 error argv "/Users/tbrown/.nvm/versions/node/v6.9.0/bin/node" "/Users/tbrown/.nvm/versions/node/v6.9.0/bin/npm" "run" "build"
19 error node v6.9.0
20 error npm  v3.10.9
21 error code ELIFECYCLE
22 error [email protected] build: `cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors`
22 error Exit status 1
23 error Failed at the [email protected] build script 'cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the React_trello_board package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     cross-env NODE_ENV=production webpack --config webpack.config.production.babel.js --progress --profile --colors
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs React_trello_board
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls React_trello_board
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

npm install freeze

I am using node 6.2.1 and i run :

npm install

I got this error :

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/me/.nvm/versions/node/v6.2.1/bin/node" "/Users/me/.nvm/versions/node/v6.2.1/bin/npm" "install"
npm ERR! node v6.2.1
npm ERR! npm v3.9.3

npm ERR! shasum check failed for /var/folders/4s/ch8k_58x04l59gv_p4jfq6lr0000gn/T/npm-64010-6518f751/registry.npmjs.org/faker/-/faker-3.1.0.tgz
npm ERR! Expected: 0f908faf4e6ec02524e54a57e432c5c013e08c9f
npm ERR! Actual: 9a1c6654a6465ebddda9a56cc10ef4fc8c9cdf2c
npm ERR! From: https://registry.npmjs.org/faker/-/faker-3.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/me/workspace/react-trello-board/npm-debug.lo

I upgrade node to 6.7.0 :

nvm install 6.7.0

I run again πŸ‘

npm install --verbose

The process is frozen , and the last console message is :

npm verb correctMkdir /Users/me/.npm correctMkdir not in flight; initializing
npm verb afterAdd /Users/me/.npm/react-dom/15.2.1/package/package.json written
βΈ¨ β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘βΈ© β § fetchMetadata: verb afterAdd /Users/me/.npm/react-dom/15.2.

Changing data on card

If you would write a new reducer that would change the card

EXAMPLE:

    case CHANGE_CARD: {
      const newLists = [...state.lists];
      // First card in first row
      newLists[0].cards[0].title = "test";

      return state.withMutations((ctx) => {
        ctx.set('lists', newLists);
      });

This results in

  • The state updates
  • Board re-render with new props
  • CardsContainer re-render with new props
  • Cards re-render with new props

But here is the error, when debugging the code in the Render function in Cards, the CardList array is updated and if you look at the CardList data the props have the new title as "test" BUT DraggableCard does NOT re-render.

But as soon as you move the card by dragging, then the re-render of DraggableCard works and the correct title "test" is rendered.

image

Expose library as npm module

Hey! First of all thank you for the amazing project! I would like to know why you don't expose this library as a npm module. Would you mind to do it?

Doesnt work on mobile

I am amazed how many solutions are out there but for real none of them work on mobile. Please be the first supporting mobile devices with touch input.

Hold to drag on mobile & click on desktop
This way scrolling is still accesibble just like on trello.

incorrect nextY

nextY is sometimes 1,2 or 3 instead of 0 when moving to an empty list; consistently reproducible if you drop card towards lower end of the empty list.

Licence is not defined

I was looking into package.json, but did not find any hint about the license.

Can you clearify that, and even add this info into github project settings.

... and by-the-way, great stuff! Thx.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.