Adds maintenance mode back

api/schema.js

@@ -151,4 +151,13 @@ const schema = makeExecutableSchema({
   resolvers,
 });
 
+if (process.env.REACT_APP_MAINTENANCE_MODE === 'enabled') {
+  console.error('\n\n⚠️ ----MAINTENANCE MODE ENABLED----⚠️\n\n');
+  addSchemaLevelResolveFunction(schema, () => {
+    throw new UserError(
+      "We're currently undergoing planned maintenance. We'll be back soon, please check https://twitter.com/withspectrum for ongoing updates!"
+    );
+  });
+}
+
 module.exports = schema;

config-overrides.js

@@ -73,6 +73,9 @@ const transpileShared = config => {
 };
 
 module.exports = function override(config, env) {
+  if (process.env.REACT_APP_MAINTENANCE_MODE === 'enabled') {
+    console.error('\n\n⚠️ ----MAINTENANCE MODE ENABLED----⚠️\n\n');
+  }
   if (process.env.NODE_ENV === 'development') {
     config.output.path = path.join(__dirname, './build');
     config = rewireReactHotLoader(config, env);

hyperion/renderer/index.js

@@ -33,6 +33,8 @@ import './browser-shim';
 const Routes = require('../../src/routes').default;
 import { initStore } from '../../src/store';
 
+const IN_MAINTENANCE_MODE =
+  process.env.REACT_APP_MAINTENANCE_MODE === 'enabled';
 const IS_PROD = process.env.NODE_ENV === 'production';
 const FORCE_DEV = process.env.FORCE_DEV;
 const FIVE_MINUTES = 300;
@@ -101,8 +103,7 @@ const renderer = (req: express$Request, res: express$Response) => {
         <HelmetProvider context={helmetContext}>
           <Provider store={store}>
             <StaticRouter location={req.url} context={routerContext}>
-              {/* $FlowIssue */}
-              <Routes />
+              <Routes maintenanceMode={IN_MAINTENANCE_MODE} />
             </StaticRouter>
           </Provider>
         </HelmetProvider>
@@ -120,9 +121,14 @@ const renderer = (req: express$Request, res: express$Response) => {
         res.redirect(301, routerContext.url);
         return;
       }
-
-      res.status(200);
-
+      // maintainance mode
+      if (IN_MAINTENANCE_MODE) {
+        debug('maintainance mode enabled, sending 503');
+        res.status(503);
+        res.set('Retry-After', '3600');
+      } else {
+        res.status(200);
+      }
       const state = store.getState();
       const data = client.extract();
       const { helmet } = helmetContext;

src/components/maintenance/index.js

@@ -0,0 +1,56 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { FlexCol } from '../globals';
+import { Tagline, Copy } from 'src/views/pages/style';
+import ViewSegment from '../../components/themedSection';
+
+const Emoji = styled.div`
+  font-size: 3em;
+  text-align: center;
+  line-height: 1.5em;
+  margin-bottom: 0.25em;
+`;
+
+const Wrapper = styled(FlexCol)`
+  margin: 0 auto;
+  text-align: center;
+`;
+const Text = styled(Copy)`
+  font-size: 20px;
+  line-height: 1.3;
+  font-weight: 500;
+  opacity: 0.95;
+  margin: 0 auto;
+  max-width: none;
+
+  a {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 20px;
+    text-align: center;
+  }
+`;
+
+const MaintenanceDowntime = () => {
+  const timeInUTC = 'September 25, 2017 15:00:00 UTC';
+  return (
+    <ViewSegment background="constellations">
+      <Wrapper>
+        <Emoji>🛠</Emoji>
+        <Tagline>Spectrum is currently undergoing maintenance</Tagline>
+        <Text>
+          We'll be back soon, check{' '}
+          <a href="https://twitter.com/withspectrum">
+            @withspectrum on Twitter
+          </a>{' '}
+          for updates!
+        </Text>
+      </Wrapper>
+    </ViewSegment>
+  );
+};
+
+export default MaintenanceDowntime;

src/components/redirectHandler/index.js

@@ -9,6 +9,7 @@ import Routes from 'src/hot-routes';
 type Props = {
   currentUser: ?Object,
   isLoadingCurrentUser: boolean,
+  maintenanceMode: boolean,
 };
 
 class RedirectHandler extends React.Component<Props> {
@@ -28,7 +29,7 @@ class RedirectHandler extends React.Component<Props> {
   }
 
   render() {
-    return <Routes />;
+    return <Routes maintenanceMode={this.props.maintenanceMode} />;
   }
 }
 

src/index.js

@@ -46,15 +46,19 @@ const App = () => {
       <HelmetProvider>
         <ApolloProvider client={client}>
           <Router history={history}>
-            <RedirectHandler />
+            <RedirectHandler
+              maintenanceMode={
+                process.env.REACT_APP_MAINTENANCE_MODE === 'enabled'
+              }
+            />
           </Router>
         </ApolloProvider>
       </HelmetProvider>
     </Provider>
   );
 };
 
-const renderMethod = !!window.__SERVER_STATE__
+const renderMethod = window.__SERVER_STATE__
   ? // $FlowIssue
     ReactDOM.hydrate
   : ReactDOM.render;

src/routes.js

@@ -30,6 +30,7 @@ import DirectMessages from 'src/views/directMessages';
 import { FullscreenThreadView } from 'src/views/thread';
 import ThirdPartyContext from 'src/components/thirdPartyContextSetting';
 import { withCurrentUser } from 'src/components/withCurrentUser';
+import Maintenance from 'src/components/maintenance';
 import type { GetUserType } from 'shared/graphql/queries/user/getUser';
 import RedirectOldThreadRoute from './views/thread/redirect-old-route';
 
@@ -157,13 +158,30 @@ const ComposerFallback = signedOutFallback(Composer, () => (
 type Props = {
   currentUser: ?GetUserType,
   isLoadingCurrentUser: boolean,
+  maintenanceMode?: boolean,
 };
 
 class Routes extends React.Component<Props> {
   render() {
     const { currentUser, isLoadingCurrentUser } = this.props;
     const { title, description } = generateMetaInfo();
 
+    if (this.props.maintenanceMode) {
+      return (
+        <ThemeProvider theme={theme}>
+          <ScrollManager>
+            <Body>
+              <Head
+                title="Ongoing Maintenance - Spectrum"
+                description="Spectrum is currently undergoing scheduled maintenance downtime. Please check https://twitter.com/withspectrum for ongoing updates."
+              />
+              <Maintenance />
+            </Body>
+          </ScrollManager>
+        </ThemeProvider>
+      );
+    }
+
     return (
       <ThemeProvider theme={theme}>
         <ErrorBoundary fallbackComponent={ErrorFallback}>