cozy-bar 0.0.0-development

package/src/components/Drawer.jsx

@@ -0,0 +1,227 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Hammer from 'hammerjs'
+
+import AppsContent from 'components/Apps/AppsContent'
+import SettingsContent from 'components/Settings/SettingsContent'
+import {
+  fetchSettingsData,
+  getSettingsAppURL,
+  getStorageData,
+  logOut
+} from 'lib/reducers'
+
+class Drawer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isScrolling: false,
+      isClosing: false
+    }
+    this.handleLogout = this.handleLogout.bind(this)
+  }
+
+  onDrawerClick = event => {
+    if (event.target === this.wrapperRef) {
+      this.close()
+    }
+  }
+
+  onTransitionEnd = () => {
+    if (this.props.visible) {
+      if (!this.gesturesHandler) this.attachGestures()
+      this.preventBackgroundScrolling()
+    } else {
+      this.restoreBackgroundScrolling()
+      this.setState({ isClosing: false })
+    }
+    this.props.drawerListener()
+  }
+
+  async componentDidMount() {
+    this.turnTransitionsOn()
+  }
+
+  componentWillReceiveProps = async nextProps => {
+    await this.UNSAFE_componentWillReceiveProps(nextProps)
+  }
+
+  UNSAFE_componentWillReceiveProps = async nextProps => {
+    if (!this.props.visible && nextProps.visible) {
+      await this.props.fetchSettingsData()
+    }
+  }
+
+  turnTransitionsOn() {
+    this.asideRef.classList.add('with-transition')
+    this.asideRef.addEventListener('transitionend', this.onTransitionEnd)
+  }
+
+  turnTransitionsOff() {
+    this.asideRef.classList.remove('with-transition')
+    this.asideRef.removeEventListener('transitionend', this.onTransitionEnd)
+  }
+
+  preventBackgroundScrolling() {
+    document.body.style.overflow = 'hidden'
+  }
+
+  restoreBackgroundScrolling() {
+    document.body.style.overflow = 'auto'
+  }
+
+  detachGestures() {
+    this.gesturesHandler.destroy()
+    this.gesturesHandler = null
+  }
+
+  attachGestures() {
+    // IMPORTANT: on Chrome, the `overflow-y: scroll` property on .coz-drawer--apps prevented
+    // swipe events to be dispatched correctly ; the `touch-action: pan-y` fixes the problem
+    // see drawer.css
+    this.gesturesHandler = new Hammer.Manager(document.documentElement, {
+      // we listen in all directions so that we can catch panup/pandown events and let the user scroll
+      recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_ALL }]]
+    })
+
+    // to be completely accurate, `maximumGestureDelta` should be the difference between the right of the aside and the
+    // left of the page; but using the width is much easier to compute and accurate enough.
+    const maximumGestureDistance = this.asideRef.getBoundingClientRect().width
+    // between 0 and 1, how far down the gesture must be to be considered complete upon release
+    const minimumCloseDistance = 0.4
+    // a gesture faster than this will dismiss the menu, regardless of distance traveled
+    const minimumCloseVelocity = 0.2
+
+    let currentGestureProgress = null
+
+    this.gesturesHandler.on('panstart', event => {
+      if (this.state.isClosing) return
+      if (
+        event.additionalEvent === 'panup' ||
+        event.additionalEvent === 'pandown'
+      ) {
+        this.setState({ isScrolling: true })
+      } else {
+        this.turnTransitionsOff()
+        currentGestureProgress = 0
+      }
+    })
+
+    this.gesturesHandler.on('pan', e => {
+      if (this.state.isClosing || this.state.isScrolling) return
+      currentGestureProgress = -e.deltaX / maximumGestureDistance
+      this.applyTransformation(currentGestureProgress)
+    })
+
+    this.gesturesHandler.on('panend', e => {
+      if (this.state.isClosing) return
+      if (this.state.isScrolling) {
+        this.setState({ isScrolling: false })
+        return
+      }
+      // Dismiss the menu if the swipe pan was bigger than the treshold,
+      // or if it was a fast, leftward gesture
+      const haveTravelledFarEnough =
+        -e.deltaX / maximumGestureDistance >= minimumCloseDistance
+      const haveTravelledFastEnough =
+        e.velocity < 0 && Math.abs(e.velocity) >= minimumCloseVelocity
+
+      const shouldDismiss = haveTravelledFarEnough || haveTravelledFastEnough
+
+      if (shouldDismiss) {
+        this.close()
+      } else {
+        this.turnTransitionsOn()
+        this.applyTransformation(0)
+      }
+    })
+  }
+
+  close = () => {
+    if (this.state.isClosing) return
+    this.detachGestures()
+    this.setState(() => ({ isClosing: true }))
+    this.turnTransitionsOn()
+    this.props.onClose()
+    this.asideRef.style.transform = ''
+  }
+
+  applyTransformation(progress) {
+    // constrain between 0 and 1.1 (go a bit further than 1 to be hidden completely)
+    progress = Math.min(1.1, Math.max(0, progress))
+    this.asideRef.style.transform = 'translateX(-' + progress * 100 + '%)'
+  }
+
+  async handleLogout() {
+    const { onLogOut, logOut } = this.props
+
+    if (onLogOut && typeof onLogOut === 'function') {
+      const res = onLogOut()
+      if (res instanceof Promise) {
+        await res
+      }
+    }
+
+    logOut()
+  }
+
+  render() {
+    const {
+      onClaudy,
+      visible,
+      isClaudyLoading,
+      toggleSupport,
+      settingsAppURL,
+      storageData
+    } = this.props
+    return (
+      <div
+        className="coz-drawer-wrapper"
+        onClick={this.onDrawerClick}
+        aria-hidden={visible ? 'false' : 'true'}
+        ref={node => {
+          this.wrapperRef = node
+        }}
+      >
+        <aside
+          ref={node => {
+            this.asideRef = node
+          }}
+        >
+          <nav className="coz-drawer--apps">
+            <AppsContent onAppSwitch={this.close} />
+          </nav>
+          <hr className="coz-sep-flex" />
+          <nav className="coz-drawer--settings">
+            <SettingsContent
+              onLogOut={this.handleLogout}
+              storageData={storageData}
+              settingsAppURL={settingsAppURL}
+              isClaudyLoading={isClaudyLoading}
+              onClaudy={onClaudy}
+              toggleSupport={toggleSupport}
+              isDrawer
+            />
+          </nav>
+        </aside>
+      </div>
+    )
+  }
+}
+
+export { Drawer }
+
+const mapStateToProps = state => ({
+  storageData: getStorageData(state),
+  settingsAppURL: getSettingsAppURL(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  fetchSettingsData: () => dispatch(fetchSettingsData()),
+  logOut: () => dispatch(logOut())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Drawer)

package/src/components/Drawer.spec.jsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+
+import I18n from 'cozy-ui/react/I18n'
+import { createStore } from 'lib/store'
+import enLocale from 'locales/en.json'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { Drawer } from './Drawer'
+
+const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
+
+const fakeStore = createStore()
+
+const Wrapper = ({ children }) => {
+  return (
+    <Provider store={fakeStore}>
+      <I18n dictRequire={() => enLocale} lang="en">
+        {children}
+      </I18n>
+    </Provider>
+  )
+}
+
+describe('bar', () => {
+  describe('logout', () => {
+    const findLogoutButton = () => {
+      return screen.getByText('Sign out')
+    }
+    const setup = ({ onLogOut, logOut }) => {
+      render(
+        <Wrapper>
+          <Drawer
+            toggleSupport={jest.fn()}
+            logOut={logOut}
+            onLogOut={onLogOut}
+          />
+        </Wrapper>
+      )
+    }
+
+    const clickLogout = () => {
+      const logoutButton = findLogoutButton()
+      fireEvent(
+        logoutButton,
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true
+        })
+      )
+    }
+
+    it('should await the onLogOut', async () => {
+      let prom
+      const callOrder = []
+      const logOut = jest.fn().mockImplementation(() => {
+        callOrder.push('logOut')
+      })
+      const onLogOut = jest.fn().mockImplementation(async () => {
+        prom = sleep(100)
+        callOrder.push('onLogOut')
+        await prom
+      })
+
+      setup({ logOut, onLogOut })
+
+      act(() => {
+        clickLogout()
+      })
+
+      expect(logOut).not.toHaveBeenCalled()
+      await prom
+      await sleep(0)
+      expect(logOut).toHaveBeenCalled()
+      expect(onLogOut).toHaveBeenCalled()
+      expect(callOrder).toEqual(['onLogOut', 'logOut'])
+    })
+
+    it('should work if onLogOut has not been passed', () => {
+      const logOut = jest.fn()
+      setup({ logOut })
+      act(() => {
+        clickLogout()
+      })
+      expect(logOut).toHaveBeenCalled()
+    })
+
+    it('should work if onLogOut does not return a promise', () => {
+      const logOut = jest.fn()
+      const onLogOut = jest.fn()
+      setup({ logOut, onLogOut })
+      act(() => {
+        clickLogout()
+      })
+      expect(logOut).toHaveBeenCalled()
+      expect(onLogOut).toHaveBeenCalled()
+    })
+  })
+})

