Add useSessionStorage property and fix errors

Author: Whiteshark57

src/common/utilities/LocalesHelper.ts

@@ -1,3 +1,5 @@
+import { findIndex } from '@microsoft/sp-lodash-subset';
+
 export class LocalesHelper {
 
   private static locales = {
@@ -53,7 +55,7 @@ export class LocalesHelper {
     10266: 'sr-Cyrl-RS',
   };
   public static getLocaleId(localeName: string): number {
-    const pos: number = Object.keys(this.locales).findIndex(locKey => this.locales[locKey] === localeName);
+    const pos: number = findIndex(Object.keys(this.locales), locKey => this.locales[locKey] === localeName);
     if (pos > -1) {
       return parseInt(Object.keys(this.locales)[pos]);
     }

src/controls/listView/ListView.tsx

@@ -25,7 +25,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   private dropArea = null;
   private dropRef = element => {
     this.dropArea = element;
-  };
+  }
 
   constructor(props: IListViewProps) {
     super(props);

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -120,6 +120,12 @@ export interface ITaxonomyPickerProps  {
    * Note that error message should be specified in onGetErrorMessage
    */
   required?: boolean;
+
+  /**
+   * Specifies if you want to use session storage
+   * Default will be true
+   */
+   useSessionStorage?: boolean;
 }
 
 /**

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -111,7 +111,8 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       hideTagsNotAvailableForTagging,
       initialValues,
       validateOnLoad,
-      termsetNameOrID
+      termsetNameOrID,
+      useSessionStorage
     } = this.props;
 
     let isValidateOnLoad = validateOnLoad && initialValues && initialValues.length >= 1;
@@ -120,7 +121,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       const notFoundTerms: string[] = [];
       const notFoundTermIds: string[] = [];
 
-      const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging);
+      const termSet = await this.termsService.getAllTerms(termsetNameOrID, hideDeprecatedTags, hideTagsNotAvailableForTagging, useSessionStorage);
       const allTerms = termSet.Terms;
 
       for (let i = 0, len = initialValues.length; i < len; i++) {
@@ -152,7 +153,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
       // });
     }
 
-    this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging).then((response: ITermSet) => {
+    this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging, this.props.useSessionStorage).then((response: ITermSet) => {
       // Check if a response was retrieved
       let termSetAndTerms = response ? response : null;
       this.setState({
@@ -166,7 +167,7 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
    * Force update of the taxonomy tree - required by term action in case the term has been added, deleted or moved.
    */
   private async updateTaxonomyTree(): Promise<void> {
-    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging);
+    const termSetAndTerms = await this.termsService.getAllTerms(this.props.termsetNameOrID, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging, this.props.useSessionStorage);
 
     this.setState({
       termSetAndTerms

src/services/SPTermStorePickerService.ts

@@ -149,7 +149,7 @@ export default class SPTermStorePickerService {
    * Retrieve all terms for the given term set
    * @param termset
    */
-  public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean): Promise<ITermSet> {
+  public async getAllTerms(termset: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<ITermSet> {
     if (Environment.type === EnvironmentType.Local) {
       // If the running environment is local, load the data from the mock
       return this.getAllMockTerms();
@@ -168,7 +168,7 @@ export default class SPTermStorePickerService {
         }
       }
 
-      let childTerms = this.getTermsById(termsetId);
+      let childTerms = this.getTermsById(termsetId, useSessionStorage);
 
       if (childTerms) {
         return childTerms;
@@ -231,7 +231,13 @@ export default class SPTermStorePickerService {
               }
             }
 
-            sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet));
+            try {
+              if (useSessionStorage && window.sessionStorage) {
+                window.sessionStorage.setItem(termsetId, JSON.stringify(termStoreResultTermSet));
+              }
+            } catch (error) {
+              // Do nothing, sometimes storage quota exceed error if too many items
+            }
             return termStoreResultTermSet;
           }
           return null;
@@ -282,12 +288,21 @@ export default class SPTermStorePickerService {
     }
   }
 
-  private getTermsById(termId) {
-    var terms = sessionStorage.getItem(termId);
-    if (terms)
-      return JSON.parse(terms);
-    else
+  private getTermsById(termId, useSessionStorage: boolean = true) {
+    try {
+      if (useSessionStorage && window.sessionStorage) {
+        let terms = window.sessionStorage.getItem(termId);
+        if (terms)
+          return JSON.parse(terms);
+        else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    } catch (error) {
       return null;
+    }
   }
 
   private searchTermsBySearchText(terms, searchText) {
@@ -303,7 +318,8 @@ export default class SPTermStorePickerService {
       // If the running environment is local, load the data from the mock
       return SPTermStoreMockHttpClient.searchTermsByName(searchText);
     } else {
-      var childTerms = this.getTermsById(termId);
+      const { useSessionStorage } = this.props;
+      let childTerms = this.getTermsById(termId, useSessionStorage);
       if (childTerms) {
         return this.searchTermsBySearchText(childTerms, searchText);
       }
@@ -318,7 +334,8 @@ export default class SPTermStorePickerService {
           termsetNameOrID,
           termId,
           hideDeprecatedTags,
-          hideTagsNotAvailableForTagging);
+          hideTagsNotAvailableForTagging,
+          useSessionStorage);
 
         if (terms) {
           return this.searchTermsBySearchText(terms, searchText);
@@ -332,7 +349,7 @@ export default class SPTermStorePickerService {
   /**
    * Retrieve all terms for the given term set and anchorId
    */
-  public async getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean): Promise<IPickerTerm[]> {
+  public async getAllTermsByAnchorId(termsetNameOrID: string, anchorId: string, hideDeprecatedTags?: boolean, hideTagsNotAvailableForTagging?: boolean, useSessionStorage: boolean = true): Promise<IPickerTerm[]> {
 
     let returnTerms: IPickerTerm[] = [];
 
@@ -343,7 +360,7 @@ export default class SPTermStorePickerService {
         returnTerms.push(this.convertTermToPickerTerm(term));
       });
     } else {
-      const childTerms = this.getTermsById(anchorId);
+      const childTerms = this.getTermsById(anchorId, useSessionStorage);
       if (childTerms) {
         return childTerms;
       }
@@ -361,7 +378,13 @@ export default class SPTermStorePickerService {
             returnTerms.push(this.convertTermToPickerTerm(term));
           });
 
-          sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+          try {
+            if (useSessionStorage && window.sessionStorage) {
+              window.sessionStorage.setItem(anchorId, JSON.stringify(returnTerms));
+            }
+          } catch (error) {
+            // Do nothing
+          }
         }
       } else {
         terms.forEach(term => {