From 93fd554ed001ac36b7a1ec83536f07fc5832b0c5 Mon Sep 17 00:00:00 2001
From: Keshav <keshav2021csds116@abesit.edu.in>
Date: Wed, 21 Feb 2024 08:38:02 +0530
Subject: [PATCH] Centralised Breakpoints

---
 client/components/Dropdown/TableDropdown.jsx  |   6 +-
 client/modules/IDE/components/Header/Nav.jsx  |  28 ++-
 .../modules/IDE/components/Header/index.jsx   |  20 +-
 client/modules/IDE/hooks/useIsMobile.js       |   9 +
 client/modules/IDE/pages/IDEView.jsx          | 197 +++++++++---------
 .../User/components/DashboardTabSwitcher.jsx  |  94 ++++-----
 client/modules/User/pages/DashboardView.jsx   |   7 +-
 7 files changed, 174 insertions(+), 187 deletions(-)
 create mode 100644 client/modules/IDE/hooks/useIsMobile.js

diff --git a/client/components/Dropdown/TableDropdown.jsx b/client/components/Dropdown/TableDropdown.jsx
index d4db78f963..44f4f27fd6 100644
--- a/client/components/Dropdown/TableDropdown.jsx
+++ b/client/components/Dropdown/TableDropdown.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 import DropdownMenu from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
+import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
 
 const DotsHorizontal = styled(MoreIconSvg)`
   transform: rotate(90deg);
 `;
 
 const TableDropdownIcon = () => {
-  // TODO: centralize breakpoints
-  const isMobile = useMediaQuery({ maxWidth: 770 });
-
+  const isMobile = useIsMobile();
   return isMobile ? (
     <DotsHorizontal focusable="false" aria-hidden="true" />
   ) : (
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index b4f7cb151f..40381b8f4c 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -4,7 +4,6 @@ import { sortBy } from 'lodash';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import MediaQuery from 'react-responsive';
 import NavDropdownMenu from '../../../../components/Nav/NavDropdownMenu';
 import NavMenuItem from '../../../../components/Nav/NavMenuItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
@@ -30,21 +29,20 @@ import {
 import { logoutUser } from '../../../User/actions';
 import { CmControllerContext } from '../../pages/IDEView';
 import MobileNav from './MobileNav';
+import useIsMobile from '../../hooks/useIsMobile';
 
-const Nav = ({ layout }) => (
-  <MediaQuery minWidth={770}>
-    {(matches) =>
-      matches ? (
-        <NavBar>
-          <LeftLayout layout={layout} />
-          <UserMenu />
-        </NavBar>
-      ) : (
-        <MobileNav />
-      )
-    }
-  </MediaQuery>
-);
+const Nav = ({ layout }) => {
+  const isMobile = useIsMobile();
+
+  return isMobile ? (
+    <MobileNav />
+  ) : (
+    <NavBar>
+      <LeftLayout layout={layout} />
+      <UserMenu />
+    </NavBar>
+  );
+};
 
 Nav.propTypes = {
   layout: PropTypes.oneOf(['dashboard', 'project'])
diff --git a/client/modules/IDE/components/Header/index.jsx b/client/modules/IDE/components/Header/index.jsx
index 564509931b..dd02700e83 100644
--- a/client/modules/IDE/components/Header/index.jsx
+++ b/client/modules/IDE/components/Header/index.jsx
@@ -1,28 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import MediaQuery from 'react-responsive';
+import useIsMobile from '../../hooks/useIsMobile';
+
 import Nav from './Nav';
 import Toolbar from './Toolbar';
 
 const Header = (props) => {
   const project = useSelector((state) => state.project);
 
+  const isMobile = useIsMobile();
+
   return (
     <header>
       <Nav />
-      <MediaQuery minWidth={770}>
-        {(matches) => {
-          if (matches)
-            return (
-              <Toolbar
-                syncFileContent={props.syncFileContent}
-                key={project.id}
-              />
-            );
-          return null;
-        }}
-      </MediaQuery>
+      {!isMobile && (
+        <Toolbar syncFileContent={props.syncFileContent} key={project.id} />
+      )}
     </header>
   );
 };
diff --git a/client/modules/IDE/hooks/useIsMobile.js b/client/modules/IDE/hooks/useIsMobile.js
new file mode 100644
index 0000000000..c278dcbd8a
--- /dev/null
+++ b/client/modules/IDE/hooks/useIsMobile.js
@@ -0,0 +1,9 @@
+import { useMediaQuery } from 'react-responsive';
+
+const useIsMobile = (customBreakpoint) => {
+  const breakPoint = customBreakpoint || 770;
+  const isMobile = useMediaQuery({ maxWidth: breakPoint });
+  return isMobile;
+};
+
+export default useIsMobile;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index f4bab9db05..2bd2649770 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
-import MediaQuery from 'react-responsive';
 import IDEKeyHandlers from '../components/IDEKeyHandlers';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
@@ -27,6 +26,7 @@ import {
   PreviewWrapper
 } from '../components/Editor/MobileEditor';
 import IDEOverlays from '../components/IDEOverlays';
+import useIsMobile from '../hooks/useIsMobile';
 
 function getTitle(project) {
   const { id } = project;
@@ -90,6 +90,7 @@ function WarnIfUnsavedChanges() {
 export const CmControllerContext = React.createContext({});
 
 const IDEView = () => {
+  const isMobile = useIsMobile();
   const ide = useSelector((state) => state.ide);
   const preferences = useSelector((state) => state.preferences);
   const project = useSelector((state) => state.project);
@@ -175,115 +176,111 @@ const IDEView = () => {
       <CmControllerContext.Provider value={cmRef}>
         <Header syncFileContent={syncFileContent} />
       </CmControllerContext.Provider>
-      <MediaQuery minWidth={770}>
-        {(matches) =>
-          matches ? (
-            <main className="editor-preview-container">
+      {isMobile ? (
+        <>
+          <FloatingActionButton
+            syncFileContent={syncFileContent}
+            offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
+          />
+          <PreviewWrapper show={ide.isPlaying}>
+            <SplitPane
+              style={{ position: 'static' }}
+              split="horizontal"
+              primary="second"
+              size={currentConsoleSize}
+              minSize={consoleCollapsedSize}
+              onChange={(size) => {
+                setConsoleSize(size);
+                setIsOverlayVisible(true);
+              }}
+              onDragFinished={() => {
+                setIsOverlayVisible(false);
+              }}
+              allowResize={ide.consoleIsExpanded}
+              className="editor-preview-subpanel"
+            >
+              <PreviewFrame
+                fullView
+                hide={!ide.isPlaying}
+                cmController={cmRef.current}
+                isOverlayVisible={isOverlayVisible}
+              />
+              <Console />
+            </SplitPane>
+          </PreviewWrapper>
+          <EditorSidebarWrapper show={!ide.isPlaying}>
+            <Sidebar />
+            <Editor
+              provideController={(ctl) => {
+                cmRef.current = ctl;
+              }}
+            />
+          </EditorSidebarWrapper>
+        </>
+      ) : (
+        <main className="editor-preview-container">
+          <SplitPane
+            split="vertical"
+            size={ide.sidebarIsExpanded ? sidebarSize : 20}
+            onChange={(size) => {
+              setSidebarSize(size);
+            }}
+            allowResize={ide.sidebarIsExpanded}
+            minSize={150}
+          >
+            <Sidebar />
+            <SplitPane
+              split="vertical"
+              maxSize={MaxSize * 0.965}
+              defaultSize="50%"
+              onChange={() => {
+                setIsOverlayVisible(true);
+              }}
+              onDragFinished={() => {
+                setIsOverlayVisible(false);
+              }}
+              resizerStyle={{
+                borderLeftWidth: '2px',
+                borderRightWidth: '2px',
+                width: '2px',
+                margin: '0px 0px'
+              }}
+            >
               <SplitPane
-                split="vertical"
-                size={ide.sidebarIsExpanded ? sidebarSize : 20}
+                split="horizontal"
+                primary="second"
+                size={currentConsoleSize}
+                minSize={consoleCollapsedSize}
                 onChange={(size) => {
-                  setSidebarSize(size);
+                  setConsoleSize(size);
                 }}
-                allowResize={ide.sidebarIsExpanded}
-                minSize={150}
+                allowResize={ide.consoleIsExpanded}
+                className="editor-preview-subpanel"
               >
-                <Sidebar />
-                <SplitPane
-                  split="vertical"
-                  maxSize={MaxSize * 0.965}
-                  defaultSize="50%"
-                  onChange={() => {
-                    setIsOverlayVisible(true);
-                  }}
-                  onDragFinished={() => {
-                    setIsOverlayVisible(false);
-                  }}
-                  resizerStyle={{
-                    borderLeftWidth: '2px',
-                    borderRightWidth: '2px',
-                    width: '2px',
-                    margin: '0px 0px'
+                <Editor
+                  provideController={(ctl) => {
+                    cmRef.current = ctl;
                   }}
-                >
-                  <SplitPane
-                    split="horizontal"
-                    primary="second"
-                    size={currentConsoleSize}
-                    minSize={consoleCollapsedSize}
-                    onChange={(size) => {
-                      setConsoleSize(size);
-                    }}
-                    allowResize={ide.consoleIsExpanded}
-                    className="editor-preview-subpanel"
-                  >
-                    <Editor
-                      provideController={(ctl) => {
-                        cmRef.current = ctl;
-                      }}
-                    />
-                    <Console />
-                  </SplitPane>
-                  <section className="preview-frame-holder">
-                    <header className="preview-frame__header">
-                      <h2 className="preview-frame__title">
-                        {t('Toolbar.Preview')}
-                      </h2>
-                    </header>
-                    <div className="preview-frame__content">
-                      <PreviewFrame
-                        cmController={cmRef.current}
-                        isOverlayVisible={isOverlayVisible}
-                      />
-                    </div>
-                  </section>
-                </SplitPane>
+                />
+                <Console />
               </SplitPane>
-            </main>
-          ) : (
-            <>
-              <FloatingActionButton
-                syncFileContent={syncFileContent}
-                offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
-              />
-              <PreviewWrapper show={ide.isPlaying}>
-                <SplitPane
-                  style={{ position: 'static' }}
-                  split="horizontal"
-                  primary="second"
-                  size={currentConsoleSize}
-                  minSize={consoleCollapsedSize}
-                  onChange={(size) => {
-                    setConsoleSize(size);
-                    setIsOverlayVisible(true);
-                  }}
-                  onDragFinished={() => {
-                    setIsOverlayVisible(false);
-                  }}
-                  allowResize={ide.consoleIsExpanded}
-                  className="editor-preview-subpanel"
-                >
+              <section className="preview-frame-holder">
+                <header className="preview-frame__header">
+                  <h2 className="preview-frame__title">
+                    {t('Toolbar.Preview')}
+                  </h2>
+                </header>
+                <div className="preview-frame__content">
                   <PreviewFrame
-                    fullView
-                    hide={!ide.isPlaying}
                     cmController={cmRef.current}
                     isOverlayVisible={isOverlayVisible}
                   />
-                  <Console />
-                </SplitPane>
-              </PreviewWrapper>
-              <EditorSidebarWrapper show={!ide.isPlaying}>
-                <Sidebar />
-                <Editor
-                  provideController={(ctl) => {
-                    cmRef.current = ctl;
-                  }}
-                />
-              </EditorSidebarWrapper>
-            </>
-          )
-        }
-      </MediaQuery>
+                </div>
+              </section>
+            </SplitPane>
+          </SplitPane>
+        </main>
+      )}
       <IDEOverlays />
     </RootPage>
   );
diff --git a/client/modules/User/components/DashboardTabSwitcher.jsx b/client/modules/User/components/DashboardTabSwitcher.jsx
index c3c288d3c8..6bfdb9bb22 100644
--- a/client/modules/User/components/DashboardTabSwitcher.jsx
+++ b/client/modules/User/components/DashboardTabSwitcher.jsx
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import MediaQuery from 'react-responsive';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { FilterIcon } from '../../../common/icons';
@@ -9,6 +8,7 @@ import IconButton from '../../../common/IconButton';
 import RouterTab from '../../../common/RouterTab';
 import { Options } from '../../IDE/components/Header/MobileNav';
 import { toggleDirectionForField } from '../../IDE/actions/sorting';
+import useIsMobile from '../../IDE/hooks/useIsMobile';
 
 export const TabKey = {
   assets: 'assets',
@@ -26,6 +26,7 @@ const FilterOptions = styled(Options)`
 `;
 
 const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
+  const isMobile = useIsMobile();
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -44,56 +45,47 @@ const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
           </RouterTab>
         )}
       </ul>
-      <MediaQuery maxWidth={770}>
-        {(mobile) =>
-          mobile &&
-          currentTab !== TabKey.assets && (
-            <FilterOptions>
-              <div>
-                <IconButton icon={FilterIcon} />
-                <ul>
-                  <li>
-                    <button
-                      onClick={() => dispatch(toggleDirectionForField('name'))}
-                    >
-                      {t('CollectionList.HeaderName')}
-                    </button>
-                  </li>
-                  <li>
-                    <button
-                      onClick={() =>
-                        dispatch(toggleDirectionForField('createdAt'))
-                      }
-                    >
-                      {t('CollectionList.HeaderCreatedAt')}
-                    </button>
-                  </li>
-                  <li>
-                    <button
-                      onClick={() =>
-                        dispatch(toggleDirectionForField('updatedAt'))
-                      }
-                    >
-                      {t('CollectionList.HeaderUpdatedAt')}
-                    </button>
-                  </li>
-                  {currentTab === TabKey.collections && (
-                    <li>
-                      <button
-                        onClick={() =>
-                          dispatch(toggleDirectionForField('numItems'))
-                        }
-                      >
-                        {t('CollectionList.HeaderNumItems')}
-                      </button>
-                    </li>
-                  )}
-                </ul>
-              </div>
-            </FilterOptions>
-          )
-        }
-      </MediaQuery>
+      {isMobile && currentTab !== TabKey.assets && (
+        <FilterOptions>
+          <div>
+            <IconButton icon={FilterIcon} />
+            <ul>
+              <li>
+                <button
+                  onClick={() => dispatch(toggleDirectionForField('name'))}
+                >
+                  {t('CollectionList.HeaderName')}
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => dispatch(toggleDirectionForField('createdAt'))}
+                >
+                  {t('CollectionList.HeaderCreatedAt')}
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => dispatch(toggleDirectionForField('updatedAt'))}
+                >
+                  {t('CollectionList.HeaderUpdatedAt')}
+                </button>
+              </li>
+              {currentTab === TabKey.collections && (
+                <li>
+                  <button
+                    onClick={() =>
+                      dispatch(toggleDirectionForField('numItems'))
+                    }
+                  >
+                    {t('CollectionList.HeaderNumItems')}
+                  </button>
+                </li>
+              )}
+            </ul>
+          </div>
+        </FilterOptions>
+      )}
     </div>
   );
 };
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index f0b6d249b0..fcde949cd7 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import MediaQuery from 'react-responsive';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -22,8 +21,10 @@ import CollectionCreate from '../components/CollectionCreate';
 import DashboardTabSwitcherPublic, {
   TabKey
 } from '../components/DashboardTabSwitcher';
+import useIsMobile from '../../IDE/hooks/useIsMobile';
 
 const DashboardView = () => {
+  const isMobile = useIsMobile();
   const { t } = useTranslation();
 
   const params = useParams();
@@ -134,9 +135,7 @@ const DashboardView = () => {
         </div>
 
         <div className="dashboard-content">
-          <MediaQuery maxWidth={770}>
-            {(mobile) => renderContent(currentTab, params.username, mobile)}
-          </MediaQuery>
+          {renderContent(currentTab, params.username, isMobile)}
         </div>
       </main>
       {collectionCreateVisible && (