Create generic Table component

[catarak]

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]

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]

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

Great idea 😸

[sagar-joshi]

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

[sagar-joshi]

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]

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]

@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]

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.