Clean up code

web/src/api/rpc.ts

@@ -19,7 +19,8 @@ import type {
 	ClientWellKnown,
 	EventID,
 	EventRowID,
-	EventType, JSONValue,
+	EventType,
+	JSONValue,
 	LoginFlowsResponse,
 	LoginRequest,
 	Mentions,

web/src/api/types/mxtypes.ts

@@ -76,6 +76,21 @@ export interface UserProfile {
 	[custom: string]: unknown
 }
 
+export interface PronounSet {
+	subject?: string
+	object?: string
+	possessive_determiner?: string
+	possessive_pronoun?: string
+	reflexive?: string
+	summary: string
+	language: string
+}
+
+export interface ExtendedUserProfile extends UserProfile {
+	"us.cloke.msc4175.tz"?: string
+	"io.fsky.nyx.pronouns"?: PronounSet[]
+}
+
 export type Membership = "join" | "leave" | "ban" | "invite" | "knock"
 
 export interface MemberEventContent extends UserProfile {
@@ -294,18 +309,3 @@ export interface RespOpenIDToken {
 	matrix_server_name: string
 	token_type: "Bearer"
 }
-
-export interface PronounSet {
-	subject?: string
-	object?: string
-	possessive_determiner?: string
-	possessive_pronoun?: string
-	reflexive?: string
-	summary: string
-	language: string
-}
-
-export interface ExtendedProfileAttributes {
-	"us.cloke.msc4175.tz"?: string
-	"io.fsky.nyx.pronouns"?: PronounSet[]
-}

web/src/ui/rightpanel/UserExtendedProfile.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react"
 import Client from "@/api/client.ts"
-import { ExtendedProfileAttributes, PronounSet, UserProfile } from "@/api/types"
+import { ExtendedUserProfile, PronounSet } from "@/api/types"
-import { ensureArray } from "@/util/validation.ts"
+import { ensureArray, ensureString } from "@/util/validation.ts"
 
 interface ExtendedProfileProps {
-	profile: UserProfile & ExtendedProfileAttributes
+	profile: ExtendedUserProfile
 	client: Client
 	userID: string
 }
@@ -51,8 +51,7 @@ function SetTimezoneElement({ tz, client }: SetTimezoneProps) {
 	//  The defaulting to the current timezone causes `newTz !== tz` to never be true when the user has
 	//  no timezone set.
 
-	return (
+	return <>
-		<>
 		<input
 			list="timezones"
 			className="text-input"
@@ -60,28 +59,28 @@ function SetTimezoneElement({ tz, client }: SetTimezoneProps) {
 			onChange={(e) => setTz(e.currentTarget.value)}
 		/>
 		<datalist id="timezones">
-				{
+			{zones.map((zone) => <option key={zone} value={zone} />)}
-					zones.map((zone) => <option key={zone} value={zone} />)
-				}
 		</datalist>
 	</>
-	)
 }
 
 
 export default function UserExtendedProfile({ profile, client, userID }: ExtendedProfileProps) {
-	if (!profile) return null
+	if (!profile) {
+		return null
+	}
 
 	const extendedProfileKeys = ["us.cloke.msc4175.tz", "io.fsky.nyx.pronouns"]
-	const hasExtendedProfile = extendedProfileKeys.some((key) => key in profile)
+	const hasExtendedProfile = extendedProfileKeys.some((key) => profile[key])
-	if (!hasExtendedProfile && client.userID !== userID) return null
+	if (!hasExtendedProfile && client.userID !== userID) {
+		return null
+	}
 	// Explicitly only return something if the profile has the keys we're looking for.
 	// otherwise there's an ugly and pointless <hr/> for no real reason.
 
-	const pronouns: PronounSet[] = ensureArray(profile["io.fsky.nyx.pronouns"]) as PronounSet[]
+	const pronouns = ensureArray(profile["io.fsky.nyx.pronouns"]) as PronounSet[]
-	const userTimezone: string | undefined = profile["us.cloke.msc4175.tz"]
+	const userTimezone = ensureString(profile["us.cloke.msc4175.tz"])
-	return (
+	return <>
-		<>
 		<hr/>
 		<div className="extended-profile">
 			{userTimezone && <>
@@ -100,5 +99,4 @@ export default function UserExtendedProfile({ profile, client, userID }: Extende
 			</>}
 		</div>
 	</>
-	)
 }