Add prop types and fix eslint issues

api/.eslintrc.json

@@ -3,6 +3,7 @@
     "es6": true,
     "node": true
   },
+  "extends": "eslint:recommended",
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
@@ -11,6 +12,8 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "rules": {},
+  "rules": {
+    "no-unused-vars": "off"
+  },
   "parser": "babel-eslint"
 }

api/src/resolvers/users.js

@@ -100,6 +100,7 @@ const Mutation = {
       }
     }
 
+    // eslint-disable-next-line require-atomic-updates
     args.id = generateID()
 
     return neo4jgraphql(root, args, ctx, info)

api/src/routes/images.js

@@ -5,7 +5,9 @@ import config from '../config'
 import { isRawImage, getImageCachePath } from '../scanner/utils'
 import { getUserFromToken, getTokenFromBearer } from '../token'
 
-async function sendImage({ imagePath, photo, res }) {
+async function sendImage({ photo, res, id, albumId, image, scanner }) {
+  let imagePath = path.resolve(getImageCachePath(id, albumId), image)
+
   if (!(await fs.exists(imagePath))) {
     if (image == 'thumbnail.jpg') {
       console.log('Thumbnail not found, generating', photo.path)
@@ -73,9 +75,7 @@ function loadImageRoutes({ app, driver, scanner }) {
 
     session.close()
 
-    let imagePath = path.resolve(getImageCachePath(id, albumId), image)
+    sendImage({ photo, res, id, albumId, image, scanner })
-
-    sendImage({ imagePath, photo, res })
   })
 
   // app.use('/share/:token/:image', async (req, res) => {

api/src/scanner/processImage.js

@@ -18,7 +18,7 @@ async function addExifTags({ session, photo }) {
   const rawTags = await exiftool.read(photo.path)
 
   let iso = rawTags.ISO
-  if (typeof iso != 'Number') {
+  if (typeof iso != 'number') {
     try {
       iso = parseInt(iso)
     } catch (e) {

ui/.eslintrc.json

@@ -6,7 +6,8 @@
   "extends": ["eslint:recommended", "plugin:react/recommended"],
   "globals": {
     "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
+    "SharedArrayBuffer": "readonly",
+    "process": "readonly"
   },
   "parserOptions": {
     "ecmaFeatures": {
@@ -16,6 +17,8 @@
     "sourceType": "module"
   },
   "plugins": ["react"],
-  "rules": {},
+  "rules": {
+    "no-unused-vars": "off"
+  },
   "parser": "babel-eslint"
 }

ui/package-lock.json

@@ -1141,6 +1141,12 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -7308,6 +7314,16 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-router-prop-types": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-router-prop-types/-/react-router-prop-types-1.0.4.tgz",
+      "integrity": "sha512-tXDQe0pnBTXjFivBa69hYibtgI3hz+Q/VmhMT7vIzYVPv574dd+lIuBIWOBH9dZkHeSuD6iur6zkmss3QVTeew==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "^15.5.3",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-spring": {
       "version": "8.0.27",
       "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",

ui/package.json

@@ -44,7 +44,8 @@
     "eslint-plugin-react": "^7.14.3",
     "husky": "^3.0.2",
     "isarray": "^2.0.5",
-    "lint-staged": "^9.2.1"
+    "lint-staged": "^9.2.1",
+    "react-router-prop-types": "^1.0.4"
   },
   "husky": {
     "hooks": {

ui/src/AuthorizedRoute.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Route, Redirect } from 'react-router-dom'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
@@ -11,7 +12,7 @@ const adminQuery = gql`
   }
 `
 
-const AuthorizedRoute = ({ component: Component, admin, ...props }) => {
+const AuthorizedRoute = ({ component: Component, admin = false, ...props }) => {
   const token = localStorage.getItem('token')
 
   let unauthorizedRedirect = null
@@ -50,4 +51,9 @@ const AuthorizedRoute = ({ component: Component, admin, ...props }) => {
   )
 }
 
+AuthorizedRoute.propTypes = {
+  component: PropTypes.element.isRequired,
+  admin: PropTypes.bool,
+}
+
 export default AuthorizedRoute

ui/src/Layout.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
 import { Icon } from 'semantic-ui-react'
@@ -65,6 +66,10 @@ const SideButton = props => {
   )
 }
 
+SideButton.propTypes = {
+  children: PropTypes.element,
+}
+
 const SideButtonLabel = styled.div`
   font-size: 16px;
 `
@@ -123,4 +128,8 @@ class Layout extends Component {
   }
 }
 
+Layout.propTypes = {
+  children: PropTypes.element.isRequired,
+}
+
 export default Layout

ui/src/Messages.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Message, Progress } from 'semantic-ui-react'
 import gql from 'graphql-tag'
@@ -22,7 +23,7 @@ const Container = styled.div`
   width: 500px;
 `
 
-const MessageProgress = ({ header, content, percent, ...props }) => {
+const MessageProgress = ({ header, content, percent = 0, ...props }) => {
   const StyledProgress = styled(Progress)`
     position: absolute !important;
     bottom: 0;
@@ -46,6 +47,12 @@ const MessageProgress = ({ header, content, percent, ...props }) => {
   )
 }
 
+MessageProgress.propTypes = {
+  header: PropTypes.string,
+  content: PropTypes.element,
+  percent: PropTypes.number,
+}
+
 class Messages extends Component {
   constructor(props) {
     super(props)

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -1,14 +1,13 @@
 import React, { Component } from 'react'
+import ReactRouterPropTypes from 'react-router-prop-types'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 import Layout from '../../Layout'
-import PhotoSidebar from '../../components/sidebar/PhotoSidebar'
 import PhotoGallery, {
   presentIndexFromHash,
 } from '../../components/photoGallery/PhotoGallery'
 import AlbumGallery from '../AllAlbumsPage/AlbumGallery'
 import AlbumTitle from '../../components/AlbumTitle'
-import { SidebarConsumer } from '../../components/sidebar/Sidebar'
 
 const albumQuery = gql`
   query albumQuery($id: ID!) {
@@ -162,4 +161,8 @@ class AlbumPage extends Component {
   }
 }
 
+AlbumPage.propTypes = {
+  ...ReactRouterPropTypes,
+}
+
 export default AlbumPage

ui/src/Pages/AllAlbumsPage/AlbumBox.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 import ProtectedImage from '../../components/photoGallery/ProtectedImage'
-import { Icon } from 'semantic-ui-react'
 
 const AlbumBoxLink = styled(Link)`
   width: 240px;
@@ -37,6 +37,10 @@ const AlbumBoxImage = ({ src, ...props }) => {
   return <Placeholder />
 }
 
+AlbumBoxImage.propTypes = {
+  src: PropTypes.string.isRequired,
+}
+
 export const AlbumBox = ({ album, ...props }) => {
   if (!album) {
     return (
@@ -64,3 +68,7 @@ export const AlbumBox = ({ album, ...props }) => {
     </AlbumBoxLink>
   )
 }
+
+AlbumBox.propTypes = {
+  album: PropTypes.object.isRequired,
+}

ui/src/Pages/AllAlbumsPage/AlbumGallery.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Loader } from 'semantic-ui-react'
 import { AlbumBox } from './AlbumBox'
@@ -31,4 +32,10 @@ const AlbumGallery = ({ loading, error, albums }) => {
   )
 }
 
+AlbumGallery.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  albums: PropTypes.array,
+}
+
 export default AlbumGallery

ui/src/Pages/SettingsPage/AddUserRow.js

@@ -1,4 +1,5 @@
 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'
@@ -101,4 +102,10 @@ const AddUserRow = ({ setShow, show, onUserAdded }) => {
   )
 }
 
+AddUserRow.propTypes = {
+  setShow: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+  onUserAdded: PropTypes.func.isRequired,
+}
+
 export default AddUserRow

ui/src/Pages/SettingsPage/UserRow.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import { Mutation } from 'react-apollo'
 import {
   Table,
@@ -57,7 +58,7 @@ const ChangePasswordModal = ({ onClose, user, ...props }) => {
     <Mutation
       mutation={changeUserPasswordMutation}
       onCompleted={() => {
-        onClose()
+        onClose && onClose()
       }}
     >
       {(changePassword, { data }) => (
@@ -79,7 +80,7 @@ const ChangePasswordModal = ({ onClose, user, ...props }) => {
             </Form>
           </Modal.Content>
           <Modal.Actions>
-            <Button onClick={() => onClose()}>Cancel</Button>
+            <Button onClick={() => onClose && onClose()}>Cancel</Button>
             <Button
               positive
               onClick={() => {
@@ -100,6 +101,11 @@ const ChangePasswordModal = ({ onClose, user, ...props }) => {
   )
 }
 
+ChangePasswordModal.propTypes = {
+  onClose: PropTypes.func,
+  user: PropTypes.object.isRequired,
+}
+
 const UserRow = ({ user, refetchUsers }) => {
   const [state, setState] = useState({
     ...user,
@@ -271,4 +277,9 @@ const UserRow = ({ user, refetchUsers }) => {
   )
 }
 
+UserRow.propTypes = {
+  user: PropTypes.object.isRequired,
+  refetchUsers: PropTypes.func.isRequired,
+}
+
 export default UserRow

ui/src/components/AlbumTitle.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { Icon } from 'semantic-ui-react'
@@ -57,4 +58,9 @@ const AlbumTitle = ({ album, disableLink = false }) => {
   )
 }
 
+AlbumTitle.propTypes = {
+  album: PropTypes.object.isRequired,
+  disableLink: PropTypes.bool,
+}
+
 export default AlbumTitle

ui/src/components/photoGallery/Photo.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { useSpring, animated } from 'react-spring'
 import LazyLoad from 'react-lazyload'
@@ -48,6 +49,10 @@ class LazyPhoto extends React.Component {
   }
 }
 
+LazyPhoto.propTypes = {
+  src: PropTypes.string,
+}
+
 const PhotoOverlay = styled.div`
   width: 100%;
   height: 100%;
@@ -122,3 +127,12 @@ export const Photo = ({
     </PhotoOverlay>
   </PhotoContainer>
 )
+
+Photo.propTypes = {
+  photo: PropTypes.object.isRequired,
+  onSelectImage: PropTypes.func,
+  minWidth: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  active: PropTypes.bool.isRequired,
+  setPresenting: PropTypes.func.isRequired,
+}

ui/src/components/photoGallery/PresentView.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
@@ -90,4 +91,11 @@ const PresentView = ({
   )
 }
 
+PresentView.propTypes = {
+  image: PropTypes.string.isRequired,
+  presenting: PropTypes.bool,
+  thumbnail: PropTypes.string.isRequired,
+  imageLoaded: PropTypes.func.isRequired,
+}
+
 export default PresentView

ui/src/components/photoGallery/ProtectedImage.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 let imageCache = {}
 
@@ -58,4 +59,8 @@ class ProtectedImage extends React.Component {
   }
 }
 
+ProtectedImage.propTypes = {
+  src: PropTypes.string.isRequired,
+}
+
 export default ProtectedImage

ui/src/components/sidebar/AlbumSidebar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 import SidebarShare from './Sharing'
@@ -35,4 +36,8 @@ const AlbumSidebar = ({ albumId }) => {
   )
 }
 
+AlbumSidebar.propTypes = {
+  albumId: PropTypes.string.isRequired,
+}
+
 export default AlbumSidebar

ui/src/components/sidebar/PhotoSidebar.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
@@ -123,4 +124,8 @@ class PhotoSidebar extends Component {
   }
 }
 
+PhotoSidebar.propTypes = {
+  imageId: PropTypes.string,
+}
+
 export default PhotoSidebar

ui/src/components/sidebar/Sharing.js

@@ -1,7 +1,8 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Query, Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
-import { Table, Button, Icon, Dropdown } from 'semantic-ui-react'
+import { Table, Button, Dropdown } from 'semantic-ui-react'
 
 const sharePhotoQuery = gql`
   query sidbarGetPhotoShares($id: ID!) {
@@ -172,4 +173,9 @@ const SidebarShare = ({ photo, album }) => {
   )
 }
 
+SidebarShare.propTypes = {
+  photo: PropTypes.object,
+  album: PropTypes.object,
+}
+
 export default SidebarShare

ui/src/components/sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { Route } from 'react-router-dom'
 
 const SidebarContainer = styled.div`
   height: 100%;
@@ -48,4 +48,8 @@ class Sidebar extends React.Component {
   }
 }
 
+Sidebar.propTypes = {
+  children: PropTypes.element,
+}
+
 export default Sidebar

ui/src/components/sidebar/SidebarItem.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 const ItemName = styled.div`
@@ -15,9 +16,16 @@ const ItemValue = styled.div`
   display: inline-block;
 `
 
-export const SidebarItem = ({ name, value }) => (
+const SidebarItem = ({ name, value }) => (
   <div>
     <ItemName>{name}</ItemName>
     <ItemValue>{value}</ItemValue>
   </div>
 )
+
+SidebarItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+}
+
+export default SidebarItem