Fixes stripe Loading (codesandbox#2436)

SaraVieira · web-flow · commit f4cb4171e186 · 2019-09-17T10:14:09.000+02:00
* fix stripe

* move script

* fix ts
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -48,7 +48,6 @@
 	</script>
 	<!-- End Google Tag Manager -->
 	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-	<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
 	<script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
 	 type="text/javascript"></script>
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/DeletedSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/DeletedSandboxes/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Observer } from 'app/componentConnectors';
+import Helmet from 'react-helmet';
 import { uniq } from 'lodash-es';
 import { Query } from 'react-apollo';
 import RemoveIcon from 'react-icons/lib/md/highlight-remove';
@@ -8,10 +9,11 @@ import { Content as Sandboxes } from '../../Sandboxes';
 
 import { DELETED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 
-const DeletedSandboxes = () => {
-  document.title = 'Deleted Sandboxes - CodeSandbox';
-
-  return (
+const DeletedSandboxes = () => (
+  <>
+    <Helmet>
+      <title>Deleted Sandboxes - CodeSandbox</title>
+    </Helmet>
     <Query
       fetchPolicy="cache-and-network"
       query={DELETED_SANDBOXES_CONTENT_QUERY}
@@ -65,7 +67,7 @@ const DeletedSandboxes = () => {
         </Observer>
       )}
     </Query>
-  );
-};
+  </>
+);
 
 export default DeletedSandboxes;
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import { Observer } from 'app/componentConnectors';
 import { Query } from 'react-apollo';
 import { basename } from 'path';
@@ -14,71 +15,77 @@ import { getPossibleTemplates } from '../../Sandboxes/utils';
 const PathedSandboxes = props => {
   const path = '/' + decodeURIComponent(props.match.params.path || '');
   const teamId = props.match.params.teamId;
-
-  document.title = `${basename(path) || 'Dashboard'} - CodeSandbox`;
   return (
-    <Query query={PATHED_SANDBOXES_CONTENT_QUERY} variables={{ path, teamId }}>
-      {({ loading, error, data }) => (
-        <Observer>
-          {({ store }) => {
-            if (error) {
-              console.error(error);
-              return <div>Error!</div>;
-            }
+    <>
+      <Helmet>
+        <title>{basename(path) || 'Dashboard'} - CodeSandbox</title>
+      </Helmet>
+      <Query
+        query={PATHED_SANDBOXES_CONTENT_QUERY}
+        variables={{ path, teamId }}
+      >
+        {({ loading, error, data }) => (
+          <Observer>
+            {({ store }) => {
+              if (error) {
+                console.error(error);
+                return <div>Error!</div>;
+              }
 
-            const sandboxes =
-              loading || !data.me.collection
-                ? []
-                : data.me.collection.sandboxes;
+              const sandboxes =
+                loading || !data.me.collection
+                  ? []
+                  : data.me.collection.sandboxes;
 
-            const possibleTemplates = getPossibleTemplates(sandboxes);
+              const possibleTemplates = getPossibleTemplates(sandboxes);
 
-            // We want to hide all templates
-            // TODO: make this a query variable for graphql and move the logic to the server
-            const noTemplateSandboxes = sandboxes.filter(
-              s => !s.customTemplate
-            );
-            const orderedSandboxes = store.dashboard.getFilteredSandboxes(
-              noTemplateSandboxes
-            );
+              // We want to hide all templates
+              // TODO: make this a query variable for graphql and move the logic to the server
+              const noTemplateSandboxes = sandboxes.filter(
+                s => !s.customTemplate
+              );
+              const orderedSandboxes = store.dashboard.getFilteredSandboxes(
+                noTemplateSandboxes
+              );
 
-            let mostUsedTemplate = null;
-            if (!loading) {
-              try {
-                mostUsedTemplate = getMostUsedTemplate(sandboxes);
-              } catch (e) {
-                // Not critical
+              let mostUsedTemplate = null;
+              if (!loading) {
+                try {
+                  mostUsedTemplate = getMostUsedTemplate(sandboxes);
+                } catch (e) {
+                  // Not critical
+                }
               }
-            }
 
-            return (
-              <Sandboxes
-                ExtraElement={({ style }) => (
-                  <CreateNewSandbox
-                    collectionId={
-                      data &&
-                      data.me &&
-                      data.me.collection &&
-                      data.me.collection.id
-                    }
-                    mostUsedSandboxTemplate={mostUsedTemplate}
-                    style={style}
-                  />
-                )}
-                isLoading={loading}
-                possibleTemplates={possibleTemplates}
-                Header={<Navigation teamId={teamId} path={path} />}
-                // Fix React Virtualized First
-                // SubHeader={
-                //   <Folders me={data.me} loading={loading} teamId={teamId} />
-                // }
-                sandboxes={orderedSandboxes}
-              />
-            );
-          }}
-        </Observer>
-      )}
-    </Query>
+              return (
+                <Sandboxes
+                  ExtraElement={({ style }) => (
+                    <CreateNewSandbox
+                      collectionId={
+                        data &&
+                        data.me &&
+                        data.me.collection &&
+                        data.me.collection.id
+                      }
+                      mostUsedSandboxTemplate={mostUsedTemplate}
+                      style={style}
+                    />
+                  )}
+                  isLoading={loading}
+                  possibleTemplates={possibleTemplates}
+                  Header={<Navigation teamId={teamId} path={path} />}
+                  // Fix React Virtualized First
+                  // SubHeader={
+                  //   <Folders me={data.me} loading={loading} teamId={teamId} />
+                  // }
+                  sandboxes={orderedSandboxes}
+                />
+              );
+            }}
+          </Observer>
+        )}
+      </Query>
+    </>
   );
 };
 
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer, inject } from 'app/componentConnectors';
+import Helmet from 'react-helmet';
 
 import { Query } from 'react-apollo';
 
