remove unnecessary modal eventlistener

Dereje1 · Dec 19, 2023 · cd0ba6b · cd0ba6b
1 parent bc32401
commit cd0ba6b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 51 deletions.
diff --git a/client/src/components/common/modal/modalzoom.tsx b/client/src/components/common/modal/modalzoom.tsx
@@ -51,18 +51,8 @@ export class PinZoom extends Component<PinZoomProps, PinZoomState> {
     if (this.zoomedImage.current) {
       this.zoomedImage.current.focus();
     }
-    window.addEventListener('scroll', this.disableScroll);
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.disableScroll);
-  }
-
-  disableScroll = () => {
-    const { zoomInfo: { parentDivStyle } } = this.props;
-    window.scrollTo(0, parentDivStyle.top);
-  };
-
   close = (_: React.SyntheticEvent, forceClose = false) => {
     // sends a reset callback after closing modalstate
     const { cancelBlur } = this.state;

diff --git a/client/src/index.scss b/client/src/index.scss
@@ -1,18 +1,26 @@
-body{
-    background: rgb(255, 255, 255);
-    margin:0;
-    overflow-y: scroll;
-    &.cover{
-      overflow: hidden;
-    }
+body {
+  background: rgb(255, 255, 255);
+  margin: 0;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &.cover {
+    overflow: hidden;
   }
 
-  // overlay is shared with pincreate modal too
-.modal-overlay{
+}
+
+
+
+// overlay is shared with pincreate modal too
+.modal-overlay {
   position: fixed;
-  top:0;
+  top: 0;
   left: 0;
-  background:rgb(94, 104, 112);
+  background: rgb(94, 104, 112);
   opacity: 0.8;
   width: 100%;
   height: 100%;

diff --git a/tests/client/src/components/common/modal/modalzoom.test.tsx b/tests/client/src/components/common/modal/modalzoom.test.tsx
@@ -73,16 +73,6 @@ describe('The pin zoom modal', () => {
     expect(props.reset).toHaveBeenCalledTimes(1);
   });
 
-  test('will disable the scroll on mount and when user tries to scroll', () => {
-    global.scrollTo = jest.fn();
-    const mockedScroll = jest.mocked(global.scrollTo);
-    const wrapper = shallow(<PinZoom {...props} />);
-    mockedScroll.mockClear();
-    const instance = wrapper.instance() as PinZoom;
-    instance.disableScroll();
-    expect(mockedScroll).toHaveBeenCalledWith(0, 10);
-  });
-
   test('will toggle the comments window', () => {
     global.innerHeight = 1000;
     const updatedProps = {
@@ -135,26 +125,6 @@ describe('The pin zoom modal', () => {
     instance.close({} as React.SyntheticEvent, false);
   });
 
-  test('will add eventlisteners to listen for scrolling events on mount', () => {
-    global.addEventListener = jest.fn();
-    const mockedAddEventListener = jest.mocked(global.addEventListener);
-    shallow(<PinZoom {...props} />);
-    const events = mockedAddEventListener.mock.calls.map((c) => c[0]);
-    expect(global.addEventListener).toHaveBeenCalledTimes(1);
-    expect(events).toEqual(['scroll']);
-  });
-
-  test('will remove eventlisteners and reinstate scroll when modal unloads', () => {
-    global.removeEventListener = jest.fn();
-    const mockedRemoveEventListener = jest.mocked(global.removeEventListener);
-    const wrapper = shallow(<PinZoom {...props} />);
-    const instance = wrapper.instance() as PinZoom;
-    instance.componentWillUnmount();
-    const events = mockedRemoveEventListener.mock.calls.map((c) => c[0]);
-    expect(global.removeEventListener).toHaveBeenCalledTimes(1);
-    expect(events).toEqual(['scroll']);
-  });
-
   test('will set the image metadata in state', () => {
     const wrapper = shallow<PinZoom>(<PinZoom {...props} />);
     expect(wrapper.state().imgMetaData).toBe(null);