Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create generic Table component #1442

Open
catarak opened this issue May 28, 2020 · 9 comments · May be fixed by #2376 or #2382
Open

Create generic Table component #1442

catarak opened this issue May 28, 2020 · 9 comments · May be fixed by #2376 or #2382

Comments

@catarak
Copy link
Member

catarak commented May 28, 2020

Nature of issue?

  • Existing feature enhancement

Feature enhancement details:

As reported in #1424.

The Sketch List and Collection List components have the ability to sort their columns (name, date created, etc.). The Asset List should have the ability to sort by name-, size- and sketch-.

This also brings up a bigger issue... which is should these three components be integrated into a Table component? With a search bar and sortable columns? Should their state be stored in React and removed from Redux?

@andrewn
Copy link
Member

andrewn commented May 28, 2020

I think there definitely should be a single Table component that we can use for all these.

I think we should move the search and sorting state into the component itself (using React state) and not Redux. If I recall, we reset the sortable state in redux whenever the component mounts anyway, so having it there doesn't offer many benefits.

Maybe this is a good candidate for the next component in the component library?

@catarak
Copy link
Member Author

catarak commented May 28, 2020

Maybe this is a good candidate for the next component in the component library?

Great idea 😸

@andrewn andrewn self-assigned this May 28, 2020
@catarak catarak changed the title Add sorting columns to Asset List Create generic Table component Feb 11, 2021
@sagar-joshi
Copy link
Contributor

if @andrewn is no longer working on this then I'd like to work on this @catarak

@sagar-joshi
Copy link
Contributor

sagar-joshi commented Feb 16, 2021

Can react-table package be used for creating a Table component instead of creating from scratch? https://github.com/tannerlinsley/react-table

react-table Overview: https://react-table.tanstack.com/docs/overview

@andrewn
Copy link
Member

andrewn commented Feb 17, 2021

Hi @sagar-joshi, it's cool that you'd like to work on this!

My approach to this woud be:

  • find all the existing tables in the editor and figure out common features and styling (sorting, table headings, accessibility props)
  • create Storybook stories (example) for a generic table component
  • replace existing tables in editor with new generic component

I like the look of react-table but we should be mindful of adding to the bundle size and another library that we need to learn. Can we first try moving around the existing code into shared components to achieve the same functionality?

Happy to help work through this more if you think it's helpful. :-)

@sagar-joshi
Copy link
Contributor

sagar-joshi commented Feb 17, 2021

@andrewn thank you for suggesting the approach.

we should be mindful of adding to the bundle size and another library that we need to learn. Can we first try moving around the existing code into shared components to achieve the same functionality?

Okay, I will start by looking for common features.
:)

@sagar-joshi
Copy link
Contributor

I was able to test CollectionList and SketchList but while trying to test AssetList when I click on the Assets tab, I get the below error at line:

apiClient
      .get('/S3/objects')

in actions/assets.js

UnknownEndpoint: Inaccessible host: s3.'. This service may not be available in the ' region.
at Request.ENOTFOUND_ERROR (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/event_listeners.js:495:46)
at Request.callListeners (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/sequential_executor.js:106:20)
at Request.emit (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/sequential_executor.js:78:10)
at Request.emit (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/request.js:683:14)
at ClientRequest.error (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/event_listeners.js:333:22)
at ClientRequest. (/home/sagar/Desktop/processing/p5.js-web-editor/node_modules/@auth0/s3/node_modules/aws-sdk/lib/http/node.js:96:19)
at ClientRequest.emit (events.js:314:20)
at ClientRequest.EventEmitter.emit (domain.js:483:12)
at TLSSocket.socketErrorListener (_http_client.js:427:9)
at TLSSocket.emit (events.js:314:20)
at TLSSocket.EventEmitter.emit (domain.js:483:12)
at emitErrorNT (internal/streams/destroy.js:92:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
at processTicksAndRejections (internal/process/task_queues.js:84:21)

{
 code: 'UnknownEndpoint',
 region: '<your-aws-region>',
 hostname: 's3.',
 retryable: true,
 originalError: Error: getaddrinfo ENOTFOUND s3.
     at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26) {
   errno: 'ENOTFOUND',
   code: 'NetworkingError',
   syscall: 'getaddrinfo',
   hostname: 's3.',
   region: '<your-aws-region>',
   retryable: true,
   time: 2021-02-24T12:40:03.282Z
 },
 time: 2021-02-24T12:40:03.463Z
}

[nodemon] app crashed - waiting for file changes before starting...

Do I need to have aws s3 bucket to test AssetList?
Or is this error due to some other reason, because (I am not sure but ) I remember it did not used to crash earlier when I had not uploaded anything in the assets. After uploading some assets, and then clicking on assets, loading graphics appear for some time and then the app crashes and No Uploaded Assets appears on the screen.

@catarak
Copy link
Member Author

catarak commented Mar 10, 2021

Do I need to have aws s3 bucket to test AssetList?

@sagar-joshi you do! you can follow this guide: https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/installation.md#s3-bucket-configuration

@ATHARVA-GAWAS
Copy link

@andrewn Hello , i am new here, how can i contribute to this issue since i need more clarity about this issue. Would appreciate your help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment