How to use list's views in ListView control?

[Americo Perez]

Hi everyone,

I have a SPFx web part that get items from a Sharepoint list and it render them inside a ListView control. I have small issues when showing date (2019-03-12T12:00:00Z instead of 2019-03-12) and the item's title is no longer a link, but I still looking at that. The real question is the following:

I added a Dropdown component to the web part that fetchs the list's views, my idea is use this dropdown component to update the List component with the corresponding view, similar to the behaviour that sharepoint has when showing a list and the user change the view. 

I have the data fom the list and I have the dropdown shoing the view's names, how can I connect this two components? 

This is how I am fetching the views and items in a file called dataprovider: 

public async getViews(): Promise<Views[]> {
     let View: Views[] = [];
     const views = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').views.get();
     views.forEach(view => {
        View.push({
             Title: view.Title
        });
    });
    return new Promise<Views[]>(async(resolve) => {
        resolve(View);
    });
}

public async getAgreements(): Promise<Agreement[]> {
      let select = '*';
      let Agreements: Agreement[] = [];
      const items = await sp.web.lists.getById('823e0102-5928-4f8a-bcda-f1794bd9026b').items
           .select(select)
           .get();
      items.forEach(item => {
            Agreements.push({
                  Title: item.Title,
                  CustomerAgreementNr: item.CustomerAgreementNr,
            });
      });
     return new Promise<Agreement[]>(async(resolve) => {
            resolve(Agreements);
     });
}

And here is how I render the list and the dropdown:

import * as React from 'react';
import styles from './AgreementContainer.module.scss';
import { IAgreementDataProvider } from "../interface/IAgreementDataProvider";
import Agreement from "./Agreement";
import Views from "./Views";
import { ListView, IViewField } from "@pnp/spfx-controls-react/lib/ListView";
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';

export interface IAgreementContainerProps {
          provider: IAgreementDataProvider;
}

export interface IAgreementContainerState {
          agreements: Agreement[];
          views: Views[];
}

export default class AgreementContainer extends React.Component<IAgreementContainerProps, IAgreementContainerState> {
         constructor(props: IAgreementContainerProps) {
                 super(props);
                this.state = {
                       agreements: [],
                       views: []
                }
         };

        private viewFields: IViewField[] = [
              {
                  name: "Title",
                  linkPropertyName: "Title.ServerRelativeUrl",
                  displayName: "Agreement Name",
                  maxWidth: 25,
                  minWidth: 25,
                 sorting: true,
                isResizable: true
           }
     ]

     public componentDidMount(): void {
             this.props.provider.getAgreements().then((agreements) => {
                   this.setState({
                          agreements: agreements
                   });
             });
            this.props.provider.getViews().then((views) => {
                   this.setState({
                         views: views
                   }); 
            });
     }

     public render(): JSX.Element {
           let viewArray = [];
          {this.state.views.map((view, index) =>
                  viewArray.push({key:view.Title, Title:view.Title})
          )}
         return (
               <div className={ styles.agreementDatabase }>
                    <Dropdown
                          placeHolder="Filter"
                          label="Filter label"
                          options={this.state.views.map((view:any) => {return {key:view.ID, text:view.Title}})}
                     />
                   <ListView
                          items = {this.state.agreements}
                          viewFields={this.viewFields}
                   />
            </div>
      );
}

}

Any idea how to implement such view control?

Best regards

Americo