app: useLocalStorage

This simplifies the code a bit by using the useLocalStorage hook.

src/app/App.tsx

@@ -5,6 +5,7 @@ import { Classes } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
+import { useLocalStorage } from 'usehooks-ts';
 import Editor, { EditorType } from '../editor/Editor';
 import Explorer from '../explorer/Explorer';
 import { useSelector } from '../reducers';
@@ -134,6 +135,9 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
     const [isDragging, setIsDragging] = useState(false);
     const dispatch = useDispatch();
 
+    const [docsSplit, setDocsSplit] = useLocalStorage('app-docs-split', 30);
+    const [terminalSplit, setTerminalSplit] = useLocalStorage('app-terminal-split', 30);
+
     // darkMode class has to be applied to body element, otherwise it won't
     // affect portals
     useEffect(() => {
@@ -161,25 +165,14 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
                         onDragStart={(): void => setIsDragging(true)}
                         onDragEnd={(): void => setIsDragging(false)}
                         percentage={true}
-                        secondaryInitialSize={Number(
-                            localStorage.getItem('app-docs-split') || 30,
-                        )}
-                        onSecondaryPaneSizeChange={(value): void =>
-                            localStorage.setItem('app-docs-split', String(value))
-                        }
+                        secondaryInitialSize={docsSplit}
+                        onSecondaryPaneSizeChange={setDocsSplit}
                     >
                         <SplitterLayout
                             vertical={true}
                             percentage={true}
-                            secondaryInitialSize={Number(
-                                localStorage.getItem('app-terminal-split') || 30,
-                            )}
-                            onSecondaryPaneSizeChange={(value): void =>
-                                localStorage.setItem(
-                                    'app-terminal-split',
-                                    String(value),
-                                )
-                            }
+                            secondaryInitialSize={terminalSplit}
+                            onSecondaryPaneSizeChange={setTerminalSplit}
                         >
                             <Editor
                                 onEditorChanged={(editor) => {