{"id":196,"date":"2019-10-12T11:43:12","date_gmt":"2019-10-12T11:43:12","guid":{"rendered":"https:\/\/raminahmadi.co.uk\/?p=196"},"modified":"2025-07-11T16:25:03","modified_gmt":"2025-07-11T16:25:03","slug":"sharepoint-framework-azure-function-and-react-hooks-where-the-magic-happens-part-2","status":"publish","type":"post","link":"https:\/\/codingwithramin.com\/?p=196","title":{"rendered":"SharePoint Framework, Azure Function and React Hooks, where the magic happens \u2013 part 2"},"content":{"rendered":"\n

In the previous post we developed the functions to get and apply a provisioning template using PnP core library and deployed them to the Azure Portal, then we configured the Application Registration by uploading the certificate needed for authentication process and added API permissions we need to do the operations on SharePoint.<\/p>\n\n\n\n

In this post we will implement the web part to call our functions and also we will learn how we can use some of the React Hooks such as useContext, useState and useEffect.<\/p>\n\n\n\n

I’m not going to implement the web part from scratch in this post so please download the source code from here<\/a> and continue reading.<\/p>\n\n\n\n

React Hooks<\/h2>\n\n\n\n

React Hooks are so magical as they make function components as powerful as class components , if you haven’t heard about them please read here<\/a> before go further.<\/p>\n\n\n\n

So let’s start with Context, as you know SPFx components start with a single parent component that splits up to many levels of child components.<\/p>\n\n\n\n

Imagine one of the most common issues we have in SPFx components, passing data all the way down to the last child component, and as you know data is passed up down from one component to another through props, so you have to pass data through every component by setting the props until you reach the last component!<\/p>\n\n\n\n

This is where Context<\/strong> <\/em>comes to the rescue. with React Context API you can pass data deeply throughout your app without having to manually pass props down through multiple levels. <\/p>\n\n\n\n

We can create a Context in React by using React.createContext, providing the data types (as we use Typescript) and then passing in an initial value (which is null in our example below)<\/p>\n\n\n\n

import * as React from 'react';\nimport { MessageBarType } from 'office-ui-fabric-react\/lib\/MessageBar';\nimport AppService from '..\/..\/..\/..\/services\/appService';\n\nexport interface IMessageBarSettings{\n    visible:boolean;\n    message: string;\n    type: MessageBarType;\n  }\n  \n  interface IAppContextInterface {\n    appService: AppService;\n    isGlobalAdmin: boolean;\n    isSiteOwner: boolean;\n    webUrl: string;\n    messageBarSettings: IMessageBarSettings;\n    isLoading:boolean;\n    toggleLoading: (visible:boolean)=>void;\n    updateMessageBarSettings: (settings:IMessageBarSettings)=>void;\n  }\n  \nconst AppContext = React.createContext<IAppContextInterface | null>(null);\nexport default AppContext; \n<\/pre><\/div>\n\n\n\n
As you can see we have IMessageBarSettings interface that helps us to have a global message bar component as you will see later in this post as well as some global properties and methods to update some of them (when we need to display a loading image or update the message bar).<\/p>\n\n\n\n
Next we need to wrap our components inside the Context using the Provider which helps to pass the data through them.<\/p>\n\n\n\n
import * as React from 'react';\nimport styles from '.\/App.module.scss';\nimport { IAppProps } from '.\/IAppProps';\nimport AppContext,{IMessageBarSettings} from \".\/AppContext\";\nimport { MessageBarType } from 'office-ui-fabric-react\/lib\/MessageBar';\nimport AppContent from \".\/AppContent\";\nimport * as Strings from \"SiteProvisioningWebPartWebPartStrings\";\n\nconst App: React.FC<IAppProps> = (props) => {\n  const {webUrl,appService} = props;\n  const [isGlobalAdmin,setIsGlobalAdmin] = React.useState(false);\n  const [isSiteOwner,setIsSiteOwner] = React.useState(false);\n  const [isLoading,setIsLoading] = React.useState(false);\n  const [messageBarSettings,setMessageBarSettings] =React.useState({\n    message:\"\",\n    type:MessageBarType.info,\n    visible:false\n  } as IMessageBarSettings);\n  \n  \n  const updateMessageBarSettings = (settings:IMessageBarSettings)=>{\n    setMessageBarSettings(settings);\n  };\n\n  const toggleLoading = (visibleLoading:boolean)=>{\n    setIsLoading(visibleLoading);\n  };\n\n  React.useEffect(()=>{\n    let didCancel = false;\n\n    const fetchIsGloablAdmin = async ()=>{\n      const globalAdmin = await appService.checkUserIsGlobalAdmin();      \n      if (!didCancel) {\n        setIsGlobalAdmin(globalAdmin);\n      }\n      \n    };\n  \n    const fetchIsSiteOwner = async ()=>{\n      const siteOwner = await appService.IsSiteOwner();\n      if (!didCancel) {\n        setIsSiteOwner(siteOwner);\n        if(!siteOwner){\n          setMessageBarSettings({\n            message: Strings.ErrorMessageUserNotAdmin,\n            type: MessageBarType.error,\n            visible: false\n          });\n        }\n      }\n    };\n\n    fetchIsGloablAdmin();\n    fetchIsSiteOwner();\n\n    return ()=>{didCancel=true;};\n  },[]);\n\n  return (\n    <div className={styles.siteProvisioningWebPart}>\n      <AppContext.Provider value={{ \n        appService,\n        isGlobalAdmin,\n        isSiteOwner,\n        webUrl,\n        messageBarSettings,\n        isLoading,\n        toggleLoading,\n        updateMessageBarSettings\n        } }>\n      <AppContent\/>\n      <\/AppContext.Provider>\n    <\/div>\n  );\n};\n\nexport default App;<\/pre><\/div>\n\n\n\n
As you will see, there is no class component and we use only function components as they give us many benefits, you can keep your code maintainable and readable, no setting any state and we only focus on displaying the data.<\/p>\n\n\n\n
AppContext.Provider has only one property called value and you need to pass the default values for the properties you defined, some of these values coming through calling a service method, this is where useEffect hook helps us to manage the side effects of a component, it servers componentDidMount<\/strong>, componentDidUpdate<\/strong> and componentWillUnmount<\/strong> in only one place!<\/p>\n\n\n\n
By default, React runs the effects after every render (including the first render), the returning method inside useEffect specify how to \u201cclean up\u201d after it’s done (it’s optional).<\/p>\n\n\n\n
you cannot return a Promise from useEffect. JavaScript async functions always return a promise and useEffect should exclusively return another function<\/strong>, which is used for cleaning up the effect.<\/p>\n\n\n\n
Access context from child components<\/h3>\n\n\n\n
 All we need to do to access the Context\u2019s state is import it into a component and use the useContext Hook in React! <\/p>\n\n\n\n
import AppContext from \"..\/App\/AppContext\";\n\n----\n\nconst ctx = React.useContext(AppContext);<\/pre><\/div>\n\n\n\n
How greate is that? now you can easily get access to all values and methods of the context.<\/p>\n\n\n\n
const onUploadCompleted = (response) => {\n    ctx.updateMessageBarSettings({\n        message: Strings.SuccessMessage,\n        type: MessageBarType.success,\n        visible: true\n    });\n};\n\n<div hidden={ctx.isLoading}>\n    <TextField disabled={!ctx.isGlobalAdmin} label=\"Site URL\" value={webUrl} onChanged={(value) => setWebUrl(value)} \/>\n    <br \/>\n    <FilePond disabled={!ctx.isSiteOwner} onremovefile={fileRemoved} server={\n        {\n            url: ctx.appService.applyProvisioningTemplateUrl,\n            process: {\n                        method: 'POST',\n                        ondata: (formData) => {\n                            formData.append('WebUrl', webUrl);\n                            return formData;\n                    },\n                onload: onUploadCompleted,\n                onerror: onUploadFailed\n            }\n        }\n    } \/>\n<\/div><\/pre><\/div>\n\n\n\n
You can get a value like ctx.isSiteOwner<\/strong> or call a method like ctx.updateMessageBarSettings<\/strong> without passing them through props!<\/p>\n\n\n\n
 useState hook<\/h3>\n\n\n\n
Before react hooks we had to define our values in State object and call this.setState to update values, useState hook makes it easier for us to define and update values.<\/p>\n\n\n\n
const [webUrl, setWebUrl] = React.useState(ctx.webUrl);\nconst [template, setTemplate] = React.useState(\"\");<\/pre><\/div>\n\n\n\n
useState returns a tuple where the first parameter is the current state of the value and second parameter is the method that will allow us to update the state. In above sample ctx.webUrl is the initial value of webUrl or template is a string value with an empty string as intial value, with setWebUrl or setTemplate methods we can update the state whenever we need it.<\/p>\n\n\n\n
const response: HttpClientResponse = await ctx.appService.GetProvisioningTemplate(webUrl, handlers.join(\",\"));\nconst responseText = await response.text();\nif (response.status === 200)\n    setTemplate(responseText);<\/pre><\/div>\n\n\n\n
Also when you are using useState you should remember:<\/p>\n\n\n\n