content.js
5 years ago
export.js
5 years ago
filters.js
5 years ago
header.js
1 year ago
list-item.js
5 years ago
pagination.js
5 years ago
preview.js
1 year ago
templates-content.js
5 years ago
templates-content.js
199 lines
| 1 | import classnames from 'classnames'; |
| 2 | import { Placeholder, Spinner } from '@wordpress/components'; |
| 3 | import { useSelect, useDispatch } from '@wordpress/data'; |
| 4 | import { Fragment, useEffect, useState } from '@wordpress/element'; |
| 5 | |
| 6 | import Filters from './filters'; |
| 7 | import ListItem from './list-item'; |
| 8 | import Pagination from './pagination'; |
| 9 | import { fetchLibrary, fetchTemplates } from './../data/templates-cloud/index'; |
| 10 | |
| 11 | const TemplatesContent = ( { |
| 12 | importTemplate, |
| 13 | isGeneral = false, |
| 14 | isFetching, |
| 15 | getOrder, |
| 16 | setQuery, |
| 17 | getSearchQuery, |
| 18 | setSorting, |
| 19 | isSearch, |
| 20 | setSearch, |
| 21 | } ) => { |
| 22 | const { items, currentPage, totalPages } = useSelect( ( select ) => { |
| 23 | return isGeneral |
| 24 | ? select( 'tpc/beaver' ).getTemplates() |
| 25 | : select( 'tpc/beaver' ).getLibrary(); |
| 26 | } ); |
| 27 | |
| 28 | const { setFetching } = useDispatch( 'tpc/beaver' ); |
| 29 | const [ layout, setLayout ] = useState( 'grid' ); |
| 30 | |
| 31 | const init = async () => { |
| 32 | const order = getOrder(); |
| 33 | if ( isGeneral ) { |
| 34 | await fetchTemplates( { |
| 35 | search: getSearchQuery(), |
| 36 | ...order, |
| 37 | } ); |
| 38 | } else { |
| 39 | await fetchLibrary( { |
| 40 | search: getSearchQuery(), |
| 41 | ...order, |
| 42 | } ); |
| 43 | } |
| 44 | setFetching( false ); |
| 45 | }; |
| 46 | |
| 47 | useEffect( () => { |
| 48 | if ( items && items.length > 0 ) { |
| 49 | return; |
| 50 | } |
| 51 | init(); |
| 52 | }, [ isGeneral ] ); |
| 53 | |
| 54 | const onSearch = async ( search = getSearchQuery() ) => { |
| 55 | setFetching( true ); |
| 56 | |
| 57 | if ( search ) { |
| 58 | setSearch( true ); |
| 59 | } else { |
| 60 | setSearch( false ); |
| 61 | } |
| 62 | |
| 63 | const order = getOrder(); |
| 64 | if ( isGeneral ) { |
| 65 | await fetchTemplates( { |
| 66 | search, |
| 67 | ...order, |
| 68 | } ); |
| 69 | } else { |
| 70 | await fetchLibrary( { |
| 71 | search, |
| 72 | ...order, |
| 73 | } ); |
| 74 | } |
| 75 | |
| 76 | setFetching( false ); |
| 77 | }; |
| 78 | |
| 79 | const changePage = async ( index ) => { |
| 80 | setFetching( true ); |
| 81 | const order = getOrder(); |
| 82 | if ( isGeneral ) { |
| 83 | await fetchTemplates( { |
| 84 | search: getSearchQuery(), |
| 85 | page: index, |
| 86 | ...order, |
| 87 | } ); |
| 88 | } else { |
| 89 | await fetchLibrary( { |
| 90 | search: getSearchQuery(), |
| 91 | page: index, |
| 92 | ...order, |
| 93 | } ); |
| 94 | } |
| 95 | |
| 96 | setFetching( false ); |
| 97 | }; |
| 98 | |
| 99 | const changeOrder = async ( order ) => { |
| 100 | setFetching( true ); |
| 101 | if ( isGeneral ) { |
| 102 | await fetchTemplates( { |
| 103 | ...order, |
| 104 | search: getSearchQuery(), |
| 105 | } ); |
| 106 | } else { |
| 107 | await fetchLibrary( { |
| 108 | ...order, |
| 109 | search: getSearchQuery(), |
| 110 | } ); |
| 111 | } |
| 112 | |
| 113 | setFetching( false ); |
| 114 | }; |
| 115 | |
| 116 | if ( isFetching ) { |
| 117 | return ( |
| 118 | <Fragment> |
| 119 | <Filters |
| 120 | layout={ layout } |
| 121 | sortingOrder={ getOrder() } |
| 122 | setLayout={ setLayout } |
| 123 | searchQuery={ getSearchQuery() } |
| 124 | onSearch={ onSearch } |
| 125 | setSearchQuery={ setQuery } |
| 126 | setSortingOrder={ setSorting } |
| 127 | changeOrder={ changeOrder } |
| 128 | isSearch={ isSearch } |
| 129 | /> |
| 130 | |
| 131 | <Placeholder> |
| 132 | <Spinner /> |
| 133 | </Placeholder> |
| 134 | </Fragment> |
| 135 | ); |
| 136 | } |
| 137 | |
| 138 | if ( ! Boolean( items.length ) ) { |
| 139 | return ( |
| 140 | <div className="table-content"> |
| 141 | <Filters |
| 142 | layout={ layout } |
| 143 | sortingOrder={ getOrder() } |
| 144 | setLayout={ setLayout } |
| 145 | searchQuery={ getSearchQuery() } |
| 146 | onSearch={ onSearch } |
| 147 | setSearchQuery={ setQuery } |
| 148 | setSortingOrder={ setSorting } |
| 149 | changeOrder={ changeOrder } |
| 150 | isSearch={ isSearch } |
| 151 | /> |
| 152 | |
| 153 | { window.tiTpc.library[ 404 ] } |
| 154 | </div> |
| 155 | ); |
| 156 | } |
| 157 | |
| 158 | const contentClasses = classnames( 'table-content', { |
| 159 | 'is-grid': 'grid' === layout, |
| 160 | } ); |
| 161 | |
| 162 | return ( |
| 163 | <Fragment> |
| 164 | <Filters |
| 165 | layout={ layout } |
| 166 | sortingOrder={ getOrder() } |
| 167 | setLayout={ setLayout } |
| 168 | searchQuery={ getSearchQuery() } |
| 169 | onSearch={ onSearch } |
| 170 | setSearchQuery={ setQuery } |
| 171 | setSortingOrder={ setSorting } |
| 172 | changeOrder={ changeOrder } |
| 173 | isSearch={ isSearch } |
| 174 | /> |
| 175 | |
| 176 | <div className={ contentClasses }> |
| 177 | { items.map( ( item ) => ( |
| 178 | <ListItem |
| 179 | sortingOrder={ getOrder() } |
| 180 | deletable={ ! isGeneral } |
| 181 | key={ item.template_id } |
| 182 | layout={ layout } |
| 183 | item={ item } |
| 184 | importTemplate={ importTemplate } |
| 185 | /> |
| 186 | ) ) } |
| 187 | </div> |
| 188 | |
| 189 | <Pagination |
| 190 | onChange={ changePage } |
| 191 | current={ currentPage } |
| 192 | total={ totalPages } |
| 193 | /> |
| 194 | </Fragment> |
| 195 | ); |
| 196 | }; |
| 197 | |
| 198 | export default TemplatesContent; |
| 199 |