feat: add pronouns input to edit form

packages/web/components/EditProfileForm.tsx

@@ -88,6 +88,7 @@ export type ProfileFieldProps = {
 interface InputData {
   availability_hours?: number;
   timezone?: string;
+  pronouns?: string;
 }
 
 export const ProfileField: React.FC<ProfileFieldProps> = ({
@@ -201,6 +202,9 @@ export const EditProfileForm: React.FC<ProfileEditorProps> = ({
   const [username, setUsername] = useState<string>(
     user?.player?.username || '',
   );
+  const [pronouns, setPronouns] = useState<string>(
+    user?.player?.pronouns || '',
+  );
 
   const [invalid, setInvalid] = useState(false);
   const [updateProfileRes, updateProfile] = useUpdateProfileMutation();
@@ -228,6 +232,9 @@ export const EditProfileForm: React.FC<ProfileEditorProps> = ({
     if (user.player?.timezone !== timeZone) {
       input.timezone = timeZone;
     }
+    if (user.player?.pronouns !== pronouns) {
+      input.pronouns = pronouns;
+    }
 
     const profile = await updateProfile({
       playerId: user.id,
@@ -279,19 +286,24 @@ export const EditProfileForm: React.FC<ProfileEditorProps> = ({
         <GridItem>
           <ProfileField
             title="username"
-            value={username || ''}
+            value={username}
             onChange={(e) => setUsername(e.target.value || '')}
           />
         </GridItem>
 
         {/* <GridItem>
           <ProfileField title="display name" value="User Supreme" />
-        </GridItem>
-
-        <GridItem colSpan={HALF}>
-          <ProfileField title="pronouns" value="They/Them" />
         </GridItem> */}
       </Grid>
+      <Grid templateColumns="repeat(3, 1fr)">
+        <GridItem>
+          <ProfileField
+            title="pronouns"
+            value={pronouns}
+            onChange={(e) => setPronouns(e.target.value || '')}
+          />
+        </GridItem>
+      </Grid>
       {/* <Grid templateColumns="repeat(2, 1fr)" gap={6}>
         <GridItem colSpan={HALF}>
           <CountrySelectDropdown country={COUNTRIES_OPTIONS[0]} />

packages/web/components/Player/Section/PlayerHero.tsx

@@ -46,6 +46,7 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
   const [offset, setOffset] = useState<string>('');
   const [availabilityHours, setAvailabilityHours] = useState<number>(0);
   const [playerName, setPlayerName] = useState<string>('');
+  const [pronouns, setPronouns] = useState<string>('');
 
   const { user } = useUser();
 
@@ -57,11 +58,9 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
       if (timeDisplay.timeZone) setTimeZone(timeDisplay.timeZone);
       if (timeDisplay.offset) setOffset(timeDisplay.offset);
 
-      const hours = person.availability_hours;
-      if (hours) setAvailabilityHours(hours);
-
-      const { username } = person;
-      if (username) setPlayerName(username);
+      setAvailabilityHours(person.availability_hours || 0);
+      setPronouns(person.pronouns || '');
+      setPlayerName(person.username);
     }
   }, [user, player, isOwnProfile]);
 
@@ -133,9 +132,11 @@ export const PlayerHero: React.FC<Props> = ({ player, isOwnProfile }) => {
           <PlayerContacts player={player} />
         </HStack>
 
-        <PlayerHeroTile title="Personal pronouns">
-          <PlayerPronouns player={player} />
-        </PlayerHeroTile>
+        {pronouns && (
+          <PlayerHeroTile title="Personal pronouns">
+            <PlayerPronouns pronouns={pronouns} />
+          </PlayerHeroTile>
+        )}
         {/* <SimpleGrid columns={2} gap={6} width="full">
           <PlayerHeroTile title="Display name">
             <Text>Vid</Text>

packages/web/components/Player/Section/PlayerPronouns.tsx

@@ -1,11 +1,10 @@
 import { MetaTag } from '@metafam/ds';
-import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
 
-type Props = { player: PlayerFragmentFragment };
+type Props = { pronouns: string };
 
-export const PlayerPronouns: React.FC<Props> = ({ player }) => (
+export const PlayerPronouns: React.FC<Props> = ({ pronouns }) => (
   <MetaTag size="md" fontWeight="normal" backgroundColor="gray.600">
-    {player.pronouns}
+    {pronouns}
   </MetaTag>
 );