From 2c398d06d53dff4ff9b4552ecc662b6f66963b1c Mon Sep 17 00:00:00 2001
From: Piotr Rogowski <piotr.rogowski0@gmail.com>
Date: Mon, 22 Mar 2021 23:36:33 +0100
Subject: [PATCH] Add device landscape notice

---
 src/components/Dialog/Curve.tsx           | 13 ++++++++++++-
 src/components/Dialog/LandscapeNotice.tsx |  5 +++++
 src/components/Dialog/Map.tsx             |  9 +++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Dialog/LandscapeNotice.tsx

diff --git a/src/components/Dialog/Curve.tsx b/src/components/Dialog/Curve.tsx
index 03310da..687d68e 100644
--- a/src/components/Dialog/Curve.tsx
+++ b/src/components/Dialog/Curve.tsx
@@ -1,4 +1,7 @@
-import { Typography } from 'antd';
+import {
+  Typography,
+  Grid,
+} from 'antd';
 import { useState } from 'react';
 import {
   CartesianGrid,
@@ -10,8 +13,11 @@ import {
   ResponsiveContainer,
   Label,
 } from 'recharts';
+import LandscapeNotice from './LandscapeNotice';
 import Table from './Table';
 
+const { useBreakpoint } = Grid;
+
 const Curve = ({
   name,
   xLabel,
@@ -46,11 +52,16 @@ const Curve = ({
     y: rawData[0][i],
   }));
   const [data, setData] = useState(mapData([yData, xData]));
+  const { sm } = useBreakpoint();
   const margin = 15;
   const mainColor = '#ccc';
   const tooltipBg = '#2E3338';
   const animationDuration = 500;
 
+  if (!sm) {
+    return <LandscapeNotice />;
+  }
+
   return (
     <>
       <Typography.Paragraph>
diff --git a/src/components/Dialog/LandscapeNotice.tsx b/src/components/Dialog/LandscapeNotice.tsx
new file mode 100644
index 0000000..3cad72c
--- /dev/null
+++ b/src/components/Dialog/LandscapeNotice.tsx
@@ -0,0 +1,5 @@
+import { Result } from 'antd';
+
+const LandscapeNotice = () => <Result title="Turn your device to landscape mode" />;
+
+export default LandscapeNotice;
diff --git a/src/components/Dialog/Map.tsx b/src/components/Dialog/Map.tsx
index 9579dd3..7a0bb81 100644
--- a/src/components/Dialog/Map.tsx
+++ b/src/components/Dialog/Map.tsx
@@ -11,6 +11,7 @@ import {
   Modal,
   Popover,
   Space,
+  Grid,
 } from 'antd';
 import {
   PlusCircleOutlined,
@@ -24,6 +25,7 @@ import {
   isIncrement,
   isReplace,
 } from '../../utils/keyboard/shortcuts';
+import LandscapeNotice from './LandscapeNotice';
 
 type CellsType = boolean[][];
 type DataType = number[][];
@@ -35,6 +37,8 @@ enum Operations {
 }
 type HslType = [number, number, number];
 
+const { useBreakpoint } = Grid;
+
 const Map = ({
   name,
   xData,
@@ -60,6 +64,7 @@ const Map = ({
   xUnits: string,
   yUnits: string,
 }) => {
+  const { sm } = useBreakpoint();
   const titleProps = { disabled: true };
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalValue, setModalValue] = useState<number | undefined>();
@@ -217,6 +222,10 @@ const Map = ({
       return result;
     });
 
+  if (!sm) {
+    return <LandscapeNotice />;
+  }
+
   return (
     <>
       <div className="table">