Add types

README.md

@@ -190,7 +190,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
     embedUrl: embedUrl,
     embedId: embedId,
     reportMode: "View", // "Edit"
-    permissions: "View", // "All" (when using "Edit" mode)
+    permissions: "Read", // "All" (when using "Edit" mode)
     extraSettings: {
       filterPaneEnabled: false,
       navContentPaneEnabled: false,
@@ -305,7 +305,7 @@ const simulateAjaxCall = new Promise(function(resolve, reject) {
     embedUrl: "embedUrl",
     embedId: "embedId",
     reportMode: "View", // "Edit"
-    permissions: "View", // "All" (when using "Edit" mode)
+    permissions: "Read", // "All" (when using "Edit" mode)
   });
 });
 
@@ -339,7 +339,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
   return (
     <div className="report-container">
       <div className="report" ref={reportRef} />
-      <button onClick={getMyConfiguraionFromServer}>Get config from AJAX call</button>
+      <button onClick={getMyConfigurationFromServer}>Get config from AJAX call</button>
     </div>
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-report-component",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "It's a minimalistic react component to embed a Microsoft PowerBI report, dashboard or tile into your react application.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/lib/hooks/useReport.ts

@@ -5,18 +5,20 @@ import {
   createEmbedConfigBasedOnEmbedType,
   validateBootrapConfig
 } from '../utils/config';
-import { Config } from '../types';
+import { Config, ConfigProps } from '../types';
 import { Embed } from 'embed';
 
-declare type UseReport = [any, (ref: any, config: Config) => void];
+declare type _UseReport = [any, (ref: any, config: Config) => void];
 
-declare type UseBootstrap = [any, (ref: any, config: Config) => void, (ref: any, config: Config) => void];
+declare type UseReport = [any, (ref: any, config: ConfigProps) => void];
+
+declare type UseBootstrap = [any, (ref: any, config: ConfigProps) => void, (ref: any, config: ConfigProps) => void];
 
 // powerbi object is global
 // used inside Embed.jsx has more logic tied to props of Embed.
 function _useReport(
   performOnEmbed: (report: any, reportRef?: any) => void
-): UseReport {
+): _UseReport {
   const [report, _setEmbedInstance] = useState<Embed | null>(null);
 
   const setEmbed = (embedDivRef: any, embedConfig: Config): void => {
@@ -54,8 +56,8 @@ function _useReport(
 function useReport(): UseReport {
   const [report, _setEmbedInstance] = useState<Embed | null>(null);
 
-  const embed = (ref: any, config: Config): void => {
-    const embedConfig = createEmbedConfigBasedOnEmbedType(config);
+  const embed = (ref: any, config: ConfigProps): void => {
+    const embedConfig: Config = createEmbedConfigBasedOnEmbedType(config);
     const errors = validateConfig(embedConfig);
     if (!errors || errors.length === 0) {
       const _embed = window.powerbi.embed(ref.current, embedConfig as any);
@@ -72,12 +74,12 @@ function useReport(): UseReport {
 
 
 function useBootstrap(): UseBootstrap {
-  const [isBotstrapped, setIsBootstrapped] = useState<Boolean>(false);
+  const [isBootstrapped, setIsBootstrapped] = useState<Boolean>(false);
   const [report, _setEmbedInstance] = useState<Embed | null>(null);
 
-  const embed = (ref: any, config: Config): void => {
-    if(isBotstrapped) {
-      const embedConfig = createEmbedConfigBasedOnEmbedType(config);
+  const embed = (ref: any, config: ConfigProps): void => {
+    if(isBootstrapped) {
+      const embedConfig: Config = createEmbedConfigBasedOnEmbedType(config);
       const errors = validateConfig(embedConfig);
       if (!errors || errors.length === 0) {
         const _embed = window.powerbi.embed(ref.current, embedConfig as any);
@@ -92,8 +94,8 @@ function useBootstrap(): UseBootstrap {
     }
   };
 
-  const bootstrap = (ref: any, config: Config) => {
-    const bootstrapConfig = createEmbedConfigBasedOnEmbedType(config);
+  const bootstrap = (ref: any, config: ConfigProps) => {
+    const bootstrapConfig: Config = createEmbedConfigBasedOnEmbedType(config);
     if (validateBootrapConfig(bootstrapConfig)) {
       window.powerbi.bootstrap(ref.current, bootstrapConfig);
       setIsBootstrapped(true);

src/lib/types.ts

@@ -1,6 +1,6 @@
 export type ReportModes = 'View' | 'Edit' | 'Create';
 
-export type EmbedType = 'report' | 'dashboard' | 'tile';
+export type EmbedType = 'report' | 'dashboard' | 'tile' | 'visual';
 
 export type TokenType = 'Aad' | 'Embed';
 
@@ -19,41 +19,33 @@ export interface IError {
   errorCode?: string;
 }
 
-export interface TileProps {
+interface CommonProps {
+  embedType: EmbedType;
   tokenType: TokenType;
   accessToken: string;
   embedUrl: string;
-  embedId: string;
-  dashboardId: string;
+  embedId?: string;
   style?: any;
   onLoad?: Function;
+}
+
+export interface TileProps extends CommonProps {  
+  dashboardId: string;
   onClick?: Function;
 }
 
-export interface DashboardProps {
-  tokenType: TokenType;
-  accessToken: string;
-  embedUrl: string;
-  embedId: string;
+export interface DashboardProps extends CommonProps {
   pageView: PageView;
-  style?: any;
-  onLoad?: Function;
   onTileClicked?: Function;
 }
 
-export interface ReportProps {
-  tokenType: TokenType;
-  accessToken: string;
-  embedUrl: string;
-  embedId: string;
+export interface ReportProps extends CommonProps {
   groupId?: string;
   permissions: Permissions;
   reportMode: ReportModes;
   pageName?: string;
   extraSettings?: any;
-  style?: any;
   datasetId?: string;
-  onLoad?: Function;
   onRender?: Function;
   onError?: Function;
   onButtonClicked?: Function;
@@ -63,15 +55,9 @@ export interface ReportProps {
   onSave?: Function;
 }
 
-export interface ReportVisualProps {
-  tokenType: TokenType;
-  accessToken: string;
-  embedUrl: string;
-  embedId: string;
+export interface ReportVisualProps extends CommonProps {
   pageName: string;
   visualName: string;
-  style?: any;
-  onLoad?: Function;
   onRender?: Function;
   onSelectData?: Function;
 }
@@ -93,6 +79,8 @@ export interface Config {
   dashboardId: string;
 }
 
+export type ConfigProps = ReportProps | DashboardProps | TileProps | ReportVisualProps;
+
 export interface Embed {
   config: Config;
   performOnEmbed: (report: any, reportRef?: any) => void;

src/lib/utils/config.ts

@@ -8,6 +8,7 @@ import {
   IError,
   Config,
   ReportVisualProps,
+  ConfigProps
 } from '../types';
 
 const createReportConfig = (props: ReportProps): Config => {
@@ -126,7 +127,7 @@ const createReportVisualConfig = (props: ReportVisualProps): Config => {
   });
 };
 
-const validateTypeConfig = (config: any): IError[] => {
+const validateTypeConfig = (config: Config): IError[] => {
   switch (config.type) {
     case 'report':
       return pbi.models.validateReportLoad(config);
@@ -148,28 +149,28 @@ const validateCreateReportConfig = (config: any): IError[] => {
   return pbi.models.validateCreateReport(config);
 };
 
-const validateConfig = (config: any): IError[] => {
+const validateConfig = (config: Config): IError[] => {
   const isCreateMode = config.reportMode === 'Create';
   return isCreateMode
     ? validateCreateReportConfig(config)
     : validateTypeConfig(config);
 };
 
-const validateBootrapConfig = (config: any): boolean => {
+const validateBootrapConfig = (config: Config): boolean => {
   return !!config.type && !!config.tokenType;
 };
 
-const createEmbedConfigBasedOnEmbedType = (config: any): Config => {
+const createEmbedConfigBasedOnEmbedType = (config: ConfigProps): Config => {
   const { embedType } = config;
   switch (embedType) {
     case 'report':
-      return createReportConfig(config);
+      return createReportConfig(config as ReportProps);
     case 'dashboard':
-      return createDashboardConfig(config);
+      return createDashboardConfig(config as DashboardProps);
     case 'tile':
-      return createTileConfig(config);
+      return createTileConfig(config as TileProps);
     case 'visual':
-      return createReportVisualConfig(config);
+      return createReportVisualConfig(config as ReportVisualProps);
     default:
       throw Error('Wrong embed type!');
   }