React-admin: use useStyles instead of withStyles in next

[fzaninotto]

Material-ui v4 promotes the usage of hooks instead of HOCs to apply CSS styles to a component. The current code base still uses a lot of withStyles in next. If you feel like contributing, an easy task is to convert these components to useStyles.

We need your help! Check out #3328 for an example.

• [ ] examples/demo/src/layout/Login.js
• [ ] ra-input-rich-text/src/index.js
• [x] ra-tree-ui-materialui/src/DragLayer.js
• [x] ra-tree-ui-materialui/src/DragPreview.js
• [x] ra-tree-ui-materialui/src/NodeActions.js
• [x] ra-tree-ui-materialui/src/NodeForm.js
• [x] ra-tree-ui-materialui/src/NodeView.js
• [x] ra-tree-ui-materialui/src/RootDropTarget.js
• [x] ra-tree-ui-materialui/src/Tree.js
• [x] ra-tree-ui-materialui/src/TreeNode.js
• [ ] ra-ui-materialui/src/Link.tsx
• [x] ra-ui-materialui/src/auth/Login.tsx
• [x] ra-ui-materialui/src/auth/LoginForm.tsx
• [x] ra-ui-materialui/src/button/CreateButton.js
• [x] ra-ui-materialui/src/button/SaveButton.js
• [x] ra-ui-materialui/src/field/BooleanField.tsx
• [x] ra-ui-materialui/src/field/ChipField.tsx
• [x] ra-ui-materialui/src/field/FileField.tsx
• [x] ra-ui-materialui/src/field/ImageField.tsx
• [x] ra-ui-materialui/src/form/FormInput.js
• [ ] ra-ui-materialui/src/form/SimpleFormIterator.js
• [x] ra-ui-materialui/src/form/TabbedForm.js
• [x] ra-ui-materialui/src/form/Toolbar.js
• [ ] ra-ui-materialui/src/input/AutocompleteArrayInput.js
• [ ] ra-ui-materialui/src/input/AutocompleteArrayInputChip.js
• [x] ra-ui-materialui/src/input/AutocompleteInput.js
• [x] ra-ui-materialui/src/input/CheckboxGroupInput.js
• [x] ra-ui-materialui/src/input/FileInput.js
• [x] ra-ui-materialui/src/input/FileInputPreview.js
• [x] ra-ui-materialui/src/input/ImageInput.js
• [x] ra-ui-materialui/src/input/Labeled.js
• [x] ra-ui-materialui/src/input/NullableBooleanInput.js
• [x] ra-ui-materialui/src/input/RadioButtonGroupInput.js
• [x] ra-ui-materialui/src/input/ResettableTextField.js
• [x] ra-ui-materialui/src/input/SearchInput.js
• [x] ra-ui-materialui/src/input/SelectArrayInput.js
• [x] ra-ui-materialui/src/input/SelectInput.js
• [x] ra-ui-materialui/src/layout/AppBar.js
• [x] ra-ui-materialui/src/layout/CardContentInner.js
• [x] ra-ui-materialui/src/layout/Confirm.js
• [x] ra-ui-materialui/src/layout/Error.js
• [ ] ra-ui-materialui/src/layout/Layout.js (not possible because of componentDidCatch)
• [x] ra-ui-materialui/src/layout/LinearProgress.js
• [x] ra-ui-materialui/src/layout/Loading.js
• [x] ra-ui-materialui/src/layout/LoadingIndicator.js
• [x] ra-ui-materialui/src/layout/Menu.js
• [x] ra-ui-materialui/src/layout/MenuItemLink.js
• [x] ra-ui-materialui/src/layout/NotFound.js
• [x] ra-ui-materialui/src/layout/Notification.js
• [x] ra-ui-materialui/src/layout/Sidebar.js
• [x] ra-ui-materialui/src/list/BulkActions.js
• [x] ra-ui-materialui/src/list/BulkActionsToolbar.js
• [x] ra-ui-materialui/src/list/Datagrid.js
• [x] ra-ui-materialui/src/list/DatagridHeaderCell.js
• [x] ra-ui-materialui/src/list/DatagridLoading.js
• [ ] ra-ui-materialui/src/list/Filter.js
• [ ] ra-ui-materialui/src/list/FilterButton.js
• [x] ra-ui-materialui/src/list/FilterForm.js
• [x] ra-ui-materialui/src/list/PaginationActions.js
• [x] ra-ui-materialui/src/list/SimpleList.js
• [x] ra-ui-materialui/src/list/SingleFieldList.js

And then there is the doc:

• [x] CreateEdit.md
• [x] Fields.md
• [x] List.md
• [x] Theming.md
• [x] Tutorial.md

[MohammedFaragallah]

I'm gathering my courage to working on this as my first open source contribution
few quewstions

• most of these components are class based what should i do with that
• withWidth HOC will be deprecated should i update it with useMediaQuery

[fzaninotto]

• you should convert class components to function components. But Field and Input components are already functional components, you can start there.
• keep the withWidth HOC for now - I'm adding new helpers for width and responsive in another PR

[Kunnu01]

Is there anything I can help with or work on in this issue?

[Kmaschta]

Sure! Just open a PR like you did.
You can sync with @MohammedFaragallah who is already migrating some components, just to avoid conflicts.
Thanks for your help!

[Kunnu01]

@djhi @fzaninotto, in Layout component componentDidCatch is used and there is no hook corresponding to this for now. Any idea how to convert it to the functional component?

[djhi]

You can't, don't try to convert this one: it should not use makeStyles

[fzaninotto]

Thanks to the collective effort, there aren't many components left. We can close this issue.

Thank you all!