storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/js/buckets/BucketList.js (about)

     1  /*
     2   * MinIO Cloud Storage (C) 2018 MinIO, Inc.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import React from "react"
    18  import { connect } from "react-redux"
    19  import { Scrollbars } from "react-custom-scrollbars"
    20  import InfiniteScroll from "react-infinite-scroller"
    21  import * as actionsBuckets from "./actions"
    22  import { getFilteredBuckets } from "./selectors"
    23  import BucketContainer from "./BucketContainer"
    24  import web from "../web"
    25  import history from "../history"
    26  import { pathSlice } from "../utils"
    27  
    28  export class BucketList extends React.Component {
    29    constructor(props) {
    30      super(props)
    31      this.state = {
    32        page: 1
    33      }
    34      this.loadNextPage = this.loadNextPage.bind(this)
    35    }
    36    componentDidUpdate(prevProps) {
    37      if (this.props.filter !== prevProps.filter) {
    38        this.setState({
    39          page: 1
    40        })
    41      }
    42    }
    43    componentWillMount() {
    44      const { fetchBuckets, setBucketList, selectBucket } = this.props
    45      if (web.LoggedIn()) {
    46        fetchBuckets()
    47      } else {
    48        const { bucket, prefix } = pathSlice(history.location.pathname)
    49        if (bucket) {
    50          setBucketList([bucket])
    51          selectBucket(bucket, prefix)
    52        } else {
    53          history.replace("/login")
    54        }
    55      }
    56    }
    57    loadNextPage() {
    58      this.setState({
    59        page: this.state.page + 1
    60      })
    61    }
    62    render() {
    63      const { filteredBuckets } = this.props
    64      const visibleBuckets = filteredBuckets.slice(0, this.state.page * 100)
    65      return (
    66        <div className="fesl-inner">
    67          <Scrollbars
    68            renderTrackVertical={props => <div className="scrollbar-vertical" />}
    69          >
    70            <InfiniteScroll
    71              pageStart={0}
    72              loadMore={this.loadNextPage}
    73              hasMore={filteredBuckets.length > visibleBuckets.length}
    74              useWindow={false}
    75              element="div"
    76              initialLoad={false}
    77            >
    78              <ul>
    79                {visibleBuckets.map(bucket => (
    80                  <BucketContainer key={bucket} bucket={bucket} />
    81                ))}
    82              </ul>
    83            </InfiniteScroll>
    84          </Scrollbars>
    85        </div>
    86      )
    87    }
    88  }
    89  
    90  const mapStateToProps = state => {
    91    return {
    92      filteredBuckets: getFilteredBuckets(state),
    93      filter: state.buckets.filter
    94    }
    95  }
    96  
    97  const mapDispatchToProps = dispatch => {
    98    return {
    99      fetchBuckets: () => dispatch(actionsBuckets.fetchBuckets()),
   100      setBucketList: buckets => dispatch(actionsBuckets.setList(buckets)),
   101      selectBucket: (bucket, prefix) =>
   102        dispatch(actionsBuckets.selectBucket(bucket, prefix))
   103    }
   104  }
   105  
   106  export default connect(
   107    mapStateToProps,
   108    mapDispatchToProps
   109  )(BucketList)