feat(front): pull to refresh build list (#371)

web/package.json

@@ -45,6 +45,7 @@
     "react-dom": "16.13.1",
     "react-feather": "2.0.3",
     "react-hook-form": "5.2.0",
+    "react-js-pull-to-refresh": "^1.2.2",
     "react-router-dom": "^5.1.2",
     "tabler-react": "^1.30.1"
   },

web/src/App.js

@@ -2,20 +2,39 @@
 import React, { useContext, useEffect } from 'react'
 import { hot } from 'react-hot-loader'
 import {
-  BrowserRouter as Router, Redirect, Route, Switch,
+  BrowserRouter as Router,
+  Redirect,
+  Route,
+  Switch,
 } from 'react-router-dom'
 import 'tabler-react/dist/Tabler.css'
 import './assets/main.scss'
-import { GlobalStore } from './store/GlobalStore'
+import { GlobalStore, GlobalContext } from './store/GlobalStore'
 import { ThemeContext, ThemeStore } from './store/ThemeStore'
 import Error404 from './ui/pages/Error404/Error404'
 import Home from './ui/pages/Home/Home'
+import { getMobileOperatingSystem } from './util/browser'
 
 const AppRouter = () => {
-  const { theme: { bg: { page: pageBgColor } } } = useContext(ThemeContext)
+  const {
+    theme: {
+      bg: { page: pageBgColor },
+    },
+  } = useContext(ThemeContext)
+  const {
+    state: { userAgent },
+    updateState,
+  } = useContext(GlobalContext)
   useEffect(() => {
     document.body.style.backgroundColor = pageBgColor
   }, [pageBgColor])
+  useEffect(() => {
+    if (!userAgent) {
+      updateState({
+        userAgent: getMobileOperatingSystem(),
+      })
+    }
+  }, [userAgent, updateState])
 
   return (
     <Router>

web/src/api/apiResponseTransforms.js

@@ -18,23 +18,18 @@ export const flagBuildsFirstOfDay = (sortedTopLevelBuilds) => Array.isArray(sort
     const { created_at: laterBuildCreatedAt = null } = acc[i - 1] || {}
     acc[i] = {
       ...build,
-      buildIsFirstOfDay:
-        !!getIsNextDay(buildCreatedAt, laterBuildCreatedAt),
+      buildIsFirstOfDay: !!getIsNextDay(buildCreatedAt, laterBuildCreatedAt),
     }
     return acc
   }, [])
 
-
 /**
  * Adds entry {allBuildsForMr: Array<int>} to each build,
  * each int corresponds to builds indices in state.builds
  * with the same merge request ID
  */
 export const groupByMr = (acc = {}, build, i) => {
-  const {
-    has_mergerequest: hasMergeRequest,
-    has_mergerequest_id: buildMrId,
-  } = build || {}
+  const { has_mergerequest: hasMergeRequest, has_mergerequest_id: buildMrId } = build || {}
 
   if (!hasMergeRequest || !buildMrId) {
     return {
@@ -82,12 +77,15 @@ export const groupBuildsByMr = (builds) => values(builds.reduce(groupByMr, {}))
  * @return {Array<Number>}
  */
 export const getLatestMasterBuildsForProjects = (sortedTopLevelBuilds) => {
-  const uniqueProjects = uniq(sortedTopLevelBuilds.map((b) => b.has_project_id))
+  const uniqueProjects = uniq(
+    sortedTopLevelBuilds.map((b) => b.has_project_id),
+  )
   const latestMasterBuildPerProject = uniqueProjects
-    .map((p) => sortedTopLevelBuilds
-      .findIndex((build) => build.has_project_id
-        && build.has_project_id === p
-        && getStrEquNormalized(build.branch, BRANCH.MASTER)))
+    .map((p) => sortedTopLevelBuilds.findIndex(
+      (build) => build.has_project_id
+          && build.has_project_id === p
+          && getStrEquNormalized(build.branch, BRANCH.MASTER),
+    ))
     .filter((index) => index > -1)
   return latestMasterBuildPerProject
 }
@@ -98,18 +96,25 @@ export const getLatestMasterBuildsForProjects = (sortedTopLevelBuilds) => {
  * @return {Object<{humanMessage: string, status: number, statusText: string}>}
  */
 export const validateError = ({ error }) => {
-  const { message: axiosMessage } = error.toJSON()
+  const { message: axiosMessage } = error.toJSON
+    ? error.toJSON()
+    : { error: error.toString() }
   const {
     response: { data: customTopLevelMessage = '', status, statusText } = {
       data: '',
       status: 0,
       statusText: '',
     },
   } = error || {}
+  const { response = {} } = error || {}
   const {
-    response: { data: { message: customNestedMessage } = { data: { message: '' } } },
-  } = error || {}
-  const humanMessage = getSafeStr(customTopLevelMessage) || getSafeStr(customNestedMessage) || axiosMessage
+    data: { message: customNestedMessage = '' } = {
+      data: { message: '' },
+    },
+  } = response || {}
+  const humanMessage = getSafeStr(customTopLevelMessage)
+    || getSafeStr(customNestedMessage)
+    || axiosMessage
   return {
     humanMessage,
     status,

web/src/api/index.js

@@ -3,11 +3,15 @@ import { mockBuildListRequest } from './mock'
 import { buildListRequest } from './requests'
 import { validateError } from './apiResponseTransforms'
 
-export const getBuildList = ({ apiKey = '', queryObject }) => (process.env.YOLO_UI_TEST === 'true'
+export const getBuildList = ({ apiKey = '', queryObject }) => process.env.YOLO_UI_TEST === 'true'
   ? mockBuildListRequest()
-  : buildListRequest({ apiKey, queryObject }))
+  : buildListRequest({ apiKey, queryObject })
 
-export const requestBuilds = ({ updateState = () => { }, locationSearch = '', apiKey = '' }) => {
+export const requestBuilds = ({
+  updateState = () => {},
+  locationSearch = '',
+  apiKey = '',
+}) => {
   if (!locationSearch) {
     return null
   }
@@ -43,4 +47,11 @@ export const requestBuilds = ({ updateState = () => { }, locationSearch = '', ap
         })
       },
     )
+    .finally(() => {
+      updateState({
+        autoRefreshOn: false,
+        isLoaded: true,
+        authIsPending: false,
+      })
+    })
 }

web/src/hooks/queryHooks.js

@@ -3,13 +3,19 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { requestBuilds } from '../api'
 import { actions } from '../constants'
 import { GlobalContext } from '../store/GlobalStore'
-import { getFallbackQueryString, getFiltersFromUrlQuery } from '../store/globalStoreHelpers'
+import {
+  getFallbackQueryString,
+  getFiltersFromUrlQuery,
+} from '../store/globalStoreHelpers'
 
 export const useRedirectHome = () => {
   const history = useHistory()
-  const redirectHome = useCallback(() => history.push({
-    path: '/',
-  }), [history])
+  const redirectHome = useCallback(
+    () => history.push({
+      path: '/',
+    }),
+    [history],
+  )
   return { redirectHome }
 }
 
@@ -19,27 +25,38 @@ export const useRedirectHome = () => {
  */
 export const useRedirectOnEmptyQuery = () => {
   const { search: locationSearch } = useLocation()
-  const { state: { userAgent }, updateState } = useContext(GlobalContext)
+  const {
+    state: { userAgent },
+    updateState,
+  } = useContext(GlobalContext)
   const history = useHistory()
-  useEffect(() => {
-    if (!locationSearch) {
-      const fallbackQueryString = getFallbackQueryString({ userAgent, updateState })
-      history.push({
-        pathname: '/',
-        search: fallbackQueryString,
-      })
-    }
-  },
-  // TODO: Bad; refactor
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [locationSearch])
+  useEffect(
+    () => {
+      if (!locationSearch) {
+        const fallbackQueryString = getFallbackQueryString({
+          userAgent,
+          updateState,
+        })
+        history.push({
+          pathname: '/',
+          search: fallbackQueryString,
+        })
+      }
+    },
+    // TODO: Bad; refactor
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [locationSearch],
+  )
 }
 
 /**
- * Call API if query in URL bar changes
+ * Call API if query in URL bar changes and state.needsRefresh is true
  */
 export const useRequestOnQueryChange = () => {
-  const { state: { needsRefresh, apiKey }, updateState } = useContext(GlobalContext)
+  const {
+    state: { needsRefresh, apiKey },
+    updateState,
+  } = useContext(GlobalContext)
   const { search: locationSearch } = useLocation()
 
   useEffect(() => {
@@ -62,8 +79,7 @@ export const useSetFiltersOnQueryChange = () => {
       const { artifact_kinds, build_driver, build_state } = getFiltersFromUrlQuery({ locationSearch }) || {}
       dispatch({
         type: actions.UPDATE_UI_FILTERS,
-        payload:
-          { artifact_kinds, build_driver, build_state },
+        payload: { artifact_kinds, build_driver, build_state },
       })
     }
     if (locationSearch) updateFilters()

web/src/ui/components/Header/Header.module.scss

@@ -10,7 +10,7 @@
     padding-right: 0.75rem;
     overflow-x: hidden;
     flex-shrink: 0;
-    width: 100%;
+    min-width: 80vw;
     display: flex;
     align-items: center;
     justify-content: flex-start;

web/src/ui/components/PullToRefresh.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { PullToRefresh } from 'react-js-pull-to-refresh'
+
+const RefreshContent = () => (
+  <div
+    style={{
+      backgroundColor: 'transparent',
+      textAlign: 'center',
+      height: 75,
+      width: '100vw',
+    }}
+  />
+)
+
+const ReleaseContent = () => (
+  <div
+    style={{
+      height: 75,
+      width: '100vw',
+    }}
+  />
+)
+
+const PullDownContent = () => (
+  <div
+    style={{
+      textAlign: 'center',
+      height: 75,
+      width: '100vw',
+    }}
+  />
+)
+
+export const PullToRefreshWrapper = ({
+  onRefresh,
+  children,
+  isAuthed,
+  isMobile,
+}) => (
+  <PullToRefresh
+    pullDownContent={<PullDownContent />}
+    releaseContent={<ReleaseContent />}
+    refreshContent={<RefreshContent />}
+    pullDownThreshold={50}
+    onRefresh={onRefresh}
+    triggerHeight={isAuthed && isMobile ? 200 : 0}
+    // startInvisible
+    backgroundColor="invisible"
+  >
+    {children}
+  </PullToRefresh>
+)

web/src/ui/components/ShowFiltersButton.js

@@ -3,7 +3,11 @@ import { Sliders } from 'react-feather'
 import { ThemeContext } from '../../store/ThemeStore'
 
 const ShowFiltersButton = ({ clickAction, showingFiltersModal }) => {
-  const { theme: { bg: { btnPrimary } } } = useContext(ThemeContext)
+  const {
+    theme: {
+      bg: { btnPrimary },
+    },
+  } = useContext(ThemeContext)
 
   const showFiltersButtonStyle = {
     position: 'fixed',
@@ -18,10 +22,17 @@ const ShowFiltersButton = ({ clickAction, showingFiltersModal }) => {
     transform: 'rotate(90deg)',
     cursor: 'pointer',
     display: showingFiltersModal ? 'none' : 'flex',
+    zIndex: 2000,
   }
 
   return (
-    <div style={showFiltersButtonStyle} onClick={clickAction} onKeyDown={clickAction} tabIndex={0} role="button">
+    <div
+      style={showFiltersButtonStyle}
+      onClick={clickAction}
+      onKeyDown={clickAction}
+      tabIndex={0}
+      role="button"
+    >
       <Sliders color="white" size={20} />
     </div>
   )