add the pagination for meterrealtime page

web/src/components/MyEMS/Meter/MeterRealtime.js

@@ -13,6 +13,9 @@ import {
   Label,
   Row,
   Spinner,
+  Pagination,
+  PaginationItem,
+  PaginationLink
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import RealtimeChart from './RealtimeChart';
@@ -23,8 +26,12 @@ import uuid from 'uuid/v1';
 import { toast } from 'react-toastify';
 import { APIBaseURL } from '../../../config';
 
-
 const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
+  const [cursor, setCursor] = useState(0);
+  const [maxCursor, setMaxCursor] = useState(0);
+  const [selectMeterList, setSelectMeterList] = useState([]);
+  const len = 8;
+
   useEffect(() => {
     let is_logged_in = getCookieValue('is_logged_in');
     let user_name = getCookieValue('user_name');
@@ -56,64 +63,73 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
     fetch(APIBaseURL + '/spaces/tree', {
       method: 'GET',
       headers: {
-        "Content-type": "application/json",
+        'Content-type': 'application/json',
-        "User-UUID": getCookieValue('user_uuid'),
+        'User-UUID': getCookieValue('user_uuid'),
-        "Token": getCookieValue('token')
+        Token: getCookieValue('token')
       },
-      body: null,
+      body: null
-
+    })
-    }).then(response => {
+      .then(response => {
-      console.log(response);
+        console.log(response);
-      if (response.ok) {
+        if (response.ok) {
-        isResponseOK = true;
+          isResponseOK = true;
-      }
+        }
-      return response.json();
+        return response.json();
-    }).then(json => {
+      })
-      console.log(json);
+      .then(json => {
-      if (isResponseOK) {
+        console.log(json);
-        // rename keys 
+        if (isResponseOK) {
-        json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
+          // rename keys
-        setCascaderOptions(json);
+          json = JSON.parse(
-        // set the default space
+            JSON.stringify([json])
-        setSelectedSpaceName([json[0]].map(o => o.label));
+              .split('"id":')
-        let selectedSpaceID = [json[0]].map(o => o.value)
+              .join('"value":')
-        //begin of getting meters of the default space
+              .split('"name":')
-        let isSecondResponseOK = false;
+              .join('"label":')
-        fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', {
+          );
-          method: 'GET',
+          setCascaderOptions(json);
-          headers: {
+          // set the default space
-            "Content-type": "application/json",
+          setSelectedSpaceName([json[0]].map(o => o.label));
-            "User-UUID": getCookieValue('user_uuid'),
+          let selectedSpaceID = [json[0]].map(o => o.value);
-            "Token": getCookieValue('token')
+          //begin of getting meters of the default space
-          },
+          let isSecondResponseOK = false;
-          body: null,
+          fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', {
-
+            method: 'GET',
-        }).then(response => {
+            headers: {
-          if (response.ok) {
+              'Content-type': 'application/json',
-            isSecondResponseOK = true;
+              'User-UUID': getCookieValue('user_uuid'),
-          }
+              Token: getCookieValue('token')
-          return response.json();
+            },
-        }).then(json => {
+            body: null
-          if (isSecondResponseOK) {
+          })
-              json = JSON.parse(JSON.stringify([json]));
+            .then(response => {
-              console.log(json);
+              if (response.ok) {
-              setMeterList(json[0]);
+                isSecondResponseOK = true;
-              setSpinnerHidden(true);
+              }
-          } else {
+              return response.json();
-            toast.error(json.description)
+            })
-          }
+            .then(json => {
-        }).catch(err => {
+              if (isSecondResponseOK) {
-          console.log(err);
+                json = JSON.parse(JSON.stringify([json]));
-        });
+                console.log(json);
-        //end of getting meters of the default space
+                setMeterList(json[0]);
-      } else {
+                setSpinnerHidden(true);
-        toast.error(json.description);
+              } else {
-      }
+                toast.error(json.description);
-    }).catch(err => {
+              }
-      console.log(err);
+            })
-    });
+            .catch(err => {
+              console.log(err);
+            });
+          //end of getting meters of the default space
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
     //end of getting space tree
