docs(website): update docs to React hooks

Author: christianalfoni

packages/overmind-website/examples/api/connect.ts

@@ -12,15 +12,19 @@ export const toggleAwesomeApp = ({ state }) =>
       target: 'jsx',
       code: `
 import React from 'react'
-import { connect } from '../overmind'
+import { useOvermind } from '../overmind'
 
-const App = ({ overmind }) => (
-  <button onClick={overmind.actions.toggleAwesomeApp}>
-    Toggle awesome
-  </button>
-)
+const App = () => {
+  const { actions } = useOvermind()
+
+  return (
+    <button onClick={actions.toggleAwesomeApp}>
+      Toggle awesome
+    </button>
+  )
+}
 
-export default connect(App)
+export default App
     `,
     },
   ],
@@ -59,15 +63,19 @@ export const toggleAwesomeApp: Action = ({ state }) =>
       fileName: 'components/App.tsx',
       code: `
 import * as React from 'react'
-import { Connect, connect } from '../overmind'
+import { useOvermind } from '../overmind'
 
-const App: React.FunctionComponent<Connect> = ({ overmind }) => (
-  <button onClick={overmind.actions.toggleAwesomeApp}>
-    Toggle awesome
-  </button>
-)
+const App: React.FunctionComponent = () => {
+  const { actions } = useOvermind()
+
+  return (
+    <button onClick={actions.toggleAwesomeApp}>
+      Toggle awesome
+    </button>
+  )
+}
 
-export default connect(App)
+export default App
     `,
     },
   ],

packages/overmind-website/examples/api/connect_listener.ts

@@ -5,13 +5,17 @@ const javascript = {
       target: 'jsx',
       code: `
 import React from 'react'
-import { connect } from '../overmind'
+import { useOvermind } from '../overmind'
+
+const List = ({ overmind }) => {
+  const { state } = useOvermind()
 
-const List = ({ overmind }) => (
-  <h1>{overmind.state.items}</h1>
-)
+  return (
+    <h1>{state.items}</h1>
+  )
+}
 
-export default connect(List)
+export default List
     `,
     },
   ],
@@ -32,13 +36,17 @@ const typescript = {
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { connect, Connect } from '../overmind'
+import { useOvermind } from '../overmind'
 
-const List: React.FunctionComponent<Connect> = ({ overmind }) => (
-  <h1>{overmind.state.items}</h1>
-)
+const List: React.FunctionComponent = () => {
+  const { state } = useOvermind()
+
+  return (
+    <h1>{state.items}</h1>
+  )
+}
 
-export default connect(List)
+export default List
     `,
     },
   ],

packages/overmind-website/examples/guide/connectingcomponents/actions.ts

@@ -5,17 +5,21 @@ const javascript = {
       target: 'jsx',
       code: `
 import React from 'react'
-import { connect } from '../overmind'
+import { useOvermind } from '../overmind'
 
-const List = ({ overmind }) => (
-  <ul>
-    {overmind.state.items.map(item => 
-      <li key={item.id}>{item.title}</li>
-    )}
-  </ul>
-)
+const List = () => {
+  const { state } = useOvermind()
+
+  return (
+    <ul>
+      {state.items.map(item => 
+        <li key={item.id}>{item.title}</li>
+      )}
+    </ul>
+  )
+}
 
-export default connect(List)
+export default List
     `,
     },
   ],
@@ -40,17 +44,21 @@ const typescript = {
       fileName: 'components/List.tsx',
       code: `
 import * as React from 'react'
-import { connect, Connect } from '../overmind'
+import { useOvermind } from '../overmind'
 
-const List: React.FunctionComponent<Connect> = ({ overmind }) => (
-  <ul>
-    {overmind.state.items.map(item => 
-      <li key={item.id}>{item.title}</li>
-    )}
-  </ul>
-)
+const List: React.FunctionComponent = () => {
+  const { state } = useOvermind()
+
+  return (
+    <ul>
+      {state.items.map(item => 
+        <li key={item.id}>{item.title}</li>
+      )}
+    </ul>
+  )
+}
 
-export default connect(App)
+export default App
     `,
     },
   ],