@@ -10,9 +11,11 @@ import { Content as Sandboxes } from '../../Sandboxes';
 import CreateNewSandbox from '../../CreateNewSandbox';
 import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 
-const RecentSandboxes = ({ store }) => {
-  document.title = 'Recent Sandboxes - CodeSandbox';
-  return (
+const RecentSandboxes = ({ store }) => (
+  <>
+    <Helmet>
+      <title>Recent Sandboxes - CodeSandbox</title>
+    </Helmet>
     <Query
       variables={{
         orderField: store.dashboard.orderBy.field,
@@ -57,7 +60,7 @@ const RecentSandboxes = ({ store }) => {
         );
       }}
     </Query>
-  );
-};
+  </>
+);
 
 export default inject('signals', 'store')(observer(RecentSandboxes));
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/SearchSandboxes/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/SearchSandboxes/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import { Observer } from 'app/componentConnectors';
 import { Query } from 'react-apollo';
 import Fuse from 'fuse.js';
@@ -50,12 +51,6 @@ const SearchSandboxes = () => (
               ? `${sandboxes.length} search results for '${search}'`
               : 'Search results for all sandboxes';
 
-          if (search) {
-            document.title = `Search: '${search}' - CodeSandbox`;
-          } else {
-            document.title = `Search - CodeSandbox`;
-          }
-
           let possibleTemplates = [];
           if (sandboxes) {
             possibleTemplates = getPossibleTemplates(sandboxes);
@@ -66,14 +61,23 @@ const SearchSandboxes = () => (
           }
 
           return (
-            <Sandboxes
-              isLoading={loading}
-              Header={Header}
-              page="search"
-              hideOrder={Boolean(search)}
-              sandboxes={loading ? [] : sandboxes}
-              possibleTemplates={possibleTemplates}
-            />
+            <>
+              <Helmet>
+                <title>
+                  {search
+                    ? `Search: '${search}' - CodeSandbox`
+                    : 'Search - CodeSandbox'}
+                </title>
+              </Helmet>
+              <Sandboxes
+                isLoading={loading}
+                Header={Header}
+                page="search"
+                hideOrder={Boolean(search)}
+                sandboxes={loading ? [] : sandboxes}
+                possibleTemplates={possibleTemplates}
+              />
+            </>
           );
         }}
       </Observer>
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import { Query, Mutation } from 'react-apollo';
 import { Observer } from 'app/componentConnectors';
 import { sortBy } from 'lodash-es';
