updates to sorting on categories

samples/react-faqs/README.md

@@ -57,6 +57,7 @@ react-Faqs | [Arun Kumar Perumal](https://github.com/arunkumarperumal) - LinkedI
 Version|Date|Comments
 -------|----|--------
 1.0|March 07, 2022|Initial release
+1.1|June 02, 2022|Updates to sorting on Categories
 
 
 ## Minimal path to awesome

samples/react-faqs/package-lock.json

@@ -2980,7 +2980,6 @@
             "@types/adal-angular": "1.0.1",
             "adal-angular": "1.0.16",
             "msal": "1.4.13",
-            "msalLegacy": "npm:msal@1.4.12",
             "tslib": "~1.10.0"
           }
         },
@@ -3099,7 +3098,6 @@
         "@types/adal-angular": "1.0.1",
         "adal-angular": "1.0.16",
         "msal": "1.4.13",
-        "msalLegacy": "npm:msal@1.4.12",
         "tslib": "~1.10.0"
       }
     },
@@ -4014,7 +4012,6 @@
             "@types/adal-angular": "1.0.1",
             "adal-angular": "1.0.16",
             "msal": "1.4.13",
-            "msalLegacy": "npm:msal@1.4.12",
             "tslib": "~1.10.0"
           }
         },
@@ -4396,7 +4393,6 @@
             "@types/adal-angular": "1.0.1",
             "adal-angular": "1.0.16",
             "msal": "1.4.13",
-            "msalLegacy": "npm:msal@1.4.12",
             "tslib": "~1.10.0"
           }
         },
@@ -16314,14 +16310,6 @@
         "tslib": "^1.9.3"
       }
     },
-    "msalLegacy": {
-      "version": "npm:msal@1.4.12",
-      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
-      "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
     "multicast-dns": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",

samples/react-faqs/src/webparts/faQs/FaQsWebPart.ts

@@ -73,6 +73,7 @@ export default class FaqsWebPart extends BaseClientSideWebPart<IFaqsWebPartProps
         displayMode: this.displayMode,
         guid: this.guid,
         title: this.properties.title,
+        categoryData: this.properties.categoryData,
         accordion:true,
         fUpdateProperty: (value: string) => {
           this.properties.title = value;

samples/react-faqs/src/webparts/faQs/components/Accordions.tsx

@@ -114,7 +114,7 @@ export default class Accordions extends React.Component<IAccordionsProps, IAccor
 
 
   public render(): React.ReactElement<IAccordionsProps> {
-    const categoryNames = this.state.categories ? Object.keys(this.state.categories) : null;
+    const categoryNames = this.props.categoryData ? this.props.categoryData : null;
 
     const searchCategoryNames = this.state.searchCategories ? Object.keys(this.state.searchCategories) : null;
     const searchValue = this.state.searchValue;
@@ -169,13 +169,13 @@ export default class Accordions extends React.Component<IAccordionsProps, IAccor
               <AccordionItemTitle className={styles.accordion__title}  id={this.props.guid + '-title-' + index}>
               <div className={styles.accordion__arrow} role="presentation" />
                   <div className={styles["positionRelative"]} >
-                    {categoryName}
+                    {categoryName.title}
                   </div>
               </AccordionItemTitle>
               <AccordionItemBody className={styles.accordion__body} hideBodyClassName={styles["accordionBodyHidden"]}>                    
               {
                 // Loop over all links per group
-                this.state.categories[categoryName].map(faq => (
+                this.state.categories[categoryName.title].map(faq => (
                 
                  <div className={styles.faqQuestionBlock}> 
                     <h2>{faq.questionTitle}</h2>

samples/react-faqs/src/webparts/faQs/components/Faqs.tsx

@@ -3,7 +3,7 @@ import styles from './Faqs.module.scss';
 import * as strings from 'FaqsWebPartStrings';
 import { IFaqsProps } from './IFaqsProps';
 import { IFaqsState } from './IFaqsState';
-import { escape, groupBy, toPairs, sortBy, fromPairs } from '@microsoft/sp-lodash-subset';
+import { escape,find, groupBy, toPairs, sortBy, fromPairs } from '@microsoft/sp-lodash-subset';
 import { Link } from 'office-ui-fabric-react/lib/components/Link';
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
@@ -32,10 +32,13 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
   private _processFaqs(): void {
     const {collectionData} = this.props;
     if (collectionData && collectionData.length > 0) {
+
+
       // Group by the group name
       let categories = groupBy(collectionData, Faq => Faq.category ? Faq.category : NO_CATEGORY_NAME);
       // Sort the group by the property name
       categories = fromPairs(sortBy(toPairs(categories), 0));
+
       
       this.setState({
         categories
@@ -109,7 +112,7 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
   public render(): React.ReactElement<IFaqsProps> {
 
     // Get all group names
-    const categoryNames = this.state.categories ? Object.keys(this.state.categories) : null;
+    const categoryNames = this.props.categoryData ? this.props.categoryData : null;
     const searchCategoryNames = this.state.searchCategories ? Object.keys(this.state.searchCategories) : null;
     const searchValue = this.state.searchValue;
    
@@ -160,11 +163,11 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
       categories = <Pivot linkSize={PivotLinkSize.large} className={styles.faqContent}>
       {
         categoryNames.map(categoryName => (
-          <PivotItem headerText={categoryName} key={categoryName}>
+          <PivotItem headerText={categoryName.title} key={categoryName.title}>
           
           {
             // Loop over all links per group
-            this.state.categories[categoryName].map(faq => (
+            this.state.categories[categoryName.title].map(faq => (
             
              <div className={styles.faqQuestionBlock}> 
                 <h2>{faq.questionTitle}</h2>

samples/react-faqs/src/webparts/faQs/components/IAccordionsProps.ts

@@ -5,7 +5,8 @@ export interface IAccordionsProps {
   collectionData: IFaq[];
   displayMode: DisplayMode;
   title: string;
-  accordion: boolean;
+  accordion: boolean;  
+  categoryData : any;
   guid : string; 
   
   fUpdateProperty: (value: string) => void;