Remove image from session, add /api/me, update Avatar component (#493)

* Remove image from session, add /api/me, update Avatar component

* Fixed Avatar on Desktop

* Added emailMd5 to session + load md5 from props on /settings/profile

* Explicitly select which fields to expose in /api/me

* Abstracted Gravatar, defaults avatar for /api/me, removed session dep from UserDropdown

* Delete md5.js :)

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

components/Avatar.tsx

@@ -1,37 +1,22 @@
-import { useState } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import md5 from "../lib/md5";
+import { defaultAvatarSrc } from "@lib/profile";
 
-export default function Avatar({
+export type AvatarProps = {
-  user,
-  className = "",
-  fallback,
-  imageSrc = "",
-}: {
-  user: any;
   className?: string;
-  fallback?: JSX.Element;
   imageSrc?: string;
-}) {
+  displayName: string;
-  const [gravatarAvailable, setGravatarAvailable] = useState(true);
+  gravatarFallbackMd5?: string;
+};
 
-  if (imageSrc) {
+export default function Avatar({ imageSrc, displayName, gravatarFallbackMd5, className = "" }: AvatarProps) {
-    return <img src={imageSrc} alt="Avatar" className={className} />;
+  return (
-  }
+    <AvatarPrimitive.Root>
-
+      <AvatarPrimitive.Image src={imageSrc} alt={displayName} className={className} />
-  if (user.avatar) {
+      <AvatarPrimitive.Fallback delayMs={600}>
-    return <img src={user.avatar} alt="Avatar" className={className} />;
+        {gravatarFallbackMd5 && (
-  }
+          <img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={displayName} className={className} />
-
+        )}
-  if (gravatarAvailable) {
+      </AvatarPrimitive.Fallback>
-    return (
+    </AvatarPrimitive.Root>
-      <img
+  );
-        onError={() => setGravatarAvailable(false)}
-        src={`https://www.gravatar.com/avatar/${md5(user.email)}?s=160&d=identicon&r=PG`}
-        alt="Avatar"
-        className={className}
-      />
-    );
-  }
-
-  return fallback || null;
 }

components/Shell.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { useSession } from "next-auth/client";
+import { signOut, useSession } from "next-auth/client";
 import { Menu, Transition } from "@headlessui/react";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry";
 import { SelectorIcon } from "@heroicons/react/outline";
@@ -18,6 +18,8 @@ import {
 import Logo from "./Logo";
 import classNames from "@lib/classNames";
 import { Toaster } from "react-hot-toast";
+import Avatar from "@components/Avatar";
+import { User } from "@prisma/client";
 
 export default function Shell(props) {
   const router = useRouter();
@@ -112,7 +114,7 @@ export default function Shell(props) {
                 </nav>
               </div>
               <div className="flex-shrink-0 flex p-4">
-                <UserDropdown session={session} />
+                <UserDropdown />
               </div>
             </div>
           </div>
@@ -191,45 +193,52 @@ export default function Shell(props) {
   ) : null;
 }
 
-function UserDropdown({ session, small, bottom }: { session: any; small?: boolean; bottom?: boolean }) {
+function UserDropdown({ small, bottom }: { small?: boolean; bottom?: boolean }) {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    fetch("/api/me")
+      .then((res) => res.json())
+      .then((responseBody) => {
+        setUser(responseBody.user);
+      });
+  }, []);
+
   return (
     <Menu as="div" className="w-full relative inline-block text-left">
       {({ open }) => (
         <>
           <div>
-            <Menu.Button className="group w-full rounded-md text-sm text-left font-medium text-gray-700 focus:outline-none">
+            {user && (
-              <span className="flex w-full justify-between items-center">
+              <Menu.Button className="group w-full rounded-md text-sm text-left font-medium text-gray-700 focus:outline-none">
-                <span className="flex min-w-0 items-center justify-between space-x-3">
+                <span className="flex w-full justify-between items-center">
-                  <img
+                  <span className="flex min-w-0 items-center justify-between space-x-3">
-                    className={classNames(
+                    <Avatar
-                      small ? "w-8 h-8" : "w-10 h-10",
+                      imageSrc={user?.avatar}
-                      "bg-gray-300 rounded-full flex-shrink-0"
+                      displayName={user?.name}
-                    )}
+                      className={classNames(
-                    src={
+                        small ? "w-8 h-8" : "w-10 h-10",
-                      session.user.image
+                        "bg-gray-300 rounded-full flex-shrink-0"
-                        ? session.user.image
+                      )}
-                        : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
+                    />
-                          encodeURIComponent(session.user.name || "")
+                    {!small && (
-                    }
+                      <span className="flex-1 flex flex-col min-w-0">
-                    alt=""
+                        <span className="text-gray-900 text-sm font-medium truncate">{user?.name}</span>
-                  />
+                        <span className="text-neutral-500 font-normal text-sm truncate">
-                  {!small && (
+                          /{user?.username}
-                    <span className="flex-1 flex flex-col min-w-0">
+                        </span>
-                      <span className="text-gray-900 text-sm font-medium truncate">{session.user.name}</span>
-                      <span className="text-neutral-500 font-normal text-sm truncate">
-                        /{session.user.username}
                       </span>
-                    </span>
+                    )}
+                  </span>
+                  {!small && (
+                    <SelectorIcon
+                      className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                      aria-hidden="true"
+                    />
                   )}
                 </span>
-                {!small && (
+              </Menu.Button>
-                  <SelectorIcon
+            )}
-                    className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                    aria-hidden="true"
-                  />
-                )}
-              </span>
-            </Menu.Button>
           </div>
           <Transition
             show={open}
@@ -247,7 +256,7 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea
                 "w-64 z-10 absolute mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
               )}>
               <div className="py-1">
-                <a href={"/" + session.user.username} className="flex px-4 py-2 text-sm text-neutral-500">
+                <a href={"/" + user?.username} className="flex px-4 py-2 text-sm text-neutral-500">
                   View public page <ExternalLinkIcon className="ml-1 mt-1 w-3 h-3 text-neutral-400" />
                 </a>
               </div>
@@ -311,22 +320,21 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea
               <div className="py-1">
                 <Menu.Item>
                   {({ active }) => (
-                    <Link href="/auth/logout">
+                    <a
-                      <a
+                      onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+                      className={classNames(
+                        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                        "flex px-4 py-2 text-sm font-medium"
+                      )}>
+                      <LogoutIcon
                         className={classNames(
-                          active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                          "text-neutral-400 group-hover:text-neutral-500",
-                          "flex px-4 py-2 text-sm font-medium"
+                          "mr-2 flex-shrink-0 h-5 w-5"
-                        )}>
+                        )}
-                        <LogoutIcon
+                        aria-hidden="true"
-                          className={classNames(
+                      />
-                            "text-neutral-400 group-hover:text-neutral-500",
+                      Sign out
-                            "mr-2 flex-shrink-0 h-5 w-5"
+                    </a>
-                          )}
-                          aria-hidden="true"
-                        />
-                        Sign out
-                      </a>
-                    </Link>
                   )}
                 </Menu.Item>
               </div>

lib/md5.js

@@ -1,173 +0,0 @@
-function md5cycle(x, k) {
-  let a = x[0],
-    b = x[1],
-    c = x[2],
-    d = x[3];
-
-  a = ff(a, b, c, d, k[0], 7, -680876936);
-  d = ff(d, a, b, c, k[1], 12, -389564586);
-  c = ff(c, d, a, b, k[2], 17, 606105819);
-  b = ff(b, c, d, a, k[3], 22, -1044525330);
-  a = ff(a, b, c, d, k[4], 7, -176418897);
-  d = ff(d, a, b, c, k[5], 12, 1200080426);
-  c = ff(c, d, a, b, k[6], 17, -1473231341);
-  b = ff(b, c, d, a, k[7], 22, -45705983);
-  a = ff(a, b, c, d, k[8], 7, 1770035416);
-  d = ff(d, a, b, c, k[9], 12, -1958414417);
-  c = ff(c, d, a, b, k[10], 17, -42063);
-  b = ff(b, c, d, a, k[11], 22, -1990404162);
-  a = ff(a, b, c, d, k[12], 7, 1804603682);
-  d = ff(d, a, b, c, k[13], 12, -40341101);
-  c = ff(c, d, a, b, k[14], 17, -1502002290);
-  b = ff(b, c, d, a, k[15], 22, 1236535329);
-
-  a = gg(a, b, c, d, k[1], 5, -165796510);
-  d = gg(d, a, b, c, k[6], 9, -1069501632);
-  c = gg(c, d, a, b, k[11], 14, 643717713);
-  b = gg(b, c, d, a, k[0], 20, -373897302);
-  a = gg(a, b, c, d, k[5], 5, -701558691);
-  d = gg(d, a, b, c, k[10], 9, 38016083);
-  c = gg(c, d, a, b, k[15], 14, -660478335);
-  b = gg(b, c, d, a, k[4], 20, -405537848);
-  a = gg(a, b, c, d, k[9], 5, 568446438);
-  d = gg(d, a, b, c, k[14], 9, -1019803690);
-  c = gg(c, d, a, b, k[3], 14, -187363961);
-  b = gg(b, c, d, a, k[8], 20, 1163531501);
-  a = gg(a, b, c, d, k[13], 5, -1444681467);
-  d = gg(d, a, b, c, k[2], 9, -51403784);
-  c = gg(c, d, a, b, k[7], 14, 1735328473);
-  b = gg(b, c, d, a, k[12], 20, -1926607734);
-
-  a = hh(a, b, c, d, k[5], 4, -378558);
-  d = hh(d, a, b, c, k[8], 11, -2022574463);
-  c = hh(c, d, a, b, k[11], 16, 1839030562);
-  b = hh(b, c, d, a, k[14], 23, -35309556);
-  a = hh(a, b, c, d, k[1], 4, -1530992060);
-  d = hh(d, a, b, c, k[4], 11, 1272893353);
-  c = hh(c, d, a, b, k[7], 16, -155497632);
-  b = hh(b, c, d, a, k[10], 23, -1094730640);
-  a = hh(a, b, c, d, k[13], 4, 681279174);
-  d = hh(d, a, b, c, k[0], 11, -358537222);
-  c = hh(c, d, a, b, k[3], 16, -722521979);
-  b = hh(b, c, d, a, k[6], 23, 76029189);
-  a = hh(a, b, c, d, k[9], 4, -640364487);
-  d = hh(d, a, b, c, k[12], 11, -421815835);
-  c = hh(c, d, a, b, k[15], 16, 530742520);
-  b = hh(b, c, d, a, k[2], 23, -995338651);
-
-  a = ii(a, b, c, d, k[0], 6, -198630844);
-  d = ii(d, a, b, c, k[7], 10, 1126891415);
-  c = ii(c, d, a, b, k[14], 15, -1416354905);
-  b = ii(b, c, d, a, k[5], 21, -57434055);
-  a = ii(a, b, c, d, k[12], 6, 1700485571);
-  d = ii(d, a, b, c, k[3], 10, -1894986606);
-  c = ii(c, d, a, b, k[10], 15, -1051523);
-  b = ii(b, c, d, a, k[1], 21, -2054922799);
-  a = ii(a, b, c, d, k[8], 6, 1873313359);
-  d = ii(d, a, b, c, k[15], 10, -30611744);
-  c = ii(c, d, a, b, k[6], 15, -1560198380);
-  b = ii(b, c, d, a, k[13], 21, 1309151649);
-  a = ii(a, b, c, d, k[4], 6, -145523070);
-  d = ii(d, a, b, c, k[11], 10, -1120210379);
-  c = ii(c, d, a, b, k[2], 15, 718787259);
-  b = ii(b, c, d, a, k[9], 21, -343485551);
-
-  x[0] = add32(a, x[0]);
-  x[1] = add32(b, x[1]);
-  x[2] = add32(c, x[2]);
-  x[3] = add32(d, x[3]);
-}
-
-function cmn(q, a, b, x, s, t) {
-  a = add32(add32(a, q), add32(x, t));
-  return add32((a << s) | (a >>> (32 - s)), b);
-}
-
-function ff(a, b, c, d, x, s, t) {
-  return cmn((b & c) | (~b & d), a, b, x, s, t);
-}
-
-function gg(a, b, c, d, x, s, t) {
-  return cmn((b & d) | (c & ~d), a, b, x, s, t);
-}
-
-function hh(a, b, c, d, x, s, t) {
-  return cmn(b ^ c ^ d, a, b, x, s, t);
-}
-
-function ii(a, b, c, d, x, s, t) {
-  return cmn(c ^ (b | ~d), a, b, x, s, t);
-}
-
-function md51(s) {
-  let n = s.length,
-    state = [1732584193, -271733879, -1732584194, 271733878],
-    i;
-  for (i = 64; i <= s.length; i += 64) {
-    md5cycle(state, md5blk(s.substring(i - 64, i)));
-  }
-  s = s.substring(i - 64);
-  const tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-  for (i = 0; i < s.length; i++) tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
-  tail[i >> 2] |= 0x80 << (i % 4 << 3);
-  if (i > 55) {
-    md5cycle(state, tail);
-    for (i = 0; i < 16; i++) tail[i] = 0;
-  }
-  tail[14] = n * 8;
-  md5cycle(state, tail);
-  return state;
-}
-
-/* there needs to be support for Unicode here,
- * unless we pretend that we can redefine the MD-5
- * algorithm for multi-byte characters (perhaps
- * by adding every four 16-bit characters and
- * shortening the sum to 32 bits). Otherwise
- * I suggest performing MD-5 as if every character
- * was two bytes--e.g., 0040 0025 = @%--but then
- * how will an ordinary MD-5 sum be matched?
- * There is no way to standardize text to something
- * like UTF-8 before transformation; speed cost is
- * utterly prohibitive. The JavaScript standard
- * itself needs to look at this: it should start
- * providing access to strings as preformed UTF-8
- * 8-bit unsigned value arrays.
- */
-function md5blk(s) {
-  /* I figured global was faster.   */
-  let md5blks = [],
-    i; /* Andy King said do it this way. */
-  for (i = 0; i < 64; i += 4) {
-    md5blks[i >> 2] =
-      s.charCodeAt(i) +
-      (s.charCodeAt(i + 1) << 8) +
-      (s.charCodeAt(i + 2) << 16) +
-      (s.charCodeAt(i + 3) << 24);
-  }
-  return md5blks;
-}
-
-const hex_chr = "0123456789abcdef".split("");
-
-function rhex(n) {
-  let s = "",
-    j = 0;
-  for (; j < 4; j++) s += hex_chr[(n >> (j * 8 + 4)) & 0x0f] + hex_chr[(n >> (j * 8)) & 0x0f];
-  return s;
-}
-
-function hex(x) {
-  for (let i = 0; i < x.length; i++) x[i] = rhex(x[i]);
-  return x.join("");
-}
-
-function md5(s) {
-  return hex(md51(s));
-}
-
-function add32(a, b) {
-  return (a + b) & 0xffffffff;
-}
-
-export default md5;

lib/profile.ts

@@ -0,0 +1,11 @@
+import crypto from "crypto";
+
+export const defaultAvatarSrc = function ({ email, md5 }: { md5?: string; email?: string }) {
+  if (!email && !md5) return "";
+
+  if (email && !md5) {
+    md5 = crypto.createHash("md5").update(email).digest("hex");
+  }
+
+  return `https://www.gravatar.com/avatar/${md5}?s=160&d=identicon&r=PG`;
+};

package.json

@@ -17,6 +17,7 @@
     "@heroicons/react": "^1.0.4",
     "@jitsu/sdk-js": "^2.2.4",
     "@prisma/client": "^2.29.1",
+    "@radix-ui/react-avatar": "^0.0.15",
     "@radix-ui/react-collapsible": "^0.0.17",
     "@radix-ui/react-dialog": "^0.0.20",
     "@radix-ui/react-slider": "^0.0.17",

pages/[user].tsx

@@ -2,7 +2,7 @@ import { GetServerSideProps } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import prisma, { whereAndSelect } from "@lib/prisma";
-import Avatar from "../components/Avatar";
+import Avatar from "@components/Avatar";
 import Theme from "@components/Theme";
 import { ClockIcon, InformationCircleIcon, UserIcon } from "@heroicons/react/solid";
 import React from "react";
@@ -105,7 +105,11 @@ export default function User(props): User {
         <div className="bg-neutral-50 dark:bg-black h-screen">
           <main className="max-w-3xl mx-auto py-24 px-4">
             <div className="mb-8 text-center">
-              <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
+              <Avatar
+                imageSrc={props.user.avatar}
+                displayName={props.user.name}
+                className="mx-auto w-24 h-24 rounded-full mb-4"
+              />
               <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-1">
                 {props.user.name || props.user.username}
               </h1>

pages/[user]/[type].tsx

@@ -9,7 +9,7 @@ import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Avatar from "../../components/Avatar";
+import Avatar from "@components/Avatar";
 import AvailableTimes from "../../components/booking/AvailableTimes";
 import DatePicker from "../../components/booking/DatePicker";
 import TimeOptions from "../../components/booking/TimeOptions";
@@ -140,7 +140,11 @@ export default function Type(props: InferGetServerSidePropsType<typeof getServer
               {/* mobile: details */}
               <div className="block p-4 sm:p-8 md:hidden">
                 <div className="flex items-center">
-                  <Avatar user={props.user} className="inline-block rounded-full h-9 w-9" />
+                  <Avatar
+                    imageSrc={props.user.avatar}
+                    displayName={props.user.name}
+                    className="inline-block rounded-full h-9 w-9"
+                  />
                   <div className="ml-3">
                     <p className="text-sm font-medium text-black dark:text-gray-300">{props.user.name}</p>
                     <div className="flex gap-2 text-xs font-medium text-gray-600">
@@ -161,7 +165,11 @@ export default function Type(props: InferGetServerSidePropsType<typeof getServer
                     "hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
                     (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
                   }>
-                  <Avatar user={props.user} className="w-16 h-16 mb-4 rounded-full" />
+                  <Avatar
+                    imageSrc={props.user.avatar}
+                    displayName={props.user.name}
+                    className="w-16 h-16 mb-4 rounded-full"
+                  />
                   <h2 className="font-medium text-gray-500 dark:text-gray-300">{props.user.name}</h2>
                   <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
                     {props.eventType.title}

pages/[user]/book.tsx

@@ -12,7 +12,7 @@ import timezone from "dayjs/plugin/timezone";
 import "react-phone-number-input/style.css";
 import PhoneInput from "react-phone-number-input";
 import { LocationType } from "../../lib/location";
-import Avatar from "../../components/Avatar";
+import Avatar from "@components/Avatar";
 import Button from "../../components/ui/Button";
 import Theme from "@components/Theme";
 import { ReactMultiEmail } from "react-multi-email";
@@ -163,7 +163,11 @@ export default function Book(props: any): JSX.Element {
           <div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
             <div className="sm:flex px-4 py-5 sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-black">
-                <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
+                <Avatar
+                  displayName={props.user.name}
+                  imageSrc={props.user.avatar}
+                  className="w-16 h-16 rounded-full mb-4"
+                />
                 <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
                 <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
                   {props.eventType.title}

pages/api/auth/[...nextauth].tsx

@@ -20,7 +20,7 @@ export default NextAuth({
         password: { label: "Password", type: "password", placeholder: "Your super secure password" },
       },
       async authorize(credentials) {
-        const user = await prisma.user.findFirst({
+        const user = await prisma.user.findUnique({
           where: {
             email: credentials.email,
           },
@@ -44,15 +44,13 @@ export default NextAuth({
           username: user.username,
           email: user.email,
           name: user.name,
-          image: user.avatar,
         };
       },
     }),
   ],
   callbacks: {
     async jwt(token, user) {
-      // Add username to the token right after signin
+      if (user) {
-      if (user?.username) {
         token.id = user.id;
         token.username = user.username;
       }

pages/api/me.ts

@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import prisma from "@lib/prisma";
+import { getSession } from "@lib/auth";
+import { defaultAvatarSrc } from "@lib/profile";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const session = await getSession({ req: req });
+  if (!session) {
+    res.status(401).json({ message: "Not authenticated" });
+    return;
+  }
+
+  const user: User = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+    select: {
+      id: true,
+      username: true,
+      name: true,
+      email: true,
+      bio: true,
+      timeZone: true,
+      weekStart: true,
+      startTime: true,
+      endTime: true,
+      bufferTime: true,
+      theme: true,
+      createdDate: true,
+      hideBranding: true,
+      avatar: true,
+    },
+  });
+
+  user.avatar = user.avatar || defaultAvatarSrc({ email: user.email });
+
+  res.status(200).json({
+    user,
+  });
+}

pages/auth/logout.tsx

@@ -1,7 +1,6 @@
 import Head from "next/head";
 import Link from "next/link";
 import { CheckIcon } from "@heroicons/react/outline";
-import { getSession, signOut } from "next-auth/client";
 
 export default function Logout() {
   return (
@@ -44,14 +43,3 @@ export default function Logout() {
     </div>
   );
 }
-
-Logout.getInitialProps = async (context) => {
-  const { req } = context;
-  const session = await getSession({ req });
-
-  if (session) {
-    signOut({ redirect: false });
-  }
-
-  return { session: undefined };
-};

pages/settings/profile.tsx

@@ -1,17 +1,18 @@
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { useEffect, useRef, useState } from "react";
-import prisma, { whereAndSelect } from "@lib/prisma";
+import prisma from "@lib/prisma";
 import Modal from "../../components/Modal";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
-import Avatar from "../../components/Avatar";
+import Avatar from "@components/Avatar";
 import { getSession } from "next-auth/client";
 import Select from "react-select";
 import TimezoneSelect from "react-timezone-select";
 import { UsernameInput } from "../../components/ui/UsernameInput";
 import ErrorAlert from "../../components/ui/alerts/Error";
 import ImageUploader from "../../components/ImageUploader";
+import crypto from "crypto";
 
 const themeOptions = [
   { value: "light", label: "Light" },
@@ -28,7 +29,7 @@ export default function Settings(props) {
   const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
   const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
   const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
-  const [imageSrc, setImageSrc] = useState<string>("");
+  const [imageSrc, setImageSrc] = useState<string>(props.user.avatar);
 
   const [hasErrors, setHasErrors] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
@@ -156,9 +157,9 @@ export default function Settings(props) {
                 <div>
                   <div className="mt-1 flex">
                     <Avatar
-                      user={props.user}
+                      displayName={props.user.name}
                       className="relative rounded-full w-10 h-10"
-                      fallback={<div className="relative bg-neutral-900 rounded-full w-10 h-10"></div>}
+                      gravatarFallbackMd5={props.user.emailMd5}
                       imageSrc={imageSrc}
                     />
                     <input
@@ -168,14 +169,14 @@ export default function Settings(props) {
                       id="avatar"
                       placeholder="URL"
                       className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
-                      defaultValue={props.user.avatar}
+                      defaultValue={imageSrc}
                     />
                     <ImageUploader
                       target="avatar"
                       id="avatar-upload"
                       buttonMsg="Change avatar"
                       handleAvatarChange={handleAvatarChange}
-                      imageRef={imageSrc ? imageSrc : props.user.avatar}
+                      imageRef={imageSrc}
                     />
                   </div>
                   <hr className="mt-6" />
@@ -331,15 +332,30 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     return { redirect: { permanent: false, destination: "/auth/login" } };
   }
 
-  const user = await whereAndSelect(
+  const user = await prisma.user.findUnique({
-    prisma.user.findFirst,
+    where: {
-    {
       id: session.user.id,
     },
-    ["id", "username", "name", "email", "bio", "avatar", "timeZone", "weekStart", "hideBranding", "theme"]
+    select: {
-  );
+      id: true,
+      username: true,
+      name: true,
+      email: true,
+      bio: true,
+      avatar: true,
+      timeZone: true,
+      weekStart: true,
+      hideBranding: true,
+      theme: true,
+    },
+  });
 
   return {
-    props: { user }, // will be passed to the page component as props
+    props: {
+      user: {
+        ...user,
+        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
+      },
+    },
   };
 };

yarn.lock

@@ -780,6 +780,18 @@
     "@radix-ui/react-polymorphic" "0.0.13"
     "@radix-ui/react-primitive" "0.0.15"
 
+"@radix-ui/react-avatar@^0.0.15":
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-0.0.15.tgz#5cb9280bde8cc1bca27a816c4a0b631222c9308b"
+  integrity sha512-mZHHCMU7CODOpisqiimrvVCUtcFcQLtuaqQUBwR9dYXoMxjBN1XtQXUGdTvFpPFXd11C9b6i6Gjfvti6yD8Jcg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "0.0.5"
+    "@radix-ui/react-polymorphic" "0.0.13"
+    "@radix-ui/react-primitive" "0.0.15"
+    "@radix-ui/react-use-callback-ref" "0.0.5"
+    "@radix-ui/react-use-layout-effect" "0.0.5"
+
 "@radix-ui/react-collapsible@^0.0.17":
   version "0.0.17"
   resolved "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-0.0.17.tgz#d778ec1d5b7b4543fd4db1b3e4be96c74568d441"