[docs] Batch small changes

README.md

@@ -62,7 +62,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=96" alt="call-em-all" title="The easy way to message your group" width="96" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month or more to Material-UI.

dangerfile.js

@@ -241,7 +241,7 @@ async function run() {
       computeBundleLabel: (bundleId) => {
         // a page
         if (bundleId.startsWith('docs:/')) {
-          const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.com`;
+          const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.app`;
           const page = bundleId.replace(/^docs:/, '');
           return `[${page}](${host}${page})`;
         }

docs/notifications.json

@@ -13,7 +13,7 @@
     "id": 49,
     "date": "2020-03-30",
     "title": "Sketch",
-    "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=notifications&utm_campaign=introducing-sketch\">Introducing Material-UI for Sketch</a>. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI."
+    "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI/status/1244519729978437633\">Introducing Material-UI for Sketch</a>. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI."
   },
   {
     "id": 50,

docs/pages/blog/december-2019-update.md

@@ -34,15 +34,15 @@ But this summary is just scratching the surface. We have accepted 168 commits fr
 
 *(We'll do our best, no guarantee!)*
 
-- 💄 We will keep working on a new [pagination](https://github.com/mui-org/material-ui/pull/19049) component. You can already [preview it](https://deploy-preview-19049--material-ui.netlify.com/components/pagination/) (lead by [**@mbrookes**](https://github.com/mbrookes)).
+- 💄 We will keep working on a new [pagination](https://github.com/mui-org/material-ui/pull/19049) component. You can already [preview it](https://deploy-preview-19049--material-ui.netlify.app/components/pagination/) (lead by [**@mbrookes**](https://github.com/mbrookes)).
 
   ![Pagination](/static/blog/december-2019-update/pagination.png)
 
 - 📅 We will keep working on a major upgrade of the [date/time picker](https://github.com/mui-org/material-ui-pickers/issues/1293) components. We are working on desktop and range support (lead by [**@dmtrKovalenko**](https://github.com/dmtrKovalenko)).
 
   ![Date picker](/static/blog/december-2019-update/date-picker.png)
 
-- 🧮 We will keep working on a new [data grid](https://github.com/mui-org/material-ui/pull/18872) component. You can already [preview it](https://deploy-preview-18872--material-ui.netlify.com/components/data-grid/) (lead by [**@oliviertassinari**](https://github.com/oliviertassinari)).
+- 🧮 We will keep working on a new [data grid](https://github.com/mui-org/material-ui/pull/18872) component. You can already [preview it](https://deploy-preview-18872--material-ui.netlify.app/components/data-grid/) (lead by [**@oliviertassinari**](https://github.com/oliviertassinari)).
 
   ![Data grid](/static/blog/december-2019-update/data-grid.png)
 

docs/pages/blog/july-2019-update.md

@@ -35,7 +35,7 @@ But this summary is just scratching the surface. We have accepted 146 commits fr
 
 - 🔍 We will work on providing ready to use autocomplete, combo box, and multi-select components.
 
-- 🦴 We will continue to work on a new Skeleton component. You can already [preview it](https://deploy-preview-16786--material-ui.netlify.com/components/skeleton/).
+- 🦴 We will continue to work on a new Skeleton component. You can already [preview it](https://deploy-preview-16786--material-ui.netlify.app/components/skeleton/).
 
   ![Skeleton](/static/blog/july-2019-update/skeleton.png)
 

docs/pages/blog/june-2019-update.md

@@ -24,11 +24,11 @@ But this summary is just scratching the surface. We have accepted 198 commits fr
 *(We'll do our best, no guarantee!)*
 
 - We will keep working on a new Tree View component.
-  You can already [preview it](https://deploy-preview-14827--material-ui.netlify.com/components/tree-view/).
+  You can already [preview it](https://deploy-preview-14827--material-ui.netlify.app/components/tree-view/).
   ![Tree View](/static/blog/may-2019-update/tree-view.png)
 
 - We will work on a new Rating component.
-  You can already [preview it](https://deploy-preview-16455--material-ui.netlify.com/components/rating/).
+  You can already [preview it](https://deploy-preview-16455--material-ui.netlify.app/components/rating/).
   ![Rating](/static/blog/june-2019-update/rating.png)
 
 - ❓ Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize.

docs/pages/blog/may-2019-update.md

@@ -18,11 +18,11 @@ But this summary is just scratching the surface. We have accepted 206 commits fr
 
 *(We'll do our best, no guarantee!)*
 
-- We will release an improved Slider component with range support. You can already [preview it](https://deploy-preview-15703--material-ui.netlify.com/components/slider/).
+- We will release an improved Slider component with range support. You can already [preview it](https://deploy-preview-15703--material-ui.netlify.app/components/slider/).
 
 ![Slider](/static/blog/may-2019-update/slider.png)
 
-- We will work on a new Tree View component. You can already [preview it](https://deploy-preview-14827--material-ui.netlify.com/components/tree-view/).
+- We will work on a new Tree View component. You can already [preview it](https://deploy-preview-14827--material-ui.netlify.app/components/tree-view/).
 
 ![Tree View](/static/blog/may-2019-update/tree-view.png)
 

docs/pages/blog/september-2019-update.md

@@ -46,7 +46,7 @@ But this summary is just scratching the surface. We have accepted 199 commits fr
 
 *(We'll do our best, no guarantee!)*
 
-- 🔍 We will provide a ready to use autocomplete, combo box, and multi-select components in the lab. You can already [preview it](https://deploy-preview-17037--material-ui.netlify.com/components/autocomplete/).
+- 🔍 We will provide a ready to use autocomplete, combo box, and multi-select components in the lab. You can already [preview it](https://deploy-preview-17037--material-ui.netlify.app/components/autocomplete/).
 
   ![combobox](/static/blog/september-2019-update/combobox.png)
   <p class="blog-description">Combo box (limited options)</p>

docs/public/_redirects

@@ -27,8 +27,8 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /r/issue-template https://codesandbox.io/s/material-ui-issue-dh2yh
 /r/ts-issue-template https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEMhhYowZABsAtHOCdhlMnToE5o-MAii4AESwgIACgBKVnYuHgBNeSghCBUsDSA 302
 
-/store/* https://material-ui-store.netlify.com/:splat 200
-/store-staging/* https://master--material-ui-store.netlify.com/:splat 200
+/store/* https://material-ui-store.netlify.app/:splat 200
+/store-staging/* https://master--material-ui-store.netlify.app/:splat 200
 
 # To remove at some point (2021).
 /css-in-js/* /styles/:splat 301

docs/src/modules/components/Notifications.js

@@ -1,99 +1,60 @@
 /* eslint-disable react/no-danger, react-hooks/exhaustive-deps */
 import fetch from 'cross-fetch';
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
+import Typography from '@material-ui/core/Typography';
 import Popper from '@material-ui/core/Popper';
 import { unstable_StrictModeGrow as Grow } from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import sleep from 'modules/waterfall/sleep';
 import { getCookie } from 'docs/src/modules/utils/helpers';
-import notifications from '../../../notifications.json';
+import { ACTION_TYPES } from 'docs/src/modules/constants';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
     transformOrigin: 'top right',
   },
   list: {
-    maxWidth: theme.spacing(40),
+    width: theme.spacing(40),
     maxHeight: theme.spacing(40),
     overflow: 'auto',
   },
   listItem: {
     display: 'flex',
     flexDirection: 'column',
   },
+  divider: {
+    margin: theme.spacing(1, 0),
+  },
 }));
 
 function getLastSeenNotification() {
   const seen = getCookie('lastSeenNotification');
   return seen === '' ? 0 : parseInt(seen, 10);
 }
 
-let messages = null;
-
-if (process.env.NODE_ENV !== 'production') {
-  messages = notifications;
-}
-
-async function getMessages() {
-  try {
-    if (!messages) {
-      await sleep(1500); // Soften the pressure on the main thread.
-      const result = await fetch(
-        'https://raw.githubusercontent.com/mui-org/material-ui/master/docs/notifications.json',
-      );
-      messages = await result.json();
-    }
-  } catch (err) {
-    // Swallow the exceptions.
-  }
-
-  messages = messages || [];
-}
-
 export default function Notifications() {
   const classes = useStyles();
-  const [messageList, setMessageList] = React.useState([]);
-  const [unseenNotificationsCount, setUnseenNotificationsCount] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [tooltipOpen, setTooltipOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
   const t = useSelector((state) => state.options.t);
+  const dispatch = useDispatch();
   const userLanguage = useSelector((state) => state.options.userLanguage);
+  const messages = useSelector((state) => state.notifications.messages);
+  const lastSeen = useSelector((state) => state.notifications.lastSeen);
 
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-    setTooltipOpen(false);
-    setUnseenNotificationsCount(0);
-    document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleTooltipOpen = () => {
-    setTooltipOpen(!open);
-  };
-
-  const handleTooltipClose = () => {
-    setTooltipOpen(false);
-  };
-
-  const handleMessage = () => {
-    const lastSeen = getLastSeenNotification();
-
-    const userMessages = messages.filter((message) => {
+  const messageList = (messages || [])
+    .filter((message) => {
       if (
         message.userLanguage &&
         message.userLanguage !== userLanguage &&
@@ -102,32 +63,54 @@ export default function Notifications() {
         return false;
       }
       return true;
-    });
+    })
+    .reverse();
 
-    const unseenCount = userMessages.reduce(
-      (count, message) => (message.id > lastSeen ? count + 1 : count),
-      0,
-    );
-
-    if (unseenCount > 0) {
-      setUnseenNotificationsCount(unseenCount);
-    }
+  const unseenNotificationsCount = messageList.reduce(
+    (count, message) => (message.id > lastSeen ? count + 1 : count),
+    0,
+  );
 
-    setMessageList(userMessages.reverse());
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+    setTooltipOpen(false);
+    dispatch({
+      type: ACTION_TYPES.NOTIFICATIONS_CHANGE,
+      payload: {
+        lastSeen: messageList[0].id,
+      },
+    });
+    document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
   };
 
   React.useEffect(() => {
     let active = true;
 
     // Prevent search engines from indexing the notification.
-    if (/glebot/.test(navigator.userAgent)) {
+    if (/glebot/.test(navigator.userAgent) || messages) {
       return undefined;
     }
 
     (async () => {
-      await getMessages();
+      await sleep(1500); // Soften the pressure on the main thread.
+      let newMessages;
+      try {
+        const result = await fetch(
+          'https://raw.githubusercontent.com/mui-org/material-ui/master/docs/notifications.json',
+        );
+        newMessages = await result.json();
+      } catch (err) {
+        // Swallow the exceptions, e.g. rate limit
+      }
+
       if (active) {
-        handleMessage();
+        dispatch({
+          type: ACTION_TYPES.NOTIFICATIONS_CHANGE,
+          payload: {
+            messages: newMessages || [],
+            lastSeen: getLastSeenNotification(),
+          },
+        });
       }
     })();
 
@@ -140,8 +123,12 @@ export default function Notifications() {
     <React.Fragment>
       <Tooltip
         open={tooltipOpen}
-        onOpen={handleTooltipOpen}
-        onClose={handleTooltipClose}
+        onOpen={() => {
+          setTooltipOpen(!open);
+        }}
+        onClose={() => {
+          setTooltipOpen(false);
+        }}
         title={t('toggleNotifications')}
         enterDelay={300}
       >
@@ -170,34 +157,37 @@ export default function Notifications() {
         role={undefined}
       >
         {({ TransitionProps }) => (
-          <ClickAwayListener onClickAway={handleClose}>
+          <ClickAwayListener
+            onClickAway={() => {
+              setOpen(false);
+            }}
+          >
             <Grow in={open} {...TransitionProps}>
               <Paper className={classes.paper}>
                 <List className={classes.list}>
                   {messageList.map((message, index) => (
                     <React.Fragment key={message.id}>
                       <ListItem alignItems="flex-start" className={classes.listItem}>
+                        <Typography gutterBottom>{message.title}</Typography>
+                        <Typography gutterBottom variant="body2">
+                          <span
+                            id="notification-message"
+                            dangerouslySetInnerHTML={{ __html: message.text }}
+                          />
+                        </Typography>
                         {message.date && (
-                          <ListItemText
-                            secondary={new Date(message.date).toLocaleDateString('en-US', {
+                          <Typography variant="caption" color="textSecondary">
+                            {new Date(message.date).toLocaleDateString('en-US', {
                               year: 'numeric',
                               month: 'long',
                               day: 'numeric',
                             })}
-                          />
+                          </Typography>
                         )}
-                        <ListItemText
-                          primary={message.title}
-                          secondary={
-                            <span
-                              id="notification-message"
-                              dangerouslySetInnerHTML={{ __html: message.text }}
-                            />
-                          }
-                          secondaryTypographyProps={{ color: 'textPrimary' }}
-                        />
                       </ListItem>
-                      {index < messageList.length - 1 ? <Divider variant="middle" /> : null}
+                      {index < messageList.length - 1 ? (
+                        <Divider className={classes.divider} />
+                      ) : null}
                     </React.Fragment>
                   ))}
                 </List>

docs/src/modules/constants.js

@@ -5,6 +5,7 @@ const CODE_VARIANTS = {
 
 const ACTION_TYPES = {
   OPTIONS_CHANGE: 'OPTIONS_CHANGE',
+  NOTIFICATIONS_CHANGE: 'NOTIFICATIONS_CHANGE',
 };
 
 // Valid languages to server-side render in production

docs/src/modules/redux/initRedux.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import optionsReducer from 'docs/src/modules/redux/optionsReducer';
+import notificationsReducer from 'docs/src/modules/redux/notificationsReducer';
 import { createLogger } from 'redux-logger';
 
 // Get the Redux DevTools extension and fallback to a no-op function
@@ -30,6 +31,7 @@ export default function create(initialState) {
   return createStore(
     combineReducers({
       options: optionsReducer,
+      notifications: notificationsReducer,
     }),
     initialState, // Hydrate the store with server-side data
     compose(applyMiddleware(...middleware), devtools),

docs/src/modules/redux/notificationsReducer.js

@@ -0,0 +1,21 @@
+import { ACTION_TYPES } from 'docs/src/modules/constants';
+
+const mapping = {
+  [ACTION_TYPES.NOTIFICATIONS_CHANGE]: (state, action) => {
+    const newState = {
+      ...state,
+      ...action.payload,
+    };
+    return newState;
+  },
+};
+
+export default function notificationsReducer(state = {}, action) {
+  let newState = { ...state };
+
+  if (mapping[action.type]) {
+    newState = mapping[action.type](state, action);
+  }
+
+  return newState;
+}