rewrite user list sidebar for responsiveness

Author: Adam

src/App.tsx

@@ -4,12 +4,11 @@ import { connect } from 'react-redux'
 import { DragDropContext } from 'react-dnd'
 import keydown from 'react-keydown/es'
 import styled from 'styled-components'
-import { Divider } from 'react-md/lib/Dividers'
 
 import { startTimer, stopTimer, setTime } from '@state/actions/timerActions'
 import { TimerContainer } from './containers/Timer'
 import { UserContainer } from './containers/Users'
-import { GitHubLink } from './components/GitHubLink'
+// import { GitHubLink } from './components/GitHubLink'
 import { multiBackend } from './utils/dragDropContext'
 import { Time } from './time'
 import { IState } from './state'
@@ -70,11 +69,9 @@ export class AppComponent extends React.Component<
       <Container>
         <TimerContainer />
 
-        <Divider />
-
         <UserContainer />
 
-        <GitHubLink />
+        {/* <GitHubLink /> */}
       </Container>
     )
   }

src/components/HideOnBigDevices.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import styled from 'styled-components'
+
+const ToHide = styled.span`
+  @media only screen and (min-width: 600px) {
+    display: none;
+  }
+`
+
+export const HideOnBigDevices: React.SFC = props => (
+  <ToHide>{props.children}</ToHide>
+)

src/components/UserList.tsx

@@ -1,27 +1,68 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { StyledComponentClass } from 'styled-components'
 import { List } from 'react-md/lib/Lists'
+import { Button, ButtonProps } from 'react-md/lib/Buttons'
 import { Divider } from 'react-md/lib/Dividers'
-import { Button } from 'react-md/lib/Buttons'
 
 import { DraggableUser } from './User'
 import { AddUserDialog } from './AddUserDialog'
 
-const Container = styled.span`
+interface IContainerProps {
+  hidden: boolean
+}
+
+const Container = styled.div`
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  min-width: 175px;
+  height: 100%;
   background: #fff;
