Added a React context for managing global state

vnsavitri · Apr 3, 2020 · 628ef1c · 628ef1c
1 parent f274d99
commit 628ef1c
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 80 deletions.
diff --git a/src/App/Context.js b/src/App/Context.js
@@ -0,0 +1,3 @@
+import React from "react"
+
+export default React.createContext()
diff --git a/src/App/SearchBar.js b/src/App/SearchBar.js
@@ -1,15 +1,16 @@
 import * as Hero from "react-heroicons"
+import Context from "./Context"
 import Icon from "./Icon"
 import originalIcons from "./helpers/icons"
 import React from "react"
-import useDarkMode from "./useDarkMode"
 
-const SearchBar = ({ query, setQuery, solid, setSolid, ...props }) => {
+const SearchBar = props => {
+ const state = React.useContext(Context)
+
  const ref = React.useRef() // Search bar
  const lhs = React.useRef() // Start of search bar
  const rhs = React.useRef() // End of search bar
 
- const [darkMode, setDarkMode] = useDarkMode()
  const [placeholder, setPlaceholder] = React.useState("")
 
  // Responsive placeholder:
@@ -60,7 +61,7 @@ const SearchBar = ({ query, setQuery, solid, setSolid, ...props }) => {
  // No-op
  return
  }
- setQuery("") // Reset
+ state.setQuery("") // Reset
  }
 
  return (
@@ -81,20 +82,20 @@ const SearchBar = ({ query, setQuery, solid, setSolid, ...props }) => {
  className="w-full h-full text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800 rounded-lg-xl outline-none shadow dark:shadow-md focus:shadow-outline transition duration-150"
  type="text"
  placeholder={placeholder}
- value={query}
+ value={state.query}
  onKeyDown={handleKeyDown}
- onChange={e => setQuery(e.target.value)}
+ onChange={e => state.setQuery(e.target.value)}
  />
  </div>
  </div>
 
  {/* End */}
  <div ref={rhs} className="-mx-2 px-6 flex flex-row items-center rounded-r-lg-xl focus:outline-none focus:shadow-outline z-10 transition duration-150">
- <button className="mx-2" onPointerDown={e => e.preventDefault()} onClick={e => setSolid(!solid)}>
- <Icon className="w-6 h-6 text-gray-800 dark:text-gray-200 transition duration-150" svg={!solid ? Hero.PlusCircleOutlineMd : Hero.PlusCircleSolidSm} />
+ <button className="mx-2" onPointerDown={e => e.preventDefault()} onClick={e => state.setSolid(!state.solid)}>
+ <Icon className="w-6 h-6 text-gray-800 dark:text-gray-200 transition duration-150" svg={!state.solid ? Hero.PlusCircleOutlineMd : Hero.PlusCircleSolidSm} />
  </button>
- <button className="mx-2" onPointerDown={e => e.preventDefault()} onClick={e => setDarkMode(!darkMode)}>
- <Icon className="w-6 h-6 text-gray-800 dark:text-gray-200 transition duration-150" svg={!darkMode ? Hero.SunOutlineMd : Hero.SunSolidSm} />
+ <button className="mx-2" onPointerDown={e => e.preventDefault()} onClick={e => state.setDarkMode(!state.darkMode)}>
+ <Icon className="w-6 h-6 text-gray-800 dark:text-gray-200 transition duration-150" svg={!state.darkMode ? Hero.SunOutlineMd : Hero.SunSolidSm} />
  </button>
  </div>
 

diff --git a/src/App/index.js b/src/App/index.js
@@ -1,6 +1,7 @@
 import * as constants from "__constants"
 import * as Hero from "react-heroicons"
 import * as Icons from "svgs"
+import Context from "./Context"
 import firebase from "__firebase"
 import Icon from "./Icon"
 import IconGrid from "./IconGrid"
@@ -44,84 +45,96 @@ const App = props => {
  }
  }, [query])
 
+ const { Provider } = Context
  return (
- <div className="py-24 flex flex-row justify-center min-h-full bg-gray-100 dark:bg-gray-900 transition duration-150">
- <div className="px-6 w-full max-w-screen-lg">
+ <Provider value={{
+ darkMode,
+ setDarkMode,
+ query,
+ setQuery,
+ solid,
+ setSolid,
+ icons,
+ setIcons,
+ }}>
+ <div className="py-24 flex flex-row justify-center min-h-full bg-gray-100 dark:bg-gray-900 transition duration-150">
+ <div className="px-6 w-full max-w-screen-lg">
 
- {/* H1 */}
- <div className="flex flex-row justify-center">
- <h1 className="relative font-dm-sans font-bold text-5xl tracking-tighter leading-none text-black dark:text-white transition duration-150">
- Heroicons
- <div className="-mb-8 absolute left-full bottom-full">
- <button
- onPointerDown={e => e.preventDefault()}
- onClick={e => {
- setDarkMode(!darkMode)
- // ga.logEvent(constants.GA_DARK_MODE)
- }}
- >
- <Icon className="p-px w-8 h-8" svg={!darkMode ? Hero.SunOutlineMd : Hero.SunSolidSm} />
- </button>
- </div>
- </h1>
- </div>
+  {/* H1 */}
+  <div className="flex flex-row justify-center">
+  <h1 className="relative font-dm-sans font-bold text-5xl tracking-tighter leading-none text-black dark:text-white transition duration-150">
+  Heroicons
+  <div className="-mb-8 absolute left-full bottom-full">
+  <button
+  onPointerDown={e => e.preventDefault()}
+  onClick={e => {
+  setDarkMode(!darkMode)
+  // ga.logEvent(constants.GA_DARK_MODE)
+  }}
+  >
+  <Icon className="p-px w-8 h-8" svg={!darkMode ? Hero.SunOutlineMd : Hero.SunSolidSm} />
+  </button>
+  </div>
+  </h1>
+  </div>
 
- {/* H2 */}
- <div className="h-3" />
- <h2 className="-mx-px text-center font-medium text-xl leading-relaxed text-gray-800 dark:text-gray-100 transition duration-150">
- <a className="mx-px text-indigo-500" href="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/refactoringui/heroicons" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS)}>
- Open source icons
- </a>{" "}
- by{" "}
- <a className="mx-px text-indigo-500" href="https://twitter.com/steveschoger" onClick={e => ga.logEvent(constants.GA_TWITTER_STEVE)}>
- Steve S<span className="hidden md:inline">choger</span><span className="inline md:hidden">.</span>
- </a>{" "}
- and{" "}
- <a className="mx-px text-indigo-500" href="https://twitter.com/adamwathan" onClick={e => ga.logEvent(constants.GA_TWITTER_ADAM)}>
- Adam W<span className="hidden md:inline">athan</span><span className="inline md:hidden">.</span>
- </a>
- <br />
- <a className="mx-px text-indigo-500" href="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/codex-src/heroicons-viewer" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS_VIEWER)}>
- Viewer
- </a>{" "}
- by{" "}
- <a className="mx-px text-indigo-500" href="https://twitter.com/username_ZAYDEK" onClick={e => ga.logEvent(constants.GA_TWITTER_ZAYDEK)}>
- Zaydek
- </a>{" "}
- and{" "}
- <a className="mx-px text-indigo-500" href="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/codex-src/heroicons-viewer" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS_VIEWER)}>
- contributors on GitHub
- </a>
- </h2>
+  {/* H2 */}
+  <div className="h-3" />
+  <h2 className="-mx-px text-center font-medium text-xl leading-relaxed text-gray-800 dark:text-gray-100 transition duration-150">
+  <a className="mx-px text-indigo-500" href="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/refactoringui/heroicons" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS)}>
+  Open source icons
+  </a>{" "}
+  by{" "}
+  <a className="mx-px text-indigo-500" href="https://twitter.com/steveschoger" onClick={e => ga.logEvent(constants.GA_TWITTER_STEVE)}>
+  Steve S<span className="hidden md:inline">choger</span><span className="inline md:hidden">.</span>
+  </a>{" "}
+  and{" "}
+  <a className="mx-px text-indigo-500" href="https://twitter.com/adamwathan" onClick={e => ga.logEvent(constants.GA_TWITTER_ADAM)}>
+  Adam W<span className="hidden md:inline">athan</span><span className="inline md:hidden">.</span>
+  </a>
+  <br />
+  <a className="mx-px text-indigo-500" href="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/codex-src/heroicons-viewer" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS_VIEWER)}>
+  Viewer
+  </a>{" "}
+  by{" "}
+  <a className="mx-px text-indigo-500" href="https://twitter.com/username_ZAYDEK" onClick={e => ga.logEvent(constants.GA_TWITTER_ZAYDEK)}>
+  Zaydek
+  </a>{" "}
+  and{" "}
+  <a className="mx-px text-indigo-500" href="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/codex-src/heroicons-viewer" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS_VIEWER)}>
+  contributors on GitHub
+  </a>
+  </h2>
 
