feat: user avatars from plex (#53)

server/entity/User.ts

@@ -27,6 +27,9 @@ export class User {
   @Column({ type: 'integer', default: 0 })
   public permissions = 0;
 
+  @Column()
+  public avatar: string;
+
   @CreateDateColumn()
   public createdAt: Date;
 

server/overseerr-api.yml

@@ -23,6 +23,8 @@ components:
         permissions:
           type: number
           example: 0
+        avatar:
+          type: string
         createdAt:
           type: string
           example: '2020-09-02T05:02:23.000Z'

server/routes/auth.ts

@@ -46,6 +46,9 @@ authRoutes.post('/login', async (req, res) => {
         user.plexToken = body.authToken;
         await userRepository.save(user);
       }
+
+      // Update the users avatar with their plex thumbnail (incase it changed)
+      user.avatar = account.thumb;
     } else {
       // Here we check if it's the first user. If it is, we create the user with no check
       // and give them admin permissions
@@ -56,6 +59,7 @@ authRoutes.post('/login', async (req, res) => {
           email: account.email,
           plexToken: account.authToken,
           permissions: Permission.ADMIN,
+          avatar: account.thumb,
         });
         await userRepository.save(user);
       }

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 {