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.

Sign up for GitHub

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

Refactor/use redux hooks #1891

Merged
merged 4 commits into from
Feb 20, 2024
Merged

Refactor/use redux hooks #1891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d52995
use redux hooks
kalitopix Jan 30, 2024
769d6a2
fix test
kalitopix Jan 31, 2024
80c9c9d
update pr
kalitopix Feb 2, 2024
f3c80e0
remove commented lines
kalitopix Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions coinstac-docs/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable import/no-unresolved */
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

Expand Down
54 changes: 19 additions & 35 deletions packages/coinstac-desktop-app/app/render/components/admin/permissions/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { graphql, withApollo } from '@apollo/react-hoc';
import Checkbox from '@material-ui/core/Checkbox';
import CircularProgress from '@material-ui/core/CircularProgress';
import { withStyles } from '@material-ui/core/styles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
Expand All @@ -10,7 +10,7 @@ import TableRow from '@material-ui/core/TableRow';
import { flowRight as compose, get } from 'lodash';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import MemberAvatar from '../../common/member-avatar';
import { logout } from '../../../state/ducks/auth';
import { notifyError } from '../../../state/ducks/notifyAndLog';
Expand All @@ -26,29 +26,32 @@ import {
} from '../../../state/graphql/props';
import { getGraphQLErrorMessage } from '../../../utils/helpers';

