feat: pull down to refresh (#2908)
* feat: pull down to refresh functionality Custom pull down to refresh added to replace the default browser pull down to refresh. This will allow you to manually reload the page if you are using it as a PWA. * test: update test to check api call correctly changed api call for test and made sure it pulls down all the way to trigger refresh * fix: changed positioning of pull to refresh Refresh indicator now has absolute positioning and will prevent the top edge from pulling down.pull/3018/head
Brandon Cohen
2 years ago
committed by
GitHub
parent
99fc9a2da0
commit
87825a0e05
@ -0,0 +1,25 @@
|
|||||||
|
describe('Pull To Refresh', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.login(Cypress.env('ADMIN_EMAIL'), Cypress.env('ADMIN_PASSWORD'));
|
||||||
|
cy.viewport(390, 844);
|
||||||
|
cy.visitMobile('/');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('reloads the current page', () => {
|
||||||
|
cy.wait(500);
|
||||||
|
|
||||||
|
cy.intercept({
|
||||||
|
method: 'GET',
|
||||||
|
url: '/api/v1/*',
|
||||||
|
}).as('apiCall');
|
||||||
|
|
||||||
|
cy.get('.searchbar').swipe('bottom', [190, 400]);
|
||||||
|
|
||||||
|
cy.wait('@apiCall').then((interception) => {
|
||||||
|
assert.isNotNull(
|
||||||
|
interception.response.body,
|
||||||
|
'API was called and received data'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { RefreshIcon } from '@heroicons/react/outline';
|
||||||
|
import Router from 'next/router';
|
||||||
|
import PR from 'pulltorefreshjs';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import ReactDOMServer from 'react-dom/server';
|
||||||
|
|
||||||
|
const PullToRefresh: React.FC = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
PR.init({
|
||||||
|
mainElement: '#pull-to-refresh',
|
||||||
|
onRefresh() {
|
||||||
|
Router.reload();
|
||||||
|
},
|
||||||
|
iconArrow: ReactDOMServer.renderToString(
|
||||||
|
<RefreshIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
|
||||||
|
),
|
||||||
|
iconRefreshing: ReactDOMServer.renderToString(
|
||||||
|
<RefreshIcon
|
||||||
|
className="z-50 m-auto h-9 w-9 animate-spin rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700"
|
||||||
|
style={{ animationDirection: 'reverse' }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
instructionsPullToRefresh: ReactDOMServer.renderToString(<div />),
|
||||||
|
instructionsReleaseToRefresh: ReactDOMServer.renderToString(<div />),
|
||||||
|
instructionsRefreshing: ReactDOMServer.renderToString(<div />),
|
||||||
|
distReload: 55,
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
PR.destroyAll();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return <div id="pull-to-refresh"></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PullToRefresh;
|
||||||
Loading…
Reference in new issue