Allow returning users to reimport the demo song

src/components/Home/FirstTimeHome.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import { withRouter } from 'react-router-dom';
 import { filePlus } from 'react-icons-kit/feather/filePlus';
 import { download } from 'react-icons-kit/feather/download';
 import { box } from 'react-icons-kit/feather/box';
@@ -21,7 +20,7 @@ import OptionColumn from './OptionColumn';
 const WRAPPER_MAX_WIDTH = 850;
 const WRAPPER_PADDING = UNIT * 2;
 
-const FirstTimeHome = ({ loadDemoMap, setModal, demoSong, history }) => {
+const FirstTimeHome = ({ loadDemoMap, setModal, demoSong }) => {
   const { width: windowWidth } = useWindowDimensions();
 
   const [isLoadingDemo, setIsLoadingDemo] = React.useState(false);
@@ -127,6 +126,4 @@ const mapDispatchToProps = {
   loadDemoMap: actions.loadDemoMap,
 };
 
-export default withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(FirstTimeHome)
-);
+export default connect(mapStateToProps, mapDispatchToProps)(FirstTimeHome);

src/components/Home/ReturningHome.js

@@ -1,7 +1,10 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
 
+import * as actions from '../../actions';
 import { UNIT } from '../../constants';
+import { getDemoSong } from '../../reducers/songs.reducer';
 
 import Button from '../Button';
 import Spacer from '../Spacer';
@@ -10,7 +13,9 @@ import MaxWidthWrapper from '../MaxWidthWrapper';
 import SongsTable from './SongsTable';
 import Heading from '../Heading';
 
-const ReturningHome = ({ songs, isProcessingImport, setModal }) => {
+const ReturningHome = ({ songs, isProcessingImport, loadDemoMap, setModal, demoSong}) => {
+  const [isLoadingDemo, setIsLoadingDemo] = React.useState(false);
+
   return (
     <MaxWidthWrapper>
       <Spacer size={UNIT * 8} />
@@ -36,6 +41,19 @@ const ReturningHome = ({ songs, isProcessingImport, setModal }) => {
           >
             Import existing map
           </Button>
+          <Spacer size={UNIT * 2} />
+          <Button
+            disabled={demoSong}
+            style={{ width: '100%' }}
+            onClick={() => {
+              if (!demoSong) {
+                setIsLoadingDemo(true);
+                loadDemoMap();
+              }
+            }}
+          >
+            {isLoadingDemo ? 'Loading…' : 'Try a demo map'}
+          </Button>
         </SideColumn>
       </Row>
     </MaxWidthWrapper>
@@ -66,4 +84,13 @@ const SideColumn = styled(Column)`
   border-radius: ${UNIT}px;
   min-width: 280px;
 `;
-export default ReturningHome;
+
+const mapStateToProps = (state) => ({
+  demoSong: getDemoSong(state),
+});
+
+const mapDispatchToProps = {
+  loadDemoMap: actions.loadDemoMap,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReturningHome);

src/middlewares/demo.middleware.js

@@ -12,23 +12,17 @@ export default () => (store) => (next) => {
     next(action);
 
     if (action.type === 'LOAD_DEMO_MAP') {
-      // If this is a brand-new user, they won't have the demo song at all
-      const state = store.getState();
-      const isNewUser = getIsNewUser(state);
-
-      if (isNewUser) {
-        fetch(demoFileUrl)
-          .then((res) => res.blob())
-          .then((blob) => processImportedMap(blob, []))
-          .then((songData) => {
-            songData.demo = true;
-            next(importExistingSong(songData));
-          })
-          .then(() => {
-            // HACK: Should pull data from demoSong
-            window.location = '/edit/only-now/Normal/notes';
-          });
-      }
+      fetch(demoFileUrl)
+        .then((res) => res.blob())
+        .then((blob) => processImportedMap(blob, []))
+        .then((songData) => {
+          songData.demo = true;
+          next(importExistingSong(songData));
+        })
+        .then(() => {
+          // HACK: Should pull data from demoSong
+          window.location = '/edit/only-now/Normal/notes';
+        });
     }
   };
 };