From 4f6e1595a069c485a88dd4ae01b440a5dbdb12a7 Mon Sep 17 00:00:00 2001
From: TimSusa <timmsusa@googlemail.com>
Date: Tue, 29 Dec 2020 20:36:27 +0100
Subject: [PATCH] feat: Improve first user journey

---
 package.json                                  |  2 +-
 .../ChannelStripListCmp.jsx                   | 62 ++++++++++++-------
 src/components/menu-app-bar/MenuAppBarCmp.jsx | 37 +++++------
 3 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 74ff0bc4c..073ebb50d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "midi-bricks",
   "author": "timmsusa@googlemail.com",
   "description": "MIDI Bricks was invented for usage as interactive MIDI-Controller-Interface or even for Touch-Device purposes. We use the native MIDI API, which is exposed from chrome browser. Please note, that because of a sad story MIDI functionality is not provided on mobile devices. Therefore, in most cases our users provide them selves with some kind of extra physical Touch Device, which can be wired via USB to your Desktop or Laptop.",
-  "version": "1.3.44-alpha.7",
+  "version": "1.3.44-alpha.8",
   "main": "./src/app/electron.js",
   "homepage": "./",
   "private": false,
diff --git a/src/components/channel-strip-list/ChannelStripListCmp.jsx b/src/components/channel-strip-list/ChannelStripListCmp.jsx
index d64875a41..dc26bc3c8 100644
--- a/src/components/channel-strip-list/ChannelStripListCmp.jsx
+++ b/src/components/channel-strip-list/ChannelStripListCmp.jsx
@@ -65,6 +65,14 @@ function ChannelStripListCmp() {
     channel: 'None'
   }
   const hasPages = useSelector((state) => Object.keys(state.pages).length > 1)
+  const isPageEmpty = useSelector(
+    (state) => Object.values(state.pages)[0].sliderList.length < 1
+  )
+  const hasDrivers = useSelector(
+    (state) =>
+      Object.keys(state.viewSettings.availableDrivers.inputs).length > 1 ||
+      Object.keys(state.viewSettings.availableDrivers.outputs).length > 1
+  )
   const theme = useTheme()
   const classes = makeStyles(styles.bind(this, theme))()
 
@@ -182,32 +190,40 @@ function ChannelStripListCmp() {
         <Typography variant='h4' className={classes.noMidiTypography}>
           <br />
           <br />
-
-          <Button
-            variant='outlined'
-            onClick={async () => {
-              await dispatch(thunkLoadFile(preset, preset.presetName))
-            }
-            }
-          >
-            LOAD EXAMPLE
-          </Button>
+          {hasDrivers && isPageEmpty && (
+            <Typography>
+              Great! Feel free to add now elements like sliders or buttons via
+              changing to layout mode and clicking the plus button in the top
+              right corner of this app!
+            </Typography>
+          )}
+          {!hasDrivers && (
+            <Button
+              variant='outlined'
+              onClick={async () => {
+                await dispatch(thunkLoadFile(preset, preset.presetName))
+              }}
+            >
+              LOAD EXAMPLE
+            </Button>
+          )}
           <br />
           <br />
+          {!hasDrivers && (
+            <Button
+              variant='outlined'
+              onClick={() =>
+                dispatch(
+                  togglePage({
+                    pageType: PAGE_TYPES.MIDI_DRIVER_MODE
+                  })
+                )
+              }
+            >
+              ENABLE MIDI DRIVER
+            </Button>
+          )}
 
-          <Button
-            variant='outlined'
-            onClick={
-
-              ()=> dispatch(
-                togglePage({
-                  pageType: PAGE_TYPES.MIDI_DRIVER_MODE
-                })
-              )
-            }
-          >
-            ENABLE MIDI DRIVER
-          </Button>
           <br />
           <br />
 
diff --git a/src/components/menu-app-bar/MenuAppBarCmp.jsx b/src/components/menu-app-bar/MenuAppBarCmp.jsx
index ee2538540..ac0e7528b 100644
--- a/src/components/menu-app-bar/MenuAppBarCmp.jsx
+++ b/src/components/menu-app-bar/MenuAppBarCmp.jsx
@@ -49,7 +49,8 @@ const {
   selectCc,
   selectMidiDriverInput,
   //selectMidiChannelInput,
-  addMidiCcListener
+  addMidiCcListener,
+  togglePage
 } = { ...ViewSettingsAction, ...MidiSlidersAction }
 
 export const MenuAppBar = MenuAppBarCmp
@@ -103,7 +104,7 @@ function MenuAppBarCmp(props) {
             </Typography>
           )}
           {isLayoutMode && (
-            <>
+            <React.Fragment>
               <Typography className={classes.typoColorStyle}>
                 Layout Mode Running...
               </Typography>
@@ -145,10 +146,10 @@ function MenuAppBarCmp(props) {
                 icon={<CancelIcon />}
                 isInvisible={!isLayoutMode}
               />
-            </>
+            </React.Fragment>
           )}
           {pageType === PAGE_TYPES.GLOBAL_MODE && (
-            <>
+            <React.Fragment>
               <Typography className={classes.typoColorStyle}>
                 {presetName || ''}
               </Typography>
@@ -166,34 +167,34 @@ function MenuAppBarCmp(props) {
               >
                 Trigger All MIDI
               </Button>
-            </>
+            </React.Fragment>
           )}
           {[PAGE_TYPES.MIDI_DRIVER_MODE, PAGE_TYPES.GLOBAL_MODE].includes(
             pageType
           ) && (
-            <>
+            <React.Fragment>
               <Button
                 className={classes.resetButton}
                 variant='contained'
-                onClick={async () => await dispatch(initApp())}
-              >
-                Detect Driver
-              </Button>
-              <Button
-                className={classes.resetButton}
-                variant='contained'
-                onClick={() => window.location.reload()}
+                onClick={() =>
+                  dispatch(
+                    togglePage({
+                      pageType: PAGE_TYPES.HOME_MODE
+                    })
+                  )
+                }
               >
-                Reload
+                Go Back To Main View
               </Button>
+
               <Button
                 className={classes.resetButton}
                 variant='contained'
-                onClick={() => window.localStorage.clear()}
+                onClick={async () => await dispatch(initApp())}
               >
-                Clear Cache
+                Detect Driver
               </Button>
-            </>
+            </React.Fragment>
           )}
           {[PAGE_TYPES.HOME_MODE].includes(pageType) && (
             <Fragment>