build changes

components/ui/ClickOutside/ClickOutside.tsx

@@ -1,46 +0,0 @@
-import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
-
-import { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export interface ClickOutsideProps {
-  onClickOutside: (e?: MouseEvent) => void
-  children: React.ReactNode | any
-  render: () => void
-}
-
-export default class ClickOutside extends Component<ClickOutsideProps> {
-  public domNode: Element | null = null
-
-  handleRef = (element) => {
-    this.domNode = element
-  }
-
-  public componentDidMount() {
-    document.addEventListener('click', this.handleClick, true)
-  }
-
-  public componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClick, true)
-    document.removeEventListener('touchstart', this.handleClick, true)
-  }
-
-  public handleClick = (event) => {
-    function hasParent(element, root) {
-      return root && root.contains(element)
-    }
-
-    if (!hasParent(event.target, this.domNode)) {
-      if (typeof this.props.onClickOutside === 'function') {
-        this.props.onClickOutside(event)
-      }
-    }
-  }
-
-  render() {
-    return null
-    // return this.props.render({
-    //   innerRef: this.handleRef,
-    // });
-  }
-}

components/ui/ClickOutside/index.ts

@@ -1 +0,0 @@
-export { default } from './ClickOutside'

components/ui/context.tsx

@@ -1,25 +1,29 @@
 import React, { FC } from 'react'
 
-export interface UIState {
+export interface State {
   displaySidebar: boolean
-  openSidebar: () => {}
-  closeSidebar: () => {}
 }
 
 const initialState = {
   displaySidebar: false,
-  openSidebar: null,
-  closeSidebar: null,
 }
 
-export const UIContext = React.createContext(initialState)
+type Action =
+  | {
+      type: 'OPEN_SIDEBAR'
+    }
+  | {
+      type: 'CLOSE_SIDEBAR'
+    }
+
+export const UIContext = React.createContext<State | any>(initialState)
 UIContext.displayName = 'UIContext'
 
 export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
-  const openSidebar = () => dispatch('OPEN_SIDEBAR')
-  const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
+  const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
+  const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
 
   const value = {
     ...state,
@@ -38,8 +42,8 @@ export const useUI = () => {
   return context
 }
 
-function uiReducer(state, action) {
-  switch (action) {
+function uiReducer(state: State, action: Action) {
+  switch (action.type) {
     case 'OPEN_SIDEBAR': {
       return {
         ...state,