[playground] Remove mobile support
This is mostly unused and there's just not enough benefit for now. We can re-add this if folks start using this site on mobile. Removing now to simplify the codebase.
Sathya Gunasekaran committed
Dec 15, 2022 at 18:38 UTC
78d976302f60b5e57310f21dbf274af965afc0ae
3 files changed
+3
-61
compiler/forget/packages/playground/components/Editor/index.tsx
+3
-28
@@ -5,13 +5,12 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import { useDrag } from "@use-gesture/react";
8
import type { Diagnostic } from "babel-plugin-react-forget";
9
import clsx from "clsx";
10
import invariant from "invariant";
11
import { useSnackbar } from "notistack";
12
import { useCallback, useDeferredValue, useState } from "react";
14
-import { useMountEffect, useWindowSize } from "../../hooks";
13
+import { useMountEffect } from "../../hooks";
14
import { defaultStore } from "../../lib/defaultStore";
15
import {
16
createMessage,
@@ -30,9 +29,6 @@ export default function Editor() {
29
const deferredStore = useDeferredValue(store);
30
const dispatchStore = useStoreDispatch();
31
const { enqueueSnackbar } = useSnackbar();
33
- const [showOutputOnMobile, setShowOutputOnMobile] = useState(false);
34
- const { width: windowWidth } = useWindowSize();
35
- const isMobile = windowWidth < 640;
32
const [diagnostics, setDiagnostics] = useState<Diagnostic[]>([]);
33
const updateDiagnostics = useCallback(
34
(newDiags: Diagnostic[]) => setDiagnostics(newDiags),
@@ -40,9 +36,6 @@ export default function Editor() {
36
);
37
const [tabsOpen, setTabsOpen] = useState<Map<TabTypes, boolean>>(new Map());
38
43
- /**
44
- * Initialize store from encoded data or fallback to the default store.
45
- */
39
useMountEffect(() => {
40
let mountStore: Store;
41
try {
@@ -68,22 +61,10 @@ export default function Editor() {
61
return (
62
<>
63
<div className="flex grow">
71
- <div
72
- style={{
73
- width: isMobile ? "100%" : "50%",
74
- }}
75
- className={clsx("relative sm:min-w-[300px] sm:block", {
76
- hidden: showOutputOnMobile,
77
- })}
78
- >
64
+ <div className={clsx("relative sm:min-w-[300px] sm:block")}>
65
<Input diagnostics={diagnostics} />
66
</div>
81
- <div
82
- style={{ width: isMobile ? "100%" : `${50}%` }}
83
- className={clsx("flex sm:flex sm:min-w-[300px]", {
84
- hidden: !showOutputOnMobile,
85
- })}
86
- >
67
+ <div className={clsx("flex sm:flex sm:min-w-[300px]")}>
68
<Output
69
tabsOpen={tabsOpen}
70
setTabsOpen={setTabsOpen}
@@ -92,12 +73,6 @@ export default function Editor() {
73
/>
74
</div>
75
</div>
95
- <button
96
- className="w-full px-3 py-2 font-mono text-sm bg-highlight text-link sm:hidden"
97
- onClick={() => setShowOutputOnMobile(!showOutputOnMobile)}
98
- >
99
- {showOutputOnMobile ? "< Code" : "Output >"}
100
- </button>
76
</>
77
);
78
}
compiler/forget/packages/playground/hooks/index.ts
-1
@@ -3,4 +3,3 @@
3
*/
4
5
export { default as useMountEffect } from "./useMountEffect";
6
-export { default as useWindowSize } from "./useWindowSize";
compiler/forget/packages/playground/hooks/useWindowSize.ts
deleted
-32
@@ -1,32 +0,0 @@
1
-/*
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- */
4
-
5
-import { useState } from "react";
6
-import useMountEffect from "./useMountEffect";
7
-
8
-/**
9
- * @returns the latest window width and height before/after
10
- * resizing the window.
11
- */
12
-export default function useWindowSize() {
13
- const [windowSize, setWindowSize] = useState({
14
- width: 0,
15
- height: 0,
16
- });
17
-
18
- useMountEffect(() => {
19
- setWindowSize({ width: window.innerWidth, height: window.innerHeight });
20
- });
21
-
22
- useMountEffect(() => {
23
- function handleResize() {
24
- setWindowSize({ width: window.innerWidth, height: window.innerHeight });
25
- }
26
-
27
- window.addEventListener("resize", handleResize);
28
- return () => window.removeEventListener("resize", handleResize);
29
- });
30
-
31
- return windowSize;
32
-}