Merge pull request #112 from stz184/component-class-to-function-migra…

…tion Migrate all class based react components to function based
photoview · Nov 17, 2020 · 514d9b1 · 514d9b1
2 parents c7ee506 + 18997a0
commit 514d9b1
Show file tree

Hide file tree

Showing 14 changed files with 575 additions and 630 deletions.
diff --git a/ui/src/App.js b/ui/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { createGlobalStyle } from 'styled-components'
 import { Helmet } from 'react-helmet'
 import Routes from './components/routes/Routes'
@@ -23,22 +23,20 @@ const GlobalStyle = createGlobalStyle`
 
 import 'semantic-ui-css/semantic.min.css'
 
-class App extends Component {
-  render() {
-    return (
-      <>
-        <Helmet>
-          <meta
-            name="description"
-            content="Simple and User-friendly Photo Gallery for Personal Servers"
-          />
-        </Helmet>
-        <GlobalStyle />
-        <Routes />
-        <Messages />
-      </>
-    )
-  }
+const App = () => {
+  return (
+    <>
+      <Helmet>
+        <meta
+          name="description"
+          content="Simple and User-friendly Photo Gallery for Personal Servers"
+        />
+      </Helmet>
+      <GlobalStyle />
+      <Routes />
+      <Messages />
+    </>
+  )
 }
 
 export default App
diff --git a/ui/src/Layout.js b/ui/src/Layout.js
@@ -8,6 +8,7 @@ import { useQuery, gql } from '@apollo/client'
 import { Authorized } from './components/routes/AuthorizedRoute'
 import { Helmet } from 'react-helmet'
 import Header from './components/header/Header'
+import { authToken } from './authentication'
 
 export const ADMIN_QUERY = gql`
   query adminQuery {
@@ -94,13 +95,11 @@ const SideButtonLabel = styled.div`
 `
 
 export const SideMenu = () => {
-  const adminQuery = useQuery(ADMIN_QUERY)
-  const mapboxQuery = useQuery(MAPBOX_QUERY)
+  const adminQuery = authToken() ? useQuery(ADMIN_QUERY) : null
+  const mapboxQuery = authToken() ? useQuery(MAPBOX_QUERY) : null
 
-  const isAdmin =
-    adminQuery.data && adminQuery.data.myUser && adminQuery.data.myUser.admin
-
-  const mapboxEnabled = mapboxQuery.data && mapboxQuery.data.mapboxToken != null
+  const isAdmin = adminQuery?.data?.myUser?.admin
+  const mapboxEnabled = !!mapboxQuery?.data?.mapboxToken
 
   return (
     <SideMenuContainer>

diff --git a/ui/src/Layout.test.js b/ui/src/Layout.test.js
@@ -7,6 +7,10 @@ import { render, screen } from '@testing-library/react'
 import Layout, { ADMIN_QUERY, MAPBOX_QUERY, SideMenu } from './Layout'
 import { MemoryRouter } from 'react-router-dom'
 
+import * as authentication from './authentication'
+
+jest.mock('./authentication.js')
+
 test('Layout component', async () => {
   render(
     <Layout>
@@ -18,7 +22,13 @@ test('Layout component', async () => {
   expect(screen.getByText('layout_content')).toBeInTheDocument()
 })
 
+afterEach(() => {
+  authentication.authToken.mockClear()
+})
+
 test('Layout sidebar component', async () => {
+  authentication.authToken.mockImplementation(() => true)
+
   const mockedGraphql = [
     {
       request: {

diff --git a/ui/src/Pages/AlbumPage/AlbumPage.js b/ui/src/Pages/AlbumPage/AlbumPage.js
@@ -1,8 +1,7 @@
 import React, { useCallback, useState, useEffect } from 'react'
 import ReactRouterPropTypes from 'react-router-prop-types'
 import { useLocation } from 'react-router-dom'
-import { gql } from '@apollo/client'
-import { Query } from '@apollo/client/react/components'
+import { useQuery, gql } from '@apollo/client'
 import AlbumGallery from '../../components/albumGallery/AlbumGallery'
 import PropTypes from 'prop-types'
 import Layout from '../../Layout'
@@ -67,6 +66,15 @@ function AlbumPage({ match }) {
     orderDirection: urlParams.get('orderDirection') || 'ASC',
   })
 
+  const { loading, error, data, refetch } = useQuery(albumQuery, {
+    variables: {
+      id: albumId,
+      onlyFavorites,
+      mediaOrderBy: ordering.orderBy,
+      mediaOrderDirection: ordering.orderDirection,
+    },
+  })
+
   const setOrderingCallback = useCallback(
     ordering => {
       setOrdering(prevState => {
@@ -80,7 +88,7 @@ function AlbumPage({ match }) {
   )
 
   const toggleFavorites = useCallback(
-    (onlyFavorites, refetch) => {
+    onlyFavorites => {
       if (
         (refetchNeededAll && !onlyFavorites) ||
         (refetchNeededFavorites && onlyFavorites)
@@ -97,7 +105,7 @@ function AlbumPage({ match }) {
         setOnlyFavorites(onlyFavorites)
       }
     },
-    [setOnlyFavorites]
+    [setOnlyFavorites, refetch]
   )
 
   useEffect(() => {
@@ -107,44 +115,22 @@ function AlbumPage({ match }) {
     history.replaceState({}, '', pathName + '?' + queryString)
   }, [onlyFavorites, ordering])
 
-  return (
-    <Query
-      query={albumQuery}
-      variables={{
-        id: albumId,
-        onlyFavorites,
-        mediaOrderBy: ordering.orderBy,
-        mediaOrderDirection: ordering.orderDirection,
-      }}
-    >
-      {({ loading, error, data, refetch }) => {
-        const setOnlyFavorites = useCallback(
-          checked => {
-            toggleFavorites(checked, refetch)
-          },
-          [toggleFavorites, refetch]
-        )
+  if (error) return <div>Error</div>
 
-        if (error) return <div>Error</div>
-        return (
-          <Layout title={data ? data.album.title : 'Loading album'}>
-            <AlbumGallery
-              album={data && data.album}
-              loading={loading}
-              showFavoritesToggle
-              setOnlyFavorites={setOnlyFavorites}
-              onlyFavorites={onlyFavorites}
-              onFavorite={() =>
-                (refetchNeededAll = refetchNeededFavorites = true)
-              }
-              showFilter
-              setOrdering={setOrderingCallback}
-              ordering={ordering}
-            />
-          </Layout>
-        )
-      }}
-    </Query>
+  return (
+    <Layout title={data ? data.album.title : 'Loading album'}>
+      <AlbumGallery
+        album={data && data.album}
+        loading={loading}
+        showFavoritesToggle
+        setOnlyFavorites={toggleFavorites}
+        onlyFavorites={onlyFavorites}
+        onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
+        showFilter
+        setOrdering={setOrderingCallback}
+        ordering={ordering}
+      />
+    </Layout>
   )
 }
 

diff --git a/ui/src/Pages/AllAlbumsPage/AlbumsPage.js b/ui/src/Pages/AllAlbumsPage/AlbumsPage.js
@@ -1,8 +1,7 @@
-import React, { Component } from 'react'
+import React from 'react'
 import AlbumBoxes from '../../components/albumGallery/AlbumBoxes'
 import Layout from '../../Layout'
-import { gql } from '@apollo/client'
-import { Query } from '@apollo/client/react/components'
+import { useQuery, gql } from '@apollo/client'
 
 const getAlbumsQuery = gql`
   query getMyAlbums {
@@ -18,23 +17,21 @@ const getAlbumsQuery = gql`
   }
 `
 
-class AlbumsPage extends Component {
-  render() {
-    return (
-      <Layout title="Albums">
-        <h1>Albums</h1>
-        <Query query={getAlbumsQuery}>
-          {({ loading, error, data }) => (
-            <AlbumBoxes
-              loading={loading}
-              error={error}
-              albums={data && data.myAlbums}
-            />
-          )}
-        </Query>
-      </Layout>
-    )
-  }
+const AlbumsPage = () => {
+  const { loading, error, data } = useQuery(getAlbumsQuery)
+
+  return (
+    <Layout title="Albums">
+      <h1>Albums</h1>
+      {!loading && (
+        <AlbumBoxes
+          loading={loading}
+          error={error}
+          albums={data && data.myAlbums}
+        />
+      )}
+    </Layout>
+  )
 }
 
 export default AlbumsPage