diff --git a/src/core/App.tsx b/src/core/App.tsx index ebed2efd7cd3c9fe7e9dc87e9c9f96982eac1d14..5138d3d38b750cfc9b5877ba2ae4da963f1e1b00 100644 --- a/src/core/App.tsx +++ b/src/core/App.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import styled from 'styled-components'; import Footer from './components/Footer'; import Header from './components/Header'; import MainRouting from './components/MainRouting'; +import UserContext from './components/UserContext'; const Container = styled.div` height: 100%; @@ -17,16 +18,30 @@ const MainContent = styled.div` `; function App() { + const [user, setUser] = useState({ loggedIn: false, name: '' }); + + useEffect(() => { + fetch('/api/v1/users/me') + .then((response) => response.json()) + .then((profile) => { + if (profile.loggedIn) { + setUser({ loggedIn: true, name: profile.name }); + } + }); + }, []); + return ( - <Router> - <Container> - <Header /> - <MainContent> - <MainRouting /> - </MainContent> - <Footer /> - </Container> - </Router> + <UserContext.Provider value={user}> + <Router> + <Container> + <Header /> + <MainContent> + <MainRouting /> + </MainContent> + <Footer /> + </Container> + </Router> + </UserContext.Provider> ); } diff --git a/src/core/components/ContextTest.tsx b/src/core/components/ContextTest.tsx new file mode 100644 index 0000000000000000000000000000000000000000..74169c6493ca04f756f6f01f89bea323e49065c7 --- /dev/null +++ b/src/core/components/ContextTest.tsx @@ -0,0 +1,10 @@ +import React, { useContext } from 'react'; +import UserContext from './UserContext'; + +const ContextTest = () => { + const user = useContext(UserContext); + + return <div>{user.loggedIn ? user.name : 'Not logged in!'}</div>; +}; + +export default ContextTest; diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx index 882d03dd31c84c881e1648e00a21f0bc8d991c06..61215ed6d4722bebb9e2dfae9705cafe1b05caa2 100644 --- a/src/core/components/MainRouting.tsx +++ b/src/core/components/MainRouting.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { Route, Switch } from 'react-router'; +import ContextTest from './ContextTest'; const Main = () => ( <Switch> <Route path="/" exact> Hello + <ContextTest /> </Route> <Route path="/news">News</Route> </Switch> diff --git a/src/core/components/UserContext.tsx b/src/core/components/UserContext.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1778af8bc084a3c21a696dfdb74b8d18acf2ffc8 --- /dev/null +++ b/src/core/components/UserContext.tsx @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const UserContext = createContext({ loggedIn: false, name: '' }); + +export default UserContext;