package/src/components/SearchBar.jsx

@@ -0,0 +1,358 @@
+import React, { Component } from 'react'
+import { translate } from 'cozy-ui/react/I18n'
+import Autosuggest from 'react-autosuggest'
+import debounce from 'lodash.debounce'
+import { fetchRawIntent } from 'lib/intents'
+import logger from 'lib/logger'
+
+const INTENT_VERB = 'OPEN'
+const INTENT_DOCTYPE = 'io.cozy.suggestions'
+const SUGGESTIONS_PER_SOURCE = 10
+
+const normalizeString = str =>
+  str
+    .toString()
+    .toLowerCase()
+    .replace(/\//g, ' ')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .split(' ')
+
+const highlightQueryTerms = (searchResult, query) => {
+  const normalizedQueryTerms = normalizeString(query)
+  const normalizedResultTerms = normalizeString(searchResult)
+
+  const matchedIntervals = []
+  const spacerLength = 1
+  let currentIndex = 0
+
+  normalizedResultTerms.forEach(resultTerm => {
+    normalizedQueryTerms.forEach(queryTerm => {
+      const index = resultTerm.indexOf(queryTerm)
+      if (index >= 0) {
+        matchedIntervals.push({
+          from: currentIndex + index,
+          to: currentIndex + index + queryTerm.length
+        })
+      }
+    })
+
+    currentIndex += resultTerm.length + spacerLength
+  })
+
+  // matchedIntervals can overlap, so we merge them.
+  // - sort the intervals by starting index
+  // - add the first interval to the stack
+  // - for every interval,
+  // - - add it to the stack if it doesn't overlap with the stack top
+  // - - or extend the stack top if the start overlaps and the new interval's top is bigger
+  const mergedIntervals = matchedIntervals
+    .sort((intervalA, intervalB) => intervalA.from > intervalB.from)
+    .reduce((computedIntervals, newInterval) => {
+      if (
+        computedIntervals.length === 0 ||
+        computedIntervals[computedIntervals.length - 1].to < newInterval.from
+      ) {
+        computedIntervals.push(newInterval)
+      } else if (
+        computedIntervals[computedIntervals.length - 1].to < newInterval.to
+      ) {
+        computedIntervals[computedIntervals.length - 1].to = newInterval.to
+      }
+
+      return computedIntervals
+    }, [])
+
+  // create an array containing the entire search result, with special characters, and the intervals surrounded y `<b>` tags
+  const slicedOriginalResult =
+    mergedIntervals.length > 0
+      ? [searchResult.slice(0, mergedIntervals[0].from)]
+      : searchResult
+
+  for (let i = 0, l = mergedIntervals.length; i < l; ++i) {
+    slicedOriginalResult.push(
+      <b>
+        {searchResult.slice(mergedIntervals[i].from, mergedIntervals[i].to)}
+      </b>
+    )
+    if (i + 1 < l)
+      slicedOriginalResult.push(
+        searchResult.slice(mergedIntervals[i].to, mergedIntervals[i + 1].from)
+      )
+  }
+
+  if (mergedIntervals.length > 0)
+    slicedOriginalResult.push(
+      searchResult.slice(
+        mergedIntervals[mergedIntervals.length - 1].to,
+        searchResult.length
+      )
+    )
+
+  return slicedOriginalResult
+}
+
+class SearchBar extends Component {
+  state = {
+    input: '',
+    query: null,
+    searching: false,
+    focused: false,
+    suggestionsBySource: [],
+    sourceURLs: []
+  }
+
+  sources = []
+
+  componentWillMount() {
+    this.debouncedOnSuggestionsFetchRequested = debounce(
+      this.onSuggestionsFetchRequested,
+      250
+    )
+  }
+
+  componentDidMount() {
+    // The searchbar has one or more sources that provide suggestions. These sources are iframes into other apps, provied by thee intent system.
+    // Since we need to call the sources whenever the query changes, we are taking manual control over the intent process.
+    fetchRawIntent(INTENT_VERB, INTENT_DOCTYPE).then(intent => {
+      const { services } = intent.attributes
+      if (!services) return null
+
+      this.sources = services.map(service => {
+        const url = service.href
+        this.setState(state => ({
+          ...state,
+          sourceURLs: [...state.sourceURLs, url]
+        }))
+        const serviceOrigin = url.split('/', 3).join('/')
+
+        return {
+          slug: service.slug, // can be used to show where a suggestion comes from
+          origin: serviceOrigin,
+          id: intent._id,
+          ready: false,
+          window: null, // will hold a reference to the window we're sending messages to
+          resolvers: {} // will hold references to a function to call when the source sends suggestions
+        }
+      })
+
+      window.addEventListener('message', this.onMessageFromSource(this.sources))
+    })
+  }
+
+  onMessageFromSource = sources => event => {
+    // this re-implements a subset of injectService found in lib/intents, though only the part that are useful for suggestions
+    const source = sources.find(source => source.origin === event.origin)
+
+    if (!source) return null
+
+    if (event.data.type === `intent-${source.id}:ready`) {
+      source.ready = true
+      source.window = event.source
+
+      source.window.postMessage({}, event.origin)
+    } else if (
+      event.data.type === `intent-${source.id}:data` &&
+      source.resolvers[event.data.id]
+    ) {
+      source.resolvers[event.data.id]({
+        id: source.id,
+        suggestions: event.data.suggestions
+      })
+      delete source.resolvers[event.data.id]
+    } else {
+      logger.log('unhandled message:', event)
+    }
+  }
+
+  onChange = (event, { newValue }) => {
+    this.setState({
+      input: newValue
+    })
+  }
+
+  changeFocusState = focused => {
+    this.setState({
+      focused
+    })
+  }
+
+  clearSuggestions = () => {
+    this.setState({
+      suggestionsBySource: []
+    })
+  }
+
+  onSuggestionsFetchRequested = ({ value }) => {
+    const availableSources = this.sources.filter(source => source.ready)
+
+    if (availableSources.length > 0) {
+      // We defer the emptying of `suggestionsBySource` so that we still display
+      // the previous suggestion list
+      this.setState(state => ({ ...state, searching: true }))
+
+      availableSources.forEach(async source => {
+        const { id, suggestions } = await new Promise(resolve => {
+          const resolverId = new Date().getTime().toString()
+          source.resolvers[resolverId] = resolve
+          source.window.postMessage(
+            { query: value, id: resolverId },
+            source.origin
+          )
+        })
+        const title = this.sources.find(source => source.id === id).slug
+        // This is the first result we get for this new search term,
+        // we can now update `query` and replace the previous `suggestionsBySource`
+        if (this.state.query !== value) {
+          this.setState(state => ({
+            ...state,
+            searching: false,
+            query: value,
+            suggestionsBySource: [{ title, suggestions }]
+          }))
+        } else {
+          this.setState(state => ({
+            ...state,
+            suggestionsBySource: [
+              ...state.suggestionsBySource,
+              { title, suggestions }
+            ]
+          }))
+        }
+      })
+    }
+  }
+
+  onSuggestionsClearRequested = () => {
+    this.clearSuggestions()
+    this.debouncedOnSuggestionsFetchRequested.cancel()
+    this.setState({ query: null, searching: false })
+  }
+
+  onSuggestionSelected = (event, { suggestion }) => {
+    const { onSelect } = suggestion
+    // `onSelect` is a string that describes what should happen when the suggestion is selected. Currently, the only format we're supporting is `open:http://example.com` to change the url of the current page.
+
+    if (/^open:/.test(onSelect)) {
+      const url = onSelect.substr(5)
+      window.location.href = url
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(
+        'suggestion onSelect (' + onSelect + ') could not be executed'
+      )
+    }
+
+    this.setState({ input: '', query: null })
+  }
+
+  getSectionSuggestions = section =>
+    section.suggestions.slice(0, SUGGESTIONS_PER_SOURCE)
+
+  // We want the user to find folders in which he can then navigate into, so we return the path here
+  getSuggestionValue = suggestion => suggestion.subtitle
+
+  renderSectionTitle = () => null // we only have one section at the moment, but if we decide to sort suggestions by section/source, we can use this callback
+
+  renderSuggestion = suggestion => (
+    <div className="coz-searchbar-autosuggest-suggestion-item">
+      {suggestion.icon && (
+        <img
+          className="coz-searchbar-autosuggest-suggestion-icon"
+          src={suggestion.icon}
+          alt="icon"
+        />
+      )}
+      <div className="coz-searchbar-autosuggest-suggestion-content">
+        <div className="coz-searchbar-autosuggest-suggestion-title">
+          {highlightQueryTerms(suggestion.title, this.state.query)}
+        </div>
+        {suggestion.subtitle && (
+          <div className="coz-searchbar-autosuggest-suggestion-subtitle">
+            {highlightQueryTerms(suggestion.subtitle, this.state.query)}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+
+  render() {
+    const {
+      input,
+      query,
+      searching,
+      focused,
+      suggestionsBySource,
+      sourceURLs
+    } = this.state
+    if (sourceURLs.length === 0) return null
+    const { t } = this.props
+
+    const isInitialSearch = input !== '' && query === null
+    const hasSuggestions =
+      suggestionsBySource.reduce(
+        (totalSuggestions, suggestionSection) =>
+          totalSuggestions + suggestionSection.suggestions.length,
+        0
+      ) > 0
+
+    const inputProps = {
+      placeholder: t('searchbar.placeholder'),
+      value: input,
+      onChange: this.onChange,
+      onFocus: () => this.changeFocusState(true),
+      onBlur: () => this.changeFocusState(false)
+    }
+
+    const theme = {
+      container:
+        'coz-searchbar-autosuggest-container' +
+        (searching ? ' --searching' : '') +
+        (focused ? ' --focused' : ''),
+      input: 'coz-searchbar-autosuggest-input',
+      inputFocused: 'coz-searchbar-autosuggest-input-focused',
+      suggestionsContainer: 'coz-searchbar-autosuggest-suggestions-container',
+      suggestionsContainerOpen:
+        'coz-searchbar-autosuggest-suggestions-container--open',
+      suggestionsList: 'coz-searchbar-autosuggest-suggestions-list',
+      suggestion: 'coz-searchbar-autosuggest-suggestion',
+      suggestionHighlighted: 'coz-searchbar-autosuggest-suggestion-highlighted',
+      sectionTitle: 'coz-searchbar-autosuggest-section-title'
+    }
+
+    return (
+      <div className="coz-searchbar" role="search">
+        {sourceURLs.map((url, i) => (
+          <iframe
+            src={url}
+            style={{ visibility: 'hidden', height: '0px', width: '0px' }}
+            key={url + i}
+          />
+        ))}
+        <Autosuggest
+          theme={theme}
+          suggestions={suggestionsBySource}
+          multiSection
+          onSuggestionsFetchRequested={
+            this.debouncedOnSuggestionsFetchRequested
+          }
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={this.getSuggestionValue}
+          getSectionSuggestions={this.getSectionSuggestions}
+          renderSectionTitle={this.renderSectionTitle}
+          renderSuggestion={this.renderSuggestion}
+          inputProps={inputProps}
+          focusInputOnSuggestionClick={false}
+        />
+        {input !== '' && !isInitialSearch && focused && !hasSuggestions && (
+          <div className={'coz-searchbar-autosuggest-status-container'}>
+            {t('searchbar.empty', { query: input })}
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export default translate()(SearchBar)