From 6f1c73f6f2708dcf7d2daace5456af1e1614b586 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 16:43:50 +0530
Subject: [PATCH 1/7] Add new property 'pagedItems'

Add property 'pagedItems' to type 'IReactAccordionState'
---
 .../webparts/reactAccordion/components/IReactAccordionState.ts | 3 ++-
 .../src/webparts/reactAccordion/components/ReactAccordion.tsx  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts b/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts
index 9ad6c65af..be770bfa3 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts
@@ -2,8 +2,9 @@ import IAccordionListItem from '../models/IAccordionListItem';
 
 export interface IReactAccordionState {
   status: string;
+  pagedItems: IAccordionListItem[];
   items: IAccordionListItem[];
   listItems: IAccordionListItem[];
   isLoading: boolean;
   loaderMessage: string;
-}
\ No newline at end of file
+}
diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 95671e6bb..9f7f54f2d 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -26,6 +26,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
     super(props);
     this.state = {
       status: this.listNotConfigured(this.props) ? 'Please configure list in Web Part properties' : 'Ready',
+      pagedItems: [],
       items: [],
       listItems: [],
       isLoading: false,

From 1bf9fa7d50c002e89d3498917c505bb03318afe9 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:00:05 +0530
Subject: [PATCH 2/7] Replace 'items' with 'pagedItems'

Replace with 'pagedItems' everywhere, as that will have the correct items per page
---
 .../reactAccordion/components/ReactAccordion.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 9f7f54f2d..002333ced 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -53,7 +53,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       event === null ||
       event === "") {
       let listItemsCollection = [...this.state.listItems];
-      this.setState({ items: listItemsCollection.splice(0, this.props.maxItemsPerPage) });
+      this.setState({ pagedItems: listItemsCollection.splice(0, this.props.maxItemsPerPage) });
     }
     else {
       var updatedList = [...this.state.listItems];
@@ -84,7 +84,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
 
         this.setState({
           status: "",
-          items: listItemsCollection.splice(0, this.props.maxItemsPerPage),
+          pagedItems: listItemsCollection.splice(0, this.props.maxItemsPerPage),
+          items: response.value,
           listItems: response.value,
           isLoading: false,
           loaderMessage: ""
@@ -92,6 +93,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       }, (error: any): void => {
         this.setState({
           status: 'Loading all items failed with error: ' + error,
+          pagedItems: [],
           items: [],
           isLoading: false,
           loaderMessage: ""
@@ -111,10 +113,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
     let _pagedButtonClick = (pageNumber: number, listData: any) => {
       let startIndex: number = (pageNumber - 1) * pageCountDivisor;
       let listItemsCollection = [...listData];
-      this.setState({ items: listItemsCollection.splice(startIndex, pageCountDivisor) });
+      this.setState({ pagedItems: listItemsCollection.splice(startIndex, pageCountDivisor) });
     };
 
-    const items: JSX.Element[] = this.state.items.map((item: IAccordionListItem, i: number): JSX.Element => {
+    const items: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {
       return (
         <AccordionItem>
           <AccordionItemTitle className="accordion__title">

From 0f83eb3ca0df59ec184025a7589e6debf3df10a1 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:01:58 +0530
Subject: [PATCH 3/7] Rename constant to 'pagedItems'

Rename constant to 'pagedItems' for clarity
---
 .../src/webparts/reactAccordion/components/ReactAccordion.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 002333ced..b8b7545e3 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -116,7 +116,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       this.setState({ pagedItems: listItemsCollection.splice(startIndex, pageCountDivisor) });
     };
 
-    const items: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {
+    const pagedItems: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {
       return (
         <AccordionItem>
           <AccordionItemTitle className="accordion__title">
@@ -167,7 +167,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
             <div className='ms-Grid-col ms-u-lg12'>
               {this.state.status}
               <Accordion accordion={false}>
-                {items}
+                {pagedItems}
               </Accordion>
             </div>
           </div>

From 3da742ed5fcf1752086e8ff53d72ebd2ed86ac41 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:12:57 +0530
Subject: [PATCH 4/7] Fix paging implementation

Use 'items' instead of 'listItems' for paging as it'll always have updated data, ex on search
---
 .../webparts/reactAccordion/components/ReactAccordion.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index b8b7545e3..9f971b62f 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -105,7 +105,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
   public render(): React.ReactElement<IReactAccordionProps> {
     let displayLoader;
     let faqTitle;
-    let { listItems } = this.state;
+    let { items } = this.state;
     let pageCountDivisor: number = this.props.maxItemsPerPage;
     let pageCount: number;
     let pageButtons = [];
@@ -142,11 +142,11 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       displayLoader = (null);
     }
 
-    if (this.state.listItems.length > 0) {
-      pageCount = Math.ceil(this.state.listItems.length / pageCountDivisor);
+    if (this.state.items.length > 0) {
+      pageCount = Math.ceil(this.state.items.length / pageCountDivisor);
     }
     for (let i = 0; i < pageCount; i++) {
-      pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, listItems); }}> {i + 1} </PrimaryButton>);
+      pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);
     }
     return (
       <div className={styles.reactAccordion}>

From 888c7f439e3d4ab07fdab31aea77f1418b284268 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:19:21 +0530
Subject: [PATCH 5/7] Fix state change on search

Update both 'items' and 'pagedItems' on search event, to have the latest copy/reference
---
 .../reactAccordion/components/ReactAccordion.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 9f971b62f..68370157a 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -53,7 +53,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       event === null ||
       event === "") {
       let listItemsCollection = [...this.state.listItems];
-      this.setState({ pagedItems: listItemsCollection.splice(0, this.props.maxItemsPerPage) });
+      this.setState({
+        items: listItemsCollection,
+        pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage)
+      });
     }
     else {
       var updatedList = [...this.state.listItems];
@@ -62,7 +65,10 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
           event.toLowerCase()) !== -1 || item.Description.toLowerCase().search(
             event.toLowerCase()) !== -1;
       });
-      this.setState({ items: updatedList });
+      this.setState({
+        items: updatedList,
+        pagedItems: updatedList.slice(0, this.props.maxItemsPerPage)
+      });
     }
   }
 

From 4934ccb866aaa031d12edfeb04d37da2ee9875c2 Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:27:44 +0530
Subject: [PATCH 6/7] Bit of cleanup

No need to update 'items' in case of error, only 'pagedItems' is enough.
Use local variable 'items' instead of using from 'this.state'.
---
 .../webparts/reactAccordion/components/ReactAccordion.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 68370157a..fe638131e 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -100,7 +100,6 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
         this.setState({
           status: 'Loading all items failed with error: ' + error,
           pagedItems: [],
-          items: [],
           isLoading: false,
           loaderMessage: ""
         });
@@ -148,8 +147,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       displayLoader = (null);
     }
 
-    if (this.state.items.length > 0) {
-      pageCount = Math.ceil(this.state.items.length / pageCountDivisor);
+    if (items.length > 0) {
+      pageCount = Math.ceil(items.length / pageCountDivisor);
     }
     for (let i = 0; i < pageCount; i++) {
       pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);

From a4c26fc25d838887a79631123aed7ee6e814431b Mon Sep 17 00:00:00 2001
From: Abhishek Garg <abhig0589@gmail.com>
Date: Sat, 20 Jun 2020 17:30:15 +0530
Subject: [PATCH 7/7] Use 'slice' instead of 'splice'

Replace 'splice' with 'slice' method for common implementation (same as in search)
---
 .../webparts/reactAccordion/components/ReactAccordion.tsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
index fe638131e..87801a6a0 100644
--- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -90,7 +90,7 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
 
         this.setState({
           status: "",
-          pagedItems: listItemsCollection.splice(0, this.props.maxItemsPerPage),
+          pagedItems: listItemsCollection.slice(0, this.props.maxItemsPerPage),
           items: response.value,
           listItems: response.value,
           isLoading: false,
@@ -117,8 +117,9 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
 
     let _pagedButtonClick = (pageNumber: number, listData: any) => {
       let startIndex: number = (pageNumber - 1) * pageCountDivisor;
+      let endIndex = startIndex + pageCountDivisor;
       let listItemsCollection = [...listData];
-      this.setState({ pagedItems: listItemsCollection.splice(startIndex, pageCountDivisor) });
+      this.setState({ pagedItems: listItemsCollection.slice(startIndex, endIndex) });
     };
 
     const pagedItems: JSX.Element[] = this.state.pagedItems.map((item: IAccordionListItem, i: number): JSX.Element => {