Use redux-form in my account view

Feature #14452

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>

diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts
index 1f3bd93fbae297f3461a1a7393280b7df80f9baa..400866e3e0183945cbf9656d17f155050377a800 100644 (file)
--- a/src/routes/route-change-handlers.ts
+++ b/src/routes/route-change-handlers.ts
@@ -4,10 +4,8 @@
 
 import { History, Location } from 'history';
 import { RootStore } from '~/store/store';
-import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute, matchSharedWithMeRoute, matchRunProcessRoute, matchWorkflowRoute, matchSearchResultsRoute, matchSshKeysRoute, matchRepositoriesRoute, matchMyAccountRoute } from './routes';
-import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog, loadSshKeys, loadRepositories, loadMyAccount } from '~/store/workbench/workbench-actions';
-import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute, matchSharedWithMeRoute, matchRunProcessRoute, matchWorkflowRoute, matchSearchResultsRoute, matchSshKeysRoute, matchRepositoriesRoute, matchVirtualMachineRoute } from './routes';
-import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog, loadSshKeys, loadRepositories, loadVirtualMachines } from '~/store/workbench/workbench-actions';
+import { matchProcessRoute, matchProcessLogRoute, matchProjectRoute, matchCollectionRoute, matchFavoritesRoute, matchTrashRoute, matchRootRoute, matchSharedWithMeRoute, matchRunProcessRoute, matchWorkflowRoute, matchSearchResultsRoute, matchSshKeysRoute, matchRepositoriesRoute, matchMyAccountRoute, matchVirtualMachineRoute } from './routes';
+import { loadProject, loadCollection, loadFavorites, loadTrash, loadProcess, loadProcessLog, loadSshKeys, loadRepositories, loadMyAccount, loadVirtualMachines } from '~/store/workbench/workbench-actions';
 import { navigateToRootProject } from '~/store/navigation/navigation-action';
 import { loadSharedWithMe, loadRunProcess, loadWorkflow, loadSearchResults } from '~//store/workbench/workbench-actions';
 

diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx
index c12f01aaeafd67d5a9e029686ad8779cf3fa0f7e..45875770aeee6ed9a9c6ecdc56ed7a96d59f914a 100644 (file)
--- a/src/views/my-account-panel/my-account-panel-root.tsx
+++ b/src/views/my-account-panel/my-account-panel-root.tsx
@@ -3,7 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, TextField, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
+import { Field, InjectedFormProps } from "redux-form";
+import { TextField } from "~/components/text-field/text-field";
+import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { User } from "~/models/user";
 
@@ -15,7 +17,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         overflow: 'auto'
     },
     gridItem: {
-        minHeight: 45,
+        height: 45,
         marginBottom: 20
     },
     title: {
@@ -30,7 +32,9 @@ export interface MyAccountPanelRootDataProps {
     user?: User;
 }
 
-type MyAccountPanelRootProps = MyAccountPanelRootActionProps & MyAccountPanelRootDataProps & WithStyles<CssRules>;
+export const MY_ACCOUNT_FORM = 'myAccountForm';
+
+type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
 
 export const MyAccountPanelRoot = withStyles(styles)(
     ({ classes, user }: MyAccountPanelRootProps) => {
@@ -41,75 +45,75 @@ export const MyAccountPanelRoot = withStyles(styles)(
                 <Grid container direction="row" spacing={24}>
                     <Grid item xs={6}>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="E-mail"
                                 name="email"
-                                fullWidth
+                                component={TextField}
                                 value={user!.email}
                                 disabled
                             />
                         </Grid>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="First name"
                                 name="firstName"
-                                fullWidth
+                                component={TextField}
                                 value={user!.firstName}
                                 disabled
                             />
                         </Grid>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="Identity URL"
                                 name="identityUrl"
-                                fullWidth
+                                component={TextField}
                                 value={user!.identityUrl}
                                 disabled
                             />
                         </Grid>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="Organization"
                                 name="organization"
                                 value={user!.prefs.profile!.organization}
-                                fullWidth
+                                component={TextField}
                             />
                         </Grid>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="Website"
                                 name="website"
                                 value={user!.prefs.profile!.website_url}
-                                fullWidth
+                                component={TextField}
                             />
                         </Grid>
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="Role"
                                 name="role"
                                 value={user!.prefs.profile!.role}
-                                fullWidth
+                                component={TextField}
                             />
                         </Grid>
                     </Grid>
                     <Grid item xs={6}>
                         <Grid item className={classes.gridItem} />
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="Last name"
                                 name="lastName"
-                                fullWidth
+                                component={TextField}
                                 value={user!.lastName}
                                 disabled
                             />
                         </Grid>
                         <Grid item className={classes.gridItem} />
                         <Grid item className={classes.gridItem}>
-                            <TextField
+                            <Field
                                 label="E-mail at Organization"
                                 name="organizationEmail"
                                 value={user!.prefs.profile!.organization_email}
-                                fullWidth
+                                component={TextField}
                             />
                         </Grid>
                     </Grid>

diff --git a/src/views/my-account-panel/my-account-panel.tsx b/src/views/my-account-panel/my-account-panel.tsx
index 508a4c7ecea3a4686b90f373fc92cf6971020df6..adc2f6947be159c27ca2343edbdb5219cbc31be3 100644 (file)
--- a/src/views/my-account-panel/my-account-panel.tsx
+++ b/src/views/my-account-panel/my-account-panel.tsx
@@ -3,9 +3,10 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { RootState } from '~/store/store';
-import { Dispatch } from 'redux';
+import { Dispatch, compose } from 'redux';
+import { reduxForm, reset } from 'redux-form';
 import { connect } from 'react-redux';
-import { MyAccountPanelRoot, MyAccountPanelRootDataProps, MyAccountPanelRootActionProps } from '~/views/my-account-panel/my-account-panel-root';
+import { MyAccountPanelRoot, MyAccountPanelRootDataProps, MyAccountPanelRootActionProps, MY_ACCOUNT_FORM } from '~/views/my-account-panel/my-account-panel-root';
 
 const mapStateToProps = (state: RootState): MyAccountPanelRootDataProps => ({
     user: state.auth.user
@@ -15,4 +16,10 @@ const mapDispatchToProps = (dispatch: Dispatch): MyAccountPanelRootActionProps =
 
 });
 
-export const MyAccountPanel = connect(mapStateToProps, mapDispatchToProps)(MyAccountPanelRoot);
\ No newline at end of file
+export const MyAccountPanel = compose(connect(mapStateToProps, mapDispatchToProps), reduxForm({
+    form: MY_ACCOUNT_FORM,
+    onSubmit: (data, dispatch) => {
+        // dispatch(moveProject(data));
+
+    }
+}))(MyAccountPanelRoot);
\ No newline at end of file