app: Swap in react-use

package.json

@@ -142,6 +142,7 @@
  "react-select": "^3.1.0",
  "react-test-renderer": "^16.8.6",
  "react-textarea-autosize": "^8.2.0",
+ "react-use": "^15.3.4",
  "regenerator-runtime": "^0.13.5",
  "semver": "^7.3.2",
  "serializr": "^2.0.3",
@@ -152,7 +153,6 @@
  "terser-webpack-plugin": "^4.1.0",
  "ts-node": "^9.0.0",
  "typescript": "^4.0.2",
- "use-onclickoutside": "^0.3.1",
  "webpack": "^4.44.1",
  "webpack-merge": "^4.2.2"
  },

src/overlay/overlays/nowPlaying/ColorConfig.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import {ChromePicker, ColorResult} from 'react-color';
 import {X} from 'react-feather';
 import {usePopper} from 'react-popper';
+import {useClickAway} from 'react-use';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 import {set} from 'mobx';
 import {observer} from 'mobx-react';
-import useOnClickOutside from 'use-onclickoutside';
 
 import {NowPlayingConfig} from '.';
 
@@ -57,7 +57,7 @@ const Color = ({color, defaultColor, name, trimPrefix, onChange}: ColorProps) =>
  modifiers: [{name: 'arrow'}, {name: 'offset', options: {offset: [0, 15]}}],
  });
 
- useOnClickOutside(containerRef, () => openPicker(false));
+ useClickAway(containerRef, () => openPicker(false));
 
  return (
  <div ref={containerRef}>

src/renderer/components/ConnectingSplash.tsx

@@ -1,27 +1,19 @@
 import * as React from 'react';
+import {useTimeout} from 'react-use';
 import {keyframes} from '@emotion/core';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
 
-const useTimeout = (timeout: number) => {
- const [isExpired, setExpired] = React.useState(false);
- React.useEffect(() => {
- window.setTimeout(() => setExpired(true), timeout);
- }, []);
-
- return isExpired;
-};
-
 const ConnectingSplash = () => {
- const showHelp = useTimeout(10000);
+ const [showHelp] = useTimeout(10000);
 
  return (
  <Container>
  <Text layout transition={{duration: 0.2}}>
  <Indicator />
  Waiting for PROLINK devices
  </Text>
- {showHelp && (
+ {showHelp() && (
  <Help initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}}>
  Not seeing your CDJs? Ensure they are <strong>ON</strong> and connected to the{' '}
  <strong>same network</strong> as this computer. If they are simply linked to one

src/renderer/components/HelpButton.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {HelpCircle} from 'react-feather';
+import {useClickAway} from 'react-use';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion} from 'framer-motion';
 
@@ -9,6 +10,9 @@ import ActionButton from './ActionButton';
 
 const HelpButton = () => {
  const [show, toggle] = React.useState(false);
+ const containerRef = React.useRef<HTMLDivElement>(null);
+
+ useClickAway(containerRef, () => toggle(false));
 
  return (
  <React.Fragment>
@@ -17,8 +21,8 @@ const HelpButton = () => {
  </Button>
  <AnimatePresence>
  {show && (
- <Modal onClick={e => e.currentTarget === e.target && toggle(false)}>
- <Info>
+ <Modal>
+ <Info ref={containerRef}>
  <LogoBig />
  <p>
  Built by a DJ, for DJs. prolink tools is a hand-built collection of tools

src/renderer/views/overlayConfig/index.tsx

@@ -21,7 +21,7 @@ const OverlayConfig = observer(() => {
  <a href="https://obsproject.com/wiki/Sources-Guide#browsersource">
  OBS Browser Source
  </a>{' '}
- (or similar). Each instance of an overlay has it&aps;s own configuration.
+ (or similar). Each instance of an overlay has it&apos;s own configuration.
  </HeaderInfo>
  {addNewOpen ? (
  <ActionButton muted onClick={() => setOpen(!addNewOpen)}>