Favorite badge feature small tweaks

app/db/types.ts

@@ -29,7 +29,7 @@ export interface User {
   /** Used to overwrite normal patron giving process and force give the patron status till this date */
   patronTill: number | null;
   isVideoAdder: number;
-  favoriteBadgeId: number;
+  favoriteBadgeId: number | null;
 }
 
 /** User table after joined with PlusTier table */

app/routes/u.$identifier.tsx

@@ -93,7 +93,6 @@ export const loader = ({ params }: LoaderArgs) => {
     country: user.country,
     css: canAddCustomizedColorsToUserProfile(user) ? user.css : undefined,
     badges: db.badges.countsByUserId(user.id),
-    favoriteBadgeId: user.favoriteBadgeId,
     results: db.calendarEvents.findResultsByUserId(user.id),
     buildsCount: db.builds.countByUserId(user.id),
     vods: findVods({ userId: user.id }),

app/routes/u.$identifier/edit.tsx

@@ -25,7 +25,7 @@ import { db } from "~/db";
 import { type User } from "~/db/types";
 import { useTranslation } from "~/hooks/useTranslation";
 import { useUser } from "~/modules/auth";
-import { requireUserId } from "~/modules/auth/user.server";
+import { requireUser, requireUserId } from "~/modules/auth/user.server";
 import { i18next } from "~/modules/i18n";
 import { mainWeaponIds, type MainWeaponId } from "~/modules/in-game-lists";
 import { canAddCustomizedColorsToUserProfile } from "~/permissions";
@@ -38,6 +38,7 @@ import { FAQ_PAGE, isCustomUrl, userPage } from "~/utils/urls";
 import {
   actualNumber,
   falsyToNull,
+  id,
   jsonParseable,
   processMany,
   removeDuplicates,
@@ -124,17 +125,7 @@ const userEditActionSchema = z
     ),
     favoriteBadgeId: z.preprocess(
       processMany(actualNumber, undefinedToNull),
-      z
-        .number()
-        .refine((val) => {
-          // unable to hook here
-          // return parentRouteData.badges
-          //   .map((badge) => badge.id)
-          //   .concat(0)
-          //   .includes(val);
-          return val >= 0;
-        })
-        .default(0)
+      id.nullable()
     ),
   })
   .refine(
@@ -192,7 +183,7 @@ export const action: ActionFunction = async ({ request }) => {
 export const loader = async ({ request, params }: LoaderArgs) => {
   const locale = await i18next.getLocale(request);
 
-  const user = await requireUserId(request);
+  const user = await requireUser(request);
   const { identifier } = userParamsSchema.parse(params);
   const userToBeEdited = notFoundIfFalsy(db.users.findByIdentifier(identifier));
   if (user.id !== userToBeEdited.id) {
@@ -200,6 +191,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
   }
 
   return {
+    favoriteBadgeId: user.favoriteBadgeId,
     countries: Object.entries(countries)
       .map(([code, country]) => ({
         code,
@@ -470,6 +462,7 @@ function FavBadgeSelect({
 }: {
   parentRouteData: UserPageLoaderData;
 }) {
+  const data = useLoaderData<typeof loader>();
   const { t } = useTranslation(["user"]);
 
   // doesn't make sense to select favorite badge
@@ -478,7 +471,7 @@ function FavBadgeSelect({
 
   // user's current favorite badge is the initial value
   const initialBadge = parentRouteData.badges.find(
-    (badge) => badge.id === parentRouteData.favoriteBadgeId
+    (badge) => badge.id === data.favoriteBadgeId
   );
 
   return (
@@ -488,17 +481,17 @@ function FavBadgeSelect({
         className=""
         name="favoriteBadgeId"
         id="favoriteBadgeId"
-        defaultValue={initialBadge ? initialBadge.id : 0}
+        defaultValue={initialBadge?.id}
       >
-        <option key={0} value={0}>
-          {"-"}
-        </option>
         {parentRouteData.badges.map((badge) => (
           <option key={badge.id} value={badge.id}>
             {`${badge.displayName}`}
           </option>
         ))}
       </select>
+      <FormMessage type="info">
+        {t("user:forms.info.favoriteBadge")}
+      </FormMessage>
     </div>
   );
 }

migrations/023-add-user-fav-badge.js

@@ -1,5 +1,5 @@
 module.exports.up = function (db) {
   db.prepare(
-    /* sql */ `alter table "User" add "favoriteBadgeId" integer not null default 0`
+    /* sql */ `alter table "User" add "favoriteBadgeId" integer`
   ).run();
 };

public/locales/en/user.json

@@ -30,6 +30,7 @@
   "forms.errors.invalidCustomUrl.strangeCharacter": "Custom URL can't contain special characters",
   "forms.errors.invalidCustomUrl.duplicate": "Someone is already using this custom URL",
   "forms.errors.invalidSens": "Motion sens can't be set if R-stick sens isn't",
+  "forms.info.favoriteBadge": "Your favorite badge is shown as big by default on your profile.",
 
   "search.info": "Search for users by Discord, Splatoon 3 or Twitter name",
   "search.noResults": "No users found matching '{{query}}'"