From e6349c13a0eb0489289aa7663fcc64fa7d2906e6 Mon Sep 17 00:00:00 2001
From: sct <sct@users.noreply.github.com>
Date: Sun, 6 Sep 2020 19:30:16 +0900
Subject: [PATCH] feat: user avatars from plex (#53)

---
 server/entity/User.ts                        | 3 +++
 server/overseerr-api.yml                     | 2 ++
 server/routes/auth.ts                        | 4 ++++
 src/components/Layout/UserDropdown/index.tsx | 8 +++-----
 src/context/UserContext.tsx                  | 6 +++++-
 src/hooks/useUser.ts                         | 2 ++
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/server/entity/User.ts b/server/entity/User.ts
index 86126f359..94feccbf7 100644
--- a/server/entity/User.ts
+++ b/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;
 
diff --git a/server/overseerr-api.yml b/server/overseerr-api.yml
index b6290ba0c..1a36a86d0 100644
--- a/server/overseerr-api.yml
+++ b/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'
diff --git a/server/routes/auth.ts b/server/routes/auth.ts
index d14546323..8a62528a6 100644
--- a/server/routes/auth.ts
+++ b/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);
       }
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index 7c5a5f49f..212d2732c 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/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
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
index 72139df2a..d66fc0d09 100644
--- a/src/context/UserContext.tsx
+++ b/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');
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
index fe0419425..5fa888b3d 100644
--- a/src/hooks/useUser.ts
+++ b/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 {