Add paths for albums to the web ui

Only fetch album paths by authorized user

api/graphql/resolvers/album.go

@@ -165,14 +165,20 @@ func (r *albumResolver) Shares(ctx context.Context, obj *models.Album) ([]*model
 }
 
 func (r *albumResolver) Path(ctx context.Context, obj *models.Album) ([]*models.Album, error) {
+	user := auth.UserFromContext(ctx)
+	if user == nil {
+		empty := make([]*models.Album, 0)
+		return empty, nil
+	}
+
 	rows, err := r.Database.Query(`
 		WITH recursive path_albums AS (
 			SELECT * FROM album anchor WHERE anchor.album_id = ?
 			UNION
 			SELECT parent.* FROM path_albums child JOIN album parent ON parent.album_id = child.parent_album
 		)
-		SELECT * FROM path_albums WHERE album_id != ?
-	`, obj.AlbumID, obj.AlbumID)
+		SELECT * FROM path_albums WHERE album_id != ? AND owner_id = ?
+	`, obj.AlbumID, obj.AlbumID, user.UserID)
 	if err != nil {
 		return nil, err
 	}

ui/src/components/AlbumTitle.js

@@ -1,10 +1,13 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
+import { Breadcrumb } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { Icon } from 'semantic-ui-react'
 import { SidebarConsumer } from './sidebar/Sidebar'
 import AlbumSidebar from './sidebar/AlbumSidebar'
+import gql from 'graphql-tag'
+import { useLazyQuery } from '@apollo/react-hooks'
 
 const Header = styled.h1`
   margin: 0 0 12px 0 !important;
@@ -34,11 +37,52 @@ const SettingsIcon = props => {
   return <StyledIcon name="settings" size="small" {...props} />
 }
 
+const ALBUM_PATH_QUERY = gql`
+  query albumPathQuery($id: Int!) {
+    album(id: $id) {
+      id
+      path {
+        id
+        title
+      }
+    }
+  }
+`
+
 const AlbumTitle = ({ album, disableLink = false }) => {
   if (!album) return <div style={{ height: 36 }}></div>
 
   let title = <span>{album.title}</span>
 
+  const [fetchPath, { data: pathData }] = useLazyQuery(ALBUM_PATH_QUERY)
+
+  useEffect(() => {
+    if (localStorage.getItem('token') && disableLink == true) {
+      fetchPath({
+        variables: {
+          id: album.id,
+        },
+      })
+    }
+  }, [album])
+
+  let path = []
+  if (pathData) {
+    path = pathData.album.path
+  }
+
+  const breadcrumbSections = path
+    .slice()
+    .reverse()
+    .map(x => (
+      <span key={x.id}>
+        <Breadcrumb.Section as={Link} to={`/album/${x.id}`}>
+          {x.title}
+        </Breadcrumb.Section>
+        <Breadcrumb.Divider icon="right angle" />
+      </span>
+    ))
+
   if (!disableLink) {
     title = <Link to={`/album/${album.id}`}>{title}</Link>
   }
@@ -47,6 +91,7 @@ const AlbumTitle = ({ album, disableLink = false }) => {
     <SidebarConsumer>
       {({ updateSidebar }) => (
         <Header>
+          <Breadcrumb>{breadcrumbSections}</Breadcrumb>
           {title}
           {localStorage.getItem('token') && (
             <SettingsIcon