Set avatar through URL

pages/api/user/profile.ts

@@ -26,6 +26,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const username = req.body.username;
     const name = req.body.name;
     const description = req.body.description;
+    const avatar = req.body.avatar;
     const timeZone = req.body.timeZone;
 
     const updateUser = await prisma.user.update({
@@ -35,6 +36,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         data: {
           username,
           name,
+          avatar,
           bio: description,
           timeZone: timeZone,
         },

pages/settings/profile.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRef, useState } from 'react';
+import { useRouter } from 'next/router';
 import prisma from '../../lib/prisma';
 import Modal from '../../components/Modal';
 import Shell from '../../components/Shell';
@@ -10,10 +11,12 @@ import TimezoneSelect from 'react-timezone-select';
 
 export default function Settings(props) {
     const [ session, loading ] = useSession();
+    const router = useRouter();
     const [successModalOpen, setSuccessModalOpen] = useState(false);
     const usernameRef = useRef();
     const nameRef = useRef();
     const descriptionRef = useRef();
+    const avatarRef = useRef();
 
     const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone });
 
@@ -33,18 +36,20 @@ export default function Settings(props) {
         const enteredUsername = usernameRef.current.value;
         const enteredName = nameRef.current.value;
         const enteredDescription = descriptionRef.current.value;
+        const enteredAvatar = avatarRef.current.value;
         const enteredTimeZone = selectedTimeZone.value;
 
         // TODO: Add validation
 
         const response = await fetch('/api/user/profile', {
             method: 'PATCH',
-            body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, timeZone: enteredTimeZone}),
+            body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone}),
             headers: {
                 'Content-Type': 'application/json'
             }
         });
 
+        router.replace(router.asPath);
         setSuccessModalOpen(true);
     }
 
@@ -111,7 +116,7 @@ export default function Settings(props) {
                                         <div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
                                             <img className="rounded-full h-full w-full" src={props.user.avatar} alt="" />
                                         </div>
-                                        <div className="ml-5 rounded-md shadow-sm">
+                                        {/* <div className="ml-5 rounded-md shadow-sm">
                                             <div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                                 <label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none">
                                                     <span>Change</span>
@@ -119,18 +124,22 @@ export default function Settings(props) {
                                                 </label>
                                                 <input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
                                             </div>
-                                        </div>
+                                        </div> */}
                                     </div>
                                 </div>
 
                                 <div className="hidden relative rounded-full overflow-hidden lg:block">
                                     {props.user.avatar && <img className="relative rounded-full w-40 h-40" src={props.user.avatar} alt="" />}
                                     {!props.user.avatar && <div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
-                                    <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
+                                    {/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
                                         <span>Change</span>
                                         <span className="sr-only"> user photo</span>
                                         <input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
-                                    </label>
+                                    </label> */}
+                                </div>
+                                <div className="mt-4">
+                                    <label htmlFor="avatar" className="block text-sm font-medium text-gray-700">Avatar URL</label>
+                                    <input ref={avatarRef} type="text" name="avatar" id="avatar" placeholder="URL" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.avatar} />
                                 </div>
                             </div>
                         </div>