@@ -69,14 +70,15 @@ class TeamView extends React.PureComponent {
                   return null;
                 }
 
-                document.title = `${data.me.team.name} - CodeSandbox`;
-
                 const description =
                   data.me.team.description ||
                   `This is a description for your team. You can change this description and invite people to the team so they can edit the sandboxes of this team.`;
 
                 return (
                   <TeamContainer>
+                    <Helmet>
+                      <title>{data.me.team.name} - CodeSandbox</title>
+                    </Helmet>
                     <Section>
                       <HeaderContainer>{data.me.team.name}</HeaderContainer>
                       <Description>
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Templates/Templates.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import Helmet from 'react-helmet';
 import { sortBy } from 'lodash-es';
 import { useQuery } from '@apollo/react-hooks';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -12,17 +13,13 @@ import { LIST_TEMPLATES, unmakeTemplates } from '../../../queries';
 import { Container, Grid, EmptyTitle } from './elements';
 import { Navigation } from './Navigation';
 
-export const Templates = props => {
-  const teamId = props.match.params.teamId;
+export const Templates = ({ match }) => {
+  const teamId = match.params.teamId;
 
   const { loading, error, data } = useQuery(LIST_TEMPLATES, {
     variables: { teamId },
   });
 
-  useEffect(() => {
-    document.title = `${teamId ? 'Team' : 'My'} Templates - CodeSandbox`;
-  }, [teamId]);
-
   if (error) {
     console.error(error);
     return <div>Error!</div>;
@@ -50,6 +47,9 @@ export const Templates = props => {
 
   return (
     <Container>
+      <Helmet>
+        <title>{teamId ? 'Team' : 'My'} Templates - CodeSandbox</title>
+      </Helmet>
       <Navigation teamId={teamId} number={sortedTemplates.length} />
       {!sortedTemplates.length && (
         <div>
diff --git a/packages/app/src/app/pages/Live/index.js b/packages/app/src/app/pages/Live/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import Helmet from 'react-helmet';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 import Padding from '@codesandbox/common/lib/components/spacing/Padding';
@@ -171,15 +172,16 @@ class LivePage extends React.Component {
 
     const sandbox = store.editor.currentSandbox;
 
-    if (sandbox) {
-      document.title = `${getSandboxName(sandbox)} - CodeSandbox`;
-    }
-
     return (
-      <React.Fragment>
+      <>
+        {sandbox && (
+          <Helmet>
+            <title>{getSandboxName(sandbox)} - CodeSandbox</title>
+          </Helmet>
+        )}
         <Editor match={match} />
         <QuickActions />
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/packages/app/src/app/pages/Patron/index.js b/packages/app/src/app/pages/Patron/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
@@ -14,10 +15,12 @@ class Patron extends React.Component {
     this.props.signals.patron.patronMounted();
   }
   render() {
-    document.title = 'Patron - CodeSandbox';
-
     return (
       <MaxWidth>
+        <Helmet>
+          <title>Patron - CodeSandbox</title>
+          <script async src="https://js.stripe.com/v3/" />
+        </Helmet>
         <Margin vertical={1.5} horizontal={1.5}>
           <Navigation title="Become a Patron" />
           <Content>
diff --git a/packages/app/src/app/pages/Profile/index.js b/packages/app/src/app/pages/Profile/index.js
@@ -1,5 +1,6 @@
 /* @flow */
 import React from 'react';
+import Helmet from 'react-helmet';
 import { Route, Switch } from 'react-router-dom';
 import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
@@ -51,9 +52,11 @@ class Profile extends React.Component<Props> {
 
     const user = store.profile.current;
 
-    document.title = `${user.name || user.username} - CodeSandbox`;
     return (
       <Container>
+        <Helmet>
+          <title>{user.name || user.username} - CodeSandbox</title>
+        </Helmet>
         <Header user={user} />
         <Content>
           <MaxWidth>
diff --git a/packages/app/src/app/pages/Sandbox/index.js b/packages/app/src/app/pages/Sandbox/index.js
diff --git a/packages/app/src/app/pages/Search/index.js b/packages/app/src/app/pages/Search/index.js
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
