Merge pull request #906 from jembi/revert-901-remove-swipe-facilities

Revert "Remove swipe feature"

Author: euanmillar

packages/components/src/components/layout/Content.tsx

@@ -16,7 +16,7 @@ export const BodyContent = styled.div`
 `
 export const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.white};
-  position: relative;
-  min-height: calc(100vh - 40px);
+  position: absolute;
   width: 100%;
+  height: calc(100% - 40px);
 `

packages/register/package.json

@@ -50,6 +50,7 @@
     "react-router-redux": "next",
     "react-scripts": "^3.0.1",
     "react-stickynode": "^2.0.1",
+    "react-swipeable": "^4.3.0",
     "redux": "^4.0.1",
     "redux-loop": "^5.0.0",
     "redux-sentry-middleware": "^0.0.15",

packages/register/src/views/RegisterForm/ApplicationForm.test.tsx

@@ -240,6 +240,83 @@ describe('when user has starts a new application', () => {
       })
     })
 
+    describe('when user swipes left from the "child" section', () => {
+      beforeEach(async () => {
+        app
+          .find('#swipeable_block')
+          .hostNodes()
+          .simulate('touchStart', {
+            touches: [
+              {
+                clientX: 150,
+                clientY: 20
+              }
+            ]
+          })
+          .simulate('touchMove', {
+            changedTouches: [
+              {
+                clientX: 100,
+                clientY: 20
+              }
+            ]
+          })
+          .simulate('touchEnd', {
+            changedTouches: [
+              {
+                clientX: 50,
+                clientY: 20
+              }
+            ]
+          })
+        await flushPromises()
+        app.update()
+      })
+      it('changes to the mother details section', () => {
+        expect(app.find('#form_section_title_mother').hostNodes()).toHaveLength(
+          1
+        )
+      })
+    })
+
+    describe('when user swipes right from the "child" section', () => {
+      beforeEach(async () => {
+        app
+          .find('#swipeable_block')
+          .hostNodes()
+          .simulate('touchStart', {
+            touches: [
+              {
+                clientX: 50,
+                clientY: 20
+              }
+            ]
+          })
+          .simulate('touchMove', {
+            changedTouches: [
+              {
+                clientX: 100,
+                clientY: 20
+              }
+            ]
+          })
+          .simulate('touchEnd', {
+            changedTouches: [
+              {
+                clientX: 150,
+                clientY: 20
+              }
+            ]
+          })
+        await flushPromises()
+        app.update()
+      })
+      it('user still stays in the child details section', () => {
+        expect(app.find('#form_section_title_child').hostNodes()).toHaveLength(
+          1
+        )
+      })
+    })
     describe('when user clicks the "mother" page', () => {
       beforeEach(async () => {
         app
@@ -254,6 +331,44 @@ describe('when user has starts a new application', () => {
           1
         )
       })
+      describe('when user swipes right from the "mother" section', () => {
+        beforeEach(async () => {
+          app
+            .find('#swipeable_block')
+            .hostNodes()
+            .simulate('touchStart', {
+              touches: [
+                {
+                  clientX: 50,
+                  clientY: 20
+                }
+              ]
+            })
+            .simulate('touchMove', {
+              changedTouches: [
+                {
+                  clientX: 100,
+                  clientY: 20
+                }
+              ]
+            })
+            .simulate('touchEnd', {
+              changedTouches: [
+                {
+                  clientX: 150,
+                  clientY: 20
+                }
+              ]
+            })
+          await flushPromises()
+          app.update()
+        })
+        it('changes to the child details section', () => {
+          expect(
+            app.find('#form_section_title_child').hostNodes()
+          ).toHaveLength(1)
+        })
+      })
     })
     describe('when user clicks "next" button', () => {
       beforeEach(async () => {