-  min-width: 170px;
+
+  @media only screen and (max-width: 600px) {
+    left: 0;
+    opacity: ${(p: IContainerProps) => (p.hidden ? 1 : 0)};
+    pointer-events: ${(p: IContainerProps) => (p.hidden ? 'all' : 'none')};
+    transition: opacity: 0.25s;
+  }
+
+  @media only screen and (min-width: 1025px) {
+    min-width: 225px;
+  }
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: auto 0;
+  max-height: 100%;
+`
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`
+
+const ButtonHideOnBigDevices: StyledComponentClass<ButtonProps, {}> = styled(
+  Button
+)`
+  @media only screen and (min-width: 600px) {
+    display: none;
+  }
 `
 
 interface IProps {
   readonly users: ReadonlyArray<string>
   readonly activeUser: number
+  readonly hideUserList: boolean
   readonly moveUser: (dragIndex: number, hoverIndex: number) => void
   readonly addUser: (name: string) => void
   readonly removeUser: (index: number) => void
   readonly setActive: (index: number) => void
+  readonly toggleHideUserList: () => void
 }
 
 interface IState {
@@ -43,33 +84,48 @@ export class UserList extends React.PureComponent<IProps, IState> {
 
   public render() {
     return (
-      <Container>
-        <List>
-          {this.props.users.map((user, i) => (
-            <React.Fragment key={user}>
-              {i !== 0 && <Divider />}
-
-              <DraggableUser
-                user={user}
-                active={this.props.activeUser === i}
-                index={i}
-                moveUser={this.props.moveUser}
-                removeUser={this.props.removeUser}
-                setActive={this.props.setActive}
-              />
-            </React.Fragment>
-          ))}
-        </List>
-
-        <Button
-          raised
-          primary
-          iconChildren="add"
-          style={{ margin: '5px 10px 0' }}
-          onClick={this.showDialog}
-        >
-          Add User
-        </Button>
+      <Container hidden={this.props.hideUserList}>
+        <Wrapper>
+          <List style={{ overflowY: 'auto' }}>
+            {this.props.users.map((user, i) => (
+              <React.Fragment key={user}>
+                {i !== 0 && <Divider />}
+
+                <DraggableUser
+                  user={user}
+                  active={this.props.activeUser === i}
+                  index={i}
+                  moveUser={this.props.moveUser}
+                  removeUser={this.props.removeUser}
+                  setActive={this.props.setActive}
+                />
+              </React.Fragment>
+            ))}
+          </List>
+
+          <Divider />
+
+          <ButtonWrapper>
+            <Button
+              raised
+              primary
+              iconChildren="add"
+              style={{ margin: '15px', width: '100%' }}
+              onClick={this.showDialog}
+            >
+              Add User
+            </Button>
+
+            <ButtonHideOnBigDevices
+              raised
+              iconChildren="arrow_back"
+              onClick={this.props.toggleHideUserList}
+              style={{ margin: '15px', width: '100%' }}
+            >
+              Go back
+            </ButtonHideOnBigDevices>
+          </ButtonWrapper>
+        </Wrapper>
 
         <AddUserDialog
           visible={this.state.dialogVisible}

src/containers/Timer.tsx

@@ -13,6 +13,8 @@ import { IState as IRootState } from '@state/index'
 import { Time } from '../time'
 import { Countdown } from '../components/Countdown'
 import { KeyboardShortcutsDialog } from '../components/KeyboardShortcutsDialog'
+import { HideOnBigDevices } from '../components/HideOnBigDevices'
+import { toggleHideUserList } from '@state/actions/usersActions'
 
 const Container = styled.div`
   display: flex;
@@ -39,6 +41,7 @@ interface IDispatchProps {
   startTimer: typeof startTimer
   stopTimer: typeof stopTimer
   countDownOneSecond: typeof countDownOneSecond
+  toggleHideUserList: typeof toggleHideUserList
 }
 
 const mapState = ({ timer }: IRootState): IStateProps => ({
@@ -47,7 +50,13 @@ const mapState = ({ timer }: IRootState): IStateProps => ({
   counting: timer.counting,
 })
 
-const mapActions = { setTime, startTimer, stopTimer, countDownOneSecond }
+const mapActions: IDispatchProps = {
+  setTime,
+  startTimer,
+  stopTimer,
+  countDownOneSecond,
+  toggleHideUserList,
+}
 
 interface IState {
   dialogVisible: boolean
@@ -87,9 +96,17 @@ class TimerComponent extends React.PureComponent<
           onChangeTime={this.props.setTime}
         />
 
-        <NonShrinkButton icon onClick={this.showDialog}>
-          keyboard
-        </NonShrinkButton>
+        <div>
+          <NonShrinkButton icon onClick={this.showDialog}>
+            keyboard
+          </NonShrinkButton>
+
+          <HideOnBigDevices>
+            <NonShrinkButton icon onClick={this.props.toggleHideUserList}>
+              people
+            </NonShrinkButton>
+          </HideOnBigDevices>
+        </div>
 
         <NonShrinkButton
           flat

src/containers/Users.tsx

@@ -7,27 +7,37 @@ import {
   addUser,
   removeUser,
   setActive,
+  toggleHideUserList,
 } from '@state/actions/usersActions'
 import { UserList } from '../components/UserList'
 
 interface IStateProps {
   readonly users: ReadonlyArray<string>
   readonly activeUser: number
+  readonly hideUserList: boolean
 }
 
 interface IActionProps {
   setOrder: typeof setOrder
   addUser: typeof addUser
   removeUser: typeof removeUser
   setActive: typeof setActive
+  toggleHideUserList: typeof toggleHideUserList
 }
 
 const mapState = ({ users }: IState): IStateProps => ({
   users: users.list,
   activeUser: users.activeUser,
+  hideUserList: users.hideUserList,
 })
 
-const mapActions = { setOrder, addUser, removeUser, setActive }
+const mapActions: IActionProps = {
+  setOrder,
+  addUser,
+  removeUser,
+  setActive,
+  toggleHideUserList,
+}
 
 class UserComponent extends React.PureComponent<IStateProps & IActionProps> {
   private moveUser = (dragIndex: number, hoverIndex: number) => {
@@ -40,16 +50,16 @@ class UserComponent extends React.PureComponent<IStateProps & IActionProps> {
 
   public render() {
     return (
-      <React.Fragment>
-        <UserList
-          users={this.props.users}
-          activeUser={this.props.activeUser}
-          moveUser={this.moveUser}
-          addUser={this.props.addUser}
-          removeUser={this.props.removeUser}
-          setActive={this.props.setActive}
-        />
-      </React.Fragment>
+      <UserList
+        users={this.props.users}
+        activeUser={this.props.activeUser}
+        hideUserList={this.props.hideUserList}
+        moveUser={this.moveUser}
+        addUser={this.props.addUser}
+        removeUser={this.props.removeUser}
+        setActive={this.props.setActive}
+        toggleHideUserList={this.props.toggleHideUserList}
+      />
     )
   }
 }

src/state/actions/usersActions.ts

@@ -4,6 +4,7 @@ export const REMOVE_USER = 'REMOVE_USER'
 export const SET_ORDER = 'SET_ORDER'
 export const SET_ACTIVE = 'SET_ACTIVE'
 export const SET_ACTIVE_NEXT = 'SET_ACTIVE_NEXT'
+export const TOGGLE_HIDE_USER_LIST = 'TOGGLE_HIDE_USER_LIST'
 
 export type Actions = {
   readonly ADD_USER: {
@@ -25,6 +26,9 @@ export type Actions = {
   readonly SET_ACTIVE_NEXT: {
     type: typeof SET_ACTIVE_NEXT
   }
+  readonly TOGGLE_HIDE_USER_LIST: {
+    type: typeof TOGGLE_HIDE_USER_LIST
+  }
 }
 
 export type RootAction = Actions[keyof Actions]
@@ -52,3 +56,7 @@ export const setActive = (payload: number): Actions[typeof SET_ACTIVE] => ({
 export const setActiveNext = (): Actions[typeof SET_ACTIVE_NEXT] => ({
   type: SET_ACTIVE_NEXT,
 })
+
+export const toggleHideUserList = (): Actions[typeof TOGGLE_HIDE_USER_LIST] => ({
+  type: TOGGLE_HIDE_USER_LIST,
+})

src/state/reducers/usersReducers.ts

@@ -6,24 +6,27 @@ import {
   REMOVE_USER,
   ADD_USER,
   SET_ACTIVE,
+  TOGGLE_HIDE_USER_LIST,
 } from '@state/actions/usersActions'
 
 export type IStateUsers = {
   readonly list: ReadonlyArray<string>
   readonly activeUser: number
+  readonly hideUserList: boolean
 }
 
 const initialState: IStateUsers = {
   list: [],
   activeUser: 0,
+  hideUserList: true,
 }
 
 const cachedSettings = JSON.parse(
   localStorage.getItem('cache') || '{ "users": null }'
 ).users
 
 export const usersReducers = (
-  state = Object.assign({}, initialState, cachedSettings),
+  state: IStateUsers = Object.assign({}, initialState, cachedSettings),
   action: RootAction
 ) => {
   switch (action.type) {
@@ -53,6 +56,11 @@ export const usersReducers = (
         activeUser: action.payload,
       })
 
+    case TOGGLE_HIDE_USER_LIST:
+      return Object.assign({}, state, {
+        hideUserList: !state.hideUserList,
+      })
+
     default:
       return state
   }