[Calendar] Remove promise based loading in favor of loading prop

.gitignore

@@ -36,3 +36,5 @@ coverage
 # editors
 .vs
 .DS_Store
+
+.vercel

docs/.gitignore

@@ -0,0 +1 @@
+.vercel

docs/fakeApi/randomDate.ts

@@ -0,0 +1,31 @@
+import { getDaysInMonth, isValid } from 'date-fns';
+import { NowRequest, NowResponse } from '@now/node';
+
+function getRandomNumber(min: number, max: number) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+export default function(req: NowRequest, res: NowResponse) {
+  const { month } = req.query;
+  if (!month || typeof month !== 'string') {
+    res.status(400);
+    return res.json({
+      reason: 'month query param is required',
+    });
+  }
+
+  const date = new Date(month);
+  if (!isValid(date)) {
+    res.status(422);
+    return res.json({
+      reason: 'cannot parsable month value',
+    });
+  }
+
+  setTimeout(() => {
+    const daysInMonth = getDaysInMonth(date);
+    const daysToHighlight = [1, 2, 3].map(_ => getRandomNumber(1, daysInMonth));
+
+    res.json({ daysToHighlight });
+  }, 500); // fake some long work
+}

docs/package.json

@@ -24,6 +24,7 @@
     "@material-ui/core": "^4.9.14",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/pickers": "^4.0.0-alpha.1",
+    "@now/node": "^1.6.1",
     "@types/fuzzy-search": "^2.1.0",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/jss": "^10.0.0",
@@ -57,6 +58,7 @@
     "next-images": "^1.4.0",
     "next-transpile-modules": "^2.0.0",
     "notistack": "^0.9.11",
+    "now": "^19.0.1",
     "prismjs": "^1.20.0",
     "raw-loader": "^1.0.0",
     "react": "^16.13.0",

docs/pages/demo/datepicker/ServerRequest.example.jsx

@@ -4,23 +4,29 @@ import { TextField } from '@material-ui/core';
 import { DatePicker, Day } from '@material-ui/pickers';
 import { makeJSDateObject } from '../../../utils/helpers';
 
-function getRandomNumber(min, max) {
-  return Math.round(Math.random() * (max - min) + min);
-}
-
 function ServerRequest() {
-  const savedRequestRef = React.useRef(null);
+  const requestAbortController = React.useRef(null);
   const [selectedDays, setSelectedDays] = React.useState([1, 2, 15]);
   const [selectedDate, handleDateChange] = React.useState(new Date());
 
-  const handleMonthChange = () => {
-    window.clearTimeout(savedRequestRef.current)
-    setSelectedDays(null);
+  const handleMonthChange = date => {
+    if (requestAbortController.current) {
+      requestAbortController.current.abort();
+    }
+
+    setSelectedDays(null)
+
+    const controller = new AbortController();
+    fetch(`/fakeApi/randomDate?month=${date.toString()}`, {
+      signal: controller.signal,
+    })
+      .then(res => res.json())
+      .then(({ daysToHighlight }) => {
+        setSelectedDays(daysToHighlight);
+      })
+      .catch(() => console.log("Ooopsy, something went wrong"))
 
-    // just select random days to simulate server side based data
-    savedRequestRef.current = setTimeout(() => {
-      setSelectedDays([1, 2, 3].map(() => getRandomNumber(1, 28)));
-    }, 1000);
+    requestAbortController.current = controller;
   };
 
   return (

lib/src/views/Calendar/CalendarView.tsx

@@ -4,12 +4,12 @@ import { DatePickerView } from '../../DatePicker';
 import { useCalendarState } from './useCalendarState';
 import { makeStyles } from '@material-ui/core/styles';
 import { useUtils } from '../../_shared/hooks/useUtils';
-import { VIEW_HEIGHT } from '../../constants/dimensions';
 import { MaterialUiPickersDate } from '../../typings/date';
 import { FadeTransitionGroup } from './FadeTransitionGroup';
 import { Calendar, ExportedCalendarProps } from './Calendar';
 import { PickerOnChangeFn } from '../../_shared/hooks/useViews';
 import { withDefaultProps } from '../../_shared/withDefaultProps';
+import {  DAY_SIZE, DAY_MARGIN } from '../../constants/dimensions';
 import { CalendarHeader, CalendarHeaderProps } from './CalendarHeader';
 import { YearSelection, ExportedYearSelectionProps } from './YearSelection';
 import { defaultMinDate, defaultMaxDate } from '../../constants/prop-types';
@@ -76,7 +76,7 @@ export const useStyles = makeStyles(
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      minHeight: VIEW_HEIGHT - 60,
+      minHeight: (DAY_SIZE + DAY_MARGIN * 4) * 7,
       height: '100%',
     },
   },

now.json

@@ -5,8 +5,18 @@
       "IS_NOW": "true"
     }
   },
-  "builds": [{ "src": "docs/next.config.js", "use": "@now/next" }],
+  "builds": [
+    { "src": "docs/next.config.js", "use": "@now/next" },
+    {
+      "src": "docs/fakeApi/*",
+      "use": "@now/node"
+    }
+  ],
   "routes": [
+    {
+      "src": "/fakeApi/(.*)$",
+      "dest": "/docs/fakeApi/$1.ts"
+    },
     { "src": "/api/(?<name>[^/]+)$", "dest": "docs/api/props?component=$name" },
     { "src": "/(.*)", "dest": "docs/$1" }
   ]

yarn.lock

@@ -2468,6 +2468,13 @@
     "@nodelib/fs.scandir" "2.1.2"
     fastq "^1.6.0"
 
+"@now/node@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@now/node/-/node-1.6.1.tgz#d478bfbc98af05d3eae7b5b01b26d1a1c638819b"
+  integrity sha512-EdSdOS4HSJRexibxIbrKCLZZ1sc0+oaD0P7kvhf26CbXSNlrZP0Iycpb+fbO4Qc2EcmGR2am90DhoX548B5a7g==
+  dependencies:
+    "@types/node" "*"
+
 "@oclif/color@^0.0.0":
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/@oclif/color/-/color-0.0.0.tgz#54939bbd16d1387511bf1a48ccda1a417248e6a9"
@@ -10157,10 +10164,10 @@ notistack@^0.9.11:
     hoist-non-react-statics "^3.3.0"
     react-is "^16.8.6"
 
-now@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/now/-/now-18.0.0.tgz#e6689205346e354f822b1f5feb2c0d7d570c172f"
-  integrity sha512-MVskFV3xH1hMkpTewPCb3p0SQ17hL7EI1Zb+Ij2wYiRV3X0a6G91GdE2vvFlhsK6rhRHKHZnDQkZ0AnkpnfzHA==
+now@^19.0.1:
+  version "19.0.1"
+  resolved "https://registry.yarnpkg.com/now/-/now-19.0.1.tgz#a4575adfed17ea049d9207c145f3ce7f60c818cf"
+  integrity sha512-Q/dUlRBPzoy6lHw9P9qnzGmXw3aBU5ypQ1JjrKwoQJoEVhU5hCa9dJCEtIiSIG5cModcirU0xJPemg54dvWPnA==
 
 npm-bundled@^1.0.1:
   version "1.0.6"