♻️ Refactor

rayriffy · Nov 8, 2019 · 1b3b397 · 1b3b397
1 parent 53bc5c3
commit 1b3b397
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
     "gatsby-plugin-typescript": "^2.1.15",
     "gatsby-plugin-typography": "^2.3.14",
     "gatsby-source-filesystem": "^2.1.33",
-    "local-storage": "^2.0.0",
     "lodash": "^4.17.15",
     "react": "^16.11.0",
     "react-collapse": "^5.0.0",
@@ -36,7 +35,8 @@
     "rebass": "^4.0.6",
     "styled-components": "^4.4.1",
     "typescript": "^3.7.2",
-    "typography": "^0.16.19"
+    "typography": "^0.16.19",
+    "web-api-hooks": "^2.2.2"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",

diff --git a/src/app/components/drawer.tsx b/src/app/components/drawer.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react'
 
-import { set as lsSet } from 'local-storage'
 import Mortal from 'react-mortal'
 import Switch from 'react-switch'
 
@@ -67,13 +66,7 @@ const DrawerComponent: React.FC = () => {
   const [safeMode, setSafeMode] = useContext(SafeMode)
 
   const toggleSafeMode = () => {
-    const newState = !safeMode
-
-    if (setSafeMode) {
-      setSafeMode(newState)
-    }
-
-    lsSet<boolean>('blur', newState)
+    setSafeMode(prev => !prev)
   }
 
   const menuStacks = [

diff --git a/src/app/context/index.tsx b/src/app/context/index.tsx
@@ -1,28 +1,22 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 
-import { get as lsGet, set as lsSet } from 'local-storage'
+import { useLocalStorage } from 'web-api-hooks'
 
-type ISafeMode = [boolean, Dispatch<SetStateAction<boolean>>] | []
-type ISubtitle = [string, Dispatch<SetStateAction<string>>] | []
+type ISafeMode = [boolean, Dispatch<SetStateAction<boolean>>]
+type ISubtitle = [string, Dispatch<SetStateAction<string>>]
 
-export const SafeMode = React.createContext<ISafeMode>([])
-export const Subtitle = React.createContext<ISubtitle>([])
+export const SafeMode = React.createContext<ISafeMode>([true, () => {}])
+export const Subtitle = React.createContext<ISubtitle>(['init', () => {}])
 
 const Context: React.FC = props => {
   const {children} = props
 
   // Safe mode
-  const [safeMode, setSafeMode] = useState<boolean>(lsGet('blur') === null ? true : lsGet<boolean>('blur'))
+  const [safeMode, setSafeMode] = useLocalStorage<boolean>('blur', true)
 
   // Subtitle
   const [subtitle, setSubtitle] = useState<string>('init')
 
-  useEffect(() => {
-    if (lsGet('blur') === null) {
-      lsSet('blur', true)
-    }
-  }, [])
-
   return (
     <SafeMode.Provider value={[safeMode, setSafeMode]}>
       <Subtitle.Provider value={[subtitle, setSubtitle]}>

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -21,9 +21,7 @@ const NotFoundComponent: React.FC = () => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle('404')
-    }
+    setSubtitle('404')
   }, [])
 
   return (

diff --git a/src/pages/custom.tsx b/src/pages/custom.tsx
@@ -32,9 +32,7 @@ const CustomComponent: React.FC = () => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle('custom')
-    }
+    setSubtitle('custom')
   }, [])
 
   return (

diff --git a/src/templates/about/components/index.tsx b/src/templates/about/components/index.tsx
@@ -8,9 +8,7 @@ const AboutComponent: React.FC = () => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`about`)
-    }
+    setSubtitle(`about`)
   }, [])
 
   return (

diff --git a/src/templates/collection/components/index.tsx b/src/templates/collection/components/index.tsx
@@ -10,9 +10,7 @@ const CollectionComponent: React.FC = () => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`collection`)
-    }
+    setSubtitle(`collection`)
   }, [])
 
   return (

diff --git a/src/templates/dynamic/viewing/components/index.tsx b/src/templates/dynamic/viewing/components/index.tsx
@@ -25,26 +25,17 @@ const DynamicViewingComponent: React.FC<IProps> = props => {
 
   const fetchHentai = async(requestedId: number | string) => {
     setState(1)
-
-    if (setSubtitle) {
-      setSubtitle('finding')
-    }
+    setSubtitle('finding')
 
     try {
       const data = await getHentai(requestedId)
 
       setRaw(data)
       setState(0)
-
-      if (setSubtitle) {
-        setSubtitle('viewing')
-      }
+      setSubtitle('viewing')
     } catch (e) {
       setState(2)
-
-      if (setSubtitle) {
-        setSubtitle('failed')
-      }
+      setSubtitle('failed')
 
       throw e
     }

diff --git a/src/templates/hentai/listing/components/index.tsx b/src/templates/hentai/listing/components/index.tsx
@@ -15,9 +15,7 @@ const HentaiListingComponent: React.FC<IProps> = props => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`listing`)
-    }
+    setSubtitle(`listing`)
   }, [])
 
   return (

diff --git a/src/templates/hentai/viewing/components/index.tsx b/src/templates/hentai/viewing/components/index.tsx
@@ -14,9 +14,7 @@ const HentaiViewingComponent: React.FC<IProps> = props => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`viewing`)
-    }
+    setSubtitle(`viewing`)
   }, [])
 
   return (

diff --git a/src/templates/search/components/index.tsx b/src/templates/search/components/index.tsx
@@ -67,9 +67,7 @@ const SearchComponent: React.FC<IProps> = props => {
   }, [res])
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`search`)
-    }
+    setSubtitle(`search`)
   }, [])
 
   return (

diff --git a/src/templates/tag/listing/components/index.tsx b/src/templates/tag/listing/components/index.tsx
@@ -27,9 +27,7 @@ const TagListingComponent: React.FC<IProps> = props => {
   const processedTags = _.sortBy(raw.map(o => ({id: o.id, name: o.name})), o => o.name)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`${subtitle}`)
-    }
+    setSubtitle(`${subtitle}`)
   }, [])
 
   return (

diff --git a/src/templates/tag/viewing/components/index.tsx b/src/templates/tag/viewing/components/index.tsx
@@ -15,9 +15,7 @@ const TagViewingComponent: React.FC<IProps> = props => {
   const [, setSubtitle] = useContext(Subtitle)
 
   useEffect(() => {
-    if (setSubtitle) {
-      setSubtitle(`${subtitle}`)
-    }
+    setSubtitle(`${subtitle}`)
   }, [])
 
   return (

diff --git a/tslint.json b/tslint.json
@@ -25,7 +25,8 @@
     "no-console": false,
     "no-shadowed-variable": false,
     "whitespace": [true, "check-module"],
-    "member-ordering": false
+    "member-ordering": false,
+    "no-empty": false
   },
   "rulesDirectory": [
     "node_modules/tslint-eslint-rules/dist/rules"

diff --git a/yarn.lock b/yarn.lock
@@ -1270,6 +1270,11 @@
     "@types/styled-system" "*"
     "@types/styled-system__css" "*"
 
+"@types/resize-observer-browser@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.2.tgz#615d567c094c6500d760289be0ce48c9798672c9"
+  integrity sha512-4mrAenvAObVQthn05TldKpZ/xW236GyCrpyQvH4hmKVWdobpqM8Fub5Kn4lTNZRKANZ3+P1bq8Zp53asvklKTQ==
+
 "@types/styled-components@*", "@types/styled-components@^4.1.21":
   version "4.1.21"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.21.tgz#514157b1706c4cea63abeba03a43ac4d6618f7ad"
@@ -6681,11 +6686,6 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-local-storage@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/local-storage/-/local-storage-2.0.0.tgz#748b7d041b197f46f3ec7393640851c175b64db8"
-  integrity sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw==
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -7328,6 +7328,11 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+network-information-types@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/network-information-types/-/network-information-types-0.1.0.tgz#5c880bebc2a9e6b25eb00ed23854d13ff3a7fe3a"
+  integrity sha512-cRUCYZoRHTMjYcgk5MbwqM0h0Za34panRxAJKY8n+mQ+NLMuRIw7aKzmaZqkC/cte7bnRcdfTwFA27GgN62EtQ==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -10926,6 +10931,14 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-api-hooks@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/web-api-hooks/-/web-api-hooks-2.2.2.tgz#67fe40a912b7548ba4f98ec274db8a71fcd97db6"
+  integrity sha512-WWIlXnHmydd/sDsdGqI0yzfyxKV7vj8/l4bP3aLDyVHOBeV5TAqO+4ob70F0yYirZtEnYqdOcjxL3BzUiv8++Q==
+  dependencies:
+    "@types/resize-observer-browser" "^0.1.2"
+    network-information-types "^0.1.0"
+
 webpack-assets-manifest@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-3.1.1.tgz#39bbc3bf2ee57fcd8ba07cda51c9ba4a3c6ae1de"