fix(client): add feature flag for camera preview

packages/client/.env.example

@@ -10,6 +10,7 @@
 
 # Client Config
 PORT=8080
+DISABLE_ESLINT_PLUGIN=true
 
 # API
 REACT_APP_API_URL=http://localhost:3030
@@ -28,3 +29,6 @@ REACT_APP_SENTRY_TRACES_SAMPLE=0
 # Push notifications
 # For more details check: https://github.com/web-push-libs/web-push#using-vapid-key-for-applicationserverkey
 REACT_APP_PUSH_NOTIFICATION_PUBLIC_VAPID_KEY=
+
+# Camera
+REACT_APP_CAMERA_PREVIEW_ENABLED=false

packages/client/src/pages/authorized/Dashboard/index.tsx

@@ -1,27 +1,47 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { ConnectionState } from '../../../enums/connectionState.enum';
+import { DeviceStatus } from '../../../enums/deviceStatus.enum';
 import { useAxios } from '../../../hooks';
+import { WebSocketContext } from '../../../providers/api/WebSocketProvider/WebSocketProvider.context';
 import { registerWebPush } from '../../../utils';
 import { Title } from '../AuthorizedPages.styled';
 import { RowSection } from './Dashboard.styled';
 import CameraPreviewSection from './sections/CameraPreviewSection';
 import TogglingSection from './sections/TogglingSection';
+import GateDisconnected from './sections/TogglingSection/components/GateDisconnected';
 
 const Dashboard = () => {
   const { t } = useTranslation();
   const axios = useAxios();
+  const { connectionState, deviceStatus } = useContext(WebSocketContext);
+
+  const isConnected = useMemo(
+    () => connectionState === ConnectionState.CONNECTED && deviceStatus === DeviceStatus.CONNECTED,
+    [connectionState, deviceStatus],
+  );
 
   useEffect(() => {
     void registerWebPush(axios);
   }, [axios]);
 
+  const DeviceSections = () => (
+    <>
+      <TogglingSection />
+      <CameraPreviewSection />
+    </>
+  );
+
   return (
     <>
       <Title data-testid="dashboard-title">{t('routes.dashboard.title')}</Title>
       <RowSection>
-        <TogglingSection />
-        <CameraPreviewSection />
+        {isConnected ? (
+          <DeviceSections />
+        ) : (
+          <GateDisconnected connectionState={connectionState} deviceStatus={deviceStatus} />
+        )}
       </RowSection>
     </>
   );

packages/client/src/pages/authorized/Dashboard/sections/CameraPreviewSection/index.tsx

@@ -24,6 +24,10 @@ const CameraPreviewSection = () => {
     };
   }, [cameraURL, reloadCameraPreview]);
 
+  if (process.env.REACT_APP_CAMERA_PREVIEW_ENABLED !== 'true') {
+    return null;
+  }
+
   return (
     <div>
       {!isPreviewLoaded && (

packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/TogglingSection.styled.ts

@@ -12,13 +12,20 @@ export const ToggleSliderWrapper = styled.div(
   `,
 );
 
-export const DisconnectedContainer = styled.div`
-  margin-top: 36px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
+export const DisconnectedContainer = styled.div(
+  ({ theme: { down, breakpoints } }) => css`
+    margin-top: 36px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    ${down(breakpoints.sm)} {
+      margin-left: 50%;
+      transform: translateX(-50%);
+    }
+  `,
+);
 
 const wiresAnimation = keyframes`
   0% {

packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/index.tsx

@@ -1,29 +1,17 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 
 import { ToggleSlider } from '../../../../../elements';
-import { ConnectionState } from '../../../../../enums/connectionState.enum';
-import { DeviceStatus } from '../../../../../enums/deviceStatus.enum';
 import { WebSocketContext } from '../../../../../providers/api/WebSocketProvider/WebSocketProvider.context';
-import GateDisconnected from './components/GateDisconnected';
 import { ToggleSliderWrapper } from './TogglingSection.styled';
 
 const TogglingSection = () => {
-  const { toggleGate, connectionState, deviceStatus } = useContext(WebSocketContext);
+  const { toggleGate } = useContext(WebSocketContext);
 
-  const isConnected = useMemo(
-    () => connectionState === ConnectionState.CONNECTED && deviceStatus === DeviceStatus.CONNECTED,
-    [connectionState, deviceStatus],
+  return (
+    <ToggleSliderWrapper>
+      <ToggleSlider onToggle={toggleGate} />
+    </ToggleSliderWrapper>
   );
-
-  if (isConnected) {
-    return (
-      <ToggleSliderWrapper>
-        <ToggleSlider onToggle={toggleGate} />
-      </ToggleSliderWrapper>
-    );
-  }
-
-  return <GateDisconnected connectionState={connectionState} deviceStatus={deviceStatus} />;
 };
 
 export default TogglingSection;