refactor(overmind-devtools): improve the UI

Author: christianalfoni

packages/node_modules/overmind-devtools/src/app/actions.ts

@@ -152,8 +152,13 @@ export const toggleGroupedComponent: Action<string> = ({
   }
 }
 
-export const selectApp: Action<string> = ({ value: appName, state }) =>
-  (state.currentAppName = appName)
+export const selectApp: Action<string> = ({ value: appName, state }) => {
+  state.currentAppName = appName
+  state.showApps = false
+}
 
 export const toggleExpandAllActions: Action = ({ state }) =>
   (state.expandAllActionDetails = !state.expandAllActionDetails)
+
+export const toggleShowApps: Action = ({ state }) =>
+  (state.showApps = !state.showApps)

packages/node_modules/overmind-devtools/src/app/operators.ts

@@ -282,7 +282,7 @@ export const addMutations = mutate<MutationsMessage>(
     const operator =
       state.apps[message.appName].actions[id].operators[mutations.operatorId]
 
-    operator.mutations = mutations.mutations
+    operator.mutations = operator.mutations.concat(mutations.mutations)
   }
 )
 

packages/node_modules/overmind-devtools/src/app/state.ts

@@ -17,6 +17,7 @@ type State = {
   currentAppName: string
   newPortValue: string
   currentTab: Tab
+  showApps: boolean
   expandedStatePaths: string[]
   expandAllActionDetails: boolean
   expandedComponents: string[]
@@ -34,6 +35,7 @@ type State = {
 const state: State = {
   isConnecting: true,
   error: null,
+  showApps: false,
   currentAppName: null,
   port: '3031',
   apps: {},

packages/node_modules/overmind-devtools/src/app/utils.ts

@@ -69,3 +69,13 @@ export const ensureFlushExists = (flushes, flushId) => {
     flushes[flushId] = flush
   }
 }
+
+export const getAppShortName = (name: string) => {
+  const firstLetters = name.split(' ').map((word) => word[0].toUpperCase())
+
+  if (firstLetters.length >= 2) {
+    return firstLetters.slice(0, 2)
+  }
+
+  return name.substr(0, 2)
+}

packages/node_modules/overmind-devtools/src/components/ActionsList/elements.tsx

@@ -26,7 +26,7 @@ export const ActionColor = styled<
 >('span')`
   position: absolute;
   top: 0;
-  left: 0;
+  right: 0;
   width: 10px;
   height: 100%;
   background-color: ${({ color }) => color};

packages/node_modules/overmind-devtools/src/components/Apps/elements.tsx

@@ -0,0 +1,64 @@
+import styled from '../../styled-components'
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  background-color: ${({ theme }) => theme.color.white};
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+`
+
+export const App = styled<
+  {
+    isSelected: boolean
+  },
+  'button'
+>('button')`
+  outline: none;
+  border: 0;
+  width: 100%;
+  cursor: pointer;
+  background-color: ${({ theme, isSelected }) =>
+    isSelected
+      ? theme.color.lighten(theme.color.white, -0.03)
+      : theme.color.lighten(theme.color.white, -0.01)};
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.color.black};
+  padding: ${({ theme }) => `${theme.padding.small} ${theme.padding.normal}`};
+  white-space: nowrap;
+`
+
+export const CurrentApp = styled.div<{
+  color: string
+}>`
+  border: 2px solid ${({ color }) => color};
+  border-radius: 50%;
+  background-color: #fff;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: bold;
+`
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+`
+
+export const AppsList = styled.div`
+  position: absolute;
+  left: calc(100% + 1px);
+  top: 0;
+  background-color: #fff;
+  border-right: 1px solid ${({ theme }) => theme.color.gray};
+  border-bottom: 1px solid ${({ theme }) => theme.color.gray};
+`

packages/node_modules/overmind-devtools/src/components/Apps/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { connect, Connect } from '../../app'
+import { getAppShortName, nameToColor } from '../../app/utils'
+import { Wrapper, App, CurrentApp, Overlay, AppsList } from './elements'
+
+const Apps: React.SFC<Connect> = ({ app }) => (
+  <Wrapper>
+    <CurrentApp
+      color={nameToColor(app.state.currentAppName)}
+      onClick={app.actions.toggleShowApps}
+    >
+      {getAppShortName(app.state.currentAppName)}
+    </CurrentApp>
+    {app.state.showApps ? (
+      <>
+        <Overlay onClick={app.actions.toggleShowApps} />
+        <AppsList>
+          {Object.keys(app.state.apps).map((appName) => (
+            <App
+              key={appName}
+              onClick={() => app.actions.selectApp(appName)}
+              isSelected={app.state.currentAppName === appName}
+            >
+              {appName}
+            </App>
+          ))}
+        </AppsList>
+      </>
+    ) : null}
+  </Wrapper>
+)
+
+export default connect(Apps)

packages/node_modules/overmind-devtools/src/components/AppsBar/elements.tsx

@@ -6,8 +6,8 @@ export const Wrapper = styled.div`
   justify-content: center;
   height: 100%;
   width: 100%;
-  background-color: ${(props) => props.theme.color.dark};
-  color: ${(props) => props.theme.color.white};
+  background-color: ${(props) => props.theme.color.white};
+  color: ${(props) => props.theme.color.black};
   flex-direction: column;
 `