The following components are migrated to apollo hooks instead of deprecated <Query> and <Mutation> components:
- AddUserRow.js - AlbumGallery.js - UserRow.js LazyPhoto is migrated to functional component
This commit is contained in:
parent
d5e21f6a5e
commit
a0f7b4b135
|
@ -1,7 +1,6 @@
|
|||
import { gql } from '@apollo/client'
|
||||
import { gql, useMutation } from '@apollo/client'
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { useState } from 'react'
|
||||
import { Mutation } from '@apollo/client'
|
||||
import { Button, Checkbox, Input, Table } from 'semantic-ui-react'
|
||||
|
||||
const createUserMutation = gql`
|
||||
|
@ -28,6 +27,12 @@ const initialState = {
|
|||
const AddUserRow = ({ setShow, show, onUserAdded }) => {
|
||||
const [state, setState] = useState(initialState)
|
||||
|
||||
const [createUser, { loading }] = useMutation(createUserMutation, {
|
||||
onCompleted: () => {
|
||||
onUserAdded()
|
||||
},
|
||||
})
|
||||
|
||||
function updateInput(event, key) {
|
||||
setState({
|
||||
...state,
|
||||
|
@ -40,13 +45,6 @@ const AddUserRow = ({ setShow, show, onUserAdded }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Mutation
|
||||
mutation={createUserMutation}
|
||||
onCompleted={() => {
|
||||
onUserAdded()
|
||||
}}
|
||||
>
|
||||
{(createUser, { loading }) => (
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Input
|
||||
|
@ -100,8 +98,6 @@ const AddUserRow = ({ setShow, show, onUserAdded }) => {
|
|||
</Button.Group>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)}
|
||||
</Mutation>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import React, { useState } from 'react'
|
||||
import { Mutation } from '@apollo/client/react/components'
|
||||
import { gql } from '@apollo/client'
|
||||
import { gql, useMutation } from '@apollo/client'
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
|
@ -61,14 +60,13 @@ const scanUserMutation = gql`
|
|||
const ChangePasswordModal = ({ onClose, user, ...props }) => {
|
||||
const [passwordInput, setPasswordInput] = useState('')
|
||||
|
||||
return (
|
||||
<Mutation
|
||||
mutation={changeUserPasswordMutation}
|
||||
onCompleted={() => {
|
||||
const [changePassword] = useMutation(changeUserPasswordMutation, {
|
||||
onCompleted: () => {
|
||||
onClose && onClose()
|
||||
}}
|
||||
>
|
||||
{changePassword => (
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Modal {...props}>
|
||||
<Modal.Header>Change password</Modal.Header>
|
||||
<Modal.Content>
|
||||
|
@ -103,8 +101,6 @@ const ChangePasswordModal = ({ onClose, user, ...props }) => {
|
|||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
)}
|
||||
</Mutation>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -119,7 +115,7 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
editing: false,
|
||||
})
|
||||
|
||||
const [showComfirmDelete, setConfirmDelete] = useState(false)
|
||||
const [showConfirmDelete, setConfirmDelete] = useState(false)
|
||||
const [showChangePassword, setChangePassword] = useState(false)
|
||||
|
||||
function updateInput(event, key) {
|
||||
|
@ -129,19 +125,33 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
})
|
||||
}
|
||||
|
||||
if (state.editing) {
|
||||
return (
|
||||
<Mutation
|
||||
mutation={updateUserMutation}
|
||||
onCompleted={data => {
|
||||
const [updateUser, { loading: updateUserLoading }] = useMutation(
|
||||
updateUserMutation,
|
||||
{
|
||||
onCompleted: data => {
|
||||
setState({
|
||||
...data.updateUser,
|
||||
editing: false,
|
||||
})
|
||||
refetchUsers()
|
||||
}}
|
||||
>
|
||||
{(updateUser, { loading }) => (
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const [deleteUser] = useMutation(deleteUserMutation, {
|
||||
onCompleted: () => {
|
||||
refetchUsers()
|
||||
},
|
||||
})
|
||||
|
||||
const [scanUser, { called: scanUserCalled }] = useMutation(scanUserMutation, {
|
||||
onCompleted: () => {
|
||||
refetchUsers()
|
||||
},
|
||||
})
|
||||
|
||||
if (state.editing) {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Input
|
||||
|
@ -184,8 +194,8 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
loading={updateUserLoading}
|
||||
disabled={updateUserLoading}
|
||||
positive
|
||||
onClick={() =>
|
||||
updateUser({
|
||||
|
@ -203,19 +213,10 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
</Button.Group>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)}
|
||||
</Mutation>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Mutation
|
||||
mutation={deleteUserMutation}
|
||||
onCompleted={() => {
|
||||
refetchUsers()
|
||||
}}
|
||||
>
|
||||
{deleteUser => (
|
||||
<Table.Row>
|
||||
<Table.Cell>{user.username}</Table.Cell>
|
||||
<Table.Cell>{user.rootPath}</Table.Cell>
|
||||
|
@ -232,17 +233,13 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
<Icon name="edit" />
|
||||
Edit
|
||||
</Button>
|
||||
<Mutation mutation={scanUserMutation}>
|
||||
{(scanUser, { called }) => (
|
||||
<Button
|
||||
disabled={called}
|
||||
disabled={scanUserCalled}
|
||||
onClick={() => scanUser({ variables: { userId: user.id } })}
|
||||
>
|
||||
<Icon name="sync" />
|
||||
Scan
|
||||
</Button>
|
||||
)}
|
||||
</Mutation>
|
||||
<Button onClick={() => setChangePassword(true)}>
|
||||
<Icon name="key" />
|
||||
Change password
|
||||
|
@ -261,7 +258,7 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
<Icon name="delete" />
|
||||
Delete
|
||||
</Button>
|
||||
<Modal open={showComfirmDelete}>
|
||||
<Modal open={showConfirmDelete}>
|
||||
<Modal.Header>Delete user</Modal.Header>
|
||||
<Modal.Content>
|
||||
<p>
|
||||
|
@ -271,9 +268,7 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
<p>{`This action cannot be undone`}</p>
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button onClick={() => setConfirmDelete(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => setConfirmDelete(false)}>Cancel</Button>
|
||||
<Button
|
||||
negative
|
||||
onClick={() => {
|
||||
|
@ -292,8 +287,6 @@ const UserRow = ({ user, refetchUsers }) => {
|
|||
</Button.Group>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)}
|
||||
</Mutation>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -56,10 +56,8 @@ const AlbumGallery = ({
|
|||
|
||||
useEffect(() => {
|
||||
const updateImageState = event => {
|
||||
if (event.state.imageState) {
|
||||
setImageState(event.state.imageState)
|
||||
}
|
||||
}
|
||||
window.addEventListener('popstate', updateImageState)
|
||||
|
||||
return () => {
|
||||
|
|
|
@ -49,19 +49,16 @@ const PhotoImg = photoProps => {
|
|||
)
|
||||
}
|
||||
|
||||
class LazyPhoto extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return nextProps.src != this.props.src
|
||||
}
|
||||
|
||||
render() {
|
||||
const LazyPhoto = React.memo(
|
||||
props => {
|
||||
return (
|
||||
<LazyLoad scrollContainer="#layout-content">
|
||||
<PhotoImg {...this.props} />
|
||||
<PhotoImg {...props} />
|
||||
</LazyLoad>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
(prevProps, nextProps) => prevProps.src === nextProps.src
|
||||
)
|
||||
|
||||
LazyPhoto.propTypes = {
|
||||
src: PropTypes.string,
|
||||
|
|
Loading…
Reference in New Issue