Cleanup ui files

.dockerignore

@@ -1,6 +1,7 @@
 .git
 .gitignore
 .prettierrc
+.eslintcache
 .vscode
 .env
 example.env

.gitignore

@@ -30,6 +30,7 @@ yarn.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslintcache
 
 # vscode
 __debug_bin

ui/.eslintrc.json

@@ -18,7 +18,7 @@
   },
   "plugins": ["react", "react-hooks"],
   "rules": {
-    "no-unused-vars": "off",
+    "no-unused-vars": "warn",
     "react/display-name": "off"
   },
   "parser": "babel-eslint"

ui/package.json

@@ -34,7 +34,8 @@
   },
   "scripts": {
     "start": "parcel start src/index.html",
-    "build": "parcel build src/index.html --no-source-maps"
+    "build": "parcel build src/index.html --no-source-maps",
+    "test": "eslint ./src --max-warnings 0 --cache"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -90,10 +91,8 @@
     ]
   },
   "lint-staged": {
-    "*.{js,json,css,md,graphql}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.{js,json,css,md,graphql}": "prettier --write",
+    "*.js": "eslint --cache --fix --max-warnings 0"
   },
   "browserslist": [
     ">0.2%",

ui/src/AuthorizedRoute.js

@@ -31,7 +31,7 @@ const AuthorizedRoute = ({ component: Component, admin = false, ...props }) => {
   if (token && admin) {
     adminRedirect = (
       <Query query={adminQuery}>
-        {({ loading, error, data }) => {
+        {({ error, data }) => {
           if (error) alert(error)
 
           if (data && data.myUser && !data.myUser.admin) {

ui/src/Pages/LoginPage/InitialSetupPage.js

@@ -65,7 +65,7 @@ class InitialSetupPage extends Component {
             Initial Setup
           </Header>
           <Query query={checkInitialSetupQuery}>
-            {({ loading, error, data }) => {
+            {({ data }) => {
               if (data && data.siteInfo && data.siteInfo.initialSetup) {
                 return null
               }
@@ -83,7 +83,7 @@ class InitialSetupPage extends Component {
               }
             }}
           >
-            {(authorize, { loading, error, data }) => {
+            {(authorize, { loading, data }) => {
               let errorMessage = null
               if (data) {
                 if (!data.initialSetupWizard.success)

ui/src/Pages/LoginPage/LoginPage.js

@@ -69,7 +69,7 @@ class LoginPage extends Component {
         <Container>
           <LogoHeaderStyled />
           <Query query={checkInitialSetupQuery}>
-            {({ loading, error, data }) => {
+            {({ data }) => {
               if (data && data.siteInfo && data.siteInfo.initialSetup) {
                 return <Redirect to="/initialSetup" />
               }
@@ -87,7 +87,7 @@ class LoginPage extends Component {
               }
             }}
           >
-            {(authorize, { loading, error, data }) => {
+            {(authorize, { loading, data }) => {
               let errorMessage = null
               if (data) {
                 if (!data.authorizeUser.success)

ui/src/Pages/PlacesPage/MapPresentMarker.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useRef } from 'react'
-import PropTypes from 'prop-types'
 import gql from 'graphql-tag'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
 import { useLazyQuery } from 'react-apollo'
 import PresentView from '../../components/photoGallery/presentView/PresentView'
 

ui/src/Pages/SettingsPage/AddUserRow.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { Mutation } from 'react-apollo'
-import { Table, Button, Input, Checkbox } from 'semantic-ui-react'
 import gql from 'graphql-tag'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Mutation } from 'react-apollo'
+import { Button, Checkbox, Input, Table } from 'semantic-ui-react'
 
 const createUserMutation = gql`
   mutation createUser(
@@ -42,11 +42,11 @@ const AddUserRow = ({ setShow, show, onUserAdded }) => {
   return (
     <Mutation
       mutation={createUserMutation}
-      onCompleted={data => {
+      onCompleted={() => {
         onUserAdded()
       }}
     >
-      {(createUser, { loading, data }) => (
+      {(createUser, { loading }) => (
         <Table.Row>
           <Table.Cell>
             <Input
@@ -77,7 +77,7 @@ const AddUserRow = ({ setShow, show, onUserAdded }) => {
           </Table.Cell>
           <Table.Cell>
             <Button.Group>
-              <Button negative onClick={e => setShow(false)}>
+              <Button negative onClick={() => setShow(false)}>
                 Cancel
               </Button>
               <Button

ui/src/Pages/SettingsPage/PeriodicScanner.js

@@ -1,21 +1,8 @@
-import React, { useRef, useState } from 'react'
-
-import {
-  Button,
-  Checkbox,
-  Dropdown,
-  Icon,
-  Input,
-  Loader,
-} from 'semantic-ui-react'
-import { useMutation, useQuery } from 'react-apollo'
 import gql from 'graphql-tag'
-import styled from 'styled-components'
-import {
-  SectionTitle,
-  InputLabelTitle,
-  InputLabelDescription,
-} from './SettingsPage'
+import React, { useRef, useState } from 'react'
+import { useMutation, useQuery } from 'react-apollo'
+import { Checkbox, Dropdown, Input, Loader } from 'semantic-ui-react'
+import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
 
 const SCAN_INTERVAL_QUERY = gql`
   query scanIntervalQuery {

ui/src/Pages/SettingsPage/UserRow.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react'
+import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 import { Mutation } from 'react-apollo'
 import {
-  Table,
-  Icon,
   Button,
-  Input,
   Checkbox,
-  Modal,
   Form,
+  Icon,
+  Input,
+  Modal,
+  Table,
 } from 'semantic-ui-react'
-import gql from 'graphql-tag'
 
 const updateUserMutation = gql`
   mutation updateUser(
@@ -68,7 +68,7 @@ const ChangePasswordModal = ({ onClose, user, ...props }) => {
         onClose && onClose()
       }}
     >
-      {(changePassword, { data }) => (
+      {changePassword => (
         <Modal {...props}>
           <Modal.Header>Change password</Modal.Header>
           <Modal.Content>
@@ -141,7 +141,7 @@ const UserRow = ({ user, refetchUsers }) => {
           refetchUsers()
         }}
       >
-        {(updateUser, { loading, data }) => (
+        {(updateUser, { loading }) => (
           <Table.Row>
             <Table.Cell>
               <Input
@@ -163,7 +163,7 @@ const UserRow = ({ user, refetchUsers }) => {
               <Checkbox
                 toggle
                 checked={state.admin}
-                onChange={(e, data) => {
+                onChange={(_, data) => {
                   setState({
                     ...state,
                     admin: data.checked,
@@ -175,7 +175,7 @@ const UserRow = ({ user, refetchUsers }) => {
               <Button.Group>
                 <Button
                   negative
-                  onClick={e =>
+                  onClick={() =>
                     setState({
                       ...state.oldState,
                     })
@@ -215,7 +215,7 @@ const UserRow = ({ user, refetchUsers }) => {
         refetchUsers()
       }}
     >
-      {(deleteUser, { loading, data }) => (
+      {deleteUser => (
         <Table.Row>
           <Table.Cell>{user.username}</Table.Cell>
           <Table.Cell>{user.rootPath}</Table.Cell>
@@ -233,7 +233,7 @@ const UserRow = ({ user, refetchUsers }) => {
                 Edit
               </Button>
               <Mutation mutation={scanUserMutation}>
-                {(scanUser, { data, called }) => (
+                {(scanUser, { called }) => (
                   <Button
                     disabled={called}
                     onClick={() => scanUser({ variables: { userId: user.id } })}

ui/src/Pages/SettingsPage/UsersTable.js

@@ -67,7 +67,7 @@ const UsersTable = () => {
                 positive
                 disabled={showAddUser}
                 floated="right"
-                onClick={e => setShowAddUser(true)}
+                onClick={() => setShowAddUser(true)}
               >
                 <Icon name="add" />
                 New user

ui/src/Pages/SharePage/AlbumSharePage.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
 import RouterPropTypes from 'react-router-prop-types'
-import { Switch, Route } from 'react-router-dom'
 import AlbumGallery from '../../components/albumGallery/AlbumGallery'
 
 const AlbumSharePage = ({ album, match }) => {

ui/src/Pages/SharePage/SharePage.js

@@ -121,7 +121,6 @@ const MessageContainer = styled.div`
 `
 
 const ProtectedTokenEnterPassword = ({
-  match,
   refetchWithPassword,
   loading = false,
 }) => {
@@ -168,7 +167,6 @@ const ProtectedTokenEnterPassword = ({
 }
 
 ProtectedTokenEnterPassword.propTypes = {
-  match: PropTypes.object.isRequired,
   refetchWithPassword: PropTypes.func.isRequired,
   loading: PropTypes.bool,
 }

ui/src/apolloClient.js

@@ -1,14 +1,13 @@
-import { ApolloClient } from 'apollo-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloClient } from 'apollo-client'
+import { ApolloLink, split } from 'apollo-link'
+import { onError } from 'apollo-link-error'
 import { HttpLink } from 'apollo-link-http'
 import { WebSocketLink } from 'apollo-link-ws'
-import { onError } from 'apollo-link-error'
-import { setContext } from 'apollo-link-context'
-import { ApolloLink, split } from 'apollo-link'
 import { getMainDefinition } from 'apollo-utilities'
-import { MessageState } from './components/messages/Messages'
 import urlJoin from 'url-join'
 import { clearTokenCookie } from './authentication'
+import { MessageState } from './components/messages/Messages'
 
 export const GRAPHQL_ENDPOINT = process.env.API_ENDPOINT
   ? urlJoin(process.env.API_ENDPOINT, '/graphql')

ui/src/components/albumGallery/AlbumBoxes.js

@@ -1,7 +1,6 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import { Loader } from 'semantic-ui-react'
 import { AlbumBox } from './AlbumBox'
 
 const Container = styled.div`

ui/src/components/messages/Messages.js

@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from 'react'
-import { useTransition, animated } from 'react-spring'
-import styled from 'styled-components'
+import React, { useState } from 'react'
+import { animated, useTransition } from 'react-spring'
 import { Message } from 'semantic-ui-react'
+import styled from 'styled-components'
 import { authToken } from '../../authentication'
-
 import MessageProgress from './MessageProgress'
 import SubscriptionsHook from './SubscriptionsHook'
 
@@ -83,7 +82,7 @@ const Messages = () => {
   messages.forEach(message => {
     let resolveFunc = null
 
-    const waitPromise = new Promise((resolve, reject) => {
+    const waitPromise = new Promise(resolve => {
       resolveFunc = resolve
     })
 

ui/src/components/messages/SubscriptionsHook.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { useSubscription } from 'react-apollo'
 import gql from 'graphql-tag'
+import PropTypes from 'prop-types'
+import { useEffect } from 'react'
+import { useSubscription } from 'react-apollo'
 import { authToken } from '../../authentication'
 
 const notificationSubscription = gql`

ui/src/components/photoGallery/MediaThumbnail.js

@@ -200,6 +200,7 @@ MediaThumbnail.propTypes = {
   index: PropTypes.number.isRequired,
   active: PropTypes.bool.isRequired,
   setPresenting: PropTypes.func.isRequired,
+  onFavorite: PropTypes.func.isRequired,
 }
 
 export const PhotoThumbnail = styled.div`

ui/src/components/photoGallery/presentView/PresentMedia.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
 import { ProtectedImage, ProtectedVideo } from '../ProtectedMedia'
 

ui/src/components/sidebar/MediaSidebar.js

@@ -1,13 +1,13 @@
-import React, { Component, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { useLazyQuery } from 'react-apollo'
 import gql from 'graphql-tag'
-import SidebarItem from './SidebarItem'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { useLazyQuery } from 'react-apollo'
+import styled from 'styled-components'
+import { authToken } from '../../authentication'
 import { ProtectedImage, ProtectedVideo } from '../photoGallery/ProtectedMedia'
 import SidebarShare from './Sharing'
 import SidebarDownload from './SidebarDownload'
-import { authToken } from '../../authentication'
+import SidebarItem from './SidebarItem'
 
 const mediaQuery = gql`
   query sidebarPhoto($id: Int!) {
@@ -122,15 +122,15 @@ const exifNameLookup = {
 }
 
 const exposurePrograms = {
-  '0': 'Not defined',
-  '1': 'Manual',
-  '2': 'Normal program',
-  '3': 'Aperture priority',
-  '4': 'Shutter priority',
-  '5': 'Creative program',
-  '6': 'Action program',
-  '7': 'Portrait mode',
-  '8': 'Landscape mode ',
+  0: 'Not defined',
+  1: 'Manual',
+  2: 'Normal program',
+  3: 'Aperture priority',
+  4: 'Shutter priority',
+  5: 'Creative program',
+  6: 'Action program',
+  7: 'Portrait mode',
+  8: 'Landscape mode ',
 }
 
 const SidebarContent = ({ media, hidePreview }) => {

ui/src/components/sidebar/Sharing.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useMutation, useQuery } from 'react-apollo'
 import gql from 'graphql-tag'