+ Title + | ++ Name + | ++ Size (KB) + | +
{document.Title} | +{document.Name} | +{(document.Size / 1024).toFixed(2)} | +
&nbps; | ++ Total: + | ++ {(totalSize / 1024).toFixed(2)} + | +
Error
; + } +}; diff --git a/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/components/interfaces.ts b/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/components/interfaces.ts new file mode 100644 index 000000000..dcb90e79a --- /dev/null +++ b/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/components/interfaces.ts @@ -0,0 +1,20 @@ +// create File item to work with it internally +export interface IFile { + Id: number; + Title: string; + Name: string; + Size: number; +} + +// create PnP JS response interface for File +export interface IResponseFile { + Length: number; +} + +// create PnP JS response interface for Item +export interface IResponseItem { + Id: number; + File: IResponseFile; + FileLeafRef: string; + Title: string; +} \ No newline at end of file diff --git a/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/hooks/useDocuments.ts b/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/hooks/useDocuments.ts new file mode 100644 index 000000000..fe1224b1c --- /dev/null +++ b/samples/react-pnp-js-hooks-sample/src/webparts/pnPjsExample/hooks/useDocuments.ts @@ -0,0 +1,114 @@ +import { Logger, LogLevel } from "@pnp/logging"; +import { spfi, SPFI } from "@pnp/sp"; +import { useEffect, useState } from "react"; +import { IFile, IResponseItem } from "../components/interfaces"; +import { getSP } from "../pnpjsConfig"; +import { Caching } from "@pnp/queryable"; +import { IItemUpdateResult } from "@pnp/sp/items"; + +const useDocuments = () => { + const LOG_SOURCE = "🅿PnPjsExample"; + const LIBRARY_NAME = "Documents"; + + const [documents, setDocuments] = useState