shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: profile picture

Browse Source
This commit is contained in:
Henry
2025-01-21 22:41:04 +00:00
parent a162624eb8
commit ef8f42a460
16 changed files with 303 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/components/Dashboard.tsx
View File

@@ -5,7 +5,7 @@ import FeedbackButton from "./FeedbackButton";
import SideNavigation from "./SideNavigation";
export default function Dashboard(props: { children: React.ReactNode }) {
const { data, isLoading } = api.auth.getUser.useQuery();
const { data, isLoading } = api.user.getUser.useQuery();
return (
<>
@@ -28,7 +28,10 @@ export default function Dashboard(props: { children: React.ReactNode }) {
</div>
<div className="flex h-full w-full">
<SideNavigation user={{ email: data?.email }} isLoading={isLoading} />
<SideNavigation
user={{ email: data?.email, image: data?.image }}
isLoading={isLoading}
/>
<div className="w-full overflow-hidden">{props.children}</div>
</div>
</div>

6
apps/web/src/components/SideNavigation.tsx
View File

@@ -58,7 +58,7 @@ export default function SideNavigation({
<li key={item.name}>
<ReactiveButton
href={item.href}
current={pathname?.includes(item.href)}
current={pathname.includes(item.href)}
name={item.name}
json={item.icon}
/>
@@ -67,8 +67,8 @@ export default function SideNavigation({
</ul>
</div>
<UserMenu
email={user?.email ?? ""}
imageUrl={user?.image ?? undefined}
email={user.email ?? ""}
imageUrl={user.image ?? undefined}
isLoading={isLoading}
/>
</nav>

11
apps/web/src/components/UserMenu.tsx
View File

@@ -21,17 +21,20 @@ export default function UserMenu({
email,
isLoading,
}: UserMenuProps) {
const db = createClient();
const router = useRouter();
const { themePreference, switchTheme } = useTheme();
const handleLogout = async () => {
const db = createClient();
await db.auth.signOut();
router.push("/login");
};
const avatarUrl = imageUrl
? db.storage.from("avatars").getPublicUrl(imageUrl).data.publicUrl
: null;
return (
<Menu as="div" className="relative inline-block w-full text-left">
<div>
@@ -42,9 +45,9 @@ export default function UserMenu({
</div>
) : (
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
{imageUrl ? (
{avatarUrl ? (
<Image
src={imageUrl ?? ""}
src={avatarUrl}
className="h-8 w-8 rounded-full bg-gray-50"
width={30}
height={30}

3
apps/web/src/env.ts
View File

@@ -24,6 +24,7 @@ export const env = createEnv({
*/
client: {
NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME: z.string(),
NEXT_PUBLIC_SUPABASE_STORAGE_URL: z.string(),
},
/**
* Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
@@ -32,6 +33,8 @@ export const env = createEnv({
NODE_ENV: process.env.NODE_ENV,
NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME:
process.env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME,
NEXT_PUBLIC_SUPABASE_STORAGE_URL:
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL,
},
skipValidation:
!!process.env.CI || process.env.npm_lifecycle_event === "lint",

3
apps/web/src/views/auth/login/index.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from "react";
// import { useRouter } from "next/navigation";
import { Auth } from "~/components/AuthForm";
import { PageHead } from "~/components/PageHead";
@@ -19,7 +20,7 @@ export default function LoginPage() {
// .split("; ")
// .some((cookie) => cookie.includes("auth-token"));
// const { data } = api.auth.getUser.useQuery(undefined, {
// const { data } = api.user.getUser.useQuery(undefined, {
// enabled: authCookieExists ? true : false,
// });

4
apps/web/src/views/auth/signup/index.tsx
View File

@@ -1,7 +1,9 @@
import { useState } from "react";
// import { useRouter } from "next/navigation";
import { Auth } from "~/components/AuthForm";
import { PageHead } from "~/components/PageHead";
// import { api } from "~/utils/api";
export default function SignupPage() {
@@ -18,7 +20,7 @@ export default function SignupPage() {
// .split("; ")
// .some((cookie) => cookie.includes("auth-token"));
// const { data } = api.auth.getUser.useQuery(undefined, {
// const { data } = api.user.getUser.useQuery(undefined, {
// enabled: authCookieExists ? true : false,
// });

2
apps/web/src/views/board/index.tsx
View File

@@ -157,7 +157,7 @@ export default function BoardPage() {
type="text"
{...register("name")}
onBlur={handleSubmit(onSubmit)}
className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]"
className="block border-0 bg-transparent p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]"
/>
</form>
)}

2
apps/web/src/views/home/index.tsx
View File

@@ -21,7 +21,7 @@ export default function HomeView() {
? Cookies.get(env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME)
: null;
const { data } = api.auth.getUser.useQuery(undefined, {
const { data } = api.user.getUser.useQuery(undefined, {
enabled: !!token,
});

113
apps/web/src/views/settings/components/Avatar.tsx Normal file
View File

@@ -0,0 +1,113 @@
import Image from "next/image";
import { useState } from "react";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
import createClient from "~/utils/supabase/client";
export default function Avatar({
userId,
userImage,
}: {
userId: string | undefined;
userImage: string | null | undefined;
}) {
const supabase = createClient();
const utils = api.useUtils();
const { showPopup } = usePopup();
const [uploading, setUploading] = useState(false);
const updateUser = api.user.update.useMutation({
onSuccess: async () => {
try {
await utils.user.getUser.refetch();
} catch (e) {
console.error(e);
throw e;
}
},
onError: () => {
showPopup({
header: "Error updating profile image",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
const avatarUrl = userImage
? supabase.storage.from("avatars").getPublicUrl(userImage).data.publicUrl
: null;
const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
try {
setUploading(true);
if (!event.target.files || event.target.files.length === 0) {
throw new Error("You must select an image to upload.");
}
if (!userId) {
throw new Error("User ID is required.");
}
const file = event.target.files[0];
if (!file) {
throw new Error("No file selected.");
}
const fileExt = file.name.split(".").pop();
const fileName = `${userId}/avatar.${fileExt}`;
const filePath = `${fileName}`;
const { error: uploadError } = await supabase.storage
.from("avatars")
.upload(filePath, file, { upsert: true });
if (uploadError) {
throw uploadError;
}
updateUser.mutate({ image: filePath });
} catch (error) {
console.error(error);
} finally {
setUploading(false);
}
};
return (
<div>
<div className="relative">
<input
className="absolute z-10 h-16 w-16 cursor-pointer rounded-full opacity-0"
type="file"
id="single"
accept="image/*"
onChange={uploadAvatar}
disabled={uploading}
/>
{avatarUrl ? (
<Image
src={avatarUrl}
alt="Avatar"
width={64}
height={64}
className="rounded-full"
/>
) : (
<span className="inline-block h-16 w-16 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
<svg
className="h-full w-full text-dark-700"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</span>
)}
</div>
</div>
);
}

11
apps/web/src/views/settings/index.tsx
View File

@@ -6,6 +6,8 @@ import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { PageHead } from "~/components/PageHead";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
import Avatar from "./components/Avatar";
import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
@@ -16,6 +18,8 @@ export default function SettingsPage() {
const { modalContentType, openModal } = useModal();
const { workspace } = useWorkspace();
const { data } = api.user.getUser.useQuery();
const handleOpenBillingPortal = async () => {
try {
const response = await fetch("/api/stripe/create_billing_session", {
@@ -47,6 +51,13 @@ export default function SettingsPage() {
</h1>
</div>
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
Profile picture
</h2>
<Avatar userId={data?.id} userImage={data?.image} />
</div>
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
Workspace name