diff --git a/package.json b/package.json index 409fc11..e645900 100644 --- a/package.json +++ b/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", diff --git a/src/apollo/queries.ts b/src/apollo/defs.ts similarity index 67% rename from src/apollo/queries.ts rename to src/apollo/defs.ts index f360e2b..0d05073 100644 --- a/src/apollo/queries.ts +++ b/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 } diff --git a/src/apollo/index.ts b/src/apollo/index.ts index fe62862..3343847 100644 --- a/src/apollo/index.ts +++ b/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 } diff --git a/src/components/App.tsx b/src/components/App.tsx index c958fe3..a39064a 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,38 +1,40 @@ -import { ApolloProvider, useMutation, useQuery } from '@apollo/client' -import React, { useContext } from 'react' +import { ApolloProvider } from '@apollo/client' +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 { loading, error, data } = useQuery(FORM, { - variables: { - id: 1 - } - }) +// const TestComponent: React.FC = () => { +// const { loading, error, data } = useQuery(FORM, { +// variables: { +// id: 1 +// } +// }) - const { user } = useContext(Context) +// const { user } = useContext(Context) - const [doLogin] = useMutation(LOGIN) +// const [doLogin] = useMutation(LOGIN) - if (loading) return

Loading...

- if (error) return

Error :(

+// if (loading) return

Loading...

+// if (error) return

Error :(

- return ( -
- - {user.id} - {data.form.id} -
- ) -} +// return ( +//
+// +// {user.id} +// {data.form.id} +//
+// ) +// } const App: React.FC = () => { const userContext = useUser() @@ -43,7 +45,9 @@ const App: React.FC = () => { - + + + diff --git a/src/components/Authorize/index.tsx b/src/components/Authorize/index.tsx new file mode 100644 index 0000000..dcd920f --- /dev/null +++ b/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 +} + +export default Authorize diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx new file mode 100644 index 0000000..d2ac539 --- /dev/null +++ b/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('') + + const [doLogin, { error, data }] = useMutation(LOGIN) + + const handleFormSubmit = async (e: FormEvent) => { + e.preventDefault() + try { + await doLogin({ variables: { email } }) + } catch (err) {} + } + + const handleInputChange = (e: ChangeEvent) => { + setEmail(e.currentTarget.value) + } + + return ( +
+
+ + +
+ {error && error.message} + {data && data.login && data.login.success && } +
+ ) +} + +export default Login diff --git a/src/components/TextComponent/index.tsx b/src/components/TextComponent/index.tsx new file mode 100644 index 0000000..d0b8455 --- /dev/null +++ b/src/components/TextComponent/index.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const TextComponent: React.FC<{ text: string }> = (text) => { + return
{text}
+} + +export default TextComponent diff --git a/src/components/UserPage/index.tsx b/src/components/UserPage/index.tsx new file mode 100644 index 0000000..2a62f60 --- /dev/null +++ b/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

Loading...

+ + if (error) return

{error.message}

+ + console.log(Object.entries(data.user)) + + const user = Object.entries(data.user).map((el, index) => ( +
  • + {el[0]}: {el[1]} +
  • + )) + + return
      {user}
    +} + +export default UserPage diff --git a/src/hooks.ts b/src/hooks.ts index 444f78c..0f85206 100644 --- a/src/hooks.ts +++ b/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) +}