fix: pull to refresh on mobile

fix: get rid of weird bounce in pull-to-refresh save displayFeed in local storage to persist between drag refresh fix: qr modal sizing Signed-off-by: Elizabeth Kelen <[email protected]>
berty · Oct 14, 2020 · 3e6893a · 3e6893a
1 parent cf720b6
commit 3e6893a
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 112 deletions.
diff --git a/web/src/api/index.js b/web/src/api/index.js
@@ -49,7 +49,6 @@ export const requestBuilds = ({
     )
     .finally(() => {
       updateState({
-        autoRefreshOn: false,
         isLoaded: true,
         authIsPending: false,
       })

diff --git a/web/src/hooks/queryHooks.js b/web/src/hooks/queryHooks.js
@@ -43,7 +43,7 @@ export const useRedirectOnEmptyQuery = () => {
         })
       }
     },
-    // TODO: Bad; refactor
+    // TODO: Refactor to follow hook rules
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [locationSearch],
   )
@@ -63,7 +63,7 @@ export const useRequestOnQueryChange = () => {
     if (locationSearch && needsRefresh) {
       requestBuilds({ updateState, locationSearch, apiKey })
     }
-    // TODO: Bad; refactor
+    // TODO: Refactor to follow hook rules
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locationSearch, needsRefresh])
 }
