feat: user avatars from plex (#53)

src/components/Layout/UserDropdown/index.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import Transition from '../../Transition';
+import { useUser } from '../../../hooks/useUser';
 
 const UserDropdown: React.FC = () => {
+  const { user } = useUser();
   const [isDropdownOpen, setDropdownOpen] = useState(false);
 
   return (
@@ -14,11 +16,7 @@ const UserDropdown: React.FC = () => {
           aria-haspopup="true"
           onClick={() => setDropdownOpen((state) => !state)}
         >
-          <img
-            className="h-8 w-8 rounded-full"
-            src="https://avatars1.githubusercontent.com/u/234213?s=460&u=7f30f76bd7bbdab45bab7544ebd80aa88ea11caf&v=4"
-            alt=""
-          />
+          <img className="h-8 w-8 rounded-full" src={user?.avatar} alt="" />
         </button>
       </div>
       <Transition

src/context/UserContext.tsx

@@ -15,9 +15,13 @@ export const UserContext: React.FC<UserContextProps> = ({
   initialUser,
   children,
 }) => {
-  const { user } = useUser({ initialData: initialUser });
+  const { user, revalidate } = useUser({ initialData: initialUser });
   const router = useRouter();
 
+  useEffect(() => {
+    revalidate();
+  }, [router.pathname, revalidate]);
+
   useEffect(() => {
     if (!router.pathname.match(/(setup|login)/) && !user) {
       router.push('/login');

src/hooks/useUser.ts

@@ -3,6 +3,8 @@ import { useRef } from 'react';
 export interface User {
   id: number;
   email: string;
+  avatar: string;
+  permissions: number;
 }
 
 interface UserHookResponse {