dynamically fetching multiple pages from zendesk api

Quarantinex · Nov 25, 2021 · 3c358fc · 3c358fc
1 parent 23915f8
commit 3c358fc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Zendesk Coding Challenge</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -20,7 +20,8 @@ export default class App extends Component {
             DataisLoaded: false,
             ticket: [],
             tickets:0,
-            ticketView: false
+            ticketView: false,
+            nextPage: null
         };
         this.handlePageClick = this.handlePageClick.bind(this);
         this.handleTicket = this.handleTicket.bind(this);
@@ -82,23 +83,52 @@ export default class App extends Component {
     }
 
     async componentDidMount() {
-        const [first, second] = await Promise.all([
+        const [first] = await Promise.all([
             axios
                 .get(`/api/v2/tickets.json`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
                 .catch((error)=>this.setState({error})),
-            axios
-                .get(`/api/v2/tickets.json?page=2`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
-                .catch((error)=>this.setState({error})),
+            // axios
+            //     .get(`/api/v2/tickets.json?page=2`, {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
+            //     .catch((error)=>this.setState({error})),
 
         ]
         );
         if(this.state.error == null)
         {
             this.setState({
                 tickets: first.data.count,
-                completeData: first.data.tickets.concat(second.data.tickets)
+                completeData: first.data.tickets,
+                nextPage: first.data.next_page
+                // completeData: first.data.tickets.concat(second.data.tickets)
             })
 
+            while (this.state.nextPage != null)
+            {
+                const temp2 = this.state.nextPage.split("/");
+                const temp3 = temp2.splice(3);
+                const temp4 = temp3.join("/");
+                const [temp] = await Promise.all([
+                    axios
+                        .get(`/`+temp4 , {headers: {'Authorization': `Basic YXhuMjAwMDYyQHV0ZGFsbGFzLmVkdS90b2tlbjpsVjNkcURBaG1NUXRadG4yaHR3a1JWY1g0cXhRdDRCUGlUUEY3aXVR`}})
+                        .catch((error)=>this.setState({error})),
+
+                ]);
+                if(this.state.error != null)
+                {
+                    break;
+                }
+                else
+                {
+                    let prevState = this.state.completeData
+                    this.setState({
+
+                        completeData: prevState.concat(temp.data.tickets),
+                        nextPage: temp.data.next_page
+                    })
+                }
+
+            }
+
             const tmp = this.state.completeData;
             const slice = tmp.slice(this.state.offset, this.state.offset + this.state.perPage)
             const postData = slice.map(pd => <React.Fragment>