- {/* Buttons */}
- <div className="h-12" />
- <div className="flex flex-col xs:flex-row justify-center">
- <a className="px-6 py-4 flex flex-row justify-center items-center text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-800 rounded-lg-xl focus:outline-none shadow focus:shadow-outline transition duration-150" href="https://figma.com/file/vfjBXrSSOCgmVEX5fdvV4L/Heroicons-v0.1-2abb814" onClick={e => ga.logEvent(constants.GA_FIGMA)}>
- <p className="font-medium text-lg">
- Open Figma
- </p>
- <Icons.Figma className="ml-3 -mt-1 w-6 h-6" />
- </a>
- <div className="w-3 h-3" />
- <a className="px-6 py-4 flex flex-row justify-center items-center text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-800 rounded-lg-xl focus:outline-none shadow focus:shadow-outline transition duration-150" href="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/refactoringui/heroicons" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS)}>
- <p className="font-medium text-lg">
- Open GitHub
- </p>
- <Icons.GitHub className="ml-3 -mt-1 w-6 h-6 text-black dark:text-white transition duration-150" />
- </a>
- </div>
+  {/* Buttons */}
+  <div className="h-12" />
+  <div className="flex flex-col xs:flex-row justify-center">
+  <a className="px-6 py-4 flex flex-row justify-center items-center text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-800 rounded-lg-xl focus:outline-none shadow focus:shadow-outline transition duration-150" href="https://figma.com/file/vfjBXrSSOCgmVEX5fdvV4L/Heroicons-v0.1-2abb814" onClick={e => ga.logEvent(constants.GA_FIGMA)}>
+  <p className="font-medium text-lg">
+  Open Figma
+  </p>
+  <Icons.Figma className="ml-3 -mt-1 w-6 h-6" />
+  </a>
+  <div className="w-3 h-3" />
+  <a className="px-6 py-4 flex flex-row justify-center items-center text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-800 rounded-lg-xl focus:outline-none shadow focus:shadow-outline transition duration-150" href="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/refactoringui/heroicons" onClick={e => ga.logEvent(constants.GA_GITHUB_HEROICONS)}>
+  <p className="font-medium text-lg">
+  Open GitHub
+  </p>
+  <Icons.GitHub className="ml-3 -mt-1 w-6 h-6 text-black dark:text-white transition duration-150" />
+  </a>
+  </div>
 
- {/* Search bar */}
- <div className="h-6" />
- <SearchBar query={query} setQuery={setQuery} solid={solid} setSolid={setSolid} />
+  {/* Search bar */}
+  <div className="h-6" />
+  <SearchBar />
 
- {/* Icons */}
- <div className="h-6" />
- <IconGrid solid={solid} icons={icons} />
+  {/* Icons */}
+  <div className="h-6" />
+  <IconGrid solid={solid} icons={icons} />
 
+ </div>
  </div>
- </div>
+ </Provider>
  )
 }