Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/common/components/views/Paginator.jsx

@@ -1,33 +1,53 @@
 import React, { useEffect, useState } from 'react';
 import TodayItem from './TodayItem';
-import style from './Paginator.module.css';
 import { useInterval } from 'app/hooks/useInterval';
 import PropTypes from 'prop-types';
+import style from './Paginator.module.scss';
+import Empty from '../../state/Empty';
 
 export default function Paginator(props) {
-  const { events, selectedId, limit = 7, time = 10, isBackstage } = props;
+  const {
+    events,
+    selectedId,
+    limit = 8,
+    time = 10,
+    isBackstage,
+    setPageNumber,
+    setCurrentPage,
+  } = props;
   const LIMIT_PER_PAGE = limit;
-  const SCROLL_TIME = time * 1000 || 10000;
+  const SCROLL_TIME = time * 1000;
   const [numEvents, setNumEvents] = useState(0);
   const [page, setPage] = useState([]);
   const [pages, setPages] = useState(0);
   const [selPage, setSelPage] = useState(0);
 
+  // keep parent up to date
+  useEffect(() => {
+    if (setPageNumber) {
+      setPageNumber(pages);
+    }
+  }, [setPageNumber, pages]);
+
+  useEffect(() => {
+    if (setCurrentPage) {
+      setCurrentPage(selPage);
+    }
+  }, [setCurrentPage, selPage]);
+
   useEffect(() => {
     if (events == null) return;
     // how many events in list
-    let n = events.length;
+    const n = events.length;
     setNumEvents(n);
 
     // how many paginated views
-    let p = Math.ceil(n / LIMIT_PER_PAGE);
-    setPages(p);
+    setPages(Math.ceil(n / LIMIT_PER_PAGE));
 
     // divide events in parts of LIMIT_PER_PAGE
     const eventStart = LIMIT_PER_PAGE * selPage;
     const eventEnd = LIMIT_PER_PAGE * (selPage + 1);
-    let e = events.slice(eventStart, eventEnd);
-    setPage(e);
+    setPage(events.slice(eventStart, eventEnd));
 
     // if array is completely in past, show depending on SCROLL_PAST
   }, [events, selPage, LIMIT_PER_PAGE]);
@@ -42,14 +62,10 @@ export default function Paginator(props) {
 
   let selectedState = 0;
 
-  return (
-    <>
-      <div className={style.nav}>
-        {pages > 1 &&
-          [...Array(pages)].map((p, i) => (
-            <div key={i} className={i === selPage ? style.navItemSelected : style.navItem} />
-          ))}
-      </div>
+  if (events?.length < 1) {
+    return <Empty text='No events to show' />;
+  } else {
+    return (
       <div className={style.entries}>
         {page.map((e) => {
           if (e.id === selectedId) selectedState = 1;
@@ -67,8 +83,8 @@ export default function Paginator(props) {
           );
         })}
       </div>
-    </>
-  );
+    );
+  }
 }
 
 Paginator.propTypes = {
@@ -77,4 +93,6 @@ Paginator.propTypes = {
   limit: PropTypes.number,
   time: PropTypes.number,
   isBackstage: PropTypes.bool,
+  setPageNumber: PropTypes.func,
+  setCurrentPage: PropTypes.func,
 };