Added login and authorize routes and components, added basic UserPage component and query

package.json

@@ -8,6 +8,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.6",
+    "@types/validator": "^13.1.0",
     "graphql": "^15.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/apollo/defs.ts

@@ -17,4 +17,14 @@ const FORM = gql`
   }
 `
 
-export { LOGIN, FORM }
+const USER = gql`
+  query User {
+    user {
+      email
+      id
+      name
+    }
+  }
+`
+
+export { LOGIN, FORM, USER }

src/apollo/index.ts

@@ -2,7 +2,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
 
 import { setContext } from '@apollo/client/link/context'
 
-import { LOGIN } from './queries'
+export * from './defs'
 
 const httpLink = createHttpLink({
   uri: process.env.GRAPHQL_URL || process.env.REACT_APP_GRAPHQL_URL || undefined
@@ -28,4 +28,3 @@ const client = new ApolloClient({
 })
 
 export default client
-export { LOGIN }

src/components/App.tsx

@@ -1,38 +1,40 @@
-import { ApolloProvider, useMutation, useQuery } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client'
-import React, { useContext } from 'react'
+import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 
 import client from '../apollo'
-import { FORM, LOGIN } from '../apollo/queries'
 import Context from '../context'
 import { useUser } from '../hooks'
+import Authorize from './Authorize'
+import Login from './Login'
+import UserPage from './UserPage'
 
-const TestComponent: React.FC = () => {
+// const TestComponent: React.FC = () => {
-  const { loading, error, data } = useQuery(FORM, {
+//   const { loading, error, data } = useQuery(FORM, {
-    variables: {
+//     variables: {
-      id: 1
+//       id: 1
-    }
+//     }
-  })
+//   })
 
-  const { user } = useContext(Context)
+//   const { user } = useContext(Context)
 
-  const [doLogin] = useMutation(LOGIN)
+//   const [doLogin] = useMutation(LOGIN)
 
-  if (loading) return <p>Loading...</p>
+//   if (loading) return <p>Loading...</p>
-  if (error) return <p>Error :(</p>
+//   if (error) return <p>Error :(</p>
 
-  return (
+//   return (
-    <div>
+//     <div>
-      <button
+//       <button
-        onClick={() => doLogin({ variables: { email: 'test@test.test' } })}
+//         onClick={() => doLogin({ variables: { email: 'test@test.test' } })}
-      >
+//       >
-        Click!
+//         Click!
-      </button>
+//       </button>
-      {user.id}
+//       {user.id}
-      {data.form.id}
+//       {data.form.id}
-    </div>
+//     </div>
-  )
+//   )
-}
+// }
 
 const App: React.FC = () => {
   const userContext = useUser()
@@ -43,7 +45,9 @@ const App: React.FC = () => {
         <Context.Provider value={userContext}>
           <Router>
             <Switch>
-              <Route path="/" component={TestComponent} />
+              <Route path="/login" component={Login} />
+              <Route path="/authorize" component={Authorize} />
+              <Route path="/user" component={UserPage} />
             </Switch>
           </Router>
         </Context.Provider>

src/components/Authorize/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Redirect } from 'react-router-dom'
+import { useURLQuery } from '../../hooks'
+
+const Authorize: React.FC = () => {
+  const query = useURLQuery()
+
+  const token = query.get('token')
+
+  if (token) localStorage.setItem('token', token)
+
+  return <Redirect to="/" />
+}
+
+export default Authorize

src/components/Login/index.tsx

@@ -0,0 +1,35 @@
+import { useMutation } from '@apollo/client'
+import React, { ChangeEvent, FormEvent, useState } from 'react'
+import { Redirect } from 'react-router-dom'
+
+import { LOGIN } from '../../apollo'
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState<string>('')
+
+  const [doLogin, { error, data }] = useMutation(LOGIN)
+
+  const handleFormSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    try {
+      await doLogin({ variables: { email } })
+    } catch (err) {}
+  }
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.currentTarget.value)
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleFormSubmit}>
+        <input type="text" onChange={handleInputChange} />
+        <input type="submit" value="Login" />
+      </form>
+      {error && error.message}
+      {data && data.login && data.login.success && <Redirect to="/" />}
+    </div>
+  )
+}
+
+export default Login

src/components/TextComponent/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const TextComponent: React.FC<{ text: string }> = (text) => {
+  return <div>{text}</div>
+}
+
+export default TextComponent

src/components/UserPage/index.tsx

@@ -0,0 +1,22 @@
+import { useQuery } from '@apollo/client'
+import React from 'react'
+import { USER } from '../../apollo'
+
+const UserPage: React.FC = () => {
+  const { data, error, loading } = useQuery(USER)
+  if (loading) return <p>Loading...</p>
+
+  if (error) return <p>{error.message}</p>
+
+  console.log(Object.entries(data.user))
+
+  const user = Object.entries(data.user).map((el, index) => (
+    <li key={index}>
+      {el[0]}: {el[1]}
+    </li>
+  ))
+
+  return <ul>{user}</ul>
+}
+
+export default UserPage

src/hooks.ts

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import { ContextType, initialUser, UserType } from './context'
 
 export const useUser = (): ContextType => {
@@ -10,3 +11,7 @@ export const useUser = (): ContextType => {
 
   return { user, setUser }
 }
+
+export const useURLQuery = () => {
+  return new URLSearchParams(useLocation().search)
+}