Graph User Properties

GraphConsumer.ts

/* eslint-disable */

// npm install @microsoft/microsoft-graph-types --save-dev

import { MSGraphClientV3 } from "@microsoft/sp-http";
import { escape } from "@microsoft/sp-lodash-subset";
import { WebPartContext } from "@microsoft/sp-webpart-base";

// businessPhones,directReports,displayName,givenName,id,imageUrl,jobTitle,mail,manager,mobilePhone,officeLocation,preferredLanguage,surname,userPrincipalName,department,ageGroup,city,companyName,country,employeeType,faxNumber,employeeHireDate,userType
export const graphUserProps = [
  "imageUrl",
  "businessPhones",
  "city",
  "companyName",
  "country",
  "department",
  "displayName",
  "employeeHireDate",
  "faxNumber",
  "jobTitle",
  "mobilePhone",
  "officeLocation",
  "userPrincipalName",
  // "ageGroup",
  // "employeeType",
  // "directReports",
  // "givenName",
  // "id",
  // "mail",
  // "manager",
  // "preferredLanguage",
  // "surname",
  // "userType",
];

export interface GraphUser {
  id: string;
  mail: string | null;
  mobilePhone: string | null;
  businessPhones: string[];
  officeLocation: string;
  preferredLanguage: string;
  displayName: string;
  givenName: string;
  surname: string;
  jobTitle: string;
  userPrincipalName: string;
  directReports?: GraphUser[];
  manager?: GraphUser;
}

export interface GraphUsersDataType {
  "@odata.context": string;
  "@odata.nextLink": string;
  value?: GraphUser[];
}

export const queryNextLink = (
  context: WebPartContext,
  nextLink: string
): Promise<GraphUsersDataType> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(nextLink)
            .version("v1.0")
            .get((err, res) => {
              if (err) {
                reject(err);
                return;
              }

              resolve(res);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};

export const queryGraphApi = (
  context: WebPartContext,
  type?: "directReports" | "manager",
  userEmail = ""
): Promise<GraphUsersDataType | GraphUser> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(`users/${escape(userEmail)}`)
            .version("v1.0")
            .headers({ ConsistencyLevel: "eventual" })
            .expand(`${escape(type)}($levels=max)`) // $select=${escape(selectGraphFields.join(","))},userPrincipalName;
            .select(graphUserProps.join(",")) // escape(selectGraphFields.join(",") + ",userPrincipalName")
            // .top(999)
            // .filter("accountEnabled eq true and userType eq 'Member' and mail ne null and displayName ne null and assignedLicenses/$count ne 0")
            // .count(true)
            .get((err, res) => {
              if (err) {
                console.error(err);
                reject(err);
                return;
              }

              resolve(res);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};

export const getUserCountFromGraph = (
  context: WebPartContext
): Promise<number> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(`users/$count`)
            .version("v1.0")
            .headers({ ConsistencyLevel: "eventual" })
            .get((err, res) => {
              if (err) {
                reject(err);
                return;
              }

              resolve(res);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};

export const getOrgBrandLogoFromGraph = (
  context: WebPartContext,
  orgId: string
): Promise<Blob | null> => {
  /* const getDefaultOrgLogo = async (): Promise<Blob | undefined> => {
    let defaultOrgLogo: Blob | undefined;
    try {
      defaultOrgLogo = await fetch(
        "https://static.vecteezy.com/system/resources/previews/005/720/273/original/office-building-icon-two-point-perspective-buildings-illustration-isolated-on-white-background-free-vector.jpg"
      ).then((r) => r.blob());
    } catch (error) {
      defaultOrgLogo = undefined;
      console.log("error in catch", error);
    }
    return defaultOrgLogo;
  }; */

  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(
              `organization/${orgId}/branding/localizations/default/bannerLogo`
            )
            .version("v1.0")
            .get(async (err, res) => {
              resolve(res);
            })
            .catch((err) => {
              // getDefaultOrgLogo().then((r: Blob) => resolve(r));
              resolve(null);
            });
        })
        .catch((err) => {
          reject(err);
        });
    } catch (error) {
      reject(error);
    }
  });
};

export const getOrgInfoFromGraph = (
  context: WebPartContext
): Promise<{ id: string; displayName: string }[] | undefined> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(`organization`)
            .version("v1.0")
            .select("id,displayName")
            .get((err, res) => {
              if (err) {
                reject(err);
                return;
              }

              resolve(res.value);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};

export const getUserPicFromGraph = (
  context: WebPartContext,
  userEmail: string
): Promise<Blob> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api(`users/${escape(userEmail)}/photo/$value`)
            .version("v1.0")
            .get((err, res) => {
              if (err) {
                reject(err);
                return;
              }

              resolve(res);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};

export const getPeopleWithGraph = (
  context: WebPartContext,
  searchFor: string
): Promise<GraphUsersDataType> => {
  return new Promise((resolve, reject) => {
    try {
      context.msGraphClientFactory
        .getClient("3")
        .then((client: MSGraphClientV3) => {
          // From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
          client
            .api("users")
            .version("v1.0")
            .search(escape(searchFor))
            // .select("displayName,scoredEmailAddresses,personType,department,jobTitle,userPrincipalName")
            // .filter("personType/subclass eq 'OrganizationUser' or personType/subclass eq 'Guest'")
            .top(999)
            .get((err, res) => {
              if (err) {
                console.error(err);
                reject(err);
                return;
              }

              resolve(res);
            })
            .catch((err) => reject(err));
        })
        .catch((err) => reject(err));
    } catch (error) {
      reject(error);
    }
  });
};