-
   }, []);
 
   const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
@@ -127,42 +143,56 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
     fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', {
       method: 'GET',
       headers: {
-        "Content-type": "application/json",
+        'Content-type': 'application/json',
-        "User-UUID": getCookieValue('user_uuid'),
+        'User-UUID': getCookieValue('user_uuid'),
-        "Token": getCookieValue('token')
+        Token: getCookieValue('token')
       },
-      body: null,
+      body: null
-
+    })
-    }).then(response => {
+      .then(response => {
-      if (response.ok) {
+        if (response.ok) {
-        isResponseOK = true;
+          isResponseOK = true;
-      }
+        }
-      return response.json();
+        return response.json();
-    }).then(json => {
+      })
-      if (isResponseOK) {
+      .then(json => {
+        if (isResponseOK) {
           json = JSON.parse(JSON.stringify([json]));
           console.log(json);
           setMeterList(json[0]);
-          setSpinnerHidden(true);
-      } else {
-        toast.error(json.description)
-      }
-    }).catch(err => {
-      console.log(err);
-    });
-    //end of getting meters of the selected space
-  }
 
+          setSpinnerHidden(true);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+    //end of getting meters of the selected space
+  };
+
+  useEffect(() => {
+    const meterLen = meterList.length;
+    const maxCursor = Math.ceil(meterLen / len);
+    setCursor(1);
+    setMaxCursor(maxCursor);
+  }, [meterList]);
+
+  useEffect(() => {
+    setSelectMeterList(meterList.slice(cursor * len - 8, cursor * len));
+  }, [cursor, meterList]);
   return (
     <Fragment>
       <div>
         <Breadcrumb>
-          <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Realtime')}</BreadcrumbItem>
+          <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem>
+          <BreadcrumbItem active>{t('Meter Realtime')}</BreadcrumbItem>
         </Breadcrumb>
       </div>
       <Card className="bg-light mb-3">
         <CardBody className="p-3">
-          <Form >
+          <Form>
             <Row form>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
@@ -170,33 +200,53 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
                     {t('Space')}
                   </Label>
                   <br />
-                  <Cascader options={cascaderOptions}
+                  <Cascader
+                    options={cascaderOptions}
                     onChange={onSpaceCascaderChange}
                     changeOnSelect
-                    expandTrigger="hover">
+                    expandTrigger="hover"
+                  >
                     <Input value={selectedSpaceName || ''} readOnly />
                   </Cascader>
                 </FormGroup>
               </Col>
               <Col xs="auto">
                 <FormGroup>
-                  <br></br>
+                  <br />
-                  <Spinner color="primary" hidden={spinnerHidden}  />
+                  <Spinner color="primary" hidden={spinnerHidden} />
                 </FormGroup>
-              </Col>  
+              </Col>
             </Row>
           </Form>
         </CardBody>
       </Card>
       <Row noGutters>
-        {meterList.map(meter => (
+        {selectMeterList.map(meter => (
           <Col lg="3" className="pr-lg-2" key={uuid()}>
             <RealtimeChart meterId={meter['id']} meterName={meter['name']} />
           </Col>
         ))}
       </Row>
+      <Pagination>
+        <PaginationItem>
+          <PaginationLink first href="#" onClick={() => setCursor(1)} />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink previous href="#" onClick={() => (cursor - 1 >= 1 ? setCursor(cursor - 1) : null)} />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">{cursor}</PaginationLink>
+        </PaginationItem>
+        )
+        <PaginationItem>
+          <PaginationLink next href="#" onClick={() => (cursor + 1 <= maxCursor ? setCursor(cursor + 1) : null)} />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink last href="#" onClick={() => setCursor(maxCursor)} />
+        </PaginationItem>
+      </Pagination>
     </Fragment>
   );
 };
 
-export default withTranslation()(withRedirect(MeterRealtime));
+export default withTranslation()(withRedirect(MeterRealtime));