const styles = () => ({
const useStyles = makeStyles(() => ({
avatarWrapper: {
display: 'flex',
alignItems: 'center',
},
checkbox: {
padding: 0,
},
});

function Permission(props, context) {
const {
currentUser,
users,
classes,
subscribeToUsers,
} = props;
}));

function Permission({
users,
addUserRole,
removeUserRole,
subscribeToUsers,
}, { router }) {
const currentUser = useSelector(state => state.auth.user);
const dispatch = useDispatch();

const [isUpdating, setIsUpdating] = useState();
const [userId, setUserId] = useState(null);
const [role, setRole] = useState(null);

const classes = useStyles();

useEffect(() => {
const { router } = context;
let unsubscribeUsers;

if (!get(currentUser, 'permissions.roles.admin')) {
Expand All @@ -66,19 +69,13 @@ function Permission(props, context) {


const logoutUser = () => {
const { logout } = props;
const { router } = context;

logout()
dispatch(logout())
.then(() => {
router.push('/login');
});
};

const toggleUserAppRole = (userId, checked, role) => {
const {
currentUser, addUserRole, removeUserRole, notifyError,
} = props;
const mutation = checked ? addUserRole : removeUserRole;

setIsUpdating(true);
Expand All @@ -92,7 +89,7 @@ function Permission(props, context) {
}
})
.catch((error) => {
notifyError(getGraphQLErrorMessage(error));
dispatch(notifyError(getGraphQLErrorMessage(error)));
})
.finally(() => {
setIsUpdating(false);
Expand Down Expand Up @@ -173,13 +170,9 @@ Permission.contextTypes = {
};

Permission.propTypes = {
currentUser: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
users: PropTypes.array,
addUserRole: PropTypes.func.isRequired,
removeUserRole: PropTypes.func.isRequired,
logout: PropTypes.func.isRequired,
notifyError: PropTypes.func.isRequired,
subscribeToUsers: PropTypes.func.isRequired,
};

Expand All @@ -200,13 +193,4 @@ const PermissionWithData = compose(
withApollo
)(Permission);

const mapStateToProps = ({ auth }) => ({
currentUser: auth.user,
});

const connectedComponent = connect(mapStateToProps, {
logout,
notifyError,
})(PermissionWithData);

export default withStyles(styles, { withTheme: true })(connectedComponent);
export default PermissionWithData;
97 changes: 40 additions & 57 deletions packages/coinstac-desktop-app/app/render/components/admin/pipeline-states/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { useLazyQuery, useMutation } from '@apollo/client';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Button, Card } from '@material-ui/core';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import ReactJson from 'react-json-view';
import { connect } from 'react-redux';
import { useSelector } from 'react-redux';
import { GET_PIPELINES_QUERY, STOP_RUN_MUTATION } from '../../../state/graphql/functions';

const styles = () => ({
const useStyles = makeStyles(() => ({
pipelineCard: {
padding: 10,
},
Expand All @@ -19,23 +19,23 @@ const styles = () => ({
jsonContainer: {
paddingTop: 10,
},
});
}));

const PipelineStates = (_, { router }) => {
const user = useSelector(state => state.auth.user);

const classes = useStyles();

const PipelineStates = ({ classes, user }, { router }) => {
useEffect(() => {
if (!get(user, 'permissions.roles.admin')) {
router.push('/');
}
}, []);


const [getPipelines, { data, loading }] = useLazyQuery(GET_PIPELINES_QUERY, { fetchPolicy: 'network-only' });
const [stopRun] = useMutation(STOP_RUN_MUTATION);

const pipelinesData = data
&& data.getPipelines
&& data.getPipelines.info
? JSON.parse(data.getPipelines.info) : {};
const pipelinesData = data?.getPipelines?.info ? JSON.parse(data.getPipelines.info) : {};

const { activePipelines } = pipelinesData;

Expand All @@ -48,39 +48,35 @@ const PipelineStates = ({ classes, user }, { router }) => {
</Button>
{loading && 'loading'}
</Card>
{activePipelines
&& Object.keys(activePipelines).map((pipelineId) => {
return (
<Card
className={classes.pipelineCard}
key={pipelineId}
>
<Typography variant="h5" className={classes.pageTitle}>
{pipelineId}
</Typography>
<Button
variant="contained"
color="secondary"
onClick={() => { stopRun({ variables: { runId: pipelineId } }); }}
>
Stop Run
</Button>
<div
className={classes.jsonContainer}
>
<ReactJson
src={activePipelines[pipelineId]}
theme="monokai"
displayDataTypes={false}
displayObjectSize={false}
enableClipboard={false}
collapsed
/>
</div>
</Card>
);
})
}
{activePipelines && Object.keys(activePipelines).map(pipelineId => (
<Card
className={classes.pipelineCard}
key={pipelineId}
>
<Typography variant="h5" className={classes.pageTitle}>
{pipelineId}
</Typography>
<Button
variant="contained"
color="secondary"
onClick={() => { stopRun({ variables: { runId: pipelineId } }); }}
>
Stop Run
</Button>
<div
className={classes.jsonContainer}
>
<ReactJson
src={activePipelines[pipelineId]}
theme="monokai"
displayDataTypes={false}
displayObjectSize={false}
enableClipboard={false}
collapsed
/>
</div>
</Card>
))}
</>
);
};
Expand All @@ -89,17 +85,4 @@ PipelineStates.contextTypes = {
router: PropTypes.object.isRequired,
};


PipelineStates.propTypes = {
classes: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
};

const mapStateToProps = ({ auth, runs }) => ({
runs: runs.runs,
user: auth.user,
});

const connectedComponent = connect(mapStateToProps)(PipelineStates);

export default withStyles(styles, { withTheme: true })(connectedComponent);
export default PipelineStates;
47 changes: 14 additions & 33 deletions packages/coinstac-desktop-app/app/render/components/admin/user-accounts/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,16 @@ import { useMutation } from '@apollo/client';
import { flowRight as compose, get, omit } from 'lodash';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import MemberAvatar from '../../common/member-avatar';
import { notifySuccess, notifyError } from '../../../state/ducks/notifyAndLog';
import {
FETCH_ALL_USERS_QUERY,
USER_CHANGED_SUBSCRIPTION,
ADD_USER_ROLE_MUTATION,
REMOVE_USER_ROLE_MUTATION,
DELETE_USER_MUTATION,
SAVE_USER_MUTATION,
} from '../../../state/graphql/functions';
import {
getAllAndSubProp,
userRolesProp,
} from '../../../state/graphql/props';
import { getAllAndSubProp } from '../../../state/graphql/props';
import ListDeleteModal from '../../common/list-delete-modal';
import UserModal from './user-modal';

Expand All @@ -42,13 +37,13 @@ const useStyles = makeStyles(() => ({
},
}));

function UserAccounts(props, context) {
const {
currentUser,
users,
notifyError,
subscribeToUsers,
} = props;
function UserAccounts({
users,
subscribeToUsers,
}, { router }) {
const currentUser = useSelector(state => state.auth.user);
const dispatch = useDispatch();

const classes = useStyles();

const [userToSave, setUserToSave] = useState(null);
Expand All @@ -58,7 +53,6 @@ function UserAccounts(props, context) {
const [saveUser] = useMutation(SAVE_USER_MUTATION);

useEffect(() => {
const { router } = context;
let unsubscribeUsers;

if (!get(currentUser, 'permissions.roles.admin')) {
Expand Down Expand Up @@ -90,10 +84,10 @@ function UserAccounts(props, context) {
saveUser({ variables })
.then(() => {
setUserToSave(null);
notifySuccess(`User ${variables.userId ? 'created' : 'updated'} successfully`);
dispatch(notifySuccess(`User ${variables.userId ? 'created' : 'updated'} successfully`));
})
.catch((e) => {
notifyError(e.message);
dispatch(notifyError(e.message));
});
};

Expand All @@ -103,9 +97,9 @@ function UserAccounts(props, context) {
deleteUser({ variables })
.then(() => {
setUserToDelete(null);
notifySuccess('Deleted user successfully');
dispatch(notifySuccess('Deleted user successfully'));
}).catch((e) => {
notifyError(e.message);
dispatch(notifyError(e.message));
});
};

Expand Down Expand Up @@ -202,11 +196,7 @@ UserAccounts.contextTypes = {
};

UserAccounts.propTypes = {
currentUser: PropTypes.object.isRequired,
users: PropTypes.array,
addUserRole: PropTypes.func.isRequired,
removeUserRole: PropTypes.func.isRequired,
notifyError: PropTypes.func.isRequired,
subscribeToUsers: PropTypes.func.isRequired,
};

Expand All @@ -222,16 +212,7 @@ const PermissionWithData = compose(
'subscribeToUsers',
'userChanged'
)),
graphql(ADD_USER_ROLE_MUTATION, userRolesProp('addUserRole')),
graphql(REMOVE_USER_ROLE_MUTATION, userRolesProp('removeUserRole')),
withApollo
)(UserAccounts);

const mapStateToProps = ({ auth }) => ({
currentUser: auth.user,
});

export default connect(mapStateToProps, {
notifySuccess,
notifyError,
})(PermissionWithData);
export default PermissionWithData;
4 changes: 2 additions & 2 deletions packages/coinstac-desktop-app/app/render/components/common/error-dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ function ErrorDialog({
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{ title }</DialogTitle>
<DialogTitle id="alert-dialog-title">{title}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{ message }
{message}
</DialogContentText>
</DialogContent>
<DialogActions>
Expand Down
Loading