@@ -7,85 +7,97 @@ import { useQuery } from '@apollo/client';
77import { gql } from 'apollo-boost' ;
88import { Link } from 'react-router-dom' ;
99let moment = require ( 'moment' ) ;
10+ import Truncate from 'react-truncate' ;
1011
11- export interface BreadcrumbProps {
12- connectedtagpath :string ;
13- env : EnvSettings ;
12+ export interface BreadcrumbProps {
13+ connectedtagpath : string ;
14+ env : EnvSettings ;
1415}
1516const hasWindow = typeof window !== 'undefined' ;
1617
1718const breadcrumbQuery = gql `
1819 query breadcrumbs($siteurl: String!, $paths: [String], $lang: String) {
19- tags(siteurl:$siteurl,connectedtagpathsor:$paths, lang: $lang)
20- {
21- connectedTagPath
20+ tags(siteurl: $siteurl, connectedtagpathsor: $paths, lang: $lang) {
21+ connectedTagPath
2222 title
2323 }
2424 }
2525` ;
2626
27- export const Breadcrumb : React . FC < BreadcrumbProps > = ( props ) => {
27+ export const Breadcrumb : React . FC < BreadcrumbProps > = ( props ) => {
2828 moment . locale ( i18n . languages [ 0 ] ) ;
2929
30- let connectedtagpath = '' ;
30+ let connectedtagpath = '' ;
3131
32- if ( props . connectedtagpath ) {
32+ if ( props . connectedtagpath ) {
3333 connectedtagpath = props . connectedtagpath ;
3434 }
35-
36- let pathsplitted :string [ ] = connectedtagpath ? connectedtagpath . split ( '/' ) : [ ] ;
37- pathsplitted = pathsplitted . filter ( function ( x ) { return x != "" ; } ) ;
35+
36+ let pathsplitted : string [ ] = connectedtagpath
37+ ? connectedtagpath . split ( '/' )
38+ : [ ] ;
39+ pathsplitted = pathsplitted . filter ( function ( x ) {
40+ return x != '' ;
41+ } ) ;
3842 var copy = [ ...pathsplitted ] ;
39- let path : string [ ] = [ ]
43+ let path : string [ ] = [ ] ;
4044
41- pathsplitted . forEach ( element => {
42- path . push ( `/${ copy . join ( '/' ) } /` )
45+ pathsplitted . forEach ( ( element ) => {
46+ path . push ( `/${ copy . join ( '/' ) } /` ) ;
4347 copy . pop ( ) ;
44- } ) ;
48+ } ) ;
4549
46- const { loading, error, data } =
47- useQuery < { tags : Array < any > } > ( breadcrumbQuery , {
48- variables :{
50+ const { loading, error, data } = useQuery < { tags : Array < any > } > (
51+ breadcrumbQuery ,
52+ {
53+ variables : {
4954 paths : path ,
50- lang : i18n . languages [ 0 ] ?? "sv" ,
51- siteurl : props . env . CONTENTBACKEND_SITEURL
52- }
53- } ) ;
55+ lang : i18n . languages [ 0 ] ?? 'sv' ,
56+ siteurl : props . env . CONTENTBACKEND_SITEURL ,
57+ } ,
58+ }
59+ ) ;
60+
61+ const breadcrumb =
62+ ! loading && data && data . tags
63+ ? //sort the paths by most number of "/"
64+ data . tags . sort ( ( a , b ) => {
65+ let aNum = ( a . connectedTagPath . match ( / \/ / g) || [ ] ) . length ;
66+ let bNum = ( b . connectedTagPath . match ( / \/ / g) || [ ] ) . length ;
5467
55- const breadcrumb = ! loading && data && data . tags ?
56- //sort the paths by most number of "/"
57- data . tags . sort ( ( a , b ) => {
58- let aNum = ( a . connectedTagPath . match ( / \/ / g ) || [ ] ) . length ;
59- let bNum = ( b . connectedTagPath . match ( / \/ / g ) || [ ] ) . length ;
68+ if ( aNum > bNum ) return 1 ;
69+ if ( aNum < bNum ) return - 1 ;
70+ return 0 ;
71+ } )
72+ : [ ] ;
6073
61- if ( aNum > bNum ) return 1 ;
62- if ( aNum < bNum ) return - 1 ;
63- return 0 ;
64- } )
65- :
66- [ ] ;
67-
68- return (
69- < div className = "breadcrumb text-7" >
70- { loading && (
71- < ul className = "breadcrumb__list" >
72- < li className = "breadcrumb__list--item" > </ li >
73- </ ul >
74- ) }
75- { ! loading && data && data ! . tags && (
76- < ul className = "breadcrumb__list" >
77- < li className = "breadcrumb__list--item text-7" >
78- < Link to = { `/${ i18n . languages [ 0 ] } ` } > { i18n . t ( 'common|home-text' ) } </ Link >
79- </ li >
80- { data ! . tags . map ( ( n , index ) => {
81- return (
82- < li className = "breadcrumb__list--item text-7" >
83- < Link to = { `/${ i18n . languages [ 0 ] } ${ n . connectedTagPath } ` } > { n . title } </ Link >
84- </ li >
85- ) ;
86- } ) }
87- </ ul >
88- ) }
89- </ div >
74+ return (
75+ < div className = "breadcrumb text-7" >
76+ { loading && (
77+ < ul className = "breadcrumb__list" >
78+ < li className = "breadcrumb__list--item" > </ li >
79+ </ ul >
80+ ) }
81+ { ! loading && data && data ! . tags && (
82+ < ul className = "breadcrumb__list" >
83+ < li className = "breadcrumb__list--item text-7" >
84+ < Link to = { `/${ i18n . languages [ 0 ] } ` } >
85+ { i18n . t ( 'common|home-text' ) }
86+ </ Link >
87+ </ li >
88+ { data ! . tags . map ( ( n , index ) => {
89+ return (
90+ < li className = "breadcrumb__list--item text-7" >
91+ { /* <Truncate lines={1}> */ }
92+ < Link to = { `/${ i18n . languages [ 0 ] } ${ n . connectedTagPath } ` } >
93+ { n . title }
94+ </ Link >
95+ { /* </Truncate> */ }
96+ </ li >
97+ ) ;
98+ } ) }
99+ </ ul >
100+ ) }
101+ </ div >
90102 ) ;
91103} ;
0 commit comments