diff --git a/app/constants.ts b/app/constants.ts index c6b871bb7..5db21104d 100644 --- a/app/constants.ts +++ b/app/constants.ts @@ -1,3 +1,5 @@ +export const USER_BIO_MAX_LENGTH = 2000; + export const navItemsGrouped: { title: string; items: { diff --git a/app/db/models/users.ts b/app/db/models/users.ts index 86103551b..d91877d8a 100644 --- a/app/db/models/users.ts +++ b/app/db/models/users.ts @@ -48,11 +48,12 @@ export function upsert( const updateProfileStm = sql.prepare(` UPDATE "User" - SET "country" = $country + SET "country" = $country, + "bio" = $bio WHERE "id" = $id `); -export function updateProfile(params: Pick) { +export function updateProfile(params: Pick) { updateProfileStm.run(params); } diff --git a/app/routes/u.$identifier.tsx b/app/routes/u.$identifier.tsx index 730167b08..1cff848ff 100644 --- a/app/routes/u.$identifier.tsx +++ b/app/routes/u.$identifier.tsx @@ -22,6 +22,7 @@ export type UserPageLoaderData = Pick< | "youtubeId" | "twitch" | "twitter" + | "bio" > & { country?: { name: string; emoji: string; code: string } }; export const loader: LoaderFunction = ({ params }) => { @@ -41,6 +42,7 @@ export const loader: LoaderFunction = ({ params }) => { twitch: user.twitch, twitter: user.twitter, youtubeId: user.youtubeId, + bio: user.bio, country: countryObj && user.country ? { diff --git a/app/routes/u.$identifier/edit.tsx b/app/routes/u.$identifier/edit.tsx index 2f90072d2..c490ffb1b 100644 --- a/app/routes/u.$identifier/edit.tsx +++ b/app/routes/u.$identifier/edit.tsx @@ -1,9 +1,13 @@ import type { ActionFunction, LinksFunction } from "@remix-run/node"; import { Form, useMatches, useTransition } from "@remix-run/react"; +import clsx from "clsx"; import { countries } from "countries-list"; +import * as React from "react"; import { z } from "zod"; import { Button } from "~/components/Button"; +import { USER_BIO_MAX_LENGTH } from "~/constants"; import { db } from "~/db"; +import type { User } from "~/db/types"; import styles from "~/styles/u-edit.css"; import { parseRequestFormData, requireUser } from "~/utils/remix"; import { falsyToNull } from "~/utils/zod"; @@ -23,6 +27,7 @@ const userEditActionSchema = z.object({ ) .nullable() ), + bio: z.preprocess(falsyToNull, z.string().max(USER_BIO_MAX_LENGTH)), }); export const action: ActionFunction = async ({ request }) => { @@ -61,6 +66,7 @@ export default function UserEditPage() { ))} +