conditional window calls for server side rendering

Author: mimiflynn

src/components/Calendar.jsx

@@ -31,6 +31,7 @@ import {
   extractUrls,
   replaceUrlsWithAnchorTags,
 } from '../utils/url-to-link';
+import { getAspectRatio, getInitialView, isBrowser, isMinWidth } from '../utils/view-size';
 
 function Calendar() {
   const calendarRef = createRef();
@@ -40,28 +41,18 @@ function Calendar() {
   const [clickedEvent, setClickedEvent] = useState([]);
   const [showEventDetails, setShowEventDetails] = useState(false);
   const [eventDetails, setEventDetails] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState(
-    window.outerWidth > window.innerHeight
-      ? 1.35
-      : window.innerWidth / window.innerHeight
-  );
-  const [initialView, setInitialView] = useState(
-    window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek'
-  );
+  const [aspectRatio, setAspectRatio] = useState(getAspectRatio());
+  const [initialView, setInitialView] = useState(getInitialView());
 
   useEscKey(() => setShowEventDetails(false));
 
   const [popupPosition, setPopupPosition] = useState({});
 
   const windowResize = () => {
-    setAspectRatio(
-      window.outerWidth > window.innerHeight
-        ? 1.35
-        : window.innerWidth / window.innerHeight
-    );
-    setInitialView(window.outerWidth > 600 ? 'dayGridMonth' : 'timeGridWeek');
+    setAspectRatio(getAspectRatio());
+    setInitialView(isMinWidth() ? 'dayGridMonth' : 'timeGridWeek');
     setShowEventDetails(false);
-    window.outerWidth < 600 && setPopupPosition({ left: 0, top: 0 });
+    !isMinWidth() && setPopupPosition({ left: 0, top: 0 });
   };
 
   const createPopupPosition = (event) => {
@@ -85,7 +76,7 @@ function Calendar() {
 
   const handleEventClick = useCallback(
     (clickInfo) => {
-      window.outerWidth > 600 && createPopupPosition(clickInfo.jsEvent);
+      isMinWidth() && createPopupPosition(clickInfo.jsEvent);
       setEventDetails(clickInfo.event);
       setShowEventDetails(true);
       if (clickedEvent.length) {
@@ -165,8 +156,6 @@ function Calendar() {
             <Icon path={mdiClose} size={1} />
           </button>
         </div>
-
-        {/* <div>{seriesICS}</div> */}
         <h2 className="event-title">{eventDetails.title}</h2>
         <div className="event-time">
           <div className="icon">

src/utils/view-size.js

@@ -0,0 +1,23 @@
+export function isBrowser() {
+  return typeof window !== 'undefined';
+}
+
+export function isMinWidth() {
+  return isBrowser() ? window.outerWidth > 600 : true;
+}
+
+export function getAspectRatio() {
+  return isBrowser()
+    ? window.outerWidth > window.innerHeight
+      ? 1.35
+      : window.innerWidth / window.innerHeight
+    : 1.35;
+}
+
+export function getInitialView() {
+  return isBrowser()
+    ? window.outerWidth > 600
+      ? 'dayGridMonth'
+      : 'timeGridWeek'
+    : 'dayGridMonth';
+}