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

ui/src/Pages/SettingsPage/AddUserRow.js

@@ -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>
   )
 }
 

ui/src/Pages/SettingsPage/UserRow.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Mutation } from '@apollo/client/react/components'
+import { gql, useMutation } from '@apollo/client'
-import { gql } from '@apollo/client'
 import {
   Button,
   Checkbox,
@@ -61,14 +60,13 @@ const scanUserMutation = gql`
 const ChangePasswordModal = ({ onClose, user, ...props }) => {
   const [passwordInput, setPasswordInput] = useState('')
 
-  return (
+  const [changePassword] = useMutation(changeUserPasswordMutation, {
-    <Mutation
+    onCompleted: () => {
-      mutation={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) {
+  const [updateUser, { loading: updateUserLoading }] = useMutation(
-    return (
+    updateUserMutation,
-      <Mutation
+    {
-        mutation={updateUserMutation}
+      onCompleted: data => {
-        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}
+              loading={updateUserLoading}
-                  disabled={loading}
+              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)}>
+              <Button onClick={() => setConfirmDelete(false)}>Cancel</Button>
-                    Cancel
-                  </Button>
               <Button
                 negative
                 onClick={() => {
@@ -292,8 +287,6 @@ const UserRow = ({ user, refetchUsers }) => {
         </Button.Group>
       </Table.Cell>
     </Table.Row>
-      )}
-    </Mutation>
   )
 }
 

ui/src/components/albumGallery/AlbumGallery.js

@@ -56,10 +56,8 @@ const AlbumGallery = ({
 
   useEffect(() => {
     const updateImageState = event => {
-      if (event.state.imageState) {
       setImageState(event.state.imageState)
     }
-    }
     window.addEventListener('popstate', updateImageState)
 
     return () => {

ui/src/components/photoGallery/MediaThumbnail.js

@@ -49,19 +49,16 @@ const PhotoImg = photoProps => {
   )
 }
 
-class LazyPhoto extends React.Component {
+const LazyPhoto = React.memo(
-  shouldComponentUpdate(nextProps) {
+  props => {
-    return nextProps.src != this.props.src
-  }
-
-  render() {
     return (
       <LazyLoad scrollContainer="#layout-content">
-        <PhotoImg {...this.props} />
+        <PhotoImg {...props} />
       </LazyLoad>
     )
-  }
+  },
-}
+  (prevProps, nextProps) => prevProps.src === nextProps.src
+)
 
 LazyPhoto.propTypes = {
   src: PropTypes.string,