@@ -76,7 +76,9 @@ export const useSetFiltersOnQueryChange = () => {
   const { search: locationSearch } = useLocation()
   useEffect(() => {
     const updateFilters = () => {
-      const { artifact_kinds, build_driver, build_state } = JSON.parse(window.localStorage.getItem('uiFilters')) || getFiltersFromUrlQuery({ locationSearch }) || {}
+      const { artifact_kinds, build_driver, build_state } = JSON.parse(window.localStorage.getItem('uiFilters'))
+        || getFiltersFromUrlQuery({ locationSearch })
+        || {}
       dispatch({
         type: actions.UPDATE_UI_FILTERS,
         payload: { artifact_kinds, build_driver, build_state },

diff --git a/web/src/store/GlobalStore.js b/web/src/store/GlobalStore.js
@@ -4,15 +4,12 @@
  * BEWARE ⚠️
  *
  * This is a container for ALL (almost) the app state.
- * It is mutated uniquely via action updateState()
+ * It is mutated uniquely via action updateState() and logoutAction()
  * throughout the entire app
  *
  * Tell ekelen to refactor me
  */
 
-import {
-  cloneDeep, has, isEqual, keys, omit, pick,
-} from 'lodash'
 import React, { useReducer } from 'react'
 import { retrieveAuthCookie } from '../api/cookies'
 import { actions, PROJECT } from '../constants'
@@ -35,7 +32,9 @@ export const INITIAL_STATE = {
     build_state: [],
   },
   calculatedFilters: {
-    projects: JSON.parse(window.localStorage.getItem('projects')) || [PROJECT.messenger],
+    projects: JSON.parse(window.localStorage.getItem('projects')) || [
+      PROJECT.messenger,
+    ],
     order: 'created_at',
   },
   showingFilterModal: false,
@@ -58,8 +57,6 @@ function reducer(state, action) {
       }
     }
     case actions.LOGOUT:
-      window.localStorage.removeItem('projects')
-      window.localStorage.removeItem('uiFilters')
       return {
         ...state,
         autoRefreshOn: false,
@@ -81,19 +78,22 @@ export const GlobalStore = ({ children }) => {
   // 🚧 not cool, we need to split this so we don't get redundant re-renders
   //     or have to do a slow deep equality check to prevent it
   const updateState = (payload) => {
-    const hasBuilds = has(payload, 'builds')
-    const stateFilteredFromPayload = pick(state, keys(payload))
-    const stateFilteredNoBuilds = omit(stateFilteredFromPayload, 'builds')
-    const payloadNoBuilds = omit(payload, 'builds')
-    const newInfoFromPayload = !isEqual(stateFilteredNoBuilds, payloadNoBuilds)
-    if (hasBuilds || newInfoFromPayload) dispatch({ type: actions.UPDATE_STATE, payload: cloneDeep(payload) })
+    dispatch({ type: actions.UPDATE_STATE, payload })
+  }
+
+  const logoutAction = () => {
+    window.localStorage.removeItem('projects')
+    window.localStorage.removeItem('uiFilters')
+    window.localStorage.removeItem('displayFeed')
+    dispatch({ type: actions.LOGOUT })
   }
 
   return (
     <GlobalContext.Provider
       value={{
         state,
         updateState,
+        logoutAction,
         dispatch,
       }}
     >

diff --git a/web/src/store/globalStoreHelpers.js b/web/src/store/globalStoreHelpers.js
@@ -1,5 +1,6 @@
 import queryString from 'query-string'
 import { isEqual } from 'lodash'
+import { useContext } from 'react'
 import {
   ARTIFACT_KINDS,
   BUILD_DRIVERS,
@@ -10,6 +11,16 @@ import {
 } from '../constants'
 import { singleItemToArray } from '../util/getters'
 import { getMobileOperatingSystem } from '../util/browser'
+import { GlobalContext } from './GlobalStore'
+
+export const useIsMobile = () => {
+  const {
+    state: { userAgent },
+  } = useContext(GlobalContext)
+  return (
+    userAgent === KIND_TO_PLATFORM.IPA || userAgent === KIND_TO_PLATFORM.APK
+  )
+}
 
 export const getFiltersFromUrlQuery = ({ locationSearch = '', uiFilters }) => {
   if (!locationSearch) {

diff --git a/web/src/ui/components/BuildList.js b/web/src/ui/components/BuildList.js
@@ -122,7 +122,9 @@ const FeedDisplayToggler = ({
 }
 
 const BuildList = ({ builds = [], loaded }) => {
-  const [displayFeed, setDisplayFeed] = useState(false)
+  const [displayFeed, setDisplayFeed] = useState(
+    window.localStorage.getItem('displayFeed') === 'true',
+  )
   const ref = useRef()
   const refOpen = useRef()
   const oneBuildInResultsHasMaster = useMemo(
@@ -157,6 +159,7 @@ const BuildList = ({ builds = [], loaded }) => {
         behavior: 'smooth',
         block: 'end',
       })
+      window.localStorage.setItem('displayFeed', 'false')
     }
   }, [displayFeed, prevDisplay, builds.length])
 
@@ -172,6 +175,7 @@ const BuildList = ({ builds = [], loaded }) => {
         behavior: 'smooth',
         block: 'start',
       })
+      window.localStorage.setItem('displayFeed', 'true')
     }
   }, [displayFeed, refOpen, prevDisplay, builds.length])
 

diff --git a/web/src/ui/components/FilterModal/FilterModal.js b/web/src/ui/components/FilterModal/FilterModal.js
@@ -91,7 +91,11 @@ const BuildStateWidgets = ({ selectedBuildStates, setSelectedBuildStates }) => (
 
 const FilterModal = ({ closeAction }) => {
   const { theme, themeStyles } = useContext(ThemeContext)
-  const { state, updateState, dispatch } = useContext(GlobalContext)
+  const {
+    state, updateState, dispatch, logoutAction,
+  } = useContext(
+    GlobalContext,
+  )
   const { redirectHome } = useRedirectHome()
   const [selectedDrivers, setSelectedDrivers] = useState([
     ...state.uiFilters.build_driver,
@@ -189,7 +193,7 @@ const FilterModal = ({ closeAction }) => {
           onClick={() => {
             window.localStorage.setItem(
               'projects',
-              JSON.stringify([...selectedProjects]),
+              JSON.stringify(selectedProjects),
             )
             updateState({
               isLoaded: false,
@@ -227,7 +231,7 @@ const FilterModal = ({ closeAction }) => {
           onClick={() => {
             removeAuthCookie()
             dispatch({ type: actions.UPDATE_UI_FILTERS, payload: {} })
-            dispatch({ type: actions.LOGOUT })
+            logoutAction()
             closeAction()
             redirectHome()
           }}

diff --git a/web/src/ui/components/Filters/Filters.js b/web/src/ui/components/Filters/Filters.js
@@ -44,6 +44,7 @@ const Filters = ({ onFilterClick = () => {} }) => {
       calculatedFilters: { projects },
     },
     updateState,
+    logoutAction,
   } = useContext(GlobalContext)
   const { redirectHome } = useRedirectHome()
   const {
@@ -236,7 +237,7 @@ const Filters = ({ onFilterClick = () => {} }) => {
       hasSelectedState={false}
       onClick={() => {
         removeAuthCookie()
-        dispatch({ type: actions.LOGOUT })
+        logoutAction()
         dispatch({ type: actions.UPDATE_UI_FILTERS, payload: {} })
         redirectHome()
       }}

diff --git a/web/src/ui/components/MessageModal/MessageModal.scss b/web/src/ui/components/MessageModal/MessageModal.scss
@@ -4,19 +4,27 @@
     .modal.modal-blur.fade.show {
         padding-right: 15px;
         display: block;
-        top: 33vmin;
-        left: 0;
-        right: 0;
+        // top: 10vmin;
+        // left: 0;
+        // right: 0;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
     }
 
     .modal-dialog .modal-content {
         border-radius: 15px;
         border: none;
         padding: 15px;
         padding-top: 25px;
+        padding-left: 10vmin;
+        padding-right: 10vmin;
         color: $body-bg-dark;
         background-color: #f7d68e;
         text-align: center;
+        max-width: 80vmin;
+        max-height: 90vmin;
     }
 
     .modal-content .modal-header {

diff --git a/web/src/ui/components/ProtocolDisclaimer.js b/web/src/ui/components/ProtocolDisclaimer.js
@@ -5,16 +5,20 @@ const ProtocolDisclaimer = ({ closeAction }) => {
   const DisclaimerMessage = () => (
     <>
       <div className="modal-header">
-        <h5 className="modal-title">🚧 Disclaimer 🚧</h5>
+        {/* <h5 className="modal-title">🚧 Disclaimer 🚧</h5> */}
         <button
           type="button"
           className="close"
           data-dismiss="modal"
           aria-label="Close"
           onClick={closeAction}
+          style={{ position: 'absolute', top: 15, right: 15 }}
         />
       </div>
       <div className="modal-body">
+        <h5 style={{ whiteSpace: 'nowrap', marginBottom: '30px' }}>
+          🚧 Disclaimer 🚧
+        </h5>
         Yolo does NOT use Berty Protocol yet.
         {' '}
         <br />

diff --git a/web/src/ui/components/PullToRefresh.js b/web/src/ui/components/PullToRefresh.js
@@ -1,51 +1,17 @@
 import React from 'react'
-import { PullToRefresh } from 'react-js-pull-to-refresh'
+import {
+  PullToRefresh,
+  PullDownContent,
+  RefreshContent,
+  ReleaseContent,
+} 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,
-}) => (
+export const PullToRefreshWrapper = ({ onRefresh, children }) => (
   <PullToRefresh
-    pullDownContent={<PullDownContent />}
-    releaseContent={<ReleaseContent />}
-    refreshContent={<RefreshContent />}
-    pullDownThreshold={50}
+    pullDownThreshold={80}
     onRefresh={onRefresh}
-    triggerHeight={isAuthed && isMobile ? 200 : 0}
-    // startInvisible
-    backgroundColor="invisible"
+    triggerHeight={200}
+    {...{ PullDownContent, RefreshContent, ReleaseContent }}
   >
     {children}
   </PullToRefresh>