update limited results without refreshing

uselagoon · Oct 11, 2023 · 6f13da4 · 6f13da4
1 parent 3f44038
commit 6f13da4
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 73 deletions.
diff --git a/src/components/ResultsLimited/index.js b/src/components/ResultsLimited/index.js
@@ -10,11 +10,6 @@ const options = [
   { value: '100', label: '100' },
   { value: '-1', label: 'all' },
 ];
-const handleChange = values => {
-  // window.location.href = window.location.href.split('?')[0] + '?limit=' + values.value;
-
-  history.pushState(null,"", window.location.href.split('?')[0] + '?limit=' + values.value);
-};
 const customStyles = {
   menu: (provided, state) => ({
     ...provided,
@@ -29,7 +24,15 @@ const customStyles = {
 /**
  * Button that deploys the latest environment.
  */
-const ResultsLimited = ({ limit, message, disableHandler}) => {
+const ResultsLimited = ({ limit, changeLimit, message, disableHandler }) => {
+  const handleChange = values => {
+    const limitValueParsed = parseInt(values.value);
+    if (!Number.isNaN(limitValueParsed) && changeLimit) {
+      history.pushState(null, '', window.location.href.split('?')[0] + '?limit=' + values.value);
+      changeLimit(limitValueParsed === -1 ? null : limitValueParsed);
+    }
+  };
+
   return (
     // if the number of results = the limit, then display a message that the results are limited
     // if the number of results is less than the limit, the message won't be displayed
@@ -54,6 +57,7 @@ const ResultsLimited = ({ limit, message, disableHandler}) => {
             onChange={!disableHandler ? handleChange : () => {}}
             options={options}
             required
+            menuPlacement="top"
           />
         }
       </div>

diff --git a/src/pages/backups.js b/src/pages/backups.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import getConfig from 'next/config';
 import Head from 'next/head';
@@ -27,23 +27,12 @@ const { publicRuntimeConfig } = getConfig();
 const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_BACKUPS_LIMIT, 10);
 const customMessage = publicRuntimeConfig.LAGOON_UI_BACKUPS_LIMIT_MESSAGE;
 
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
-  let search = window.location.search;
-  let params = new URLSearchParams(search);
-  let limit = params.get('limit');
-  if (limit) {
-    if (parseInt(limit.trim(), 10)) {
-      urlResultLimit = parseInt(limit.trim(), 10);
-    }
-  }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
-
 /**
  * Displays the backups page, given the name of an openshift project.
  */
 export const PageBackups = ({ router }) => {
+  const [resultLimit, setResultLimit] = useState(null);
+
   const { continueTour } = useTourContext();
   const { data, error, loading, subscribeToMore } = useQuery(EnvironmentWithBackupsQuery, {
     variables: {
@@ -52,6 +41,21 @@ export const PageBackups = ({ router }) => {
     },
   });
 
+  useEffect(() => {
+    let urlResultLimit = envLimit;
+    if (typeof window !== 'undefined') {
+      let search = window.location.search;
+      let params = new URLSearchParams(search);
+      let limit = params.get('limit');
+      if (limit) {
+        if (parseInt(limit.trim(), 10)) {
+          urlResultLimit = parseInt(limit.trim(), 10);
+        }
+      }
+    }
+    setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+  }, []);
+
   useEffect(() => {
     if (!loading && data?.environment?.backups?.length) {
       continueTour();
@@ -181,6 +185,7 @@ export const PageBackups = ({ router }) => {
             <Backups backups={environment.backups} />
             <ResultsLimited
               limit={resultLimit}
+              changeLimit={setResultLimit}
               results={environment.backups.length}
               message={(!customMessage && '') || (customMessage && customMessage.replace(/['"]+/g, ''))}
             />

diff --git a/src/pages/deployments.js b/src/pages/deployments.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import getConfig from 'next/config';
@@ -28,32 +28,38 @@ const { publicRuntimeConfig } = getConfig();
 const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_DEPLOYMENTS_LIMIT, 10);
 const customMessage = publicRuntimeConfig.LAGOON_UI_DEPLOYMENTS_LIMIT_MESSAGE;
 
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
-  let search = window.location.search;
-  let params = new URLSearchParams(search);
-  let limit = params.get('limit');
-  if (limit) {
-    if (parseInt(limit.trim(), 10)) {
-      urlResultLimit = parseInt(limit.trim(), 10);
-    }
-  }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
-
 /**
  * Displays the deployments page, given the openshift project name.
  */
 export const PageDeployments = ({ router }) => {
   const { continueTour } = useTourContext();
+
+  const [resultLimit, setResultLimit] = useState(null);
+
   const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithDeploymentsQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
     },
   });
 
-  const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+  const handleRefetch = async () =>
+    await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit });
+
+  useEffect(() => {
+    let urlResultLimit = envLimit;
+    if (typeof window !== 'undefined') {
+      let search = window.location.search;
+      let params = new URLSearchParams(search);
+      let limit = params.get('limit');
+      if (limit) {
+        if (parseInt(limit.trim(), 10)) {
+          urlResultLimit = parseInt(limit.trim(), 10);
+        }
+      }
+    }
+    setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+  }, []);
 
   useEffect(() => {
     if (!loading && data?.environment) {
@@ -170,6 +176,7 @@ export const PageDeployments = ({ router }) => {
             />
             <ResultsLimited
               limit={resultLimit}
+              changeLimit={setResultLimit}
               results={environment.deployments.length}
               message={(!customMessage && '') || (customMessage && customMessage.replace(/['"]+/g, ''))}
             />

diff --git a/src/pages/tasks.js b/src/pages/tasks.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import getConfig from 'next/config';
@@ -28,25 +28,12 @@ const { publicRuntimeConfig } = getConfig();
 const envLimit = parseInt(publicRuntimeConfig.LAGOON_UI_TASKS_LIMIT, 10);
 const customMessage = publicRuntimeConfig.AGOON_UI_TASKS_LIMIT_MESSAGE;
 
-let urlResultLimit = envLimit;
-if (typeof window !== 'undefined') {
-  let search = window.location.search;
-  let params = new URLSearchParams(search);
-  let limit = params.get('limit');
-  if (limit) {
-    if (parseInt(limit.trim(), 10)) {
-      urlResultLimit = parseInt(limit.trim(), 10);
-    }
-    if (limit == 'all') {
-      urlResultLimit = -1;
-    }
-  }
-}
-const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
 /**
  * Displays the tasks page, given the openshift project name.
  */
 export const PageTasks = ({ router, renderAddTasks }) => {
+  const [resultLimit, setResultLimit] = useState(null);
+
   const { continueTour } = useTourContext();
   const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithTasksQuery, {
     variables: {
@@ -55,7 +42,26 @@ export const PageTasks = ({ router, renderAddTasks }) => {
     },
   });
 
-  const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+  const handleRefetch = async () =>
+    await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit });
+
+  useEffect(() => {
+    let urlResultLimit = envLimit;
+    if (typeof window !== 'undefined') {
+      let search = window.location.search;
+      let params = new URLSearchParams(search);
+      let limit = params.get('limit');
+      if (limit) {
+        if (parseInt(limit.trim(), 10)) {
+          urlResultLimit = parseInt(limit.trim(), 10);
+        }
+        if (limit == 'all') {
+          urlResultLimit = -1;
+        }
+      }
+    }
+    setResultLimit(urlResultLimit === -1 ? null : urlResultLimit);
+  }, []);
 
   useEffect(() => {
     if (!loading && data?.environment?.tasks.length) {
@@ -76,27 +82,23 @@ export const PageTasks = ({ router, renderAddTasks }) => {
         </Head>
 
         <MainLayout>
-            <Breadcrumbs>
-              <ProjectBreadcrumb projectSlug={projectSlug} />
-              <EnvironmentBreadcrumb environmentSlug={openshiftProjectName} projectSlug={projectSlug} />
-            </Breadcrumbs>
-            <TasksWrapper>
-              <NavTabsSkeleton
-                activeTab="tasks"
-                projectName={projectSlug}
-                openshiftProjectName={openshiftProjectName}
+          <Breadcrumbs>
+            <ProjectBreadcrumb projectSlug={projectSlug} />
+            <EnvironmentBreadcrumb environmentSlug={openshiftProjectName} projectSlug={projectSlug} />
+          </Breadcrumbs>
+          <TasksWrapper>
+            <NavTabsSkeleton activeTab="tasks" projectName={projectSlug} openshiftProjectName={openshiftProjectName} />
+
+            <div className="content">
+              <Skeleton height={'60px'} />
+              <TasksSkeleton />
+
+              <ResultsLimited
+                limit={resultLimit}
+                message={(!customMessage && '') || (customMessage && customMessage.replace(/['"]+/g, ''))}
               />
-
-              <div className="content">
-                <Skeleton height={'60px'} />
-                <TasksSkeleton />
-
-                <ResultsLimited
-                  limit={resultLimit}
-                  message={(!customMessage && '') || (customMessage && customMessage.replace(/['"]+/g, ''))}
-                />
-              </div>
-            </TasksWrapper>
+            </div>
+          </TasksWrapper>
         </MainLayout>
       </>
     );
@@ -117,7 +119,7 @@ export const PageTasks = ({ router, renderAddTasks }) => {
       />
     );
   }
-  
+
   subscribeToMore({
     document: TasksSubscription,
     variables: { environment: environment.id },
@@ -177,6 +179,7 @@ export const PageTasks = ({ router, renderAddTasks }) => {
             />
             <ResultsLimited
               limit={resultLimit}
+              changeLimit={setResultLimit}
               results={environment.tasks.length}
               message={(!customMessage && '') || (customMessage && customMessage.replace(/['"]+/g, ''))}
             />