From a77e411e5b334b38fb21cc59baa046dfa4a80d42 Mon Sep 17 00:00:00 2001 From: Stanislas Lange Date: Wed, 28 Jul 2021 20:18:14 +0000 Subject: [PATCH 1/5] feat: init profile --- src/App.tsx | 2 ++ src/components/User.tsx | 51 +++++++++++++++++++++++++++++++++++++++++ src/hooks/users.ts | 39 +++++++++++++++++++++++-------- 3 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 src/components/User.tsx diff --git a/src/App.tsx b/src/App.tsx index 76738b6..19f7ebb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import Login from './components/Login'; import Register from './components/Register'; import PrivateRoute from './components/Routing/PrivateRoute'; import Rules from './components/rules/Rules'; +import User from './components/User'; function App() { const queryClient = new QueryClient(); @@ -29,6 +30,7 @@ function App() { + ) => { + const { + isLoading: isProfileLoading, + isError: isProfileError, + data: profileData, + error, + } = useUser(match.params.id); + + if (isProfileLoading) { + return Loading....; + } + + if (isProfileError) { + if (error) { + return Error: {error.message}; + } + } + return ( + +
+ +
+
+
+
+
+ + {profileData && profileData.name} +
+
+
+
+
+ + ); +}; + +export default User; diff --git a/src/hooks/users.ts b/src/hooks/users.ts index b82946b..c4f6bd5 100644 --- a/src/hooks/users.ts +++ b/src/hooks/users.ts @@ -15,15 +15,34 @@ function useProfile() { return JSON.parse(window.atob(base64)); } - return useQuery<{ email: string }, Error>('profile', async () => { - if (token) { - const username = parseJwt(token).username; - const { data } = await authenticatedRequest({ - url: `users/${username}`, - }); - return data; - } - }); + return useQuery<{ email: string; name: string; username: string }, Error>( + 'profile', + async () => { + if (token) { + const username = parseJwt(token).username; + const { data } = await authenticatedRequest({ + url: `users/${username}`, + }); + return data; + } + }, + ); } -export default useProfile; +function useUser(username: string) { + const { token } = useToken(); + + return useQuery<{ email: string; name: string; username: string }, Error>( + 'profile', + async () => { + if (token) { + const { data } = await authenticatedRequest({ + url: `users/${username}`, + }); + return data; + } + }, + ); +} + +export { useProfile, useUser }; From b336b7a83069ee1af316f500733d03672838adc4 Mon Sep 17 00:00:00 2001 From: Stanislas Lange Date: Wed, 28 Jul 2021 20:45:13 +0000 Subject: [PATCH 2/5] feat(profile): nice profile --- src/components/Page/Navbar.tsx | 12 +++- src/components/User.tsx | 123 ++++++++++++++++++++++++++++++--- src/hooks/users.ts | 22 +++--- 3 files changed, 135 insertions(+), 22 deletions(-) diff --git a/src/components/Page/Navbar.tsx b/src/components/Page/Navbar.tsx index 911491a..b97a685 100644 --- a/src/components/Page/Navbar.tsx +++ b/src/components/Page/Navbar.tsx @@ -5,7 +5,7 @@ import Gravatar from 'react-gravatar'; import { Link, useHistory } from 'react-router-dom'; import useDarkMode from 'use-dark-mode'; import { useToken } from '../../hooks/token'; -import useProfile from '../../hooks/users'; +import { useProfile } from '../../hooks/users'; const navigation = ['Benchmarks', 'Rules']; const profile = ['Your Profile', 'Settings', 'Sign out']; @@ -184,6 +184,16 @@ export default function Navbar() { )} ))} */} + + + Profile + +