From f1ea1b778057a3740c984577ba7a60c746d31bad Mon Sep 17 00:00:00 2001 From: AriGunawan Date: Sun, 16 Oct 2022 01:11:36 +1000 Subject: [PATCH] Get data --- .../react-associated-hub-links/package.json | 1 + .../react-associated-hub-links/pnpm-lock.yaml | 53 +++++++++++++++---- .../ReactAssociatedHubLinksWebPart.ts | 53 ++++++++++++++----- .../components/ReactAssociatedHubLinks.tsx | 32 +++++++++-- .../reactAssociatedHubLinks/utils/ILink.ts | 5 ++ 5 files changed, 116 insertions(+), 28 deletions(-) create mode 100644 samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/utils/ILink.ts diff --git a/samples/react-associated-hub-links/package.json b/samples/react-associated-hub-links/package.json index 17ad7ec59..5b500b51b 100644 --- a/samples/react-associated-hub-links/package.json +++ b/samples/react-associated-hub-links/package.json @@ -15,6 +15,7 @@ "@microsoft/sp-office-ui-fabric-core": "1.15.2", "@microsoft/sp-property-pane": "1.15.2", "@microsoft/sp-webpart-base": "1.15.2", + "@pnp/sp": "^3.8.0", "office-ui-fabric-react": "7.185.7", "react": "16.13.1", "react-dom": "16.13.1", diff --git a/samples/react-associated-hub-links/pnpm-lock.yaml b/samples/react-associated-hub-links/pnpm-lock.yaml index d9fdccf84..b5b3bdcc0 100644 --- a/samples/react-associated-hub-links/pnpm-lock.yaml +++ b/samples/react-associated-hub-links/pnpm-lock.yaml @@ -11,6 +11,7 @@ specifiers: '@microsoft/sp-office-ui-fabric-core': 1.15.2 '@microsoft/sp-property-pane': 1.15.2 '@microsoft/sp-webpart-base': 1.15.2 + '@pnp/sp': ^3.8.0 '@rushstack/eslint-config': 2.5.1 '@types/react': 16.9.51 '@types/react-dom': 16.9.8 @@ -36,6 +37,7 @@ dependencies: '@microsoft/sp-office-ui-fabric-core': 1.15.2 '@microsoft/sp-property-pane': 1.15.2_7ombvvupg4tnmt4iqt5m47i6cu '@microsoft/sp-webpart-base': 1.15.2_7ombvvupg4tnmt4iqt5m47i6cu + '@pnp/sp': 3.8.0 office-ui-fabric-react: 7.185.7_24igt2r6uynb67fv3burekl4py react: 16.13.1 react-dom: 16.13.1_react@16.13.1 @@ -76,7 +78,7 @@ packages: resolution: {integrity: sha512-TrRLIoSQVzfAJX9H1JeFjzAoDGcoK1IYX1UImfceTZpsyYfWr09Ss1aHW1y5TrrR3iq6RZLBwJ3E24uwPhwahw==} engines: {node: '>=12.0.0'} dependencies: - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/core-asynciterator-polyfill/1.0.2: @@ -89,7 +91,7 @@ packages: engines: {node: '>=12.0.0'} dependencies: '@azure/abort-controller': 1.1.0 - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/core-http/1.2.6: @@ -107,7 +109,7 @@ packages: node-fetch: 2.6.7 process: 0.11.10 tough-cookie: 4.1.2 - tslib: 2.3.1 + tslib: 2.4.0 tunnel: 0.0.6 uuid: 8.3.2 xml2js: 0.4.23 @@ -123,7 +125,7 @@ packages: '@azure/core-http': 1.2.6 '@azure/core-tracing': 1.0.0-preview.11 events: 3.3.0 - tslib: 2.3.1 + tslib: 2.4.0 transitivePeerDependencies: - encoding dev: true @@ -132,7 +134,7 @@ packages: resolution: {integrity: sha512-H6Tg9eBm0brHqLy0OSAGzxIh1t4UL8eZVrSUMJ60Ra9cwq2pOskFqVpz2pYoHDsBY1jZ4V/P8LRGb5D5pmC6rg==} engines: {node: '>=12.0.0'} dependencies: - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/core-tracing/1.0.0-preview.11: @@ -141,7 +143,7 @@ packages: dependencies: '@opencensus/web-types': 0.0.7 '@opentelemetry/api': 1.0.0-rc.0 - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/core-tracing/1.0.0-preview.7: @@ -158,7 +160,7 @@ packages: dependencies: '@opencensus/web-types': 0.0.7 '@opentelemetry/api': 0.10.2 - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/identity/1.0.3: @@ -182,7 +184,7 @@ packages: resolution: {integrity: sha512-aK4s3Xxjrx3daZr3VylxejK3vG5ExXck5WOHDJ8in/k9AqlfIyFMMT1uG7u8mNjX+QRILTIn0/Xgschfh/dQ9g==} engines: {node: '>=12.0.0'} dependencies: - tslib: 2.3.1 + tslib: 2.4.0 dev: true /@azure/msal-browser/2.22.0: @@ -208,7 +210,7 @@ packages: '@azure/logger': 1.0.3 '@opentelemetry/api': 0.10.2 events: 3.3.0 - tslib: 2.3.1 + tslib: 2.4.0 transitivePeerDependencies: - encoding dev: true @@ -225,7 +227,7 @@ packages: '@azure/logger': 1.0.3 '@opentelemetry/api': 0.10.2 events: 3.3.0 - tslib: 2.3.1 + tslib: 2.4.0 transitivePeerDependencies: - encoding dev: true @@ -1126,7 +1128,7 @@ packages: dependencies: '@azure/msal-browser': 2.22.0 '@babel/runtime': 7.19.4 - tslib: 2.3.1 + tslib: 2.4.0 dev: false /@microsoft/office-ui-fabric-react-bundle/1.15.2_7ombvvupg4tnmt4iqt5m47i6cu: @@ -1789,6 +1791,31 @@ packages: webpack-dev-server: 3.11.2_jtacdaqalodjhudd6qhs6dld5q dev: true + /@pnp/core/3.8.0: + resolution: {integrity: sha512-xPUohlAxbLate6yjR0+ajE29PJouhLqKW6iO37Xl3npT5IdC3C8k/W/RTvXEu1xegHAM+LVYQ3/OhKr+zxf6tw==} + engines: {node: '>=14.15.1'} + dependencies: + tslib: 2.4.0 + dev: false + + /@pnp/queryable/3.8.0: + resolution: {integrity: sha512-W2pX05FmIuFaQTNqcbrblgFjd9WVc0W4ElKAf5u4vMp0zlPidtsybkME6YC0o4k9+4LgTT9HZzCEY3ovuxhZ4g==} + engines: {node: '>=14.15.1'} + dependencies: + '@pnp/core': 3.8.0 + tslib: 2.4.0 + dev: false + + /@pnp/sp/3.8.0: + resolution: {integrity: sha512-8mfvaCODbdfud3lJVRWbVWIQ4SlbN3sNBhSEDq4fHnC/SNSn21V2ADOR//LqYcovdPQU3AKTlqrorItoSnK8/g==} + engines: {node: '>=14.15.1'} + requiresBuild: true + dependencies: + '@pnp/core': 3.8.0 + '@pnp/queryable': 3.8.0 + tslib: 2.4.0 + dev: false + /@pnpm/error/1.4.0: resolution: {integrity: sha512-vxkRrkneBPVmP23kyjnYwVOtipwlSl6UfL+h+Xa3TrABJTz5rYBXemlTsU5BzST8U4pD7YDkTb3SQu+MMuIDKA==} engines: {node: '>=10.16'} @@ -14150,6 +14177,10 @@ packages: /tslib/2.3.1: resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} + dev: false + + /tslib/2.4.0: + resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} /tsutils/3.21.0_typescript@4.5.5: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} diff --git a/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/ReactAssociatedHubLinksWebPart.ts b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/ReactAssociatedHubLinksWebPart.ts index 772de5f4b..2cd6dd4df 100644 --- a/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/ReactAssociatedHubLinksWebPart.ts +++ b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/ReactAssociatedHubLinksWebPart.ts @@ -1,29 +1,56 @@ -import * as React from "react"; -import * as ReactDom from "react-dom"; -import { Version } from "@microsoft/sp-core-library"; -import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane"; -import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; -import "../../../assets/dist/tailwind.css"; +import '../../../assets/dist/tailwind.css'; +import '@pnp/sp/search'; +import '@pnp/sp/webs'; +import '@pnp/sp/sites'; + +import * as React from 'react'; +import * as ReactDom from 'react-dom'; + +import { Version } from '@microsoft/sp-core-library'; +import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane'; +import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; +import { SPFI, spfi, SPFx } from '@pnp/sp'; import { - ReactAssociatedHubLinks, - IReactAssociatedHubLinksProps, -} from "./components/ReactAssociatedHubLinks"; + IReactAssociatedHubLinksProps, ReactAssociatedHubLinks +} from './components/ReactAssociatedHubLinks'; +import { ILink } from './utils/ILink'; +import { SearchResults } from '@pnp/sp/search'; export interface IReactAssociatedHubLinksWebPartProps { description: string; } export default class ReactAssociatedHubLinksWebPart extends BaseClientSideWebPart { - public render(): void { + private _sp: SPFI; + + public async render(): Promise { + const links = await this.getAssociatedSitesLinks(); const element: React.ReactElement = - React.createElement(ReactAssociatedHubLinks, {}); + React.createElement(ReactAssociatedHubLinks, { + links, + }); ReactDom.render(element, this.domElement); } - protected onInit(): Promise { - return super.onInit(); + protected async getAssociatedSitesLinks() { + const site = await this._sp.site(); + const searchResults: SearchResults = await this._sp.search( + `DepartmentId=${site.Id} contentclass:sts_site -SiteId:${site.Id}` + ); + const associatedSitesLinks: ILink[] = + searchResults.PrimarySearchResults.map((result) => ({ + title: result.Title, + url: result.Path, + logoUrl: result.SiteLogo + } as ILink)); + return associatedSitesLinks; + } + + protected async onInit(): Promise { + await super.onInit(); + this._sp = spfi().using(SPFx(this.context)); } protected onDispose(): void { diff --git a/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/components/ReactAssociatedHubLinks.tsx b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/components/ReactAssociatedHubLinks.tsx index 1192fbb08..64bb0e169 100644 --- a/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/components/ReactAssociatedHubLinks.tsx +++ b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/components/ReactAssociatedHubLinks.tsx @@ -1,9 +1,33 @@ -import * as React from "react"; +import { Icon } from 'office-ui-fabric-react'; +import * as React from 'react'; -interface IReactAssociatedHubLinksProps {} +import { ILink } from '../utils/ILink'; -const ReactAssociatedHubLinks = () => { - return
Test
; +interface IReactAssociatedHubLinksProps { + links: ILink[]; +} + +const ReactAssociatedHubLinks = (props: IReactAssociatedHubLinksProps) => { + return ( +
+ {props.links.map((link) => ( + + {link.logoUrl ? ( + logo + ) : ( + + )} + {link.title} + + ))} +
+ ); }; export { IReactAssociatedHubLinksProps, ReactAssociatedHubLinks }; diff --git a/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/utils/ILink.ts b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/utils/ILink.ts new file mode 100644 index 000000000..f651a9198 --- /dev/null +++ b/samples/react-associated-hub-links/src/webparts/reactAssociatedHubLinks/utils/ILink.ts @@ -0,0 +1,5 @@ +export interface ILink { + title: string; + url: string; + logoUrl: string; +} \ No newline at end of file