productlist.tsx

import { CommandBar, DetailsList, DetailsListLayoutMode, initializeIcons, Link, MessageBar, MessageBarType, Selection } from "office-ui-fabric-react";
import * as React from 'react';
import { useState } from "react";
import { createEmptyExcel, insertRows } from "./azure-active-directory/graphclient";

initializeIcons();

export interface ProductListProps {
    getAccessToken: () => Promise<string>
}

interface ProductListState {
    selectedRows: object[]
    createdExcelUrl?: string
}

const items = Array.from({length: 25}).map((_, i) => ({
    Id: i, 
    Name: 'Product ' + i,
    Price: i + 10,
    Amount: i * 1000,
    'Last sale': new Date(2019, i, 1)
}))

export const ProductList = (props: ProductListProps) => {

    const [state, setState] = useState<ProductListState>({ selectedRows: [] })

    const selection = new Selection({
        onSelectionChanged: () => {
            const selectedRows = selection.getSelectedIndices().map(i => items[i])
            setState(s => ({...s, selectedRows}))
        }
    }) 
    
    const toExcel = async () => {
        setState(s => ({...s, createdExcelUrl: undefined}))
        const token = await props.getAccessToken()
        const webUrl = await createEmptyExcel(token, 'export-name')
        await insertRows(token, 'export-name', state.selectedRows)
        setState(s => ({...s, createdExcelUrl: webUrl}))
    }
    
    return (
        <div>
            <CommandBar
                    items={[
                        {
                            key:'add', 
                            iconOnly: true, 
                            text: 'Add', 
                            iconProps: {iconName: 'Add'}
                        },
                        {
                            key:'upload', 
                            iconOnly: true, 
                            text: 'Upload', 
                            iconProps: {iconName: 'Upload'}
                        }
                    ]}
                    farItems={state.selectedRows.length > 0 ? [
                        {
                            key: 'c',
                            text: state.selectedRows.length + ' items selected'
                        },
                        {
                            key: 'delete',
                            text: 'Delete',
                            iconOnly: true,
                            iconProps: {iconName: 'Delete'},
                            buttonStyles: {icon: {color: 'red'}}
                        },
                        {
                            key: 'share',
                            iconOnly: true,
                            text: 'Share',
                            iconProps: {iconName: 'Share'}
                        },
                        {
                            key: 'export',
                            text: 'Export to Excel',
                            buttonStyles: {icon: {color: 'green'}},
                            iconProps: { iconName: 'ExcelDocument' },
                            onClick: () => { toExcel() }

                        }
                    ] : []}
                />
                {state.createdExcelUrl != undefined && (
                    <MessageBar messageBarType={MessageBarType.success}>
                        Your Excel file has been generated
                        <Link style={{marginLeft: 5}} href={state.createdExcelUrl} target="_blank" underline>
                            open in SharePoint
                        </Link>
                </MessageBar>
                )}
                <DetailsList
                    items={items}
                    getKey={i => i.Id}
                    selection={selection}
                    layoutMode={DetailsListLayoutMode.justified}
                    styles={{root: {minWidth: '75vw'}, contentWrapper: {overflowY: 'hidden'}}}
                />
        </div>
    )
}