The ovc-users from boraoren

components / table / make the rows clickable

When a row is clicked, the website should show the link you give

implement on row click
row background color change when mouse over (#DCDCDC)
when mouse over on row change mouse icon to hand
remove cell component background color

views / user / list / row click to connect with user details reducer

css / components / text / improve

test / add default values for data-testids

css / components / table / improve

components / implement input search

For instance if "Lea" is entered, only the "Leanne Graham" row should show in the table.

renders correctly
has placeholder that is "Search By Name"

components / table / add more data to the users

{
name: "Leanne Graham",
email: "[email protected]",
city: "Gwenborough",
company: "Romaguera-Crona",
},
{
name: "Ervin Howell",
email: "[email protected]",
city: "Wisokyburgh",
company: "Deckow-Crist",
},
{
name: "Zebra Stripes",
email: "[email protected]",
city: "McKenziehaven",
company: "Romaguera-Jacobson",
}

components / cell / add children element

look for / https://github.com/testing-library/dom-testing-library/issues/639

components / table / hide id column title and cell text

routes / user / move application routes 'user related routes' to the user routes

views / user / improve package structure

views / user / list / add table component with header

views / user / list / fix should open given link when the row is clicked test case

● component › should open given link when the row is clicked

expect(received).toEqual(expected) // deep equality

Expected: "User Details"
Received: ""

<html>
  <head />
  <body>
    <div />
  </body>
</html>

  81 | 
  82 |             await waitFor(() => expect(document.title)
> 83 |                 .toEqual("User Details"));
     |                  ^
  84 | 
  85 |         });
  86 | 

  at src/views/User/components/list/UserList.test.tsx:83:18

components / header / implement

column titles by list of object keys
style display flex
content justification is space around

css / components / header / improve

api / user / list / implement

replace dummy users with list users api for user list component
add exception handling for api get user list

components / table / fix TableWithHeader test

FAIL src/components/table/TableWithHeader.test.tsx
● Console

console.error
  Warning: Each child in a list should have a unique "key" prop.
  
  Check the render method of `Table`. See https://reactjs.org/link/warning-keys for more information.
      at div
      at Table (/home/runner/work/ovc-users/ovc-users/src/components/table/index.tsx:36:9)

  41 | 
  42 |     return (
> 43 |         <>
     |         ^
  44 |             {header}
  45 | 
  46 |             {users.map(user =>

  at printWarning (node_modules/react/cjs/react-jsx-dev-runtime.development.js:117:30)
  at error (node_modules/react/cjs/react-jsx-dev-runtime.development.js:93:5)
  at validateExplicitKey (node_modules/react/cjs/react-jsx-dev-runtime.development.js:986:5)
  at validateChildKeys (node_modules/react/cjs/react-jsx-dev-runtime.development.js:1013:11)
  at jsxWithValidation (node_modules/react/cjs/react-jsx-dev-runtime.development.js:1174:15)
  at Table (src/components/table/index.tsx:43:9)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
  at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)

console.error
  Error: Uncaught [TypeError: Cannot read property 'map' of undefined]
      at reportException (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
      at innerInvokeEventListeners (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
      at invokeEventListeners (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: Cannot read property 'map' of undefined
      at Header (/home/runner/work/ovc-users/ovc-users/src/components/header/index.tsx:22:27)
      at renderWithHooks (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at HTMLUnknownElement.callCallback (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
      at invokeEventListeners (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (/home/runner/work/ovc-users/ovc-users/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at /home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at /home/runner/work/ovc-users/ovc-users/node_modules/@testing-library/react/dist/pure.js:98:25
      at batchedUpdates$1 (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (/home/runner/work/ovc-users/ovc-users/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at render (/home/runner/work/ovc-users/ovc-users/node_modules/@testing-library/react/dist/pure.js:94:26)
      at Object.<anonymous> (/home/runner/work/ovc-users/ovc-users/src/components/table/TableWithHeader.test.tsx:16:13)
      at Promise.then.completed (/home/runner/work/ovc-users/ovc-users/node_modules/jest-circus/build/utils.js:276:28)
      at new Promise (<anonymous>)

components / table / add key to the users.map to remove warning message

console.error
Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
at div

  41 | 
  42 |     return (
> 43 |         <>
     |         ^

components / table / add search by name capability

css / components / search / improve

css / components / cell / improve

models / user / add id

libraries / redux / configure

add redux related packages
configure root reducers template
configure redux store with thunk

views / user / list / add storybook

reducers / user / list / add search

list users which is searched by given name keyword
users not found by given name keyword

api / user / detail / implement

app / test / replace wait to testing library async utils waitFor

remove wait function and replace with waitFor async utility

components / table / implement

has text component
has cell component
has name type cell component, text component value is Leanne Graham
text component top 16
text component bottom 16
text component left 16

views / user / detail / implement

has table component with header component (column titles are title, body)

components / cell / implement

background : white
width : flex
height : 52
border bottom : 1
border bottom style : solid
border color : #D7D7D7

components / table / with header

for name
for name and email
add storybook knobs add-on to make user content dynamic

boraoren / ovc-users Goto Github PK

ovc-users's People

Contributors

Watchers

ovc-users's Issues

Recommend Projects

Recommend Topics

Recommend Org