From 508d1630fe8a9a522180e129bd780c9abb85888b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Z=C3=ADpek?= <jan@zipek.cz>
Date: Wed, 24 Aug 2022 09:45:54 +0200
Subject: [PATCH] Added vertical mode for small devices

---
 .../dashboard/components/EditableBox.tsx      | 31 ++++++++++++-------
 .../dashboard/contexts/DashboardContext.tsx   | 11 ++++++-
 .../pages/dashboard/utils/normalizeBoxes.tsx  |  4 +++
 client/src/utils/hooks/useViewportSize.ts     | 15 +++++++++
 4 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 client/src/utils/hooks/useViewportSize.ts

diff --git a/client/src/pages/dashboard/components/EditableBox.tsx b/client/src/pages/dashboard/components/EditableBox.tsx
index db627fc..8e50109 100644
--- a/client/src/pages/dashboard/components/EditableBox.tsx
+++ b/client/src/pages/dashboard/components/EditableBox.tsx
@@ -1,6 +1,7 @@
 import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
 import { useRef, useState } from 'preact/hooks'
 import { GRID_WIDTH } from '../constants'
+import { useDashboardContext } from '../contexts/DashboardContext'
 import { useDragging } from '../hooks/useDragging'
 import { ResizingMode, useResize } from '../hooks/useResize'
 import { BoxDefinition } from '../types'
@@ -23,6 +24,7 @@ export const EditableBox = ({
 	onEdit,
 }: Props) => {
 	const boxRef = useRef<HTMLDivElement>(null)
+	const { verticalMode } = useDashboardContext()
 
 	const [editing, setEditing] = useState(false)
 
@@ -92,17 +94,24 @@ export const EditableBox = ({
 			<div
 				ref={boxRef}
 				className={`grid-box${dragging ? ' dragging' : ''}`}
-				style={{
-					left: (box.x / GRID_WIDTH) * 100 + '%',
-					top: box.y + 'px',
-					width: (box.w / GRID_WIDTH) * 100 + '%',
-					height: box.h + 'px',
-					...(dragging.active && {
-						left: dragging.x,
-						top: dragging.y,
-						zIndex: 2,
-					}),
-				}}
+				style={
+					verticalMode
+						? {
+								position: 'relative',
+								height: box.h + 'px',
+						  }
+						: {
+								left: (box.x / GRID_WIDTH) * 100 + '%',
+								top: box.y + 'px',
+								width: (box.w / GRID_WIDTH) * 100 + '%',
+								height: box.h + 'px',
+								...(dragging.active && {
+									left: dragging.x,
+									top: dragging.y,
+									zIndex: 2,
+								}),
+						  }
+				}
 			>
 				<div className="box" style={{ height: '100%' }}>
 					<div className="header">
diff --git a/client/src/pages/dashboard/contexts/DashboardContext.tsx b/client/src/pages/dashboard/contexts/DashboardContext.tsx
index 8ff7902..b785ba6 100644
--- a/client/src/pages/dashboard/contexts/DashboardContext.tsx
+++ b/client/src/pages/dashboard/contexts/DashboardContext.tsx
@@ -1,3 +1,4 @@
+import { useViewportSize } from '@/utils/hooks/useViewportSize'
 import { intervalToRange } from '@/utils/intervalToRange'
 import { ComponentChild, createContext } from 'preact'
 import { StateUpdater, useContext, useMemo, useState } from 'preact/hooks'
@@ -6,6 +7,7 @@ import { FilterValue } from '../components/Filters'
 type DashboardContextType = {
 	filter: FilterValue
 	setFilter: StateUpdater<FilterValue>
+	verticalMode: boolean
 }
 
 const DashboardContext = createContext<DashboardContextType | null>(null)
@@ -15,13 +17,20 @@ export const DashboardContextProvider = ({
 }: {
 	children: ComponentChild
 }) => {
+	const viewport = useViewportSize()
+
 	const [filter, setFilter] = useState<FilterValue>(() => {
 		const range = intervalToRange('week', new Date(), new Date())
 
 		return { interval: 'week', customFrom: range[0], customTo: range[1] }
 	})
 
-	const value = useMemo(() => ({ filter, setFilter }), [filter])
+	const verticalMode = viewport.width < 800
+
+	const value = useMemo(
+		() => ({ filter, setFilter, verticalMode }),
+		[filter, verticalMode]
+	)
 
 	return (
 		<DashboardContext.Provider value={value}>
diff --git a/client/src/pages/dashboard/utils/normalizeBoxes.tsx b/client/src/pages/dashboard/utils/normalizeBoxes.tsx
index 5a6d77d..334d41d 100644
--- a/client/src/pages/dashboard/utils/normalizeBoxes.tsx
+++ b/client/src/pages/dashboard/utils/normalizeBoxes.tsx
@@ -1,5 +1,9 @@
 import { BoxDefinition } from '../types'
 
+/**
+ * Makes sure the boxes stick to the top and also that the array
+ * is sorted by y coordinate
+ */
 export function normalizeBoxes(boxes: BoxDefinition[]) {
 	let sorted = false
 
diff --git a/client/src/utils/hooks/useViewportSize.ts b/client/src/utils/hooks/useViewportSize.ts
new file mode 100644
index 0000000..5194499
--- /dev/null
+++ b/client/src/utils/hooks/useViewportSize.ts
@@ -0,0 +1,15 @@
+import { useState } from 'preact/hooks'
+import { useWindowEvent } from './useWindowEvent'
+
+const getSize = () => ({
+	width: window.innerWidth,
+	height: window.innerHeight,
+})
+
+export const useViewportSize = () => {
+	const [size, setSize] = useState(getSize())
+
+	useWindowEvent('resize', () => setSize(getSize()))
+
+	return size
+}